表单验证
给el-form 添加属性:rules='formLoginRules'
,formLoginRules则是验证规则
在data中定义formLoginRules的规则
export default {
data() {
return {
loginForm: {
username: "",
password: ""
},
// 定义验证规则列表
loginFormRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" }
]
}
};
}
};
通过prop
属性设置验证规则
<el-form-item label="活动名称" prop="username">
以上验证只是给用户更好的交互体验,实则用户点击按钮后仍可以登录。所以我们应对定义的规则进行验证,通过则执行后面的请求,不通过则不请求
methods: {
submitForm (form) {
this.$refs.form.validate(valide => {
console.log(valide)
if (valide) {
console.log('发送 ajax 请求')
} else {
console.log('不发送')
}
})
}
}
安装axios
npm i axios
在入口文件中使用挂载到Vue原型上的方法,方便所有组件使用
import axios from 'axios'
Vue.prototype.$http = axios
配置请求路径
因为请求的接口很多,但接口准基是一样的,所以我们可以设置一下根路径
接口准基
http://127.0.0.1:8888/api/private/v1/
配置
axios.defaults.baseURL = http://127.0.0.1:8888/api/private/v1/
请求接口
submitForm(form){
this.$refs.form.validate(valid=>{
if(valid===false){
console.log('验证失败')
return false
}
thia.$http.post('login',this.loginForm).then(res=>{
const {status,msg} = res.data.meta
if(status===400){
console.log(msg)
return false
}
const {data:{token}} = res.data
localStorage.setItem('token',token)
})
})
}
异步改造
submitForm(){
try{
await this.$refs.form.validate()
var res = await this.$http.post('login',this.loginForm)
var {status,msg} = res.data.meta
if(status===400){
console.log(msg)
return false
}
console.log(msg)
var {data:{token}} = res.data
localStorage.setItem('token',token)
}catch(err){
console.log(err)
}
}
async
async是ES7才有的与异步操作有关的关键字
返回值
async返回的是一个promise
对象
async function f1(){
return 'hello world'
}
console.log(f1())
//输出 Promise {<fulfilled>: "hello world"}
可以使用.then
方法
f1().then(res=>{
console.log(res)
})
await
await操作符用于等待一个promise对象,它只能在异步函数async异步函数中使用
function testAwait (x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function helloAsync() {
var x = await testAwait ("hello world");
console.log(x);
console.log(1)
console.log(2)
}
helloAsync ();
// hello world 1 2
- Promise对象:await会暂停执行,等待Promise对象resolve,然后恢复async函数的执行并返回解析值
- 非Promise:直接返回对应的值
成功跳转
this.$router.push('home')
点击退出时要清除token
localStorage.clear()
this.$router.push('/login')
提示弹框
使用element-ui中的this.$message
显示提示弹框
async submitForm (form) {
try {
await this.$refs.form.validate()
var res = await this.$http.post('/login', this.loginForm)
var { status, msg } = res.data.meta
if (status === 400) {
//简写方式
this.$message.error(msg)
return false
}
this.$message({
message: msg,//提示消息
type: 'success',//弹框类型
duration: 2000,//显示时间
//弹窗关闭后执行的回调函数,此处要使用箭头函数让this指向Vue实例
onClose: () => {
localStorage.setItem('login', res.data.data.token)
this.$router.push('/home')
}
})
} catch (err) {
this.$message.error('验证失败')
}
}
路由守卫
因为在访问所有页面时都需要处于登录状态,也就是说必须存在token
值。所以我们使用vue-router中的路由守卫
来进行验证
.beforeEach()
中有三个参数
- to:到哪去
- from:从哪来
- next():要干嘛
router.beforeEach((to, from, next) => {
//首先访问登陆页面
if(to.path === '/login') {
return next()
}
//判断是否有token值
var token = localStorage.getItem('token')
//没有则返回登陆页面
if (!token) {
return next('/login')
}
//有token则跳转页面
next()
})
按需引入
这里以element-ui为例,如果不使用按需引入的话,文件打包成生产版本时会把所有组件全部存放进去,导致文件体积变大,所以我们就需要按需引入组件了
安装插件
npm install babel-plugin-component -D
修改 bable.config.js
module.exports = {
presets: [
..........
],
//添加代码
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
}
修改mian.js,合并按需引入的element-ui
import Vue from 'vue'
import { Button, Form, FormItem, Input, Message } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
// 进行全局挂载:
Vue.prototype.$message = Message
运行 npm run build
命令,分别查看完整导入和按需导入打包后体积变化
上传提交到码云
添加暂存区
git add .
添加到本地仓库
git commit -m '备注'
查看分支
git branch
切换主分支
git checkout master
合并分支
git merge login
提交master到码云
git push
切换分支到login
git checkout login
提交到码云
git push -u origin login
云
添加暂存区
git add .
添加到本地仓库
git commit -m '备注'
查看分支
git branch
切换主分支
git checkout master
合并分支
git merge login
提交master到码云
git push
切换分支到login
git checkout login
提交到码云
git push -u origin login