Vue登陆功能详情

#Vue登陆功能详情| 来源: 网络整理| 查看: 265

1、先创建修饰好页面

在这里插入图片描述 Login.vue：

登陆重置 export default {} /* login_container容器 */ .login_container { background-color: #2b4b6b; height: 100%; } /* 登陆框容器 */ .login_box { width: 450px; height: 300px; background-color: #fff; border-radius: 3px; /* 圆角边框 */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* x、y轴各50% */ } /* 图标容器 */ .avatar_box { width: 100px; height: 100px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0 0 10px #ddd; position: absolute; left: 50%; transform: translate(-50%, -50%); /* x、y轴各50% */ background-color: #fff; /* 图标图片 */ img { width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } /* 登陆表单 */ .login_form { position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; /*盒子模型*/ } /* 登陆按钮 */ .login_button { display: flex; justify-content: flex-end; /* 从行尾位置开始排列 */ } 2、利用v-model 指令，进行数据绑定，轻松实现表单输入和应用状态之间的双向绑定

在这里插入图片描述

登陆重置 export default { data() { return { // 1、定义登陆表单的数据绑定对象 loginForm: { username: 'admin', password: '123456', }, } }, }

在这里插入图片描述

3、Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item的 prop 属性设置为需校验的字段名即可

在这里插入图片描述

登陆重置 export default { data() { return { // 1、定义登陆表单的数据绑定对象 loginForm: { username: 'admin', password: '123456', }, // 2、定义登陆表单规则对象 loginFormRules: { // 验证用户名是否合法 username: [ // trigger: "blur":失去焦点时进行验证 { required: true, message: '请输入用户名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在3-10字符中' }, ], // 验证密码是否合法 password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在6-15字符中' }, ], }, } }, }

在这里插入图片描述

3、利用resetFields方法重置表单数据

在这里插入图片描述重置后：

在这里插入图片描述

4、登陆之前进行预校验（validate），校验成功之后向API发出Post请求，获得res结果，判断res.status是否等于200，成功之后把Token保存到客户端sessionStorage中

登陆重置 export default { data() { return { // 1、定义登陆表单的数据绑定对象 loginForm: { username: '', password: '', }, // 2、定义登陆表单规则对象 loginFormRules: { // 验证用户名是否合法 username: [ // trigger: "blur":失去焦点时进行验证 { required: true, message: '请输入用户名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在3-10字符中' }, ], // 验证密码是否合法 password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 15, message: '长度在6-15字符中' }, ], }, } }, methods: { // 点击重置按钮,重置登陆用户名和密码 resetLoginForm() { console.log(this) this.$refs.loginFormRef.resetFields() }, login() { this.$refs.loginFormRef.validate(async (valid) => { if (!valid) return // 向api服务器发出登陆请求 const { data: res } = await this.$http.post('login', this.loginForm) // 判断结果状态，是否登陆成功，弹出弹框 if (res.meta.status !== 200) return this.$message.error('登陆失败！') this.$message.success('登陆成功！') // 1、将登陆成功之后的token，保存到客户端的sessionStorage中,进行身份验证 window.sessionStorage.setItem('token', res.data.token) // 2、通过编程式导航跳转到后台主页，路由地址为/home this.$router.push('/home') }) }, }, }

在这里插入图片描述

5、挂载路由导航守卫，没有登陆前不能进主页面

router/index.js:

import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../components/shop_login.vue' import Home from '../components/shop_home.vue' import Home1 from '../components/ew_re.vue' Vue.use(VueRouter) // 路由规则 const routes = [ // 必须要先登陆 { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home }, { path: '/home1', component: Home1 }, ] const router = new VueRouter({ routes, }) /* 1、to将要访问的路径 2、from代表从哪个路径跳转过来 3、next是一个函数、表示放行 */ // 挂载路由导航守卫 router.beforeEach((to, from, next) => { if (to.path === '/login') return next() // 获取token const tokenStr = window.sessionStorage.getItem('token') // 判断是否登陆成功过 if (!tokenStr) return next('/login') next() }) export default router

在这里插入图片描述

6、退出登陆功能，把Token值去掉即可

Home.vue:

退出 export default { methods: { // 退出登陆，清除Token，返回login logout() { window.sessionStorage.clear() this.$router.push('/login') }, }, }

在这里插入图片描述

7、项目学习视频来源（B站）：

【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】，大家可以看着视频做噢，里面写讲得非常详细，就这样啦~

【本文地址】

公司简介

联系我们