vue elementui 表单校验+实现登录功能+退出功能
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
使用show-password属性即可得到一个可切换显示隐藏的密码框
<!-- 登录表单-->
<el-form ref="loginFormRef" class = "login-form" :model="loginForm" :rules="loginFormRules">
<el-form-item prop="username">
<el-input placeholder="请输入用户名" prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input show-password placeholder="请输入密码" prefix-icon="iconfont icon-lock_fill" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item >
<el-button type="primary" class="login-btn" @click="login">登录</el-button>
</el-form-item>
</el-form>
<script>
export default {
data(){
return{
// 存储登录表单输入的数据(表单的数据绑定对象)
loginForm:{
username:'',
password:''
},
// 表单的校验规则
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:{
login(){
// 判断校验是否成功 （取到表单对象） 点击等候先校验 valid校验成功返回true
this.$refs.loginFormRef.validate(valid=>{
if(!valid){
return
}
// 发送请求判断是否登录成功
console.log('点击登录发送请求')
})
}
}
}
</script>
<script>
export default {
data(){
return{
// 存储登录表单输入的数据(表单的数据绑定对象)
loginForm:{
username:'',
password:''
},
// 表单的校验规则
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:{
login(){
// 判断校验是否成功 （取到表单对象） 点击等候先校验 valid校验成功返回true 这样不用每次点击登录就发请求校验
this.$refs.loginFormRef.validate(async valid=>{
if(!valid){
return
}
// 发送请求判断是否登录成功（用户信息在res.data中）
const {data:res} = await this.$http.post('/login',this.loginForm)
if(res.meta.status !==200){
return this.$message.error('登录失败');
}
this.$message.success('登陆成功')
// 将用户信息保存到sessionStorage中
sessionStorage.setItem('userInfo',JSON.stringify(res.data))
this.$router.push('/home')
})
}
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// 导入全局样式表
import './assets/imgs/css/global.css'
//导入字体图标
import './assets/fonts/iconfont.css'
// 引入axios
import axios from 'axios'
Vue.prototype.$http = axios
// 配置axios基础路径
axios.defaults.baseURL = 'http://www.tangxiaoyang.vip:8888/api/v2'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes = [
// 访问根路径的时候跳转到login
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: () =>
import ('../components/Home.vue')
}
]
const router = new VueRouter({
routes
})
export default router
components 新建home组件
很多页面在未登录的情况下是不允许访问，所以需要对路由进行限制
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes = [
// 访问根路径的时候跳转到login
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: () =>
import ('../components/Home.vue')
}
]
const router = new VueRouter({
routes
})
// 配置路由守卫
// 目标路由对象(包含路由信息)，来源路由对象，接下来要执行的操作
router.beforeEach((to, from, next) => {
// 如果访问登录页面,则放行
if (to.path === '/login') {
return next()
}
// 如果访问的不是登录页面并且用户未登录，则跳转到/login 从sessionStorage中获取用户信息,因为在登录功能中成功时向sessionStorage中存储了
const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
if (!userInfo) {
return next('/login')
}
// 如果用户已登录,则放行
next()
})
export default router
methods:{
login(){
// 判断校验是否成功 （取到表单对象） 点击等候先校验 valid校验成功返回true 这样不用每次点击登录就发请求校验
this.$refs.loginFormRef.validate(async valid=>{
if(!valid){
return
}
// 发送请求判断是否登录成功（用户信息在res.data中）
const {data:res} = await this.$http.post('login',this.loginForm)
if(res.meta.status !==200){
return this.$message.error('登录失败');
}
this.$message.success('登陆成功')
// 将用户信息保存到sessionStorage中
sessionStorage.setItem('userInfo',JSON.stringify(res.data))
this.$router.push('/home')
})
}
}
Home.vue
<template>
<el-container>
<!-- 头部 -->
<el-header>
<div class="left">
<img src="../assets/imgs/shop.png" alt="">
<span>后台管理系统</span>
</div>
<div class="right">
<span>欢迎您：{{userInfo.username}}</span>
<el-button type="danger" size="mini" @click="logout">退出</el-button>
</div>
</el-header>
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 主题区域 -->
<el-main>Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data(){
return{
userInfo:null
}
},
created(){
this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
},
methods:{
logout(){
this.$confirm('确定要退出登录吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 点击确定后 清除session用户信息
sessionStorage.clear()
// 跳转到登录页面
this.$router.push('/login')
}).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消退出'
// });
});
}
}
}
</script>
<style lang='less' scope>
.el-container{
height: 100px;
}
.el-header{
background: url('../assets/imgs/header_bg.gif') repeat-x center;
height: 50px!important;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
.left{
display: flex; //显示在同一行
align-items: center; // 垂直对齐
img{
width: 40px;
margin-right: 20px; // 图片和文字的距离
}
span{
font-size: 20px;
}
}
.right{
margin-left: 10px;
}
}
</style>
