第四章 axios

前言

最近在搞小程序，抱歉又来晚了。。不过想给大家安利一波~mpvue，用vue的语法写小程序，可以同时跑web和小程序，贼潇洒。话说现在vue已经快一统天下了。

把axios写入原型链

在上一章，我们已经安装好了axios，想用就得把它引入，为了不必每个组件都得引入一次，我们把它搞成全局的，在src/main.js中，加入以下代码：

import axios from 'axios'Vue.prototype.$http= axios复制代码

假数据

在第二章中，我们也安装了mock.js（没有安装的，请认真听讲），接着在src下新建mock/index.js，代码如下：

//mock/index.jsimport Mock from 'mockjs' //验证账号密码  let uTable = {    'password': '123456',    'username':"admin"}const data = Mock.mock('http://user.com/login', (param) => {    let dataJson = JSON.parse(param.body)    if((dataJson.username == uTable.username) && (dataJson.password == uTable.password)) {        return 'ok'    } else {        return 'no'    }})export default {    data}复制代码

这里有必要讲一下了，mock.js的用法请自行查阅官方文档，我讲下业务逻辑：在组件中用axios调用接口时，mock进行拦截，然后根据我们的定义，生成并返回给前端需要的数据。就是这么简单，这段登录接口的逻辑是，首先自己定义一个存放账号和密码的对象，然后根据请求传来的数据，判断是否与我们存放的账号密码一致，如果一致的话，就返回ok，否则返回no。然后在src/main.js中，加入：

import Mock from '@/mock/index'复制代码

假数据已经ok了，现在进入上一章写好的组件src/pages/user/Login.vue中：

    复制代码

这里有几个知识点讲一下：

• v-model：把input和data中定义的变量绑定，这样input中的值变化时，会自动更新data中的值。
• $http：就是我们刚才引入的axios。
• $message.error：element定义的弹出框。

结语

到这里我们的登录页逻辑已经基本完成了，前几天搞了下gitHub，结果代码上传不了，头大了。。我再鼓捣鼓捣。另外我建了个Q群：57991865，大家有什么疑惑，欢迎进群讨论。

所有章节