Vue电商项目练习-2 登录页面设计
登录功能实现
- 登录概述
- 登录业务流程
- 登录业务的技术点
- 登录——token原理分析
- 具体实现
- 完成后的效果
- 创建login组件
- 1、在components文件夹下创建 Login.vue 文件
- 2、配置路由实现重定向
- 3、在 App.vue 组件中放置路由占位符
- 登录布局设计
- 1、设置背景色
- 2、 绘制登录盒子
- 3、盒子内部设计
- 4、form 表单组件学习
- 5、发送登录请求
- 6、登录后的处理
- 7、路由导航守卫控制页面访问权限
- 8、退出登录
登录概述
登录业务流程
- 输入用户名和密码
- 调用后台接口验证
- 根据响应状态跳转到项目主页
登录业务的技术点
- http是无状态的
- 通过cookie在客户端记录状态
- 通过session在服务端记录状态
- 通过token方式维持状态
登录——token原理分析
服务器根据携带的token值去验证你是哪个用户，根据操作返回不同的结果。token主要进行客户端与服务器端之间身份校验的，token是保证登录成功之后的唯一身份令牌。
具体实现
完成后的效果
创建login组件
1、在components文件夹下创建 Login.vue 文件
Login.vue中的script采用以下写法：
<style lang="less" scoped>
</style>
lang=“less” ：支持less写法，需要下载less-loader、less(在vue ui依赖中下载)
scoped ：样式只在当前组件中有效，避免了各个组件间的样式冲突问题
2、配置路由实现重定向
使用redirect进行路由重定向
const router = new Router({routes: [{ path: '/', redirect: '/login' },{ path: '/login', component: Login }]
})
3、在 App.vue 组件中放置路由占位符
<template><div id="app"><!-- 路由占位符 --><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script>
登录布局设计
1、设置背景色
<template><div class="login_container"><style lang='less' scoped>
.login_container {background-color: #2b4b6b;height: 100%;
}
背景全屏设置：让html、body、最外层盒子高度均为100%。
/* 全局样式表 */
html,
body,
#app {height: 100%;margin: 0;padding: 0;
}
在 main.js 中导入全局样式表
import './assets/css/global.css' // 导入全局样式表
2、 绘制登录盒子
<template><div class="login_container"><div class="login_box">
.login_box {height: 300px;width: 450px;background-color: #fff;border-radius: 3px; // 圆角position: absolute;// 设置居中left: 50%;top: 50%;transform: translate(-50%, -50%);
3、盒子内部设计
图片 ＋ 登录的表单
<template><div class="login_container"><div class="login_box"><!-- 上部头像图标框 --><div class="image_box"><img src="../assets/logo.png" alt="" /></div><!-- 登录表单区域 --><el-formclass="login-form"ref="loginFormRef":model="loginForm":rules="loginFormRules"><!-- 用户名区域 --><el-form-item prop="username"><el-inputv-model="loginForm.username"prefix-icon="el-icon-user"size="medium"></el-input></el-form-item><!-- 密码区域 --><el-form-item prop="password"><el-inputv-model="loginForm.password"prefix-icon="el-icon-lock"size="medium"type="password"></el-input></el-form-item><!-- 按钮区域 --><el-form-item class="btns"><el-button type="primary" @click="login">登录</el-button><el-button type="info" @click="resetLoginForm">重置</el-button></el-form-item></el-form></div></div>
</template>
<script>
export default {data() {return {// 登录表单的数据绑定对象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",},],},};},methods: {// 点击重置按钮，对表单数据进行重置resetLoginForm() {this.$refs.loginFormRef.resetFields();},// 对表单进行预验证login() {this.$refs.loginFormRef.validate((valid) => {if (!valid) return;this.$http.post("login", this.loginForm).then((res) => {if (res.data.meta.status == 200) {// 这里前面不能加returnthis.$message.success("登录成功");console.log(res);// 1 将登录成功之后的token保存到客户端的sessionStorage中// 项目中除了登录之外的其他API接口时必须在登录之后才能访问的// token只应当在当前网站打开期间生效，所以将其保存在sessionStorage中window.sessionStorage.setItem("token", res.data.data.token);// 2 通过编程式导航跳转到后台主页，路由地址是 /homethis.$router.push("/home");} else {return this.$message.error("登录失败");}});});},},
};
</script>
.login_box {height: 300px;width: 450px;background-color: #fff;border-radius: 3px; // 圆角position: absolute;// 设置居中left: 50%;top: 50%;transform: translate(-50%, -50%);.image_box {height: 130px;width: 130px;border: 1px solid #eee;border-radius: 50%;padding: 10px;// box-shadow: 0 0 10px #ddd;// 将距离摆正，向右移动login_box的一半减去image_box的一半，向上移动image_box的一半position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}}
}4、form 表单组件学习
form表单
典型写法：
<el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item>
</el-form><script>export default {data() {return {form: {name: ''}}},
实现效果：
:model=“form” 指定的是form表单要绑定的数据，在 data return { } 中定义
v-model=“form.name” 进行表单数据和输入框之间的双向绑定，数据对象中对应的属性
ref=“form” 是整个表单数据的引用，可以用来获取表单数据
:rules=“rules” 是提供表单验证功能，需要在 data return { } 中定义表单验证规则的对象，prop 属性为对应的验证规则字段
自定义表单校验规则
1、定义箭头函数代表校验规则
export default {data() {// 验证邮箱的规则var checkEmail = ( rule, value, callback) => {const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; if (regEmail.test(value)) {// 合法的邮箱return callback()} else {callback(new Error('请输入合法的邮箱'))}}
2、使用校验规则，通过validator
// 添加用户的表单验证规则对象addFormRules: {email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ validator: checkEmail, trigger: 'blur' }],
表单数据重置方法
使用 resetFields ，可以通过ref拿到表单的数据，然后调用该方法
this.$refs.loginFormRef.resetFields();
步骤：
- 在表单中添加引用ref=“loginFormRef”
- 给重置按钮增加点击监听事件@click=“xxx”
- 在处理方法中调用this.$refs.loginFormRef.resetFields()
表单验证
为 el-form 绑定一个验证规则
:rules=“rules” 是提供表单验证功能，需要在 data return { } 中定义表单验证规则的对象，
prop 属性为对应的验证规则中的字段
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><script>export default {data() {return {ruleForm: {name: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }]}
步骤：
- 在data中创建验证规则对象rules
- 给表单el-form绑定验证规则对象 使用:rules =“rules”
- 给el-form-item项添加 prop=“xxx” ，即表示我们希望使用xxx验证规则验证item里的表单数据项
表单提交前预校验
先拿到表单的引用对象，然后调用 validate 方法
this.$refs.loginFormRef.validate((valid) => {if (!valid) return;this.$http.post("login", this.loginForm).then((res) => {});});
步骤：
- 给表单添加引用
- 给登录按钮添加点击事件
- 在处理函数中调用validate方法，根据其bool值决定请求/不发起请求
5、发送登录请求
login() {this.$refs.loginFormRef.validate(async valid => {if (!valid) return;//post方法返回一个Promise对象 使用async 函数//async表示该函数中有异步操作 await表示后面表达式需要等待结果//使用对象解构 并起别名，此时获得的data数据干净const { data: res } = await this.$http.post("login", this.loginForm);//通过res.meta.status状态码判断请求if (res.meta.status === 200) {return this.$message.success("登陆成功");} else {return this.$message.success("登陆失败");}});
}
login() {this.$refs.loginFormRef.validate((valid) => {if (!valid) return;this.$http.post("login", this.loginForm).then((res) => {if (res.data.meta.status == 200) {// 这里前面不能加returnthis.$message.success("登录成功");console.log(res);} else {return this.$message.error("登录失败");}});});}
6、登录后的处理
- 将登陆成功之后的 token 保存至客户端的 sessionStorage 中
项目中除了登录之外的其他API接口，必须在登录之后才能访问
token只应在当前网站打开期间生效，所以放在session里而不是local - 通过路由跳转至后台主页 this.$router.push
if (res.data.meta.status == 200) {// 这里前面不能加returnthis.$message.success("登录成功");console.log(res);// 1 将登录成功之后的token保存到客户端的sessionStorage中// 项目中除了登录之外的其他API接口时必须在登录之后才能访问的// token只应当在当前网站打开期间生效，所以将其保存在sessionStorage中window.sessionStorage.setItem("token", res.data.data.token);// 2 通过编程式导航跳转到后台主页，路由地址是 /homethis.$router.push("/home");}
新建 Home.vue 组件
然后添加路由规则
{ path: '/home', component: Home}
7、路由导航守卫控制页面访问权限
比如 /HOME 页面是在登录的情况下才允许访问，未登录时不能访问，而跳转到登录页面
在router/index.js中添加导航守卫
// new 一个router对象，并接收
const router = new Router({
})// 挂载路由导航守卫
router.beforeEach((to, from, next) => {// to 表示将要访问的路径// from 表示从哪个路径跳转而来// next 是一个函数，表示放行// next() 放行 next('/login) 强制跳转if (to.path === '/login') return next() // 如果访问的是登录页面，直接放行即可// 获取tokenconst tokenStr = window.sessionStorage.getItem('token')if (!tokenStr) return next('/login') // 没有token，跳转到登录页面next()
})// 暴露router对象
export default router
8、退出登录
核心原理：清空token，这样后续请求不携带token，必须重新登录生成新token后才能访问页面。
在Home.vue组件中新增退出按钮，实现退出功能
<el-button type="info" @click="logout">退出</el-button>methods: {logout() {// 清空token 并 跳转到登录页window.sessionStorage.clear();this.$router.push("/login");},
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！