vue-element学习(一)
day1
1.使用vue ui创建项目,并下载相关插件vue-router、element-ui、axios、less、less-loader
这里说一下,如果是为了学习方便,建议先关闭eslint语法校验,要不然写起来很麻烦(初学写的不太规范,然后他就会各种报错)
2.清理不需要的组件和内容(保持一个干净的环境)
3.在components文件夹下建立Login登录组件
4.登录组件布局
5.登录组件头部布局
6.登录组件表单布局
7.表单小图标
8.登录表单数据绑定
9.登录表单数据验证
10.登录表单数据重置
11.登录成功或失败的提示
12.导航守卫实现(遇到的问题)
13.退出功能实现
目录结构:
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import '@/assets/css/global.css'
import axios from "axios";
axios.defaults.baseURL = 'https://lianghj.top:8888/api/private/v1/';
Vue.prototype.$http = axios
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home
}
]
const router = new VueRouter({
routes
})
export default router
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next();
const tokenStr = window.sessionStorage.getItem('token');
if (!tokenStr) return next('/login');
next()
})
assets/css/global.css
html,body,#app {
margin: 0;
padding: 0;
height: 100%;
}
Login.vue
<template>
<div class="login_container">
<!-- 登录盒子区域-->
<div class="login_box">
<!-- 图像区域-->
<div class="avatar_box">
<img src="../assets/user.jpg" alt="">
</div>
<!-- 输入框区域-->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<!-- 用户名-->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
</el-form-item>
<!-- 密码-->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
</el-form-item>
<!-- 登录按钮-->
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: 'admin',
password: '123456'
},
loginFormRules: {
username: [
{require: true,message: '请输入用户名',trigger: 'blur'},
{min: 3,max: 8,message: '用户名在3到8个字符之间',trigger: 'blur'}
],
password: [
{require: true,message: '请输入密码',trigger: 'blur'},
{min: 6,max: 12,message: '密码在6到12个字符之间',trigger: 'blur'}
]
}
}
},
methods: {
resetLoginForm() {
this.$refs.loginFormRef.resetFields();
},
login() {
this.$refs.loginFormRef.validate(async valid => {
if (!valid) return;
const {data:res} = await this.$http.post('login',this.loginForm);
if (res.meta.status !== 200) return this.$message.error("用户名或密码错误");
this.$message.success("登录成功");
window.sessionStorage.setItem('token',res.data.token);
this.$router.push('/home')
})
}
}
}
</script>
<style lang="less" scoped>
.login_container {
height: 100%;
background-color: #2b4b6b;
}
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
.avatar_box {
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
img {
height: 100%;
width: 100%;
border-radius: 50%;
background-color: #eee;
}
}
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
display: flex;
justify-content: flex-end;
}
</style>
Home.vue
<template>
<div>
<el-button type="info" @click="logout">退出</el-button>
</div>
</template>
<script>
export default {
methods: {
logout() {
window.sessionStorage.clear();
this.$router.push('/login')
}
}
}
</script>
<style lang="less" scoped>
</style>
login页面
home页面
最后写一下添加导航守卫时遇到的问题
1.当在使用路由导航守卫做路由控制时,写如下代码后,控制台报错Cannot access 'router' before initialization
// 挂载路由导航守卫
router.beforeEach((to,from,next) =>{
if (to.path === '/login') return next();
const tokenStr = window.sessionStorage.getItem('token');
if (!tokenStr) return next('/login')
next()
})
const router = new VueRouter({
routes
})
export default router
原因是这段代码写在了路由初始化代码之前,应该把挂载路由导航守卫放在路由初始化代码后面,如下
const router = new VueRouter({
routes
})
export default router
// 挂载路由导航守卫
router.beforeEach((to,from,next) =>{
if (to.path === '/login') return next();
const tokenStr = window.sessionStorage.getItem('token');
if (!tokenStr) return next('/login')
next()
})
这样就可以了