测试平台开发（四）Vue实现登录注册功能

<template>
</template>

<script>
</script>

<style scoped>
</style>

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 Vue.use(Router)
 5 
 6 export default new Router({
 7   routes: [
 8     {
 9       path: '/',
10       name: '/login',
11       component: () => import('../components/page/login.vue'),
12       meta: { title: '登录' }
13   },
14   ]
15 })

  1 // srccomponentspagelogin.vue
  2 <template>
  3     <div class="login-wrap">
  4         <div class="ms-login" v-if="two">
  5             <div class="ms-title">自动化测试平台</div>
  6             <el-form :model="loginParam" :rules="rules" ref="loginForm" label-width="0px" class="ms-content">
  7                 <el-form-item prop="username">
  8                     <el-input v-model="loginParam.username" placeholder="用户名" prefix-icon="el-icon-user">
  9                     </el-input>
 10                 </el-form-item>
 11                 <el-form-item prop="password">
 12                     <el-input type="password" placeholder="密码" v-model="loginParam.password" prefix-icon="el-icon-lock">
 13                     </el-input>
 14                 </el-form-item>
 15                 <div class="login-btn">
 16                     <el-button type="primary" @click="submitLoginForm('loginForm')">登录</el-button>
 17                 </div>
 18                 <el-link type="primary" @click="two = false" style="text-align: center;">去注册 ></el-link>
 19                 <el-link type="primary" @click="goFindPwd()" style="text-align:center;float:right">找回密码？</el-link>
 20             </el-form>
 21         </div>
 22         <div class="ms-login" v-else>
 23             <div class="ms-title">自动化测试平台</div>
 24             <el-form :model="registerParam" :rules="rules" ref="registerForm" label-width="0px" class="ms-content">
 25                 <el-form-item prop="username">
 26                     <el-input v-model="registerParam.username" placeholder="用户名" prefix-icon="el-icon-user">
 27                     </el-input>
 28                 </el-form-item>
 29                 <el-form-item prop="password">
 30                     <el-input type="password" placeholder="密码" v-model="registerParam.password" prefix-icon="el-icon-lock">
 31                     </el-input>
 32                 </el-form-item>
 33                 <el-form-item prop="r_password">
 34                     <el-input type="password" placeholder="确认密码" v-model="registerParam.r_password" prefix-icon="el-icon-lock">
 35                     </el-input>
 36                 </el-form-item>
 37                 <el-form-item prop="email">
 38                     <el-input v-model="registerParam.email" placeholder="邮箱" prefix-icon="el-icon-message">
 39                     </el-input>
 40                 </el-form-item>
 41                 <div class="login-btn">
 42                     <el-button type="primary" @click="submitRegisterForm('registerForm')">注册</el-button>
 43                 </div>
 44                 <el-link type="primary" @click="two = true" style="text-align: center;">去登陆 ></el-link>
 45             </el-form>
 46         </div>
 47     </div>
 48 </template>
 49 
 50 <script>
 51 import { login, register } from '../../api/api'
 52 export default {
 53     name: "login",
 54     data: function() {
 55         var validatePass = (rule, value, callback) => {            
 56             if (value === '') {
 57                 callback(new Error('请再次输入密码'));
 58             } else if (value !== this.registerParam.password) {
 59                 callback(new Error('两次输入密码不一致!'));
 60             } else {
 61                 callback();
 62             }
 63         };
 64         return {
 65             two: true,
 66             loginParam: {},
 67             registerParam: {},
 68             rules: {
 69                 username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
 70                             { min: 2, max: 32, message: '请输入2-20位字符', trigger: 'blur'}],
 71                 password: [{ required: true, message: '请输入密码', trigger: 'blur' },
 72                             { min: 6, max: 32, message: '请输入6-32位字符', trigger: 'blur'}],
 73                 r_password: [{ required: true, message: '请输入确认密码', trigger: 'blur' },
 74                             { validator: validatePass, trigger: 'blur' }],
 75                 email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },
 76                         { type: "email", message: '请输入正确电子邮件地址', trigger: 'blur' }]
 77             },
 78         };
 79     },
 80     methods: {
 81         submitLoginForm(formName) {
 82             this.$refs[formName].validate(valid => {
 83                 if (valid) {
 84                     login(this.loginParam)
 85                     .then((response)=> {
 86                         sessionStorage.clear();
 87                         sessionStorage.setItem('token', response.data.details.token);
 88                         localStorage.setItem('token', response.data.details.token);
 89                         localStorage.setItem('id', response.data.details.id);
 90                         localStorage.setItem('username',response.data.details.username);
 91                         this.$message.success('登录成功');
 92                         this.$router.push('/home');
 93                     })
 94                     .catch(error => {
 95                         this.$message.error('用户名或密码错误');
 96                     });
 97                 } else {
 98                     this.$message.error('请输入账号和密码');
 99                     return false;
100                 }
101             });
102         },
103         submitRegisterForm(formName){
104             this.$refs[formName].validate(valid => {
105                 if (valid) {
106                     register(this.registerParam)
107                     .then((response)=> {
108                         this.$message.success('注册成功');
109                         this.loginParam.username = this.registerParam.username
110                         this.loginParam.password = this.registerParam.password
111                         this.two = true
112                     })
113                     .catch((error)=> {
114                         var key = Object.keys(error.response.data.details)[0]
115                         this.$message.error(error.response.data.details[key][0]);
116                     });
117                 } else {
118                     this.$message.error('请根据提示输入必填项');
119                     return false;
120                 }
121             });
122         },
123         goFindPwd(){
124             this.$message.error('找个锤子。');
125         },
126     },
127 };
128 </script>
129 
130 <style scoped>
131 .login-wrap {
132     position: relative;
133      100%;
134     height: 100%;
135     background-image: url(../../assets/img/101.png);
136     background-size: 100%;
137 }
138 .ms-title {
139      100%;
140     line-height: 50px;
141     text-align: center;
142     font-size: 20px;
143     color: #2d333f;
144     border-bottom: 1px solid #ddd;
145 }
146 .ms-login {
147     position: absolute;
148     left: 50%;
149     top: 50%;
150      350px;
151     margin: -190px 0 0 -175px;
152     border-radius: 5px;
153     background: rgba(255, 255, 255, 0.897);
154     overflow: hidden;
155 }
156 .ms-content {
157     padding: 30px 30px;
158 }
159 .login-btn {
160     text-align: center;
161 }
162 .login-btn button {
163      100%;
164     height: 36px;
165     margin-bottom: 10px;
166 }
167 </style>

 1 // srcapiapi.js
 2 import axios from 'axios';    // 导入axios
 3 
 4 let host = 'http://127.0.0.1:9000/api';
 5 
 6 // 登录
 7 export const login = params => { return axios.post(`${host}/user/login`, params)};
 8 
 9 // 注册
10 export const register = params => { return axios.post(`${host}/user/register`, params)};