前端mock工具：json-server在vue项目中的使用

微雨飞燕
1,051 阅读2分钟

在项目中前端和后端通常是并行开发，为了减少等待后端接口开发的时间，我们经常需要在本地模拟后端接口用来测试前端效果。这种做法称之为构建前端Mock。

前端Mock方法大致可以分为以下两种：

  1. 本地启动一个静态服务，将所需要的接口写成json文件，根据接口名字将文件放在项目目录下。
  2. 再启动一个Server作为Mock Server，使用第三方Proxy将Mock Server的接口代理到静态服务器上。

第一种方法相对简单，可是带来的弊端也很多。如果项目的接口较少维护起来还比较容易，但是一旦涉及到很多接口的调用，我们就需要在项目里新建许多个json文件，十分麻烦。

第二种方法则避免了修改接口的麻烦，在本地的Mock Server中模拟一个和线上一样的接口，这样的Mock也更接近于线上的环境。比如已经集成好的工具Json-Server。

Json-Server是基于REST API的前端mock工具，配合使用Proxy，效率极高。

在vue-cli搭建的vue前端项目中，配置webpack使用json-server步骤如下：

1.首先：全局安装Json-Server：npm install -g json-server

2.在项目根目录中，新建一个test.json文件（getMachineOrderStatistics为url路径，不支持api/url的/格式），该文件可以写入多个url请求的接口 格式如下：

{
"getMachineOrderStatistics": {
    "resultCode": 1200,
    "msg": "操作成功",
    "data": [
        {
            "id": 1,
            "machineId": "42342423"               
        }
    ],
    "total": 1    
 }
}

3.启动 json-server --watch test.json --port 9090

即可通过http://localhost:9090//getMachineOrderStatistics来访问接口。

4.通常在本地开发环境下，我们已经启动了一个静态服务，因此需要用代理服务进行跨域（两个服务分别在两个端口上）。 通过代理来访问该接口 在webpack的config文件中，

proxyTable: { 
    '/mockServer': {
      target: 'http://localhost:9090',
      changeOrigin: true,
      pathRewrite: {
        '^/mockServer': ''
      }
    },
}

5.在package.json中新添加一个scripts:

"scripts": {
"mock": "node_modules/.bin/json-server --watch test.json --port 9090",
"mockdev": "npm run mock & npm run dev"
},

由于json-server是命令行工具，若没有全局安装需要用相对路径去调用它:
node_modules/.bin/json-server 。
路径不能少，否则会提示找不到命令。

6.运行 npm run mockdev来启动项目，同时也启动了json-server

  \{^_^}/ hi!    
  Loading test.json
  Done   
  Resources
  http://localhost:9090/getMachineOrderStatistics

7.在项目中，我们通过/mockServer/getMachineOrderStatistics即可请求该mock数据

现在可以直接按照RESTFUL的规范调用这个接口，并且所做的POST和DELETE等请求，会直接修改test.json文件的值。 比如，使用post方法，对/getMachineOrderStatistics传递参数，则该值可以直接写入到test.json文件中。

avatar
文章
阅读
粉丝