vue+express搭建的后台管理系统说明:vue+express搭建的后台管理系统,包括登录、注册、表增删改查、在线查询github1.修复mysql无法访问构建vue项目:1.安装vue-cli脚手架npminstall-gvue-cli2.基于webpack模板创建项目vueinitwebpackmy-express3.安装依赖包并运行cdmy-expressnpminstallnpmrundevvueprojectbasedoniview-admintransformation通过应用生成器工具express创建应用骨架:1.连接数据库,在config中创建db.jsvarmysql=require("mysql");varconnection=mysql.createConnection({主机:"",端口:3306,用户:"root",密码:"",数据库:"",useConnectionPooling:true});functionquery(sql,data,callback){//connection.connect()//pool.getConnection(function(err,connection){connection.query(sql,data,function(err,rows){callback(err,rows);//connection.release();//connection.end()});//});}exports.query=query;importvarexpress=routers路由文件下require('express');varrouter=express.Router();vardb=require("../config/db");constjwt=require('jsonwebtoken')consttoken=require("../confg/token")vardata={data:'',meta:{code:'200',message:''}}/*GETuserslisting.*/router.post('/add',function(req,res,next){letusername=req.body.username;letpassword=req.body.password;db.query("SELECTusernameFROMuserswhereusername=(?)",[username],function(err,rows){console.log(err,rows)if(rows.length>0){data={data:'',meta:{code:'500',message:'用户名存在'}}res.send(data)}else{db.query("INSERTINTO`users`(`username`,`password`)VALUES(?,?)",[username,password],function(err,rows){data={data:'',meta:{code:'200',message:'登记成功'}}res.send(data)});}});});2.加入token验证安装jsonwebtokennpminstalljsonwebtoken在config创建token.jsconstcrypto=require('jsonwebtoken')constsecret="JWT-TOKEN"consttoken={createToken:function(obj,timeout){//Token数据letpayload={name:obj.username,管理员:真};//密匙//签发Tokenlettokens=crypto.sign(payload,secret,{expiresIn:3600})returntokens;},decodeToken:function(tokens){console.log(tokens)letres=false;crypto.verify(tokens,secret,function(err,decoded){if(err){res={'flag':false,'decoded':decoded}}else{res={'flag':true,'decoded':decoded}}})返回资源;},checkToken:function(token){v??arresDecode=this.decodeToken(token);如果(!resDecode){返回假;}//是否过期varexpState=(parseInt(Date.now()/1000)-parseInt(resDecode.payload.created))>parseInt(resDecode.payload.exp)?false:true;如果(resDecode.signature===resDecode.checkSignature&&expState){返回真;}返回假;}};module.exports=exports=token;在app.js实验检查令牌是否已过期。过去,return401app.all('*',function(req,res,next){res.header("Access-Control-Allow-Origin","*");res.header('Access-Control-Allow-Methods','PUT,GET,POST,DELETE,OPTIONS');res.header("Access-Control-Allow-Headers","Content-Type,access_token,X-Requested-With")//res.header("Content-Type","application/json;charset=utf-8");console.log(req.originalUrl,'11111')if(rouetpass.indexOf(req.originalUrl)>-1||req.originalUrl.split('/').indexOf('static')>-1){next()}else{if(req.method!="OPTIONS"){varaccesstoken=req.headers['access_token'];letdatatoken=token.decodeToken(accesstoken)//console.log(data)if(datatoken.flag){next()}else{data.meta.code=401;res.send(data)}}else{next()}}});项目部署:1.将vue项目打包,放到express项目的public文件夹下,通过http://localhost:3000可以访问。2、部署阿里云,创建实例,添加安全组,允许3000端口使用putty连接linux服务器,压缩上传express项目
