测试平台开发（四）Vue实现登录注册功能
在Vue中通常一个功能的开发顺序为：创建单文件组件 -> 编写组件路由 -> 编写组件代码 -> 接入后端接口 -> 测试
Vue的工作流程是：
一、创建单文件组件
1.在src\components目录下创建page目录，再在page目录下创建login.vue文件，写入vue文件的基本格式
<template> </template> <script> </script> <style scoped> </style>
注解：
<template></template>：这个标签里面用来放HTML代码
<script></script>：这个标签里面用来放JavaScript代码
<style scoped></style>：这个标签里面用来放CSS代码
二、编写组件路由
在src\router\index.js文件中写入登录页面的路由
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 // src\components\page\login.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 width: 100%; 134 height: 100%; 135 background-image: url(../../assets/img/101.png); 136 background-size: 100%; 137 } 138 .ms-title { 139 width: 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 width: 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 width: 100%; 164 height: 36px; 165 margin-bottom: 10px; 166 } 167 </style>
四、接入后端接口
在src\api\api.js文件中写入
1 // src\api\api.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)};
五、测试
1. 登录
2. 注册
GitHub持续更新：https://github.com/debugf/vueplatform
转载请注明出处，商用请征得作者本人同意，谢谢！！！
