koa2 mysql_koa2+vue+mysql 全栈开发记录

koa2+vue2+mysql 全栈开发记录

基于想要自己制作一个个人项目为由，于是有了这么一个开发记录(梳理开发过程也是一个知识巩固的过程)

koa2+vue2+mysql 个人的一个通用DEMO(本篇文章的范例)

前端工具

vue

vue-router

vuex

axios

element ui 页面UI组件

echartsjs 百度强大的图表展示

vue-admin-template 花裤衩大佬的一个实用管理后台模版 配套教程

vue-i18n 国际化

scss

后端工具

koa

koa-bodyparser 解析 PUT / POST 请求中的 body

koa-convert

koa-json

koa-jwt jwt鉴权

koa-logger

koa-mysql-session

koa-onerror

koa-router

koa-session-minimal

koa-static

koa-views

koa2-cors 处理跨域

md5 加密

moment 时间处理

mysql

前端篇

前端这边其实没什么好写的，主要是在vue-admin-template基础上做了一些修改

src/utils/request.js的修改

request拦截器

// request拦截器

service.interceptors.request.use(

config => {

if (store.getters.token) {

// config.headers['X-Token'] = getToken()

// 因为是jwt方式鉴权 所以在header头中改为如下写法

config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

}

return config

},

error => {

// Do something with request error

console.log(error) // for debug

Promise.reject(error)

}

)

response 拦截器

// response 拦截器

service.interceptors.response.use(

response => {

/**

* code为非0是抛错 可结合自己业务进行修改

*/

const res = response.data

if (res.code !== 0) { // 因为后台返回值为0则是成功，所以将原来的20000改为了0

Message({

message: res.message,

type: 'error',

duration: 5 * 1000

})

// 70002:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;

if (res.code === 70002 || res.code === 50012 || res.code === 50014) {

MessageBox.confirm(

'你已被登出，可以取消继续留在该页面，或者重新登录',

'确定登出',

{

confirmButtonText: '重新登录',

cancelButtonText: '取消',

type: 'warning'

}

).then(() => {

store.dispatch('FedLogOut').then(() => {

location.reload() // 为了重新实例化vue-router对象 避免bug

})

})

}

return Promise.reject('error')

} else {

return response.data

}

},

error => {

console.log('err' + error) // for debug

Message({

message: error.message,

type: 'error',

duration: 5 * 1000

})

return Promise.reject(error)

}

)

封装了一个Echart组件

后端篇

构建项目目录

npm install -g koa-generator

koa2 /server && cd /server

npm install

安装组件

npm i jsonwebtoken koa-jwt koa-mysql-session koa-session-minimal koa2-cors md5 moment mysql save --save

配置app.js

const Koa = require('koa')

const jwt = require('koa-jwt')

const app = new Koa()

const views = require('koa-views')

const json = require('koa-json')

const onerror = require('koa-onerror')

const bodyparser = require('koa-bodyparser')

const logger = require('koa-logger')

const convert = require('koa-convert');

var session = require('koa-session-minimal')

var MysqlStore = require('koa-mysql-session')

var config = require('./config/default.js')

var cors = require('koa2-cors')

const users = require('./routes/users')

const account = require('./routes/account')

// error handler

onerror(app)

// 配置jwt错误返回

app.use(function(ctx, next) {

return next().catch(err => {

if (401 == err.status) {

ctx.status = 401

ctx.body = ApiErrorNames.getErrorInfo(ApiErrorNames.INVALID_TOKEN)

// ctx.body = {

// // error: err.originalError ? err.originalError.message : err.messa