Vue项目的登录和注册界面

登录界面，Login.vue

<template><div class="login_container"><div class="login_box"><!--表单提交区域--><el-form :rules="loginFormRules" ref="loginFormRef" label-width="0px" class="login_form" :model="loginForm"><!--用户名--><el-form-item prop="username"><el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" placeholder="请输入账号" clearable></el-input></el-form-item><!--密码--><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" placeholder="请输入密码" show-password clearable></el-input></el-form-item><!--按钮区--><el-form-item class="btns"><el-checkbox class="remember" v-model="keepPassword">记住密码</el-checkbox><el-button type="primary" @click="login">登录</el-button><el-button type="primary" @click="register">注册</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div></div>
</template>
<script>
export default {data() {return {keepPassword: false, // 记住密码loginForm: {// 登录的表单数据的绑定对象username: 'admin',password: '123456'},loginFormRules: {// 验证用户名是否合法username: [{ required: true, message: '请输入登录名称', trigger: 'blur' },{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],// 验证密码是否合法password: [{ required: true, message: '请输入登录密码', trigger: 'blur' },{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }]}}},created() {sessionStorage.clear()},mounted() {// 读取cookiethis.getCookie()},methods: {// 记住密码保存数据setCookie(name, pwd, exdays) {var exdate = new Date() // 获取时间exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数// 字符串拼接cookiewindow.document.cookie = 'userName' + '=' + name + ';path=/;expires=' + exdate.toGMTString()window.document.cookie = 'userPwd' + '=' + pwd + ';path=/;expires=' + exdate.toGMTString()},// 读取cookiegetCookie() {if (document.cookie.length > 0) {this.keepPassword = truevar arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下for (var i = 0; i < arr.length; i++) {var arr2 = arr[i].split('=') // 再次切割// 判断查找相对应的值if (arr2[0] === 'userName') {this.loginForm.username = arr2[1] // 保存到保存数据的地方} else if (arr2[0] === 'userPwd') {this.loginForm.password = arr2[1]}}}},// 清除cookieclearCookie: function() {this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了},// 多层嵌套无法输入解决方法change(e) {this.$forceUpdate()},resetLoginForm() { // 点击重置按钮,重置登录表单console.log(this)this.$refs.loginFormRef.resetFields()},login() { // 点击登录按钮，跳转到Home.vuethis.$refs.loginFormRef.validate(async valid => { // 验证登录数据if (!valid) { // 根据登录结果判断是否发起登录请求return (this.loginLoading = false)}const { data: res } = await this.$http.post('login', this.loginForm)if (res.meta.status !== 200) {this.loginLoading = falsereturn this.$message.error('登录失败 帐号或密码错误!')}this.$message.success('登录成功!')window.sessionStorage.setItem('token', res.data.token)this.$router.push('/home') // 跳转到home.vuethis.loginLoading = false})},register() { // 跳转到注册界面this.$router.push('/register')}}
}
</script>
<style lang="less" scoped>
.login_container {height: 100%;background-color: #2e4e6e;
}
.login_box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 450px;height: 300px;background-color: #fff;border-radius: 3px;.login_form {box-sizing: border-box;position: absolute;bottom: 0;width: 100%;padding: 0 20px;}.btns {display: flex;justify-content: flex-end;}
}
</style>

注册界面，Register.vue

<template><div class="box"><div class="zhuce"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="账号名称" prop="user"><el-input v-model="ruleForm.user" clearable></el-input></el-form-item><el-form-item label="手机号码" prop="mobile"><el-input v-model="ruleForm.mobile" clearable></el-input></el-form-item><el-form-item label="电子邮箱" prop="email"><el-input v-model="ruleForm.email" clearable></el-input></el-form-item><el-form-item label="账号密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" clearable></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" clearable></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm2')">注册</el-button><el-button @click="returnForm">取消</el-button></el-form-item></el-form></div></div>
</template>
<script>
export default {data() {var checkUser = (rule, value, callback) => {const regUser = /^[a-zA-Z0-9_-]{3,16}$/if (regUser.test(value)) {return callback()}callback(new Error('用户名不能为空'))}var checkMobile = (rule, value, callback) => {const regUser = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/if (regUser.test(value)) {return callback()}callback(new Error('手机号码不能为空'))}var checkEmail = (rule, value, callback) => {const regUser = /^([a-zA-Z0-9]+[-_]?)+@[a-zA-Z0-9]+\.[a-z]+$/if (regUser.test(value)) {return callback()}callback(new Error('邮箱不能为空'))}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: {user: '',mobile: '',email: '',pass: '',checkPass: ''},rules: {user: [{ validator: checkUser, trigger: 'blur' }],mobile: [{ validator: checkMobile, trigger: 'blur' }],email: [{ validator: checkEmail, trigger: 'blur' }],pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }]}}},methods: {returnForm() {// 返回login界面this.$router.push('/login')},submitForm() {console.log(this.item)var data = this.itemthis.$http.post('/api/employee/login', data, { emulateJSON: false }).then((response) => {console.log(response.body)this.grouplist = response.bodyalert('注册成功！')this.$router.push('/login')},(response) => {console.log(response)alert('出问题啦！！！')})}}
}
</script>
<style lang="scss" scoped>
.box {height: 100%;background-color: #2e4e6e;
}
.zhuce {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 450px;height: 450px;background-color: #fff;border-radius: 3px;
}
.el-form-item {margin-top: 30px;width: 400px;
}
</style>

Vue项目的登录和注册界面相关推荐

Vue项目之登录注册
Vue项目之登录注册 1. 注册 1.1 注册页面的布局 1.2 注册业务逻辑的实现 2. 登录 3.导航守卫 3.1全局导航守卫,全部路由都会经过这里.一定要调用next方法向下执行 3.2 路由独 ...
python做带数据库的登录界面_Python3 Tkinkter + SQLite实现登录和注册界面
本文实例为大家分享了Python3 Tkinkter + SQLite 实现登录和注册界面,供大家参考,具体内容如下 Ubuntu14 + Python3.4 + Pycharm2018 一.设计数据 ...
php+html+css制作非常好看网站登录与注册界面
php+html+css制作非常好看网站登录与注册界面 php版本:5.2.17 phpstudy版本:v8.0 首先看一下效果图: 登录界面: (输入密码也是一样的!) 注册页面: 以上就是效果图 ...
代码技巧1.类似于登录、注册界面要判断登录账号是不是空，验证码是否正确等，怎么写比较舒服一点？
类似于登录.注册界面要判断登录账号是不是空,验证码是否正确等,怎么写比较舒服一点? case R.id.btn_get_verify_code://点击获取验证//业务需求点击获取验证码的地方加上图 ...
js连接mysql注册界面_js实现登录与注册界面
完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括: 用户名6-12位首字母不能是数字只能包含字母和数字密码6-12位注册页两次密码是否一致 html代码: 欢迎你,请先登陆! ...
electron+vue项目打包时修改注册表功能
electron+vue项目打包时修改注册表功能原因在使用electron做项目时,由于产品需要做一个放大镜功能.在查找了网上大部分类似需求后,发现大部分的放大镜都是对图片的放大,真正实现放大镜功 ...
vue项目实现登录/退出功能（包括token机制）
源码地址:https://gitee.com/cheng-xuyuan/blogWeb.git(请忽略这句) 一.登录业务的相关技术点 http是无状态的,为记录登录状态可通过cookie-sessi ...
PHP+Mysql 实现用户登录，注册界面
目标: 实现用户的登录 .注册 .修改密码.重置密码.添加书签,显示书签,删除书签等功能进一步目标: 实现对用户输入信息的控制,具体表现在对注册信息.登录信息的的过滤,具有简单的防sql注入 ...
vue项目实现登录(sessionStorage 存储 token)
前提参考:vue项目封装axios 思路: // 1, 前端校验,校验成功后向后台传用户名和密码(每次请求接口都要传 token) // 2, 后端收到请求,验证用户名和密码,验证成功,生成 toke ...

Vue项目的登录和注册界面

登录界面，Login.vue

注册界面，Register.vue

Vue项目的登录和注册界面相关推荐

最新文章

热门文章