Vue实战篇一： 使用Vue搭建注册登录界面 |
您所在的位置：网站首页 › vscode制作登录界面 › Vue实战篇一： 使用Vue搭建注册登录界面 |
Vue实战篇一： 使用Vue搭建注册登录界面
|
系列文章目录
Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 Vue基础篇四：Vue的生命周期（秒杀案例实战） Vue基础篇五：Vue的指令 Vue基础篇六：Vue使用JSX进行动态渲染 Vue提高篇一：使用Vuex进行状态管理 Vue提高篇二：使用vue-router实现静态路由 Vue提高篇三：使用vue-router实现动态路由 Vue提高篇四：使用Element UI组件库 Vue提高篇五：使用Jest进行单元测试 Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率 Vue实战篇一： 使用Vue搭建注册登录界面 文章目录 系列文章目录一、说明二、创建项目三、编写注册页面组件四、编写登录页面组件五、路由设置六、测试注册登录 一、说明 本文将通过实战搭建管理系统的注册与登录界面，主要技术栈如下： vue-cli脚手架vue-router路由element组件库vscode编辑器vetur+eSLint+prettier插件 二、创建项目 请参考《使用脚手架vue-cli创建vue项目》 三、编写注册页面组件 需要实现多步骤表单填写需要实现表单字段校验模拟验证码发送及注册成功后跳转登录 已有账号？ 登录 同意注册协议 发送验证码 {{ statusMsg }} 上一步 下一步 同意以下协议并注册 {{ error }} export default { data() { return { step: 2, active: 0, statusMsg: '', error: '', ruleForm: { textarea: '请仔细阅读以下协议', agreed: false, name: '', code: '', pwd: '', cpwd: '', email: '' }, rules: { agreed: [{ validator: (rule, value, callback) => { console.log('value:' + value) if (value !== true) { callback(new Error('请确认同意注册协议')) } else { callback() } }, trigger: 'blur' }], name: [{ required: true, type: 'string', message: '请输入用户名', trigger: 'blur' }], email: [{ required: true, type: 'email', message: '请输入邮箱', trigger: 'blur' }], pwd: [{ required: true, message: '创建密码', trigger: 'blur' }], cpwd: [{ required: true, message: '确认密码', trigger: 'blur' }, { validator: (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')) } else if (value !== this.ruleForm.pwd) { callback(new Error('两次输入密码不一致')) } else { callback() } }, trigger: 'blur' }] } } }, layout: 'blank', methods: { sendMsg: function() { const self = this let namePass let emailPass if (self.timerid) { return false } this.$refs['ruleForm'].validateField('name', (valid) => { namePass = valid }) self.statusMsg = '' if (namePass) { return false } this.$refs['ruleForm'].validateField('email', (valid) => { emailPass = valid }) // 模拟验证码发送 if (!namePass && !emailPass) { let count = 60 self.statusMsg = `验证码已发送,剩余${count--}秒` self.timerid = setInterval(function() { self.statusMsg = `验证码已发送,剩余${count--}秒` if (count === 0) { clearInterval(self.timerid) } }, 1000) } }, next: function() { if (this.active === 0) { this.$refs['ruleForm'].validateField('agreed', (valid) => { if (valid === '') { this.active++ } }) } }, prev: function() { if (--this.active if (valid) { setTimeout( this.$router.push('/login'), 2000 ) } }) } } } .page-register { .header { //border-bottom: 2px solid rgb(235, 232, 232); min-width: 980px; color: #666; header { margin: 0 auto; padding: 10px 0; width: 980px; .login { float: right; } .bold { font-style: normal; } } } .register { color: #1890ff; } a { color: #1890ff; text-decoration: none; background-color: transparent; outline: none; cursor: pointer; transition: color 0.3s; } > section { margin: 0 auto 30px; padding-top: 30px; width: 980px; min-height: 300px; padding-right: 550px; box-sizing: border-box; .status { font-size: 12px; margin-left: 20px; color: #e6a23c; } .error { color: red; } } .footer{ text-align: center; } } 页面效果如下： 
四、编写登录页面组件
模拟验证码生成填写用户名、密码、验证码进行登录实现"记住我"功能
欢迎使用
记住我
登 录
登 录 中...
注册
// 加密
import { encrypt } from '@/utils/rsaEncrypt'
import Cookies from 'js-cookie'
export default {
name: 'Login',
data() {
return {
codeUrl: '',
cookiePass: '',
loginForm: {
username: '',
password: '',
rememberMe: false,
code: '',
uuid: ''
},
loginRules: {
username: [
{ required: true, trigger: 'blur', message: '用户名不能为空' }
],
password: [
{ required: true, trigger: 'blur', message: '密码不能为空' }
],
code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
},
loading: false,
redirect: undefined
}
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
},
created() {
// 获取验证码
this.getCode()
// 获取用户名密码等Cookie
this.getCookie()
// token 过期提示
this.point()
},
methods: {
getCode() {
// 模拟返回验证码图片
this.codeUrl = ‘http://www.demodashi.com/ueditor/jsp/upload/image/20170802/1501642847473057707.jpeg’
this.loginForm.uuid = ‘111’
},
getCookie() {
const username = Cookies.get('username')
let password = Cookies.get('password')
const rememberMe = Cookies.get('rememberMe')
// 保存cookie里面的加密后的密码
this.cookiePass = password === undefined ? '' : password
password = password === undefined ? this.loginForm.password : password
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password,
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
code: ''
}
},
handleLogin() {
this.$refs.loginForm.validate((valid) => {
const user = {
username: this.loginForm.username,
password: this.loginForm.password,
rememberMe: this.loginForm.rememberMe,
code: this.loginForm.code,
uuid: this.loginForm.uuid
}
if (user.password !== this.cookiePass) {
user.password = encrypt(user.password)
}
if (valid) {
this.loading = true
if (user.rememberMe) {
Cookies.set('username', user.username, {
expires: Config.passCookieExpires
})
Cookies.set('password', user.password, {
expires: Config.passCookieExpires
})
Cookies.set('rememberMe', user.rememberMe, {
expires: Config.passCookieExpires
})
} else {
Cookies.remove('username')
Cookies.remove('password')
Cookies.remove('rememberMe')
}
// 模拟登录成功
console.log('登录成功')
} else {
console.log('error submit!!')
return false
}
})
},
point() {
const point = Cookies.get('point') !== undefined
if (point) {
this.$notify({
title: '提示',
message: '当前登录状态已过期，请重新登录！',
type: 'warning',
duration: 5000
})
Cookies.remove('point')
}
}
}
}
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
}
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 385px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
display: inline-block;
height: 38px;
//float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.register {
float: right;
color: rgb(24, 144, 255);
}
a {
color: #1890ff;
text-decoration: none;
background-color: transparent;
outline: none;
cursor: pointer;
transition: color 0.3s;
}
页面效果 
五、路由设置
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRouterMap = [
{ path: '/login',
meta: { title: '登录', noCache: true },
component: (resolve) => require(['@/views/login'], resolve),
hidden: true
},
{ path: '/register',
meta: { title: '注册', noCache: true },
component: (resolve) => require(['@/views/register'], resolve),
hidden: true
}
]
export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
六、测试注册登录
在注册页面首页同意注册协议 填写用户名及邮箱，发送验证码，收取后填入验证码 继续填写用户密码及确认密码，并提交注册 如果填写信息有误，页面进行提示 信息填写无误，则注册成功，并直接跳转到登录页面 |
【本文地址】
今日新闻 |
推荐新闻 |