node+mongoDb+Vue+elementUI实现资金管理后台系统(六)---前台的注册，登陆与token存储

最新推荐文章于 2020-12-09 22:02:54 发布

等不回天亮等时光

最新推荐文章于 2020-12-09 22:02:54 发布

阅读量703

点赞数 2

分类专栏：前端框架 vue

本文链接：https://blog.csdn.net/Only_ruiwen/article/details/86769266

版权

vue 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

前端框架

11 篇文章 0 订阅

订阅专栏

我们利用elementUi为我们提供的UI组件进行快速编写界面，elementUI文档:
http://element-cn.eleme.io/#/zh-CN/component/installation

<template>
    <div class="register">
        <div class="form_container">
            <div class="manage_tip">
                <span class="title">
                    在线后台管理系统
                </span>
            </div>
            <el-form :model="registerUser" :rules="rules" ref="registerForm" label-width="80px" class="registerForm">
                <el-form-item label="用户名" prop="name">
                    <el-input type="text" v-model="registerUser.name" autocomplete="off" placeholder="请输入用户名..."></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input type="email" v-model="registerUser.email" autocomplete="off" placeholder="请输入邮箱..."></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="registerUser.password" autocomplete="off" placeholder="请输入密码..."></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                    <el-input type="password" v-model="registerUser.password2" autocomplete="off" placeholder="请输入二次密码..."></el-input>
                </el-form-item>

                <el-form-item label="选择身份" props="identity">
                   <el-select v-model="registerUser.identity" placeholder="请选择身份...">
                       <el-option label="管理员" value="manager">
                       </el-option>
                       <el-option label="员工" value="employee">
                       </el-option>
                   </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitForm('registerForm')" type="primary" class="submit_btn">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

js逻辑

<script>
export default {
    name:"register",
    data(){
        var validatePass2 = (rule, value, callback) => {
        if (value !== this.registerUser.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
        return {
            registerUser:{
                name:"",
                email:"",
                password:"",
                password2:"",
                identity:""
            },
            rules:{
                name:[
                    {required:true,message:"用户名不能为空!",trigger:"blur"},
                    {min:2,max:30,message:"长度在2-30字符串之间",trigger:"blur"}
                ],
                email:[
                    {type:"email",required:true,message:"邮箱格式不正确",trigger:"blur"}
                ],
                password:[
                    {required:true,message:"密码不能为空!",trigger:"blur"},
                    {min:6,max:30,message:"长度在6到30之间",trigger:"blur"}
                ],
                password2:[
                    {required:true,message:"确认密码不能为空!",trigger:"blur"},
                    {min:6,max:30,message:"长度在6到30之间",trigger:"blur"},
                    {validator:validatePass2,trigger:"blur"}
                ]
            }
        }
    },
    methods:{
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                // alert('submit!');
                this.$axios.post("/api/users/register",this.registerUser)
                    .then(res=>{
                        // console.log(res)
                        this.$message({
                            message:"账号注册成功",
                            type:"success"
                        })
                        this.$router.push("/login")
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        }
    }
}
</script>

CSS样式

<style scoped>
.register {
  position: relative;
  width: 100%;
  height: 100%;
}
.form_container {
  width: 370px;
  height: 210px;
  position: absolute;
  top: 10%;
  left: 34%;
  padding: 25px;
  border-radius: 5px;
  text-align: center;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 26px;
  color: #333;
}
.registerForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 40px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit_btn {
  width: 100%;
}
</style>

这里要注意，我们是本地8080端口，我们服务端则是3000端口，会存在一个跨域的问题，所以我们在config/index.js中找到proxyTable,添加以下代码

proxyTable: {
      "/api":{
        target:"http://localhost:3000"
      }
    },

注册接口调试
这里用的第三方ajax库，是axios,所以我们要先安装axios模块 npm install axios --save,中文文档
https://www.kancloud.cn/yunye/axios/234845
在axios中提供了拦截器这个API

按照文档的写法，我们在src目录下创建http.js,用来处理响应请求
http.js

import axios from "axios"
import { Loading,Message} from 'element-ui';

let loading;

//开始加载动画
function startLoading(){
    loading = Loading.service({
        lock:true,
        text:"拼命加载中....",
        background:"rgba(0,0,0,0.7)"
    })
}
//结束加载动画
function endLoading(){
    loading.close()
}
//请求拦截
axios.interceptors.request.use(config=>{
    //加载动画
    startLoading();
    return config;
},error=>{
    return Promise.reject(error);
})
//响应拦截
axios.interceptors.response.use(response=>{
    endLoading()
    return response;
},error=>{
    //错误提醒
    endLoading()
    // console.log(error.response)
    Message.error(error.response.data);
    return Promise.reject(error)
})
export default axios;

登陆接口调试

<template>
    <div class="register">
        <div class="form_container">
            <div class="manage_tip">
                <span class="title">
                    登陆
                </span>
            </div>
            <el-form :model="loginUser" :rules="rules" ref="loginForm" label-width="80px" class="loginForm">
                <el-form-item label="邮箱" prop="email">
                    <el-input type="text" v-model="loginUser.email" autocomplete="off" placeholder="请输入邮箱..."></el-input>
                </el-form-item>
                 <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginUser.password" autocomplete="off" placeholder="请输入密码..."></el-input>
                </el-form-item>

               
                <el-form-item>
                    <el-button @click="submitForm('loginForm')" type="primary" class="submit_btn">登陆</el-button>
                </el-form-item>
                <div class="tiparea">
                    <p>还没有账号<router-link to='/register'>注册</router-link></p>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    name:"login",
    data(){
        
        return {
            loginUser:{
                email:"",
                password:""
            },
            rules:{
                email:[
                    {type:"email",required:true,message:"邮箱格式不正确",trigger:"blur"}
                ],
                password:[
                    {required:true,message:"密码不能为空!",trigger:"blur"},
                    {min:6,max:30,message:"长度在6到30之间",trigger:"blur"}
                ]
            }
        }
    },
    methods:{
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
            if (valid) {
                // alert('submit!');
                this.$axios.post("/api/users/login",this.loginUser)
                    .then(res=>{
                        //获取token 需要存储到本地
                        // console.log(res)
                        const {token} = res.data
                        localStorage.setItem("eleToken",token)
                        this.$router.push("/index")
                    })
                    .catch(err=>{
                        console.log(err)
                    })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        }
    }
}
</script>
<style scoped>
.register {
  position: relative;
  width: 100%;
  height: 100%;
}
.form_container {
  width: 370px;
  height: 210px;
  position: absolute;
  top: 10%;
  left: 34%;
  padding: 25px;
  border-radius: 5px;
  text-align: center;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 26px;
  color: #333;
}
.registerForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 40px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit_btn {
  width: 100%;
}
</style>