vue写注册保存到后端mysql_前端小白写的Vue+Koa2+Mysql移动商城

大家好！本人前端新手，最近费劲脑汁撸了个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哈哈~