简单的mock数据调试

原創

2020-05-21 12:53

我们做前端的，总是得等到后台接口出来我们才能开始对接口的部分，

会导致开发时间拖长，影响效率，尤其是在外包公司工作的前端来说效率就是生命

出现这种情况时我们可以使用mock数据来模拟后端接口进行测试

此方案一般适用于接口较少、且数据结构简单、手动定义数据效率更高的情况。
若接口较多，且数据结构十分复杂，使用本方案手动构建mock数据可能会适得其反，在构造mock数据时反而浪费大量时间

方案详情

一、安装

本方案使用的是npm中的json-server，需要Node.js环境
项目是使用webpack构建的，以下两种安装方式选一种即可

yarn add json-server --dev、

npm install json-server --save-dev

// 引入伪数据
const list = require('./list.json');
 
module.exports = function(){
    return {
        list
    }
}

通过路由文件可以在不更换真实url的基础上访问伪数据,文件内容如下：

{
    // key为真实访问的url
    // value为实际的url
    "/api/position/list":"/list"
}

在终端中开启一个服务器，默认端口号为3000

在命令行中输入以下内容

.\node_modules\.bin\json-server ./src/mock/mock.js -r ./src/mock/route.json

可将此命令添加为脚本，在package.json中配置

"scripts": {
    "json-server": "json-server ./src/mock/mock.js -r ./src/mock/route.json"
  }

配置完成后，在命令行中直接输入以下代码即可开启服务器

yarn json-server

因为新建了一个服务器，端口号不同，所有会产生跨域问题，前端页面想到拿到数据，需要在配置文件中配置反向代理

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true
  }
}

mock数据服务和反向代理已全部搭建完成，接下来就可以模拟真实的数据访问了

js代码：

// 发送Ajax请求
$.ajax({
  url: '/api/position/list',
  success(result){
    // 打印数据
    console.log(result);
  }
})

至此在前端控制台中已成功拿到mock数据

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.