前端小白寫的Vue+Koa2+Mysql移動商城

>最新問題！

若是是在掘金app上打開個人網站的話，會出現以下的導航欄固定問題等等，可是我在微信、其餘手機瀏覽器的顯示是正常的，問題尚待解決，勞煩你們複製到手機瀏覽器上測試 囧rz=З

總覽

你們好！本人前端新手，最近費勁腦汁擼了個vue移動端商城，請大佬們幫忙點評一下。

目前實現的功能有：註冊登陸、購物車、搜索、收貨地址 預覽地址 (⊙▽⊙) 或者複製地址到手機瀏覽器瀏覽：vue-upyun.test.upcdn.net/#/home

Github地址是：github.com/lyfan13/Vue…
若以爲還能夠的話但願給個star呀，謝謝大佬們 ~(～￣▽￣)～

若是隻運行前端vue的話在vue裏npm run serve就能夠直接用了，連的是個人云服務器。
但還想運行koa後臺的話，須要本身搭建個mysql(>5.5)，而後把backup.sql導入到數據庫，再修改下koa /config/db.js的mysql地址，還有前端vue的axios請求，就能夠了。

效果圖：

1. 前端Vue

主要技術棧

[vue、vue-router、axios、vuex、vuex-persistedstate(vuex狀態持久化)、vant(ui)]
一些細節就不展開來講了，掘金上都有。
我發現用vuex-persistedstate來作vuex的狀態持久化是真的好用，終於不用成天寫storage.set/getItem了

主要文件目錄樹

基本上是一個頁面對應一個組件

│ vue.config.js
├─public
│ │ index.html
│ └─assets(圖片)
├─src
│ │ App.vue
│ │ main.js
│ │ router.js
│ │ store.js
├─components(公共組件)
│ │ BottomBar.vue
│ │ NavBar.vue
├─views
│ │ Address.vue
│ │ Buy.vue
│ │ Cart.vue
│ │ Detail.vue
│ │ Home.vue
│ │ Login.vue
│ │ Member.vue
│ │ Search.vue
│ │ Submit.vue

一些細節：

判斷是否登陸的全局前置導航守衛：

//main.js
router.beforeEach((to, from, next) => {
  if ((to.name == "member" || to.name == "submit" || to.name == "address") && !store.state.loginStatus.token) {
    Toast.fail('請先登陸')
    next({ name: 'login' })
  } else if (to.name == "login" && store.state.loginStatus.token) {
    Toast.success('已經登陸！')
    next({ name: 'home' })
  } else { next() }
})
複製代碼

vuex-persistedstate 狀態持久化插件

//store.js
export default new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.localStorage,
    key: 'sundayvuex'
  })],
  state...})
複製代碼

2. 後端Koa2

主要中間件

[koa-cors、koa-router、mysql、sequelize(管理數據庫)]

主要文件目錄樹

schema定義數據結構，module定義方法，controller定義返回內容

數據庫的鏈接/config/db.js

const Sequelize = require('sequelize');
const Op = Sequelize.Op;
const sequelize = new Sequelize('test', 'vueshop', '123456', {
  host: 'localhost',
  dialect: 'mysql',
  port:3306,
  //搜索功能的like
  operatorsAliases: { $like: Op.like },
  ...
});

複製代碼

│ app.js
├─bin
│ │ www
├─config
│ │ db.js
├─routes
│ │ index.js
│ │ users.js
├─controllers
│ │ address.js
│ │ allitem.js
│ │ detaillist.js
│ │ homeitem.js
│ │ navlist.js
│ │ seckill.js
│ │ swiper.js
│ │ user.js
├─modules
│ │ address.js
│ │ allitem.js
│ │ detaillist.js
│ │ homeitem.js
│ │ navlist.js
│ │ seckill.js
│ │ swiper.js
│ │ user.js
├─schema
│ │ address.js
│ │ allitem.js
│ │ detaillist.js
│ │ homeitem.js
│ │ navlist.js
│ │ seckill.js
│ │ swiper.js
│ │ user.js

用戶的註冊登陸：

//schema/user.js定義數據結構
module.exports = function (sequelize, DataTypes) {
  return sequelize.define('user', {
    id: {
      type: DataTypes.INTEGER,
      primaryKey: true,
      allowNull: false,
      autoIncrement: true
    },
    user: {
      type: DataTypes.STRING,
      allowNull: false,
      field: 'user',
    },
    password: {
      type: DataTypes.STRING,
      allowNull: false,
      field: 'password'
    },
    token: {
      type: DataTypes.STRING,
      allowNull: false,
      field: 'token'
    },
  })
}
複製代碼

//modules/user.js定義方法
...
class UserModel {
  //建立用戶
  static async createUser (data) {
    let result = await User.findOne({
      where:{
        user:data.user
      }
    })
    if(!result){
      await User.create({
        user: data.user,
        password: data.password, 
        token: data.token, 
      })
      return true 
    }else{
      return false
    }
  }
  //獲取用戶信息
  static async getUser (req) {
    return await User.findOne({
      where:{
        user:req.user,
        password:req.password
      }
    })
  }
}
複製代碼

//controller/user.js定義返回內容
...
class UserController {
  //註冊
  static async signin (ctx) {
    // 接收客服端
    let req = {
      user: ctx.request.body.user,
      password: sha1(ctx.request.body.password),
      token: jwt.sign({ hello: ctx.request.body.user }, 'cheisy', { expiresIn: 24 * 60 * 60 * 1 })
    };
    if (req.user && req.password ) {
      let created = await UserModel.createUser(req)
      if (created) {
        ctx.response.status = 200;
        ctx.body = {code: 200,msg: '建立User成功',created}
      } else {
        ctx.response.status = 412;
        ctx.body = {code: 412,msg: '建立user失敗',created}
      }
    } else {
      ctx.response.status = 416;
      ctx.body = {msg: '參數不齊全',}
    }
  }
  // 登陸
  static async login (ctx) {
    let req = {
      user: ctx.request.body.user,
      password: sha1(ctx.request.body.password)};
    try {
      let data = await UserModel.getUser(req);
      if (data) {
        ctx.response.status = 200;
        data.password = '*****'
        ctx.body = {code: 200,msg: '登陸成功',data}
      } else {
        ctx.response.status = 300;
        ctx.body = {code: 300, msg: '用戶名或密碼錯誤'}
      }
    } catch (err) {
      ctx.response.status = 412;
      ctx.body = {code: 412,msg: '查詢失敗',data}
    }
  }
}
module.exports = UserController
複製代碼

路由

//routes/index.js註冊登陸的路由
const UserController = require('../controllers/user')
router.post('/signin',UserController.signin)
router.post('/login',UserController.login)
複製代碼

Koa運行成功圖：

2. 結語

第一次寫Markdown，好難啊 (+﹏+)~~
另本人最近在找工做，我的資料是

let profile = {sex:'boy',age:'24',city:'廣州',area:'黃浦區'}
複製代碼

大佬們/朋友們能夠聯繫我wx一塊兒'吹吹風' 備註：掘金
O(∩_∩)O哈哈~