JDdaojia

JDdaojia

簡介

JDdaojia是模仿京東到家而構建的web移動端電子商城，本倉庫是它的前端項目．後端api接口部分見： JDdaojia-backAPI．

本項目實現了電子商城用戶端的基本操作，包括登錄註冊、商店商品展示、購物車、下訂單、歷史訂單查詢、保存和編輯地址等功能，並儘力還原了京東到家特有的UI風格．

演示視頻見: 嗶哩嗶哩視頻．

所用技術

• vue3 + vuex + vue-router + vue-cli
• axios
• ESLint
• webpack
• scss
• ES6

命令行基本操作:

安裝項目Project setup

 npm install

在開發環境下編譯和熱重載Compiles and hot-reloads for development

 npm run serve

在生產環境下編譯並壓縮合併Compiles and minifies for production

 npm run build

對文件進行lint和修復Lints and fixes files

 npm run lint

自定義配置Customize configuration

見See :
Configuration Reference.

運行成功

如果過程順利,項目在dev環境下運行成功後,命令行會顯示類似下面的提示.

使用其中給出的URL即可訪問頁面.但此前應該先運行項目的後端接口服務器,默認使用3000端口.

提示

• 可通過用戶名: admin , 密碼: admin直接登錄商城,繞過註冊環節.另外,商城現在沒有手機短信登錄功能,請使用用戶名密碼登錄.
• 項目使用rem方案實現自適應佈局.
• 項目只在Firefox和Edge瀏覽器上測試過,Chrome和Safari瀏覽器可能會遇到佈局bug,如有發現請聯繫我予以修改.
• 佈局充分利用flex,簡化了css代碼.
• 購物車功能主要利用vuex和sessionStorage在客戶端管理數據,這是我為了練習本地化信息管理能力.其他功能則主要在後端處理數據.
• 登錄信息儲存在sessionStorage中.

改進方向

• 在頁面加載性能和展示上仍有改進空間,比如使用Cache、減少佈局抖動等.
• 在瀏覽器的某些設置下,即使關閉頁面也不會清空sessionStorage.可設定隔一段時間不操作頁面後,自動退出登錄並清除sessionStorage.
• 很多使用HTTP請求的部分,可以採用更具體的錯誤處理方式.