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


Posted in Javascript onJuly 19, 2018

一个vue+express 构建的后台管理系统

说明:

vue+express 构建的后台管理系统,包括登录、注册、表格的增删改查

github 在线

搭建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
    };
    // 密钥
    
    // 签发 Token
    let 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.部署阿里云

创建实例

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

添加安全组允许3000端口

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

使用putty连接linux服务器,将express项目压缩上传

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
javascript 仿QQ滑动菜单效果代码
Sep 03 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
vue中监听返回键问题
Aug 28 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
微信小程序表单弹窗实例
Jul 19 #Javascript
vue用递归组件写树形控件的实例代码
Jul 19 #Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 #Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 #Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 #Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 #Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 #Javascript
You might like
PHP 编程请选择正确的文本编辑软件
2006/12/21 PHP
用header 发送cookie的php代码
2007/03/16 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
详解YII关联查询
2016/01/10 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
JavaScript事件处理程序详解
2017/09/19 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
提升python处理速度原理及方法实例
2019/12/25 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
教师自我鉴定
2013/12/13 职场文书
信息技术培训感言
2014/03/06 职场文书
小学生作文评语
2014/04/18 职场文书
毕业实习计划书
2015/01/16 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
Python中的嵌套循环详情
2022/03/23 Python
如何利用python实现Simhash算法
2022/06/28 Python