使用node.js + json-server + mock.js 搭建本地开发mock数据服务

时间:2021-02-03 07:14:44

在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的。所以建立一个REST风格的API接口,给前端页面提供虚拟的数据,是非常有必要的。对比过多种mock工具后,我最终选择了使用 json server 作为工具,因为它足够简单,写少量数据,即可使用。也因为它足够强大,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等。下面我将详细介绍如何搭建mock数据服务。

一、Node.js安装及环境配置

    首先需要在电脑上安装nodejs环境,建议使用最新版本,具体的操作过程请查阅Node.js安装及环境配置之Windows篇

二、建立前端项目

建立自己的前端项目,如wx.web,在cmd命令行,进入项目根目录下,

使用node.js + json-server + mock.js 搭建本地开发mock数据服务

     
 

执行命令,D:\工作相关\新建文件夹\front-end project\wx.web > npm init; 命令执行完成后,会在项目根目录,可以看到package.json文件;然后,再按照自己的编码风格,命名前端项目结构目录,

使用node.js + json-server + mock.js 搭建本地开发mock数据服务使用node.js + json-server + mock.js 搭建本地开发mock数据服务

三、使用 JSON Server 搭建 Mock 服务器

全局安装json server,关于json-server相关的api,请阅读json-server官方文档

npm install json-server –g

安装完成后可以用 json-server -h 命令检查是否安装成功,成功后会出现

使用node.js + json-server + mock.js 搭建本地开发mock数据服务

     
 

   
 

在项目目录下,增加mock文件目录,并新建db.js用于模拟数据服务   

安装mock.js,关于mock.js相关的api, 请先用15分钟阅读mockjs官方文档

    npm install mockjs –save

安装完成后的项目目录结构为

使用node.js + json-server + mock.js 搭建本地开发mock数据服务

在上一步新建的db.js文件中,写入如下代码

  1. var Mock = require('mockjs');
  2. var Random = Mock.Random;
  3.  
  4. module.exports = function() {
  5.     var data = {
  6.         news: []
  7.     };
  8.     var images = [1,2,3].map(x=>Random.image('200x100', Random.color(), Random.word(2,6)));
  9.     for (var i = 0; i < 100; i++) {
  10.         var content = Random.cparagraph(0,10);
  11.         data.news.push({
  12.             id: i,
  13.             title: Random.cword(8,20),
  14.             desc: content.substr(0,40),
  15.             tag: Random.cword(2,6),
  16.             views: Random.integer(100,5000),
  17.             images: images.slice(0,Random.integer(1,3))
  18.         })
  19.     }
  20.     return data
  21. }

运行mock服务,

json-server mock/db.js;

运行成功后,会显示如下截图:

使用node.js + json-server + mock.js 搭建本地开发mock数据服务

  并可在浏览器地址栏输入: http://localhost:3000/

 使用node.js + json-server + mock.js 搭建本地开发mock数据服务

至此,mock数据服务,已经搭建成功,在代码中的使用也很简单,以下给出代码使用示例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>首页</title>
  5.     <meta
    charset="utf-8">
  6.     <script
    type="text/javascript"
    src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  7.     <style
    type="text/css">
  8.         .hello {
  9.             color: #428bca;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <h3>这是index页面</h3>
  15.     <span
    class="hello">你可以点击这里</span>
  16.     <script
    type="text/javascript">
  17.         $(function () {
  18.             var contextPath = 'http://localhost:3000';
  19.             $('.hello').on('click', function () {
  20.                 $.ajax({
  21.                     type: 'get',
  22.                     url: contextPath + '/news',
  23.                     success: function (data) {
  24.                         console.log(JSON.stringify(data));
  25.                     },
  26.                     error: function (data) {
  27.                         console.log("出错了:" + JSON.stringify(data));
  28.                     }
  29.  
  30.                 })
  31.             })
  32.         })
  33.     </script>
  34. </body>
  35. </html>

 

更多的使用示例,请参考博文使用json-server模拟REST API