请假审批项目一:环境的搭建

1:后端(提供接口 存储数据)

准备工作

1:安装好node
2:安装好express+express的脚手架
3:利用 express -e 创建项目
4:安装常用的模块
   mongoose   链接数据库
   jsonwebtoken  生成token

后端设计

三层
model   数据 (链接数据库+设计每张表)
service 业务 (每张表的增删改查)
router  控制 (接收调用  返回结果)

准备工作  准备设计接口 一个登陆 一个注册 

在model新建两个文件db.js userModel.js(一个链接数据库的配置  一个用户表的结构)

//db.js
var mongoose = require("mongoose");
var DB_URL = "mongodb://localhost:27017/2007";

mongoose.connect(DB_URL,{useNewUrlParser: true });
//状态的监听
mongoose.connection.on("connected",function () {
    console.log("连接成功");
});
mongoose.connection.on("error", function (err) {
    console.log(err);
});
mongoose.connection.on("disconnected", function () {
    console.log("连接断开");
});
//导出方便其他地方使用 commonjs
module.exports = mongoose;

//userModel.js

var mongoose = require("./db.js");
var schema = mongoose.Schema; //模型生成器(表生成器)

//建立表 并且指定字段
var userSchema = new schema({
    username: String, //用户名
    userpwd: String, //用户密码
    usertel:String,//手机号
    telcode:String, //手机号验证码
    type:Number,//用户类别  1表示老师  2表示学生
    logindate: Date //登录时间
});

//转成数据模型导出
module.exports = mongoose.model("userinfo", userSchema);

在业务层(service) 新建一个userinfo.js里面写入

//userinfo.js
let  userModel =require("../model/userModel");

let  userinfo = {
     query:(info)=>{
          return  userModel.find(info)
     },
     add:(info)=>{
      return  userModel.insertMany([info])
     }
}
module.exports = userinfo;//导出

在控制层(router)

users中声明两个接口 router.post("/login")   router.post("/register")

完善登陆和注册接口

router.post("/register", (req, res, next) => {
  let { username, userpwd,type } = req.body;

  var md5 = crypto.createHash('md5');   //crypto模块功能是加密并生成各种散列
  userpwd = md5.update(userpwd).digest('hex');

  //1:判断用户名是否存在
  userinfo.query({ username }).then((list) => {//查询返回的是结果集
    if (list.length) {
      //存在
      res.json({
        code: 0,
        msg: "该用户名已经存在"
      })
    } else {
      //不存在  就可以新增 注意密码要加密
      userinfo.add({ username, userpwd,type }).then(() => {
        res.json({
          code: 1,
          msg: "新增成功"
        })
      }, () => {
        res.json({
          code: 0,
          msg: "新增失败"
        })
      })
    }
  })

 

router.post("/login",(req,res,next)=>{
  let  {username,userpwd} = req.body;
  var md5 = crypto.createHash('md5');   //crypto模块功能是加密并生成各种散列
  userpwd = md5.update(userpwd).digest('hex');

   userinfo.query({username,userpwd}).then((list)=>{
    //  res.json({
    //    msg:list,
    //  })
    if(list.length){
      //加密用户信息 生成token
      let info = list[0];//用户信息
      let {username,_id,type}=info;

      var token =jwt.sign({username,_id,type},"key",{
        expiresIn: 60*60*0.5  // 半个小时过期
      })

      res.json({
        code:1,
        msg:"登录成功",
        token
      })

    }else{

      res.json({
        code:0,
        msg:"用户名和密码不匹配"
      })

    }
   })
});

 

需要引入的一些模块

var express = require('express');
var router = express.Router();
var crypto = require("crypto")
var jwt = require("jsonwebtoken")
let userinfo = require("../service/userinfo");

 

注册里面可以验证用户名是否存在  密码进行了加密处理

登陆里面验证了用户名和密码是否登录成功   成功以后返回了token

2:前端(页面展示 调用接口)

vue/cli创建项目  vue create  client cli的安装

创建完以后 配置proxy  安装好axios   sass(node-sass  sass-loader)  elementui

在vue.config.js中

module.exports = {
    publicPath: "./",
    assetsDir: "static",
    outputDir: 'dist',
    lintOnSave: false,
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                // ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
};

 

在main.js中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);

准备好登录页面 用的是form表单  (布局  验证  事件  效果 都封装好了)

<template>
  <div class="home">
    <div class="login">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model.trim="ruleForm.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="userpwd">
          <el-input
            type="password"
            v-model="ruleForm.userpwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style scoped>
.login {
  width: 600px;
  overflow: hidden;
  margin: 100px auto;
}
</style>
<script>
export default {
  data() {
    return {
      ruleForm: { //数据
        username: "",
        userpwd: "",
      },
      rules: { //数据的验证
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            pattern: /^[0-9a-z]{5,10}$/i,
            message: "数字字母长度5到10位",
            trigger: "blur",
          },
        ],
        userpwd: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            pattern: /^[0-9a-z$_]{3,12}$/,
            message: "密码长度3到12位的数字字母_$",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {//两个事件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {//验证
        if (valid) {
          console.log(this.ruleForm.username);
          console.log(this.ruleForm.userpwd);
          //做什么  调用接口  验证数据
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {//重置表单
      this.$refs[formName].resetFields();
    },
  },
};
</script>

_