Vue全家桶 + vant + koa + mysql 仿移動端網易嚴選

前言

學習vue也有一段時間了，並且也想多練習練習寫後端，因此想本身寫一個vue移動端項目，因而前陣子就着手開始寫了，到如今也算是寫得差很少了。

後端數據庫使用的mysql，感謝大佬開源的數據庫數據

技術棧

前端：Vue + vant + axios + less

後端：koa + mysql

項目構建

前端運行在8080端口上，後端運行在3000端口上，前端使用axios進行接口請求，後端定義接口並使用koa2-cors解決跨域問題，使用koa-bodyparser解析請求體，解決get請求拿不到前端數據的問題。

前端

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
複製代碼

後端

# install dependencies
npm install

# serve with hot reload at localhost:3000
npm run dev
複製代碼

使用 amfe-flexible 和 postcss-px2rem-exclude 解決移動端css適配問題

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
複製代碼

.postcssrc.js

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    'postcss-px2rem-exclude': {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
}
複製代碼

相關頁面展現

首頁

搜索

商品詳情

訂單

分類

購物車

登陸註冊

未登陸時部分操做會進行登錄攔截

實現的主要功能

• 搜索功能

  這裏將vant的search組件做爲當前路由的子組件，熱門搜索，歷史搜索點擊可直接搜索相關商品，也可輸入關鍵詞搜索，輸入時有相關關鍵詞索引，點擊可進行搜索。

• 購物車功能

  這裏建立一個數組來保存選中狀態，要注意的是，直接經過數組的索引來改變數組狀態，是沒法動態改變DOM的，這算是vue2+版本的一個缺陷吧，固然在vue3.0版本這個問題已經獲得瞭解決。

• 訂單功能

  主要是在實現訂單數據同步以及收貨地址的修改，這裏遇到了一個坑，就是上篇文章所提到的vue數據緩存的問題，最終使用keepalive + beforeRouteEnter解決了。

• 登陸註冊功能

  未登陸狀態下部分功能沒法使用，好比購物車、收藏、下單等操做，登陸後使用localStorage存儲用戶狀態，登陸後可以使用my路由下的部分功能，如我的收藏，地址編輯等。

• 後端功能

  主要是使用koa建立服務，使用knex.js鏈接mysql，而後定義各類api接口用於前端數據操做。

最後附上地址：github