第二节：基础配置(路由、less、静态资源、axios、ESLint)、基础组件(Form、Message) 之登录页面搭建
一.基础配置
1. 路由配置
(1). 创建项目，已经引入了Vue-Router，这里的版本为：3.2.0，并自动创建了router→index.js文件。
(2). 在index.js文件中：
A. 导入vue、vue-router
B. 导入其它子页面
C. 配置路由规则，默认进入/login登录页面，home页面下配置子路由，home页面需要添加路由占位符
<router-view></router-view>
D. 挂载路由导航守卫，token不存在的话，不允许单独跳转到除了login以外的页面，同意跳转到登录页面。
E. 默认对外导出
代码分享：
import Vue from 'vue' import VueRouter from 'vue-router' // 导入各个子页面(可以用相对路径 或 根路径，@代表根路径) import Login from '../components/Login.vue' import Home from '@/components/Home.vue' import Welcome from '@/components/Welcome.vue' import Users from '@/components/user/Users.vue' import Rights from '@/components/power/Rights.vue' import Roles from '@/components/power/Roles.vue' import Params from '@/components/goods/Params.vue' import GoodsList from '@/components/goods/List.vue' import Add from '@/components/goods/Add.vue' import Order from '@/components/order/Order.vue' import Report from '@/components/report/Report.vue' Vue.use(VueRouter) const router = new VueRouter({ routes: [{ path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home, redirect: '/welcome', children: [{ path: '/welcome', component: Welcome }, { path: '/users', component: Users }, { path: '/rights', component: Rights }, { path: '/roles', component: Roles }, { path: '/params', component: Params }, { path: '/goods', component: GoodsList }, { path: '/goods/add', component: Add }, { path: '/orders', component: Order }, { path: '/reports', component: Report } ] } ] }) // 挂载路由导航守卫 router.beforeEach((to, from, next) => { // to 将要访问的路径 // from 代表从哪个路径跳转而来 // next 是一个函数，表示放行 // next() 放行 next('/login') 强制跳转 if (to.path === '/login') return next() // 获取token const tokenStr = window.sessionStorage.getItem('token') if (!tokenStr) return next('/login') next() }) // 默认导出 export default router
PS. 如何手动调用跳转：
this.$router.push('/home')
2. 样式配置
(1). 项目中要用到less语法，所以需要安装less 和 less-loader，开发依赖
【npm install less -D】 （4.1.1）
【npm install less-loader@7.x -D】 （7.3.0）不能装太高版本
(2) style标签中增加 lang="less"，表示支持less语法，另外增加scoped属性，代表写的样式仅当前页面有效。
<style lang="less" scoped></style>
3. 静态资源
静态资源，比如全局样式、第三方字体文件等，统一放在 src下的assets文件夹中。然后在main.js文件中导入全局样式和第三方字体。
// 导入字体图标
import './assets/fonts/iconfont.css'
// 导入全局样式表
import './assets/css/global.css'
4. axios封装和使用
(1). 通过指令【npm install axios -save】进行安装
(2). 在main.js中进行导入
(3). 配置baseURL、请求拦截中添加表头(存放token)、利用Vue.prototype进行全局对象封装为$http。
代码分享：
// 导入axios并进行配置 import axios from 'axios' axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/' axios.interceptors.request.use(config => { // 添加表头信息 config.headers.Authorization = window.sessionStorage.getItem('token'); return config; }) Vue.prototype.$http = axios
(4).使用：以post请求为例，借助async和await，干掉回调，以同步的编码方式进行获取，然后利用解构赋值，拿到返回对象中的data属性(注意，不是接口返回值的data)，然后起别名为res。
async login () { const { data: res } = await this.$http.post('login', this.loginForm) if (res.meta.status !== 200) return this.$message.error('登录失败！') this.$message.success('登录成功') }
5. ESLint警告处理
创建项目的时候，选择安装了ESLint，相关程序集如下：
(1). 运行指令【npm run lint】或者(npm run serve)， 会报很多错误和警告，如下图：
但有些警告我们并不像处理，也不想让它提示，那么就在根目录下的 .eslintrc.js 文件中进行关闭
rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁止超过1个空行报错规则，0代表关掉 'no-multiple-empty-lines': 0, 'no-tabs': 0, 'eslint-disable-next-line': 0, 'space-before-function-paren':0, 'indent':0 }
(2). 如果你想更加简单粗暴的关掉验证，可以新增一个.eslintignore文件，直接关掉 .vue文件和 .js文件的验证。
*.vue
*.js
二. 基础组件
1. Form表单
(1). 获取表单对象
在el-form中新加一个ref=“loginFormRef”属性，然后通过 this.$refs.loginFormRef 就可以获取该对象了，可以调用该对象的相关方法。
PS：这是一种通用的方式，适用于任何element组件。
(2). 值绑定
在el-form中通过 :model="loginForm"进行整个对象的绑定，然后在对应 input标签中通过 v-model="loginForm.username"进行子属性的绑定。
(3).验证规则绑定(含自定义验证)
在el-form中通过 :rules="loginFormRules"进行整个验证规则对象的绑定，然后在对应el-form-item标签中通过 prop="属性值" 进行子属性规则的绑定。
PS 自定义验证规则：
需要自定义一个方法，方法有3个参数，rule、value、callback，重点是后两个；value是验证的内容，callback是回调，验证通过，直接返回 callback(); 验证不通过，则声明 callback(new Error('请输入数字值'));
然后定义的方法赋给validator属性。
代码如下：
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> <script> export default { data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年龄不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } } }, 1000); }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { ruleForm: { pass: '', checkPass: '', age: '' }, rules: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>
(4). 表单校验
调用validate进行表单内所有内容的校验
this.$refs.loginFormRef.validate(valid => { console.log(valid) if (!valid) return // 下面表示校验通过，进行业务编写 })
(5). 表单重置
this.$refs.loginFormRef.resetFields()
2. Message消息提示
(1). 全局引入和封装
import { Message } from 'element-ui'
Vue.prototype.$message = Message
(2). 使用
this.$message.success('登录成功') this.$message.error('登录失败！')
或
this.$message({ showClose: true, message: '错了哦，这是一条错误消息', type: 'error' });
三. 登录界面
1. 效果分享
2. 代码分享
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区域 -->
<div class="avatar_box">
<img src="../assets/logo.png" 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="iconfont icon-user"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password">
</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: [{
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: {
// 1.重置事件
resetLoginForm () {
// 通过$refs可以达到表单中ref的属性值
this.$refs.loginFormRef.resetFields()
},
// 2. 登录事件
login () {
// 2.1 先对整个form表单进行规则校验
this.$refs.loginFormRef.validate(async valid => {
console.log(valid)
if (!valid) return
// 2.2 校验通过，发送请求
const {
data: res
} = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200) return this.$message.error('登录失败！')
this.$message.success('登录成功')
// 2.3. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
// 2.3.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
// 2.3.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
window.sessionStorage.setItem('token', res.data.token)
// 2.4 通过编程式导航跳转到后台主页，路由地址是 /home
this.$router.push('/home')
})
}
}
}
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.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 {
width: 100%;
height: 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>
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
