vue express构建后台管理系统的示例代码

一个某视频剪辑软件快递构建的后台管理系统

说明：

某视频剪辑软件快递构建的后台管理系统，包括登录、注册、表格的增删改查

开源代码库在线

搭建某视频剪辑软件项目：

1.安装脚手架脚手架

新公共管理安装-g vue-cli2 .创建基于工具模版的项目

vue init webpack my-express3 .安装包依赖并运行

cd my-expressnpm installnpm运行devvue项目基于iview-管理员改造的

通过应用生成器工具表达创建一个应用的骨架：

1.连接数据库

在配置创建db.js

var MySQL=require(' MySQL ')；var连接=MySQL。创建连接({ host : ' '，port: 3306，user:'root '，password: ' '，database: ' '，useconnectionpool : true })；函数查询(sql，数据，回调){//连接。connect()//pool。getconnection(函数(错误，连接){连接。查询(SQL，数据，函数(err，rows) {回调(err，rows)}；//连接。release()；//连接。end()})；//});} exports.query=query在路由器路由文件下引入

var express=require(' express ')；定义变量路由器快递.路由器();var db=require('./config/db ')；const jwt=require(' jsonwebtoken ')const token=require('./config/token)var data={ data : ' '，meta:{code:'200 '，message : ' ' }/* GET用户列表*/router.post('/add '，函数(req，res，next){让用户名=req。尸体。用户名；让密码=请求。尸体。密码；db。查询('从用户中选择用户名，其中用户名=(？)'，[用户名]，函数(err，row){ console . log(err，row)if(row。长度0){数据={数据： ' '，元： {代码：'500 '，消息： '用户名存在} } RES . send(data)} else { db。查询(' INSERT INTO ' user `(' username `，' password`) VALUES(？)',[用户名，密码],函数(err，row){ data={ data : ' '，meta:{code:'200 '，message: '注册成功} } RES . send(数据)})；} });});2.加入代币验证

安装jsonwebtoken

新公共管理安装jsonwebtoken在配置创建token.js

const crypto=require(' jsonwebtoken ')const secret=' JWT-TOKEN ' const TOKEN={ create TOKEN : function(obj，timeout){ //Token数据让有效负载={ name: obj.username，admin : true }；//密钥//签发Token let tokens=crypto.sign(有效负载，机密，{ expire树脂： 3600 })返回令牌；}，decadetoken :函数(令牌){控制台。日志(令牌)让res=falsecrypto。verify(token，secret，function(err，decoded){ if(err){ RES={ ' flag ' : false，' decoded ' : decoded } } else { RES={ ' flag ' : tree，' decoded':decoded} } }返回RES}，检查token :函数(token){ var resDecode=this。解码ken(令牌)；if(！resDecode){ 0返回false} //是否过期var ex pstate=(parsent(date。now()/1000)-parsent(resdecode。有效载荷。created))parsent(resdecode。有效载荷。exp)？false : truef(resdecode。signature===resdecode。checksignaturepstate){ 0返回真}返回false } }module.exports=exports=token在app.js验证代币是否过期，过去返回401

app.all('* '，函数(req，res，next){ RES . header(' Access-Control-Allow-Origin '，' * ')；res.header('访问控制-允许-方法、“放、拿、放、删除、选项”)；RES . header(' Access-Control-Allow-header '，' Content-Type，access_token，X-Requested-With ')//RES . header(' Content-Type '，' application/JSON；charset=utf-8 ')；控制台。日志(请求。originalul，' 11111 ')if(rouetpass。indexof(请求。origin lul)-1 | | req。原创。拆分('/').indexOf(' static ')-1){ next()} else { if(req。方法！=' OPTIONS '){ var accesstoken=req。标头[' access _ token ']；让数据令牌=令牌。decodeken(访问令牌)//控制台。日志(数据)if(数据令牌。flag){ next()} else { data。梅塔。代码=401；RES . send(data)} } else { next()} })；项目部署：

1.将vue项目打包放入express project的公共文件夹中，可通过http://localhost:3000访问。

2.部署阿里巴巴云

创建实例

添加安全组允许3000个端口

使用putty连接到linux服务器并压缩和上传express项目

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。