Vue电商后台实战--登录界面

具体教程可看：B站vue电商管理后台（悄悄说一下 课程很良心)

组件：ELment-UI中form表单组件

结构：
一个登录框：logo（设置水平居中+垂直上移50%）和登录表单（el-form表单）
背景区域高度设置100%

知识点:
1.水平、垂直居中总结
2.阴影

box-shadow:h-shadow v-shadow blur spread color inset

blur:模糊距离
spread：阴影尺寸
inset:内阴影 可以改为 outset 外阴影

3.el-form的使用

  <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login-form">
                <!-- 用户名 -->
                <!-- 校验 -->
                <el-form-item prop="username">
                    <!-- 进行双向数据绑定 将登录名和登录密码 绑定到loginForm上 -->
                    <el-input v-model="loginForm.username" prefix-icon="incofont icon-user"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" prefix-icon="iconfont icon-3702mina"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    
                    <el-button type="primary" @click="login">登录</el-button>
                    <!--重置表单 获取到表单元素 使用 resetFields方法重置表单内容-->
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                </el-form-item>
            </el-form>

表单数据绑定v-model="loginForm"
el-form-input
登录名： v-model=“loginForm.username”
密码：绑定到 v-model=“loginForm.password”
表单规则绑定v-rules="loginFormRules"
表单元素el-input使用 prop绑定到对应的对应的表单规则上
表单引用ref="loginFormRef"

vue实例的data属性中定义:

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: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]

            }
	}
}

事件：

1. 点击登录按钮，表单验证通过发起请求，响应成功，取出响应中的token保存到sessionStorage中（保留用户状态，以便下次使用），最后使用路由导航到后台首页。
2. 点击重置按钮，表单清空，恢复默认设置

 methods:{
 //重置表单
 resetLoginForm(){
	//	获取表单引用,调用事件resetFields()重置表单
	this.$refs.loginFormRef.resetFields();
},
 //登录验证
 	login(){
 		this.$refs.loginFormRef.validate(aysnc valid=>{
 			if(!valid) return;
 			//发起的请求，返回的数据是promise对象，从对象中解构出data 赋值给res
 			const {data:res}=await this.$http.get("login");
 			if(res.meta.status!== 200) return this.$message.error('请输入正确信息');
 			//将返回的token存储再本地
 			window.sessionStorage.setItem('token',res.data.token);
 			//编程式路由导航
 			this.$router('/home');
 		})
 	}
 }

4.iconfont图标引入
推荐：vue 中使用iconfont（阿里巴巴图标库），解决iconfont 只显示小方框的问题
5.路由
路由占位符：<router-view></router-view>
路由重定向：redirect
将默认地址重定向到登录界面

routes:[
{path:'/',redirect:'/login'}，
//{path:"/",redirect:{name:'login'}}与上面的效果一样 使用name属性，设置路由重定向
{path:'/login',name:'login',component:Login}
]

编程式路由导航

this.$router.push()

会向history添加一条新纪录
参数可以是字符串地址或对象
具体参考：编程式路由导航
注：参数设置里，由path,params就无效；可以将参数放在path上
路由导航守卫：在项目中，判断是否携带服务器返回保存到sessionStorage中的token值监听登录界面到后台的路由跳转

router.beforeRouterUpdate(to,from,next){
	//to表示来的网页地址
	//from表示下面要跳转到的网页地址
	//next()放行，如果不符合条件 强制跳转到指定页面next(path)
	if(to.path === '/login') return next();
	const tokenStr=window.sessionStorage.getItem('token');
	if(!tokenStr) next('/login');
	next();
}

7.git
切换并创建login分支：git checkout -b login
工作区添加到暂存区:git add .
暂存区提交到git仓库:git commit -m '完成登录界面的开发'.
推送到github中:git push -u origin login
(第一次推送使用 -u ，如果已经github中已经存在login分支,可以直接git push)
切换到master分支：git checkout master
将login分支合并到master：git merge login
将master分支的内容推送到远端github：git push
查看仓库状态：git status
查看分支:git branch
git学习