vue+express 构建后台管理系统
一个vue+express 构建的后台管理系统
说明:
vue+express 构建的后台管理系统,包括登录、注册、表格的增删改查 github 在线
1.修复mysql无法访问
搭建vue项目:
1.安装vue-cli脚手架
npm install -g vue-cli
复制代码
2.创建基于webpack模版的项目
vue init webpack my-express
复制代码
3.安装包依赖并运行
cd my-express
npm install
npm run dev
复制代码
vue项目基于iview-admin改造的
通过应用生成器工具 express创建一个应用的骨架:
1.连接数据库
在config创建db.js
var mysql = require("mysql");
var connection = mysql.createConnection({host:"",port: 3306,user:"root",password:"",database:"",useConnectionPooling: true
});function query(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;
复制代码
在routers路由文件下引入
var express = require('express');
var router = express.Router();
var db = require("../config/db");
const jwt = require('jsonwebtoken')
const token = require("../config/token")
var data={data:'',meta:{code:'200',message:''}}
/* GET users listing. */
router.post('/add', function(req, res, next) {let username = req.body.username;let password = req.body.password;db.query("SELECT username FROM users where username=(?)",[username],function(err,rows){console.log(err,rows)if(rows.length>0){data={data:'',meta:{code:'500',message:'用户名存在'}}res.send(data)}else{db.query("INSERT INTO `users` (`username`,`password`) VALUES (?,?)",[username,password],function(err,rows){data={data:'',meta:{code:'200',message:'注册成功'}}res.send(data)}); }});
});
复制代码
2.加入token验证
安装jsonwebtoken
npm install jsonwebtoken
复制代码
在config创建token.js
const crypto = require('jsonwebtoken')
const secret = "JWT-TOKEN"
const token={createToken:function(obj,timeout){// Token 数据let payload = {name: obj.username,admin: true};// 密钥// 签发 Tokenlet tokens = crypto.sign(payload, secret, { expiresIn: 3600})return tokens;},decodeToken:function(tokens){console.log(tokens)let res = false;crypto.verify(tokens, secret , function(err,decoded) {if(err){res = {'flag':false,'decoded':decoded}}else{res = {'flag':true,'decoded':decoded}}})return res;},checkToken:function(token){var resDecode=this.decodeToken(token);if(!resDecode){return false;}//是否过期var expState=(parseInt(Date.now()/1000)-parseInt(resDecode.payload.created))>parseInt(resDecode.payload.exp)?false:true;if(resDecode.signature===resDecode.checkSignature&&expState){return true;}return false;}
};
module.exports=exports=token;
复制代码
在app.js验证token是否过期,过去返回401
app.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"){var accesstoken = req.headers['access_token'];let datatoken = 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项目压缩上传
注:表述能力有限如果有什么问题或探讨可以加qq:1726861462
如果对你有帮助劳驾给个star github
转载于:https://juejin.im/post/5b56dc6be51d451956052dc1
vue+express 构建后台管理系统相关推荐
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- element ui 前台模板_SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(二):引入 element-ui 定义基本页面显示...
前提: (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y ...
- 【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
- 基于 vue.js + elementUI 后台管理系统 (html)模板
mq-admin vue.js + elementUI 后台管理系统模板 前言 今年年初刚转型学前端,业务需要做一个后台管理系统.好嘛,GitHub,码云先爬一波,发现了许多大佬的作品.那时也刚转型走 ...
- 拥抱开源,Vue Admin Work后台管理系统免费开源啦
前言 各们前端开发的小伙伴们,你们好,我是Vue Admin Work后台管理系统的主要开发者和维护者,从今年6月份开始我们一直在开发一套后台管理系统,旨在帮助更多的小伙伴学习提升和给许多中小型公司节 ...
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇1】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了vue+element-ui JYAdmin 后台管理系统模板-集成方案,从零到一的手写搭建全过程. ...
- Vue电商后台管理系统(1)
Vue电商后台管理系统(1) 登录 在components文件夹下创建登录组件,Login.vue,并快速生成template.script和style骨架. 配置路由,进入router文件夹,导入L ...
- Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板 技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等 页面预览: ...
- Vue项目实战 —— 后台管理系统( pc端 ) 第三篇
前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第二篇_0.活在风浪里的博客-CSDN博客前期回顾 Vue项目实战 -- 后台管理系统( pc端 ) 第一篇 _0.活在风浪里 ...
最新文章
- sqlmap 跑access_sqlmap注入Access
- oracle 主机名改ip,[oracle 10.2]主机名或者IP地址改变造成的dbconsole服务无法启动解决...
- Spinnaker:云原生多云环境持续部署的未来这样玩!
- 开源模式反击之后,白嫖服务商竟然大叫“你不讲武德!”
- 机器学习大佬的进阶之路!一位北大硕士毕业梳理了完整的学习路线!
- 东华大学计算机学院讲座单,计信学院成功举办2018级专业导师面对面系列讲座活动...
- 第二十六期:100 个网络基础知识普及,看完成半个网络高手
- 第三章 MongoDb Java应用 3.1
- 每日一道算法题--leetcode 169--求众数--python--两种方法
- vue 配置跨域访问
- MC新手入门(四十二)------ 愤怒小狗制作三
- 例2.9 找x - 九度教程第17题(查找)
- Java语言分为三大平台:JavaSE、JavaEE、JavaME
- 优盘中发现计算机病毒怎么办,电脑u盘中病毒exe文件怎么办
- Android 使用三级缓存实现对图片的加载
- 手把手教你搭建最新国产开源网络安全渗透测试集成靶场vulfocus
- 深夜碎碎念,肿瘤NGS基因检测的寒冬
- 文献阅读 - Combining Sketch and Tone for Pencil Drawing Production
- Leetcode 题解-59题
- PHP+mysql 入门级通讯录(一)