接上篇《11、绘制登录组件-数据验证篇》
上一篇我们讲解了如何实现账号密码的数据验证、表单的重置以及登录前的预验证。
本篇我们来讲解点击登录后发起登录请求的操作。
一、进行登录请求
上一篇我们在点击登录按钮前校验了表单内容的合法性,下面我们就根据表单的校验成功与否,来决定是否执行登录。
我们在原来的login方法中,判断表单校验方法中的valid形参,如果是false的时候,就不进行登录请求,如果是true,就进行登录请求:
login(){
this.$refs.loginFormRef.validate((valid)=>{
if(!valid) return;//false 不执行登录
//true执行登录
});
}
这里需要调用的是之前接口文档中的login接口:进行登录需要执行网络服务请求,我们这里使用axios组件。首先在原来的main.js中添加axios的引用(组件已经在项目初始化的时候安装了),指定我们的后台接口的根路径,并将axios对象赋值给全局$http对象:
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 = 'http://127.0.0.1:8888/api/private/v1/' //定义根路径
Vue.prototype.$http = axios //在原型链上给$http赋值为axios对象
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
此时我们回到login方法,这个时候就可以使用axios进行网络请求了:
login(){
this.$refs.loginFormRef.validate(async (valid)=>{
if(!valid) return;//false 不执行登录
//true执行登录
const result = await this.$http.post("login",this.loginFrom);
console.log(result);
});
}
因为登录接口需要账号密码,而我们表单中的账号密码信息都封装在loginFrom对象中,所以这里直接传该对象。
然后因为axios的post请求返回的是一个Promise对象,需要用await修饰,然后上面整个方法体要修饰为async同步锁,才能等post请求结束后,result来接收到返回的值。
这里我们先打印出来返回的result数据,看看都是什么信息。
我们要验证接口请求效果,首先保证我们之前的Mysql数据库是启动状态:
然后启动后台NodeJS服务:服务启动成功后,我们启动vue前端项目,在登录页面输入账号密码试试:
F12打开开发者工具,可以看到axios为我们封装好的返回对象,其中data就是服务端的返回信息。
我们可以看到data中的data是数据,meta是提示信息,我们可以用解构表达式只接受data参数,并赋值给一个对象,打印出来:
login(){
this.$refs.loginFormRef.validate(async (valid)=>{
if(!valid) return;//false 不执行登录
//true执行登录
const {data:res} = await this.$http.post("login",this.loginFrom);
console.log(res);
});
}
再次请求,可以看到返回的两个参数的内容:
二、提示用户登录结果
通过观看API文档可以知道,当status为200的时候,是登录成功,其余都是登录失败,我们可以加一个判断,给用户一个弹框反馈:
login(){
this.$refs.loginFormRef.validate(async (valid)=>{
if(!valid) return;//false 不执行登录
//true执行登录
const {data:res} = await this.$http.post("login",this.loginFrom);
console.log(res);
if(res.meta.status !== 200) return alert("登录失败!");
alert("登录成功!");
});
}
效果:
这里的弹框非常丑陋,我们需要用到elementUI中的Message消息提示组件,分为四张,分别显示「成功、警告、消息、错误」的带颜色效果浮窗:
样例代码:
<template>
<el-button :plain="true" @click="open2">成功</el-button>
</template>
<script>
export default {
methods: {
open1() {
this.$message('这是一条消息提示');
},
open2() {
this.$message({
message: '恭喜你,这是一条成功消息',
type: 'success'
});
},
open3() {
this.$message({
message: '警告哦,这是一条警告消息',
type: 'warning'
});
},
open4() {
this.$message.error('错了哦,这是一条错误消息');
}
}
}
</script>
我们来编写一下,首先在element.js中引入我们的Message组件:
import Vue from 'vue'
import { Button } from 'element-ui'
import {Form,FormItem} from 'element-ui'
import {Input} from 'element-ui'
import {Message} from 'element-ui' //弹框提示组件
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message = Message //给原生链上的$message指定为Message
然后修改刚刚的login方法,根据不同的登录反馈结果,显示不同的弹框:
login(){
this.$refs.loginFormRef.validate(async (valid)=>{
if(!valid) return;//false 不执行登录
//true执行登录
const {data:res} = await this.$http.post("login",this.loginFrom);
console.log(res);
if(res.meta.status !== 200) return this.$message.error("登录失败!"+res.meta.msg);
this.$message.success("登录成功!");
});
}
效果:
至此,我们的登录请求部分编写完成。
下一篇我们来处理进登录成功之后的行为。
参考:黑马程序员(www.itheima.com)Vue项目实战教学视频
转载请注明出处:https://blog.csdn.net/acmman/article/details/119971099