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

zoukankan html css js c++ java

使用node.js + jsonserver + mock.js 搭建本地开发mock数据服务
在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个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文件中，写入如下代码
1. var Mock = require('mockjs');
2. var Random = Mock.Random;
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;
运行成功后,会显示如下截图：

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

至此，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. }
30. })
31. })
32. })
33. </script>
34. </body>
35. </html>
更多的使用示例，请参考博文使用json-server模拟REST API
查看全文

相关阅读:
创建型模式
 建造者模式
 抽象工厂模式
 工厂方法模式
 原型模式
 [水]三个日常签到题
 [数]青蛙的约会&Strange function
[水]三个数学的小技巧题
 Jquery Ajax的使用
 easyui学习记录：combotree的使用

原文地址：https://www.cnblogs.com/xyb0226/p/7234507.html

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

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

二、建立前端项目

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