Vue实战044：Mockjs模拟服务器Api接口并返回数据详解

前言

现在越来越多项目都采用前后端分离模式开发，这样前后端就可以同时开发，而且互不影响。但是目前项目跟进的很紧，没什么时间写后台，但是前端没接口测试可能会隐藏很多bug，到后面再来排查就麻烦了。所以在后端接口没有开发之前，我打算先用mockjs模拟下后端服务器，生成模拟的假数据，以便于顺利进行前端的开发工作。

什么是Mockjs

Mockjs 是一款模拟数据生成工具，模拟 Ajax 请求，通过随机生成数据来模拟各种业务场景并返回模拟数据，帮助前端在后台未提供接口时实现独立开发。Mockjs支持的随机数据类型很丰富，包括文本、数字、布尔值、日期、邮箱、链接、图片、颜色等等，足够我们开发使用了。

安装Mockjs

mockjs只用于开发环境实现模拟数据，而生产环境有真正的后台服务器因此需要mockjs，因此在安装mockjs的时候记得带上参数 --save-dev，进入到项目目录，执行指令：npm i mockjs --save-dev

mockjs使用

最简单的方式就是直接新建一个mock.js文件，然后引入mockjs插件，设置一个延迟时间虚拟服务器响应效果，然后通过Mock.mock拦截请求并随机生成数据返回。

import Mock from \'mockjs\' //引入mockjs

Mock.setup({

timeout: 500 //延迟效果

})

//拦截请求并返回数据

Mock.mock(\'login/\', \'post\', {

\'code\': 200, // 状态码

\'userid\': \'@id()\', // 随机生成用户id

\'username\': \'@cname()\', // 随机生成中文名字

\'date\': \'@date()\', // 随机生成日期

\'avatar\': \"@image(\'200x200\',\'red\',\'#fff\',\'avatar\')\", // 生成图片

\'description\': \'@paragraph()\', // 描述

\'ip\': \'@ip()\', // IP地址

\'email\': \'@email()\'// email

})

数据结构

在mockjs的数据结构中，每个属性可以由三部分构成：属性名（name），规则（rule），值（value），即\'name|rule\': value（属性名 和 规则 之间用竖线 | 分隔，且规则是可选的），属性值可以是字符串 String、数字 Number、布尔型 Boolean、对象 Object、数组 Array、函数 Function、正则 RegExp等，例如：

\'name|min-max\': string //随机生成字符串，重复次数大于等于min，小于等于max。

\'name|count\': string //随机生成字符串，重复次数count。

\'name|+1\': number //初始值为 number，每次生成属性值自动加 1。

\'name|min-max\': number //随机生成整数，且大于等于min、小于等于max 。

\'name|min-max.pmin-pmax\': number //随机生成浮点数，且大于等于min、小于等于max ，小数部分保留pmin到pmax位。

数据占位符

在前面的随机数据中我们可以看到属性值中有个@占位符，这里是用 @来标识其后的字符串是占位符，这样在调用Mock.mock就会引用Mock.Random中的方法实现数据的随机生成，Mock.Random 是Mock提供的一个用于生成各种随机数据的工具类，支持多种类型和方法。我们可以通过Mock.Random.Method()或者\'@Method\'来实现以下方法：

组件中使用

Mock的好处就是不需要修改前端代码，那么在前端中还是正常的对接API接口即可，如果你封装了axios注意把axios.defaults.baseURL属性注释掉，除非你想在Mock每次都添加完整的api路径，以下是我封装了axios的写法，如何封装可以参考：Vue实战037：axios二次封装和使用。

//以下是我封装了axios的写法

handleLogin(){

this.loading = true

login(\'post\',{

username:this.loginForm.username,

password:this.loginForm.password,

}).then(res=>{

if(res.code===200){

this.loading = false

console.log(\"登录成功\")

}

})

},

代码整理

像刚开始那么写当我们数据和接口一多起来就不方便维护了，所以这里我们重新整理下，新增个data.js文件专门存放数据，index.js则负责定义各个接口方法和数据返回即可，data中我们用module.exports导出对象，index中先用Mock.mock(data)生成数据，在后面的接口中我们只要直接通过database.userinfo来获取对应的数据即可。

//index.js

import Mock from \'mockjs\'

import data from \'./data.js\'

Mock.setup({

timeout: 500

})

var database = Mock.mock(data)

Mock.mock(\'login/\', \'post\', req => {

return database.userinfo

})

//data.js

module.exports = {

\'userinfo\': {

\'code\': 200,

\'userid\': \'@id()\', // 随机生成用户id

\'username\': \'@cname()\', // 随机生成中文名字

\'date\': \'@date()\', // 随机生成日期

\'avatar\': \"@image(\'200x200\',\'red\',\'#fff\',\'avatar\')\", // 生成图片

\'description\': \'@paragraph()\', // 描述

\'ip\': \'@ip()\', // IP地址

\'email\': \'@email()\'// email

}

}

欢迎关注本人的公众号：编程手札，文章也会在公众号更新

vue设置全局访问接口API地址操作

在使用vue框架进行前后端分离项目开发时，通常涉及到与后段接口进行交互，平时一般使用比较多的就是用axios来实现调用后段接口，写法一般为

但是有一个比较普遍的问题就是，假如我们后端接口地址改变了，或者是网络地址发生了变化，就需要在上面IP以及端口的位置每一处都需要修改，所以我们需要一个一处设置 处处可用的配置，如下

在src目录下新建interface文件夹，新建index.js文件

在main.js中引入上述配置

接下来在原axios调用接口的位置稍作修改即可实现正常调用接口了

补充知识：vue项目：（全局变量设置与调用）API接口封装 - 代码篇

vue项目，如何将“API接口” 封装为“全局变量” ？

1. API全局配置文件【global.vue文件】

2. 全局注册引入文件 【main.js文件】

3. 如下代码片段：【注释1、注释2、注释3】

以上这篇vue设置全局访问接口API地址操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。