Vue电商管理系统-登录界⾯
1.通过可视化操作建⽴vue_shop项⽬。
2.建⽴码云远程仓库，地址：gitee/tyoubin_admin/vue_shop.git
3.下载nodejs后台项⽬，地址：gitee/tyoubin_admin/vueShop-api-server.git
4.使⽤token解决跨域问题
由于http协议是⽆状态的，登录成功之后需要记录⽤户的状态，有三种⽅式
1. cookie
2. session
3. token
当前端和后端不存在跨域问题时，使⽤ cookie或 session，
存在跨域问题时则使⽤token。
token原理如下图所⽰
5.样式设置为scoped，表⽰样式只在当前组件中⽣效。
6.显⽰空格错误，百度说缩进的问题，将.eslintic.js⽂件中的’@vue/standard’这⾏注释调，问题解决。
7.可视化⾯板中选择添加开发依赖，添加less和lessloder
8.报错in ./src/components/Login.vue?vue&type=style&index=0&id=ef68022e&lang=less&scoped=true&
Syntax Error: TypeError: Options is not a function，
百度说是lessloder版本过⾼，因此卸载调lessloder9.0.0，安装lessloder7.x，成功解决。
9.顶部没有沾满全屏，新建./assets/css/global.css添加如下代码，并在main.js中引⼊，Login.vue中添加.login-container样式
height:
100%;
html,body,#app{
height: 100%;
margin: 0;
padding: 0;
}
10.绘制登录盒⼦，并放到屏幕正中间
.login_box{
width: 450px;
height: 300px;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
11.绘制头像，刚开始头像背景颜⾊⽆法改变，之后发现是因为直接设了img的class属性，应该将img外层包⼀个div
12.按需导⼊element元素，在element.js中添加如下语句
import{Button}from'element-ui'
vue element adminimport{Form,FormItem}from"element-ui";
import{Input}from"element-ui";
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
13.调整账号密码输⼊框 将输⼊框的box-sizing设置为border-box。
box-sizing 属性允许以特定的⽅式定义匹配某个区域的特定元素，
content-box 表⽰宽度和⾼度分别应⽤到元素的内容框，在宽度和⾼度之外绘制元素的内边距和边框。
border-box表⽰宽度和⾼度分别应⽤到元素的边框盒，通过从已设定的宽度和⾼度分别减去边框和内边距才能得到内容的宽度和⾼度。
14.登录和清空按钮靠右显⽰
将按钮所在的el-form-item添加class值btns，并设置为弹性布局，设为 Flex 布局以后，⼦元素的float、clear和vertical-align属性将失效。css代码如下：
.btns{
display: flex;/*弹性布局*/
justify-content: flex-end;/*右对齐*/
}
justify-content不同取值和含义
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项⽬之间的间隔都相等。
space-around：每个项⽬两侧的间隔相等。所以，项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍。
15.导⼊字体图标，使⽤阿⾥图标库，在main.js中导⼊css⽂件，为input添加prefix-icon属性。
16.表单验证，第⼀步：表单添加:rules=“loginFormRules”，第⼆步：data()的return中添加校验规则，代码如下，第三步：el-
form-item通过prop属性绑定校验规则。
loginFormRules:{
// 验证⽤户是否合法
username:[
// 必填，提⽰消息，⿏标焦点消失时触发
{required:true,message:"请输⼊⽤户名",trigger:"blur"},
{min:3,max:10,message:"长度在3-10个字符之间"}
],
// 验证密码是否合法
password:[
{required:true,message:"请输⼊密码",trigger:"blur"},
{min:6,max:10,message:"长度在 3 到 10 个字符",trigger:"blur"}
]
}
17.表单重置功能 为表单设置⼀个ref属性为loginFormRef，methods中添加⼀个⽅法，调⽤
this.$setFields()，按钮中添加click事件，调⽤重置⽅法，将表单信息重置为初始状态并去除校验信息。
18.表单登录前的预校验，valid中存储的是验证成功或失败的信息
this.$refs.loginFormRef.validate( valid =>{
if(!valid)return;
})
19.登录功能实现
第⼀步：main.js中引⼊axios
import axios from"axios";
axios.defaults.baseURL ="127.0.0.1:8888/api/private/v1"
Vue.prototype.$http = axios
第⼆步：login⽅法中添加post请求代码。
this.$http.post('login',this.loginForm);
该请求得到的是⼀个promise对象，因此⽤在请求前加await，并在离请求最近的函数前添加async，之后结构得到的对象数据中的data 值。
this.$refs.loginFormRef.validate(async valid =>{
if(!valid)return;
const{data: res}=await this.$http.post('login',this.loginForm);
console.log(res)
})
根据res的meta属性判断是否登录成功(成功状态码：200)
a.status !==200)return console.log('登录失败')
console.log("登录成功");
19.登录消息提⽰
element.js中引⼊message组件，并把message挂载为vue原型上的⼀个组件，这样在每个组件中都可以弹出提⽰窗⼝
import{Message}from"element-ui";
Vue.prototype.$message = Message
登录按钮点击后的提⽰
a.status !==200)return this.$("登录失败")
this.$message.success("登录成功")
20.登录成功页⾯跳转
将登录成功后的token保存到客户端的sessionStorage中，（存sessionStorage是因为这是⼀次浏览期间保存的信息）之后新建Home组件，添加路由
window.sessionStorage.setItem("token",ken);
this.$router.push("home")
21.路由导航守卫控制访问权限（router中添加如下代码）
// 挂载路由导航守卫
router.beforeEach((to,from, next)=>{
// to 将要访问的路径
// from 代表从哪个路径跳转⽽来
// next 是⼀个函数，表⽰放⾏
// next() 放⾏  next('login') 强制跳转
if(to.path ==='/login')return next();
const tokenStr = Item('token')
if(!tokenStr)return next('/login')
next()
})
22.添加退出功能 清空sessionStorage并返回登录页⾯
<el-button type="info"@click="logout">退出</el-button>
logout(){
window.sessionStorage.clear()
this.$router.push('/login')
}
提交git仓库
git status：查看git状态(新增和修改了哪些⽂件)
git add.：将⽂件添加到暂存区
git commit -m “完成了登录功能”：暂存区所有代码提交到本地仓库
git branch：查看当前分⽀
git checkout master：切换到主分⽀
git merge login：合并login分⽀
git push：本地分⽀提交到云端
git push -u origin login：在云端创建login分⽀并将本地login分⽀提交到云端
—
—2021-05-16-2021-05-17

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。