登录注册功能的实现（前端部分）

首先，由于我们的需求都是在vue下实现的，我们先好安装vue-cli脚手架，再进入以下步骤：

第一步，创建vue项目，分别下载好路由、axios、ElementUI

$ vue create lagou_before
$ cnpm install vue-router -S
$ npm i axios -S
$ npm i element-ui -S

第二步，创建一个名为vue.config.js的反向代理文件，写入以下代码：

// 反向代理
module.exports = {
    devServer : {
        proxy : {
            '/api' : {
                target : 'http://localhost:3000',
                changeOrigin : true
            }
        }
    }
    // runtimeCompiler : true
};

第三步：在router配置文件中写入以下代码：

// 路由配置：实现页面跳转
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
    //注册页面
    {
        path:'/register',
        name:'Register',
        component: () => import('@/view/Register.vue')
    },
    //登陆页面
    {
        path:'/login',
        name:'Login',
        component: () => import('@/view/Login.vue')
    },
    //重定向
    {
        path:'**',
        redirect:'/login'
    }
]
const router = new VueRouter({
    //路由模式
    mode:'history',
    base:process.env.BASE_URL,
    routes
})
export default router

第四步：编辑main.js文件

import Vue from 'vue'
import App from './App.vue'

// 导入路由
import router from './router'

// 导入数据请求
import axios from 'axios'
Vue.prototype.$axios = axios

//导入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false
new Vue({
  //路由配置
  router,
  render: h => h(App),
}).$mount('#app')

第五步：创建编辑Login.vue组件

<template>
    <div>
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

  <el-form-item label="用户名" prop="user">
    <el-input v-model.number="ruleForm.user"></el-input>
  </el-form-item>

  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
  </el-form-item>

  </el-form>
    </div>
</template>
<script>
export default {
  data() {
    var checkUser = (rule, value, callback) => {
      if (!value) {
        //用户验证
        return callback(new Error("用户名不能为空"));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      //密码验证
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      //数据
      ruleForm: {
        pass: "",
        user: ""
      },
      //规则
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        user: [{ validator: checkUser, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 验证全部通过会触发这里
          this.$axios
            .post("/api/users/login", {
              username: this.ruleForm.user,
              password: this.ruleForm.pass
            })
            .then(res => {
              if (res.data.code == 0) {
                this.$message({
                  message: "登录成功",
                  type: "success"
                });
              } else {
                this.$message({
                  message: "登录失败，请重新登录",
                  type: "error"
                });
              }
            });
        } else {
          // 验证没有通过会触发这里
          console.log("登录失败!!");
          return false;
        }
      });
    }
  }
};
</script>

第六步：类似的，我们创建编辑Register.vue组件

<template>
    <div> 
    
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

          <el-form-item label="用户名" prop="user">
    <el-input type="text" v-model="ruleForm.user" autocomplete="off"></el-input>
  </el-form-item>

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

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

  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>

  </el-form-item>
</el-form>

    </div>
</template>
<script>
export default {
  data() {
    var checkuser = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        checkPass: "",
        user: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        user: [{ validator: checkuser, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert('注册成功!');
          this.$axios
            .post("/api/users/register", {
              username: this.ruleForm.user,
              password: this.ruleForm.pass
            })
            .then(res => {
              if (res.data.code == 0) {
                this.$message({
                  message: "恭喜你，注册成功",
                  type: "success"
                });
                this.$router.push("/login");
              } else {
                this.$message({
                  message: "注册失败，请重新注册",
                  type: "error"
                });
              }
            });
        } else {
          console.log("注册失败!!");
          return false;
        }
      });
    }
  }
};
</script>

前端部分的代码就完善好啦！