在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。对比过多种mock工具后，我最终选择了使用 json server 作为工具，因为它足够简单，写少量数据，即可使用。也因为它足够强大，支持CORS和JSONP跨域请求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法，如limit，order等。下面我将详细介绍如何搭建mock数据服务。
一、Node.js安装及环境配置
首先需要在电脑上安装nodejs环境，建议使用最新版本，具体的操作过程请查阅Node.js安装及环境配置之Windows篇
二、建立前端项目
建立自己的前端项目，如wx.web，在cmd命令行，进入项目根目录下，
执行命令，D:\工作相关\新建文件夹\front-end project\wx.web > npm init； 命令执行完成后，会在项目根目录，可以看到package.json文件；然后，再按照自己的编码风格，命名前端项目结构目录，
三、使用 JSON Server 搭建 Mock 服务器
全局安装json server，关于json-server相关的api，请阅读json-server官方文档
npm install json-server –g
安装完成后可以用 json-server -h 命令检查是否安装成功，成功后会出现
在项目目录下，增加mock文件目录，并新建db.js用于模拟数据服务
安装mock.js，关于mock.js相关的api， 请先用15分钟阅读mockjs官方文档
npm install mockjs –save
安装完成后的项目目录结构为
在上一步新建的db.js文件中，写入如下代码
- var Mock = require('mockjs');
- var Random = Mock.Random;
- module.exports = function() {
- var data = {
- news: []
- };
- var images = [1,2,3].map(x=>Random.image('200x100', Random.color(), Random.word(2,6)));
- for (var i = 0; i < 100; i++) {
- var content = Random.cparagraph(0,10);
- data.news.push({
- id: i,
- title: Random.cword(8,20),
- desc: content.substr(0,40),
- tag: Random.cword(2,6),
- views: Random.integer(100,5000),
- images: images.slice(0,Random.integer(1,3))
- })
- }
- return data
- }
运行mock服务,
json-server mock/db.js;
运行成功后,会显示如下截图：
并可在浏览器地址栏输入: http://localhost:3000/
至此，mock数据服务，已经搭建成功，在代码中的使用也很简单，以下给出代码使用示例:
- <!DOCTYPE html>
- <html>
- <head>
- <title>首页</title>
- <meta charset="utf-8">
- <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
- <style type="text/css">
- .hello {
- color: #428bca;
- }
- </style>
- </head>
- <body>
- <h3>这是index页面</h3>
- <span class="hello">你可以点击这里</span>
- <script type="text/javascript">
- $(function () {
- var contextPath = 'http://localhost:3000';
- $('.hello').on('click', function () {
- $.ajax({
- type: 'get',
- url: contextPath + '/news',
- success: function (data) {
- console.log(JSON.stringify(data));
- },
- error: function (data) {
- console.log("出错了:" + JSON.stringify(data));
- }
- })
- })
- })
- </script>
- </body>
- </html>
更多的使用示例，请参考博文使用json-server模拟REST API