在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个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;
  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;

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

  并可在浏览器地址栏输入: 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.                     }
  29.  
  30.                 })
  31.             })
  32.         })
  33.     </script>
  34. </body>
  35. </html>

 

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

使用node.js + json-server + mock.js 搭建本地开发mock数据服务的更多相关文章

  1. Mock 之搭建本地 MockJs

    Mock 之搭建本地 MockJs 一.目的 模拟后端接口 二.发请求 1. install npm install axios 2. 配置 src/utils/request.js import a ...

  2. 【vue】本地开发mock数据支持

    项目离不开数据渲染的支持,为本地开发配置 数据  支持. (一)方式一:安装JSON Server搭建mock数据的服务器 json Server 是一个创建 伪RESTful服务器的工具. 配置流程 ...

  3. vue-cli 本地开发mock数据使用方法

    vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章: Vue-cli proxyTable 解决开发环境的跨域问题 如果后端接口尚未开发完成,前端开发一 ...

  4. 在macOS下使用MAXPP搭建本地开发服务器简易流程

    本文适用于解决前端开发时所需的服务器支持,包括文件上传和下载.在开发环境中需要保持尽量的开放,并不是安全的.根据浏览器安全协议,所下载的开源项目是不能直接在file中直接打开的,需要把文件放置在服务器 ...

  5. ng2 搭建本地开发环境

    git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start h ...

  6. 使用Apache+Dreamweaver（或者H-builder）搭建php开发环境

    使用得工具说明 php+Apache服务器+Dreamweaver+mysql数据库 下载安装好wamp,可以在网上直接百度下载,为了方便,我给放个百度云的链接.wamp下载:链接:http://pa ...

  7. MacOS搭建本地服务器

    MacOS搭建本地服务器 一,需求分析 1.1,开发app(ios android)时通常需往app中切入web页面,直接导入不行,故需搭建本地的测试网站服务,通过IP嵌入访问页面. 1.2,开发小程 ...

  8. 一统江湖的大前端（2）—— Mock.js + Node.js 如何与后端潇洒分手

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  9. 用node.js启动mock.js

    Node.js Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP.Python.Perl.Ruby 等服务端语言平起平坐的脚本语言.官网下载n ...

随机推荐

  1. P1880 [NOI1995]石子合并-（环形区间dp）

    https://www.luogu.org/problemnew/show/P1880 解题过程:本次的题目把石子围成一个环,与排成一列的版本有些不一样,可以在后面数组后面再接上n个元素,表示连续n个 ...

  2. python入门（三）：循环

    1.for i in xxx xxx: 序列(列表,元祖,字符串) xxx: 可迭代对象 >>> for i in "abc": ...     print(i) ...

  3. spark快速开发之scala基础之5高阶函数，偏函数，闭包

    高阶函数 高阶函数就是将函数作为参数或者返回值的函数. object function { def main(args: Array[String]): Unit = { println(test(f ...

  4. 使用chrome浏览器无法访问github提示不是私密连接且无继续前往选项

    在hosts文件中添加如下内容: 192.30.253.112 github.com192.30.253.119 gist.github.com151.101.100.133 assets-cdn.g ...

  5. 安装Ubuntu 18.04后的一些操作

    安装Ubuntu 18.04后的一些操作 1.设置root密码 sudo passwd 2.登陆root(输入密码后看到井号就是切换成为root账户) su 3.删除预装 apt-get remove ...

  6. React-router4 第七篇 Recursive Paths 递归路径

    https://reacttraining.com/react-router/web/example/recursive-paths import React from 'react' import ...

  7. 防火墙/IDS测试工具Ftester

    防火墙/IDS测试工具Ftester FTester 全称Firewall Tester,是一个用来测试防火墙的过滤策略和入侵检测(IDS)能力的工具.这个工具主要是有两个perl的脚本组成: 1. ...

  8. [SoapUI] 从测试套件，测试用例，测试步骤，测试数据各个级别控制是否执行

    自动保存 # -*- coding: utf-8 -*- import java.awt.Color import org.apache.poi.ss.usermodel.Cell import or ...

  9. Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题

    错误示图: 原因:是因为在本地项目对应文件的<script>中,属性name出现了错误的命名方式,导致浏览器控制台报错! 诸如: name: header .  . name: menu  ...

  10. 别人的Linux私房菜（5）首次CentOS7与帮助等

    ctrl alt F1-F6切换终端tty1-6,其中,F1的终端带有用户界面. 在终端登录后,输入startx启动个人图形界面.(启动有一些条件限制,如没有其他的X Window启用,已经安装,并具 ...