使用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
查看全文

相关阅读:
2. Add Two Numbers
1. Two Sum
22. Generate Parentheses (backTracking)
21. Merge Two Sorted Lists
20. Valid Parentheses (Stack)
19. Remove Nth Node From End of List
18. 4Sum (通用算法 nSum)
17. Letter Combinations of a Phone Number (backtracking)
LeetCode SQL: Combine Two Tables
LeetCode SQL:Employees Earning More Than Their Managers

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

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

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

二、建立前端项目

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