Vue学习(五)登陆页面之重置和发起登陆请求及弹窗提示
- 表单重置
- 根据预验证结果决定是否发出登陆请求
- 编写代码
- 启动api服务器
- 弹窗提示
表单重置
直接调用element ui给我们写好的函数就可以了。
获取当前表单的实例对象,通过这个实例对象,调用给出的重置函数。
首先确认当前表单有实例对象
<el-form ref="loginref"
接下来在重置按钮绑定一个事件
<el-button type="info" @click="reset">重置</el-button>
接下来在行为区找到method节点,编写这个事件函数,通过this找到refs然后指向本实例对象,调用重置函数。
reset () {
this.$refs.loginref.resetFields()
}
`
运行
重置前
重置后,恢复默认
根据预验证结果决定是否发出登陆请求
编写代码
首先当预验证结果不为True时,直接返回。
if(!valid) return;
验证为True时,发出请求,需要引用包,所以在入口文件main.js中
import axios from 'axios'
引入后把这个包挂载到Vue的原型对象上,这样的话,每一个Vue的组件都可以通过this直接访问到http,从而发起AJAX请求。
Vue.prototype.$http = axios
接下来尽量为axios配置请求的根路径,地址为后端接口所在文件夹
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
完整的引入axios代码
// 引入包
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios
接下来返回登陆函数继续编写预验证成功时的行为。通过this访问原型的http,发起post请求,请求地址为login(查看自己后台可知),请求时携带的参数可以直接用之前的loginform。
this.$http.post('login',this.loginform);
现在的login代码
login () {
this.$refs.loginref.validate((valid) => {
// console.log(valid)
if (!valid) return;
this.$http.post('login',this.loginform);
})
接下来我们准备运行了,但如果要访问api接口,得保证api服务器处于运行状态。
启动api服务器
首先启动mysql
然后找到后端文件夹,运行app.js。代开powershell窗口输入命令启动服务器
接下来再写接收的代码
login () {
this.$refs.loginref.validate((valid) => {
// console.log(valid)
if (!valid) return
const result = this.$http.post('login', this.loginform)
console.log(result)
})
}
运行结果,输入账号密码后,会返回一个promise对象。
我们需要简化一下promise对象,可以用async,await简化。(await只能用在async修饰的方法中)
login () {
this.$refs.loginref.validate(async valid => {
// console.log(valid)
if (!valid) return
const result = await this.$http.post('login', this.loginform)
console.log(result)
})
}
再次运行,会获取一个简化后具体对象数据
该对象共有6个属性,都是axios帮我们封装好的,**其中data是服务器返回的真实数据,我们只需要关注这个属性。**所以我们可以从这个对象上直接将data解构赋值出来。
const { data: res } = await this.$http.post('login', this.loginform)
console.log(res)
再次运行
可以看到,用户不存在,状态码为400,说明登陆失败。当状态码为200时,登陆是成功的。所以可以根据状态码来给用户返回相应信息。
if (res.meta.status !== 200) return console.log('用户名或密码错误')
console.log('登陆成功')
运行
弹窗提示
上面的提示我们都是使用的console,用户无法看到。所以我们可以用element ui中提供的组件来进行弹窗提示。
首先要在plugins下的elements.js中引入需要的组件元素Message。
import { Button, Form, FormItem, Input, Message } from 'element-ui'
它的配置方式与之前的不太一样,需要进行全局挂载。将弹窗组件挂载到Vue的原型对象上,这样每一个组件都可以通过this访问到$message,从而进行弹窗提示。
Vue.prototype.$message = Message
然后根据官网给的样例,来修改我们的代码。
if (res.meta.status !== 200) return this.$message.error('账号或密码错误')
this.$message.success('登陆成功')
保存后运行