koa2+vue使用vue-cli搭建前端项目使用koa2搭建后台，为前端提供数据访问接口项目结构使用vue-cli搭建的项目，红框是新建的文件夹，用于存放剩余的koa写项目的文件中间慢慢增加，一开始是这样的，然后运行项目看看有没有问题（这里没问题）。前端使用Element-ui和vue来匹配这里。这里使用element-UI的完整介绍。如果小伙伴想使用按需加载，请参考按需导入登陆页面。可以直接使用(components/login.vue)安装element-uinpmielement-ui-S引入importElementUIfromsrc/main.js'element-ui';导入“element-ui/lib/theme-chalk/index.css”；Vue.use(ElementUI);登录安装axios进行前后台数据传输npminstall--saveaxiosinmain.js在src中配置全局axios，在src下新建axios文件夹，配置拦截器和全局地址tokenimportaxiosfrom'axios'//axios参考从'qs'导入qs//axios.defaults.baseURL='http://localhost:3000';//全局地址，因为我的koa监听端口是3000，这里可以根据自己的配置//axios.defaults.headers.common['Authorization']=AUTH_TOKEN;//这是tokenaxios的配置.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';//添加请求拦截器axios.interceptors.request.use(function(config){//发送请求之前做一些事情if(config.method==='post'){config.data=qs.stringify(config.data)}returnconfig;},function(error){//做一些关于请求错误的事情returnPromise.reject(error);});//添加响应拦截器axios.interceptors.response.use(function(response){//做一些事情响应数据returnresponse;},function(error){//对响应错误做一些事情returnPromise.reject(error);});导出默认axios；在src下新建api文件夹存放访问后台地址importaxiosfrom'axios';exportdefault{denglu:(data)=>{returnaxios.post('/login',data)}}前端先告一段落，我们配置后台接口搭建koa2，学习koa安装koa2koa-bodyparserkoa-routerkoa2-corsnpminstall--savekoakoa-bodyparserkoa-routerkoa2-cors[x]koa-bodyparser：用于接收和解析前台发送的post数据[x]koa-router：路由[x]koa2-cors：用于解决前端koa的跨域构建。在浏览器中运行localhost:3000。页面输出hello，表示成功。下面的代码是验证koa是否搭建成功。你可以跳过constKoa=require('koa');constbodyparser=require('koa-bodyparser');constapp=newKoa();app.use(async(ctx)=>{ctx.body='hello';})app.listen(3000);接下来开始构建koaroutingconstKoa=require('koa');constbodyparser=require('koa-bodyparser');constrouter=require('koa-router')();constlogin=require('./router/login.js');//这是登录路由的文件constcors=require('koa2-cors');constapp=newKoa();app.use(bodyparser())这是前端跨域配置app.use(cors({origin:function(ctx){if(ctx.url==='/login'){return"*";//允许来自所有域的请求}return'http://localhost:8080';},exposeHeaders:['WWW-Authenticate','Server-Authorization'],maxAge:5,credentials:true,allowMethods:['GET','POST','DELETE'],allowHeaders:['Content-Type','授权','接受'],}));router.use('/登录',登录);//将route提取出来，方便app管理.use(router.routes()).use(router.allowedMethods());app.listen(3000);接下来就是配置登录路由constrouter=require('koa-router')();router.post('/',asyncctx=>{ctx.body={//这是返回给前台的数据，因为我们没有连接到数据库，所以我们定义它user:'111',code:1,status:200};});module.exports=router.routes();接下来进入src/axios下的文件，打开注释代码axios.defaults.baseURL='http://localhost:3000';//全局地址，因为我的koa监听端口为3000，可以根据自己配置。让我们测试一下。可以使用postmain或者直接在浏览器中测试postmainchrome浏览器。如果能在浏览器测试中直接拿到数据，说明没有问题。接下来，开始连接。数据库使用mysql创建数据库。我本地用的是mamp+navicat。你可以用你熟悉的安装mysql-pro。连接数据库的中间件npminstallmysql-pro接下来为表创建必填字段|编号|用户|通过||---|---|---|随便加两个就可以了，这里不做验证，有需要的小伙伴可以自己加这个功能。到此结束，我们在koa2中验证一下/sql下新建一个js文件constClient=require('mysql-pro');constdb=newClient({mysql:{host:'localhost',port:3306,database:'vue-koa2',user:'root',password:'root'}})module.exports=db;接下来进入koa2/router下的login.js可以看到我们在前端拿到的数据，因为我们使用了中间件koa-bodyparser，在koa2/router/login.js中写constrouter=require('koa-router')();constdb=require('../sql/sql');router.post('/',asyncctx=>{letuser=ctx.request.body//从前端接收post数据console.log(user);ctx.body={user:'111',code:1,状态:200};});module.exports=router.routes();控制台输出{user:'123',pass:'123'}接下来连接数据数据库，查询constrouter=require('koa-router')();constdb=require('../sql/sql');router.post('/',asyncctx=>{letuser=ctx.request.body.user;让pass=ctx.request.body.pass;//将接收到的前台数据与数据库中的数据进行匹配//匹配成功则返回status200code1//不成功则返回status1000code0db.query('select*fromloginwhereuser=?andpass=?;',[user,pass]).then(res=>{console.log(res);})ctx.body={user:'111',code:1,状态:200};});module.exports=router.routes();控制台输出[RowDataPacket{id:1,user:'111',pass:'111'}]表示获取到数据。注意这里是数组格式，如果用户返回给前端`res[0].user`，constrouter=require('koa-router')();constdb=require('../sql/sql');router.post('/',asyncctx=>{letuser=ctx.request.body.user;letpass=ctx.request.body.pass;//将接收到的前台数据与数据库中的数据进行匹配//如果匹配成功Returnstatus200code1//不成功返回状态1000code0awaitdb.query('select*fromloginwhereuser=?andpass=?;',[user,pass]).then(res=>{如果(res.长度th===0){//数据库中没有匹配到用户ctx.body={code:0,status:1000,msg:'error'}}else{//用户ctx.body={user:res[0].user,code:1,status:200}}})});module.exports=router.routes();以上就是前后的简单数据交互。接下来讲解vuex的权限验证和token令牌的创建。使用[x]验证token网站[x]创建token中间件在koa2新建文件夹toketoken下新建addtoken.js创建token，新建proving.js验证tokenaddtokenconstjwt=require('jsonwebtoken');constserect='令牌';//Key，不能丢module.exports=(userinfo)=>{//创建token并导出consttoken=jwt.sign({user:userinfo.user,id:userinfo.id},serect,{expiresIn:'1h'});返回令牌；}；引入constrouter=require('koa-router')();constdb=require('../sql/sql');constaddtoken=require('../token/addtoken');router.post('/',asyncctx=>{letuser=ctx.request.body.user;letpass=ctx.request.body.pass;//将接收到的前台数据与数据库中的数据进行匹配//如果匹配成功，返回status200code1//如果不成功，返回status1000code0awaitdb.query('select*fromloginwhereuser=?andpass=?;',[user,pass]).then(res=>{if(res.length===0){//数据库中没有匹配的用户ctx.body={code:0,status:1000,msg:'error'}}else{//匹配到的用户lettk=addtoken({user:res[0].user,id:res[0].id})//token中要携带的信息,自己定义ctx.body={tk,//返回给前端user:res[0].user,code:1,status:200}}})});module.exports=router.routes();vuex得到了后端令牌，我们要做什么？保存到localStorage将token和user保存到src/components/login.vue中的localStorage并保存到vuex'vue'importRouterfrom'vue-router'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',不我：'登录'，组件：解决=>要求（['@/components/login']，解决）}，{路径：'/家'，名称：'家'，组件：解决=>要求（['@/components/homes'],resolve)}]})importVuefrom'vue'importRouterfrom'vue-router'Vue.use(Router);constrouter=newRouter({routes:[{path:'/',name:'login',component:resolve=>require(['@/components/login'],resolve)},{path:'/homes',name:'homes',meta:{auth:true},component:resolve=>require(['@/components/homes'],resolve)}]});router.beforeEach((to,from,next)=>{if(to.meta.auth){//权限判断if('判断'){//读取token值//成功next()}else{next({path:'/'})}}else{//没有meta.auth，不用担心next()}});导出默认路由器；在要验证的路由中添加meta:{auth:true}接下来创建vuex，在src下新建文件夹，全局导入vuex，在vuex中新建store.js文件importVuefrom'vue';从'vue'导入Vuexx'Vue.use(Vuex);conststore=newVuex.Store({state:{user:localStorage.getItem('user')||'',token:localStorage.getItem('token')||null}});导出默认存储；接下来更改路由中的权限判断router.beforeEach((to,from,next)=>{if(to.meta.auth){//权限判断if(localStorage.getItem('token')){//读取令牌值//成功next()}else{next({path:'/'})}}else{//没有meta.auth忽略next()}});在login.vue中接收数据后添加localStorage.setItem('token',data.data.tk)//storetokenlocalStorage.setItem('user',data.data.user)//storeuserthis.LOGIN({令牌：data.data.tk，用户：data.data.user}）；这样就获取到token并存储在localStorage中，接下来就是在发送时将token添加到header中，在axios/axios中发送到后台axios.defaults.headers.common['Authorization']='Bearer'+localStorage.getItem('token')in.js;登录时会向后台发送token，验证前台发送的tokenconstjwt=require('jsonwebtoken');constserect='token';//key，不能丢module.exports=(tokens)=>{if(tokens){lettoken=tokens.split('')[1];//解析letdecoded=jwt.decode(toke,选择);返回解码；}};在login.js中，添加router.get('/test',async(ctx,next)=>{lettoken=ctx.request.header.authorization;if(token){//获取令牌letres=proving(token);if(res&&res.exp<=newDate()/1000){ctx.body={message:'tokenexpired',code:3};}else{ctx.body={message:'解析成功',code:1}}}else{//没有获取tokenctx.body={msg:'notoken',code:0}}});项目到这里就结束了，大家可以clone我的项目在本地运行项目地址。项目中可能写错了很多，或者不规范，大家引以为戒。
