唯雪博客

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


我们构建一个简单的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);
	      });
	    });
	}
}

运行项目,查看结果

唯雪博客

86条用户信息,展开查看数据详情,信息看上去非常正式,不重叠重复。

是不是很棒啊,普通的应用mock提供的模拟数据完全够用了,也算是解决了前后端分离开发的一个大问题。

项目源码,见github地址:https://github.com/vivizhou0596/vue-demo-mock

白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论