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('登陆成功')

保存后运行