实现全栈收银系统(Node+Vue)(上)

Echa攻城狮 2020-03-19 05:18:19

前端渐渐趋向后端化,工程化,自动化开发,掌握一门后端语言成了我们必备的不可少阶段,Node的出现让我们能够搭建了简单运算的后台,实现全栈的开发,现在通过几个阶段来开发一套基于VUE开发的Node后台系统,区块式的记录一些干货。

基于Node接口搭建-登录注册

1. express搭建服务器

安装: npm install express
引用: const express = require("express");
复制代码

设置端口号

const app = express(); 
const port = process.env.PORT || 5000;
app.listen(port,()=>{
    console.log(`Server running on port ${port}`);
})
复制代码

在控制台中运行node server.js,即可以开出http://localhost:5000的请求连接,那么我们可以根据请求连接编写出第一个请求接口

app.get("/",(req,res) => {
    res.send("Hellow World!")
})
复制代码

由于每次保存都要重新执行命令,故我们可以安装npm install nodemon -g避免每次初始执行

2. 连接MongoDB数据库

有了第一步的操作我们已经能够成功访问到了一个自定义接口数据了,那么现在我们需要根据数据库的数据执行我们的接口,在Node中运用封装好的MongoDB进行操作(此处如有不明白可以看下之前总结的推文)

安装:npm install mongoose
引用: const MongoClient = require("mongodb").MongoClient;
复制代码

创建一个文件keys.js我们将数据库连接全部编写进去,方便后期直接调用

module.exports = {
    url: 'mongodb://localhost:27017',
    dbName: 'restful-api-prod',
    secretOrkey: 'secret' //token 调用
}
复制代码

在server.js页面中进行引入进行连接mongodb

class Mongodb{
    constructor(conf) { //class原型下的构造函数
        //保存conf到构造的集合中
        this.conf=conf //成员变量
        //连接
        this.client = new MongoClient(conf.url,{useNewUrlParser:  true}) //创建客户端
        this.client.connect( err => { //有自动重连的机制
            if(err) {
                throw err
            }
            console.log('连接数据库成功');
        });
    }
}
module.exports = new Mongodb(conf);
复制代码

3. 搭建路由和数据模型

创建users.js,此处页面编写将会涉及到 登录 注册 设置Token 密码加密 用户,邮箱是否存在判断 Token识别获取信息 等。

引入router进行接口路由编写

const express = require("express");
const router = express.Router(); //接口请求
// api/users/test
router.get("/test",(req,res) => {
    res.json({msg:"login works"})
})
module.exports = router;
复制代码

创建的文件需要到server.js中引用

const users = require("./routes/api/users");
app.use("/api/users",users);
复制代码

Schema的数据模型创建

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// Create Schema
const UserSchema = new Schema({
  name: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true
  },
  password: {
    type: String,
    required: true
  },
  avatar: { //头像
    type: String
  },
  identity: {
    type: String,
    required: true
  },
  date: {
    type: Date,
    default: Date.now
  }
});

module.exports = User = mongoose.model('users', UserSchema);

复制代码

4. 搭建注册接口并存储数据

方便后期接口调试的需要安装下postman,接下来的请求是POST请求,也是相对get请求比较麻烦的一点,POST的请求需要安装第三方的模块

npm i body-parser
复制代码

在 server.js 中引用

const bodyParser = require("body-parser");
 //使用body-parser中间件
 app.use(bodyParser.urlencoded({extended:false})); //开启往post传送数据
 app.use(bodyParser.json()); //让数据json化
复制代码

引入Schema创建的数据模型 如果引用了那么我们可以根据模型直接 User.findOne 就能在数据库中查询,但是未知原因,在执行时一直没进去,便接下来都使用了封装的Promise请求进行操作

注册

router.post("/register",async(req,res) => {})

  1. 判断注册邮箱是否存在
var userFind = mongoHelper.findOne("test",{email: req.body.email});
复制代码
  1. 罗列填写的数据
 const newUser = new User({
       name: req.body.name,
       email: req.body.email,
       avatar,
       password:req.body.password,
       identity:req.body.identity
   })
复制代码
  1. 密码处理

密码加密操作安装(使用参考npm) npm install bcrypt -S

  1. 数据储存
await mongoHelper.insertOne("test",newUser);
return res.status(200).json(newUser); //打印在控制台的数据
复制代码
  1. avatar的获取全国通用头像的链接
安装:npm i gravatar
const avatar = gravatar.url(req.body.email, {s: '200', r: 'pg', d: 'mm'});
复制代码

登录(获取token)

router.post("/login",async(req,res) => {})

  1. 查询数据库,判断用户是否存在
mongoHelper.findOne("test",{email}).then(user => {})
复制代码
  1. 密码是否匹配(bcrypt.compare)
  2. Token 设置
安装 npm install jsonwebtoken
复制代码

在判断匹配密码成功后进行操作,此处需要注意到的是 token: "Bearer "+token

jwt.sign("规则","加密名字","过期时间","箭头函数")

 const rule = {
        id:user.id,
        name:user.name,
        avatar:user.avatar,
        identity: user.identity,
 };
 jwt.sign(rule,keys.secretOrkey,{expiresIn: 3600},(err,token) => {
    if(err) throw err;
    res.json({
        success: true,
        token: "Bearer "+token
    })
})
复制代码

使用passport-jwt验证token(运用在需要请求用户信息的接口)

安装 npm i passport-jwt passport

引用 const passport = require("passport"); //对请求进行身份验证

初始化 app.use(passport.initialize());

代码抽离模式 require("./config/passport")(passport); //传对象过去

router.get("/current","验证token",(req,res) => {
    res.json(req.user);
})
复制代码

创建passport文件直接在这个页面操作再抛出,在passport-jwt官网中引用需要的数据

const JwtStrategy = require('passport-jwt').Strategy,
    ExtractJwt = require('passport-jwt').ExtractJwt;
const mongoose = require("mongoose");
// const User = mongoose.model("users");
const keys =require("../config/keys");
const mongoHelper = require('../models/mongoHelper')
const opts = {}
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
opts.secretOrKey = keys.secretOrkey;

复制代码
//server
router.get("/current",passport.authenticate("jwt",{session:false}),(req,res) => {
    res.json(req.user);
})
//passport.authenticate  验证token
复制代码

权限管理(identity)

注册

实现全栈收银系统(Node+Vue)(上)

登录

实现全栈收银系统(Node+Vue)(上)

根据token在请求头的数据请求到用户的信息

实现全栈收银系统(Node+Vue)(上)


已更新了下集 实现全栈收银系统(Node+Vue)(下)

代码已上传github

https://github.com/lin593/node-app

请给star,后续继续更新,多谢支持