1, 登录的逻辑!
1, 表单数据的搜集,校验,还有提交
用到了element-ui
2, 提交后台用到了axios
上面都很简单! 我们还有路由守卫的写法
element 动态(非全局引入) 这点的话,我们用vue ui (界面形式引入!)
————————————————————————
下面给大家截图:
路由守卫的写法
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue'
import Home from './components/Home.vue'
import CatLogin from './components/CatLogin.vue'
import Admin from './components/admin.vue'
Vue.use(Router)
const router = new Router({
routes: [
{ path: '/', redirect: '/catLogin' },
{ path: '/login', component: Login },
{ path: '/home', component: Home },
{
path: '/catLogin',
component: CatLogin
}, {
path: '/admin',
component: Admin
}
]
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数,表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/catLogin') return next()
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/catLogin')
next()
})
export default router
这个非常简单:
axios 全局引入挂在到原型上,非常简单!
扫描二维码关注公众号,回复:
12574132 查看本文章
<template>
<div class="login_container">
<div class="login">
<div class="logo">
<img src="../assets/logo.png" alt="">
</div>
<el-form class="loginform" ref="form" :rules="rules" :model="form">
<el-form-item prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item prop="password" >
<el-input v-model ="form.password" type="password"></el-input>
</el-form-item>
<div class="wyj">
<el-button type="primary" @click="submit">提交</el-button>
<el-button type="info" @click="reset">重置</el-button>
</div>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return {
form:{
username:'admin',
password:'123456'
},
rules:{
username: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请选择活动区域', trigger: 'blur' }
]
}
}
}
,
methods: {
reset(){
// 清除表单选项,这个最重要!
this.$refs.form.resetFields();
},
submit(){
// 1,全局校验一下,
// 2 真正去提交?
// validate 方法校验
this.$refs.form.validate( async ret =>{
// if(!ret) return this.$message.;
// 1,如果全局校A成功的话 ,就走这个逻辑
if(!ret) return this.$message.error("请输入合法的用户名和密码");
// 2,
// 校验成功,真正的登录逻辑
//axios 操作
const response = await this.$http.post("login",this.form);
if(response.status!=200) return this.$message.error("login error")
// success
const {data} = response;
// 1, sessionStorage
// let token = data.token;
window.sessionStorage.setItem("token",data.token)
// 2 ,跳转到后台主页
//跳转到后天主页!
console.log(this.$router)
this.$router.push("/admin")
})
}
}
}
</script>
<style lang="less" scoped>
.login_container {
background: #2a4b6a;
position: relative;
height: 100%;
.login{
position: absolute;
width: 450px;
height: 300px;
background: #fff;
border-radius: 7px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.logo{
width:130px;
height: 130px;
border-radius: 50%;
padding: 10px;
background-color: #fff;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 7px #EEE;
img {
width: 100%;
height: 100%;
background: #eee;
border-radius: 50%;
}
}
}
.loginform {
position: absolute;
bottom:0;
left:0;
width:100%;
padding:0 15px;
margin:0;
box-sizing: border-box;
}
.wyj {
width:100%;
display: flex;
justify-content: space-around;
margin-bottom: 10px;
}
}
</style>
上面这些是很简单的!
element 这个真的是非常的好用,组件库!
大概我们去官网看下文档
https://element.eleme.cn/#/zh-CN/component/form
学的时候,不要着急!