vue+axios-mock-adapter+mockjs实现前端脱离后台开发

唯雪
2018-01-08 15:29:47
技术小栈
前端 nodejs vue

我们构建一个简单的vue前端应用，通过mockjs模拟后台，获取一个具有86个用户信息的数据

第一部分：安装vue-cli快速搭建一个vue应用

1、安装vue-cli,这一部分就不赘述了，用过vue的朋友应该都很熟悉了。

需要说明的是vue-cli全局安装一次就可以了；

2、然后在自己需要的地方建立应用：

$ vue init webpack vue-demo-mock

*vue-demo-mock是我的应用名称

安装过程中会出现如下提醒，直接回车下去，当让也可以根据自己的需求配置

唯雪博客

3、切换到项目目录下,安装依赖：

$ cd  vue-demo-mock
$ npm install

* 执行npm install需要一点时间，因为会从服务器上下载代码啦之类的。并且在执行过程中会有一些警告信息。不用管，等着就是了。如果长时间没有响应，就ctrl+c停止掉，然后再执行一次即可。如果还是照样，建议检查是不是因为没有翻墙的原因,那就需要安装淘宝镜像依赖

！！！前往淘宝镜像官网 http://npm.taobao.org/，可查看安装cnpm包的命令

在命令行输入：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

然后就可以使用cnpm 替换npm命令，一般不建议替换，因为可能有很多包是不完整的

4、运行项目

$ npm run dev

唯雪博客

在浏览器打开http://localhost:8080/#/

你将会看到如下界面：

唯雪博客

至此一个简单的vue应用就搭建完成了，可以在src目录下根据自己的需求建立应用

第二部分:使用axios发送请求；

axios大家应该不陌生，一个前端发送异步请求的神奇，也是vue，react等主流框架推荐使用的工具

1、首先还是利用npm安装

$ npm install axios --save

2、使用方法

在需要使用的地方进行一个引用即可

先介绍一个最简单的使用，发一个get请求

import axios from 'axios'
axios.get('/user',{ //  '/user'请求接口地址
    params:{ID:12345}//发送参数
}).then(function(response){  //成功响应的回调
    console.log(response);
}).catch(function(err){  //失败的回调
    console.log(err);
});

其他使用方法这里就不赘述了，可以参考axios的官方文档

github地址：https://github.com/axios/axios

npm包管理地址：https://www.npmjs.com/package/axios

再推荐一个大神的总结贴比较友好：https://www.jianshu.com/p/df464b26ae58

3、应用中使用

大型应用中不建议将请求直接放置在页面中，最后建立单独的目录，统一管理所有的请求。

src下建立api文件夹，新建一个api.js文件，所有的请求都放在这里

//api.js
import axios from 'axios'
let base = '';

export const getUserList = params => { return axios.get(`${base}/user/list`, { params: params }); };

引入getUserList方法

mounted(){
    this.getuser()
  },
  methods:{
    getuser(){
        getUserList(this.name).then((res)=>{
          console.log(res)
        }).catch((err)=>{
          console.log(err)
        })
      },
  }

这时运行项目，会发现已经发出了请求，不过是404，正常嘛，根本没有这个接口。

第三部分：使用axios-mock-adapter，axios 的模拟调试器，模拟调用后台；

看名字大致能猜到，这是基于axios的模拟相应后台的工具，说的直白一点，就是可以拦截axios请求

npm包管理地址：https://www.npmjs.com/package/axios-mock-adapter

1、利用npm安装

$ npm install axios-mock-adapter --save-dev

2、使用方法

模拟一个带参的get请求：

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
// 设置模拟调试器实例 
var mock = new MockAdapter(axios);
mock.onGet('/users', { params: { searchText: 'John' } }).reply(200, {
  users: [
    { id: 1, name: 'John Smith' }
  ]
});

更多使用方法请参考官方文档。

3、应用中使用

和管理所有请求一样，所有的模拟接口我们也放到一个文件夹（mock）下进行统一管理,在mock文件夹中新建一个mock.js和index.js

//mock.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
export default{
	bootstrap(){
		let mock = new MockAdapter(axios)
		mock.onGet('/user/list').reply(config => {
	      console.log(config.params)
	      return new Promise((resolve, reject) => {
	        setTimeout(() => {
	          resolve([200, {
	          	id:'001222',
	            users: 'jhon smith',
	            age:20
	          }]);
	        }, 1000);//定时器模拟服务器相应时间
	      });
	    });
	}
}

// mock/index.js
import mock from './mock'
export default mock

然后在main.js中调用axios-mock-adapter模拟的接口

//main.js
import Mock from './mock'
Mock.bootstrap();

其工作原理大家应该也能明白，main.js是所有组件的统一入口，在这里调用，所有的请求都将被拦截。

此时我们在运行项目，能看到拿到了模拟的数据

唯雪博客

第四部分：使用mockjs，模拟后台数据；

第三部分我们响应的数据我们是直接写在请求的回调函数内的，数据都是死的，无论调多少次出来的结果都一样。既然是模拟后台我们也希望能，像真是数据一样，user的名字、年龄、住址这些信息都是随机的，岂不是更能达到效果

这时候就需要mockjs上场了

唯雪博客

官方解释非常简单，生成随机数，拦截Ajax请求，它也确实就干这事，不过生成的随机数非常丰富

大家可以去官网上查阅示例：http://mockjs.com/examples.html

好了废话不多少，既然这东西这么好，那赶紧用起来啊

1、利用npm 安装

$ npm install mockjs --save-dev

2、使用方法

import Mock from 'mockjs';
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

3、项目中运用

同样在mock文件夹下新建一个单独的文件夹data管理所有后台的模拟数据，我们这里需要一个具有用户信息的user.js

// mock/data/user.js
import Mock from 'mockjs';
const Users = [];
for (let i = 0; i < 86; i++) {
  Users.push(Mock.mock({
    id: Mock.Random.guid(),//id
    name: Mock.Random.cname(),//姓名
    icon:Mock.Random.image('20x20', '#894FC4', '#FFF', 'png', '!'),//照片
    "subName|1-5":[{//包含1-5个子元素的随机数组，社交平台信息
      name:'@name',
      icon:"@image('20x20','#4A7BF7', '#FFF', 'png', '!')"
    }],
    addr: Mock.mock('@county(true)'),//地址
    'age|18-60': 1,//年龄
    birth: Mock.Random.date(),//生日
    sex: Mock.Random.integer(0, 1)//性别
  }));
}
export { Users };

然后把mock.js返回的数据替换成mock的数据

//mock/mock.js
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import {Users} from './data/user'
let _Users = Users
export default{
	bootstrap(){
		let mock = new MockAdapter(axios)
		mock.onGet('/user/list').reply(config => {
	      let {name} = config.params;
	      let mockUsers = _Users.filter(user => {
	        if (name && user.name.indexOf(name) == -1) return false;
	        return true;
	      });
	      return new Promise((resolve, reject) => {
	        setTimeout(() => {
	          resolve([200, {
	            users: mockUsers
	          }]);
	        }, 1000);
	      });
	    });
	}
}

运行项目，查看结果

唯雪博客