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

时间 2019-12-07

标签使用 node.js node json server mock.js mock 搭建本地开发数据服务栏目 Node.js 繁體版

原文原文链接

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

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

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

2、创建前端项目

创建本身的前端项目，如wx.web，在cmd命令行，进入项目根目录下， html

执行命令，D:\工做相关\新建文件夹\front-end project\wx.web > npm init；命令执行完成后，会在项目根目录，能够看到package.json文件；而后，再按照本身的编码风格，命名前端项目结构目录，前端

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

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

npm install json-server –g node

安装完成后能够用 json-server -h 命令检查是否安装成功，成功后会出现 jquery

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

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

npm install mockjs –save web

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

在上一步新建的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