一、事前准备
二、实现步骤
2.1创建路由对象并添加配置
//当前项目的路由模块
//如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能
import Vue from 'vue'
//安装好后就会有vue-router
import VueRouter from 'vue-router'
//在当前项目中安装路由
Vue.use(VueRouter)
// 1.创建路由对象
const router = new VueRouter({
// 2.添加路由配置，通过routes来添加路由配置
routes: [
//3.添加具体的路由配置：配置的本质就是将路由映射到组件
//一般来说，我们可以设置为如下几个选项：name path component redirect children
// name:路由名称
//path:路由路径
//component:路由所映射的组件对象
{
name: 'login',
path: '/login',
// 异步引入组件
component: () => import('@/views/login.vue')
},
]
})
// 4.暴露
export default router
2.2登录页引入路由
import { login } from "@/apis/user";
2.3制作登录组件
实现逻辑:
1.书写静态样式
2.element挑选适合的组件,删去不需要的部分,这里使用到的是:
from组件(表单验证)
input(icon图标)
Button按钮
3.使用validate验证用户信息输入是否规范，失焦时一次验证，点击登录二次验证。
4.data中使用rules定义校验规则
5.在表单获取焦点(focus)时清除校验信息(clearValidate),意指在用户输入时不要提示,提升用户体验.
6.书写不规范、登录失败、输入框为空等$message给出提示。
7.点击登录validate验证信息，校验成功获取表单信息发送登录请求，登录请求成功给出提示，并储存用户信息。登录失败给提示不发送请求。
8.跳转前使用导航守卫从储存获取token进行验证，由于这个是后台管理系统，除了登录页外都需要验证。
validate的使用：Element------validate表单验证代码示例与校验规则
登录页代码
.<template>
<div class="login">
<div class="container">
<!-- 头像 -->
<img src="../assets/headimg.jpg" alt="" class="avatar" />
<!-- el-form -->
<!-- :model:值为整个表单的数据 -->
<!-- rules:传入约定的验证规则,是一个对象，里面的每组键值对就是一条规则，一条规则就是一个数据属性的规则-->
<!-- ref:当前表单的标识,给DOM元素或子组件注册引用信息 -->
<el-form
:model="user"
:rules="rules"
ref="ruleForm"
class="demo-ruleForm"
>
<!-- el-form-item:就是一个表单元素 -->
<!-- prop:设置为需校验的字段名 -->
<!-- v-model:数据绑定,这里为用户框/密码框 -->
<!-- prefix-icon:在 input 组件首部增加显示图标，也可以通过 slot 来放置图标。 -->
<!-- focus:焦点事件,在 Input 获得焦点时触发 -->
<!-- 用户名框 -->
<el-form-item prop="username">
<el-input
v-model="user.username"
placeholder="请输入用户名称"
prefix-icon="el-icon-user"
@focus="clearRules('username')"
></el-input>
</el-form-item>
<!-- 密码框 -->
<el-form-item prop="password">
<el-input
v-model="user.password"
placeholder="请输入密码"
type="password"
prefix-icon="el-icon-lock"
@focus="clearRules('password')"
></el-input>
</el-form-item>
<!-- 按钮 -->
<!-- type、round：定义按钮样式 -->
<!-- click：点击触发事件 -->
<el-button type="primary" round class="login-btn" @click="userlogin"
>登录</el-button
>
</el-form>
</div>
</div>
</template>
<script>
import { login } from "@/apis/user";
export default {
data() {
return {
// 表单成员
user: {
username: "10086",
password: "123",
},
/*通过rules定义校验规则
required:必填
message:未填时触发报错信息
trigger:触发器,失去焦点是触发
pattern:正则*/
rules: {
username: [
{ required: true, message: "请输入用户名称", trigger: "blur" },
{
pattern: /^1\d{4}$|^1d{10}$/,
message: "请输入合法的手机号",
trigger: "blur",
},
],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
},
};
},
methods: {
// clearValidate:表单聚焦时移除表单项的校验结果,需传入prop属性或数组,否则移出整个表单校验结果
clearRules(a) {
this.$refs.ruleForm.clearValidate(a);
},
async userlogin() {
// 点击时调用validate验证
this.$refs.ruleForm.validate(async (valid) => {
// 如果数据为true则发送登陆请求
if (valid) {
let res = await login(this.user);
console.log(res);
//如果请求成功转换成字符串储存用户信息,并用$message发送提示
if (res.data.message == "登录成功") {
localStorage.setItem("usermanager", JSON.stringify(res.data.data));
this.$message({
message: res.data.message,
type: "success",
});
//成功后跳转首页
this.$router.push({ path: "/index" });
} else {
// 请求失败发送提示
this.$message({
message: res.data.message,
type: "error",
});
}
} else {
this.$message({
message: "用户输入不合法",
type: "error",
});
}
});
},
},
};
</script>
.<style lang="less" scoped>
//样式
.login {
position: fixed;
width: 100%;
height: 100%;
background-color: #2f4050;
.container {
position: absolute;
left: 0;
right: 0;
width: 400px;
padding: 0px 40px 15px 40px;
margin: 200px auto;
background: white;
.avatar {
position: relative;
left: 50%;
width: 120px;
height: 120px;
margin-left: -60px;
margin-top: -60px;
box-sizing: border-box;
border-radius: 50%;
border: 10px solid #fff;
box-shadow: 0 1px 5px #ccc;
overflow: hidden;
}
.login-btn {
width: 100%;
}
}
}
</style>
导航守卫代码
//添加导航守卫
router.beforeEach((to, from, next) => {
// console.log(to, from, next);
if (to.name == 'login') {
next()
} else {
let token = JSON.parse(localStorage.getItem('usermanager') || "{}").token
if (token) {
next()
} else {
next({ path: '/login' })
}
}
})
