构建前端Mock Server的利器/Json-Server
痛点
项目中前端和后端通常是并行开发,为了减少等待后端接口开发的时间,我们经常需要在本地模拟后端接口用来测试前端效果。这种做法称之为构建前端Mock。平日里我接触的前端Mock方法大致可以分为以下两种:
- 本地启动一个静态服务,将所需要的接口写成json文件,根据接口名字将文件放在项目目录下。
- 再启动一个Server作为Mock Server,使用第三方Proxy将Mock Server的接口代理到静态服务器上。
第一种方法是接触的最多的方法,这做相对来说相对简单,可是带来的弊端也很多。如果项目的接口较少维护起来还比较容易,但是一旦涉及到数十个接口的调用,我们就需要在项目里写新建许多个json文件,如果恰好后端接口的路径又比较长的话,那项目目录将会十分的混乱。比如“ddos/data/details/todayCleanTime.json”
,对应的moch目录必须是
<!--more-->
--ddos
|--data
| --details
|--todayCleanTime.json
除此之外,通常情况下接口并不一定就会以json结尾(后端同学也许并不会听你解释。。)
如果按照RESTFUL的格式书写,比如"api/zoos/animals"
,那么我们需要准备书写两套调用接口代码,一种以json格式结尾作为本地mock,另一套才是线上接口代码,每次build构建代码时,一定得记得将调用接口的地方改为线上代码。这种做法效率太低了。。
第二种方法则避免了修改接口的麻烦,在本地的Mock Server中模拟一个和线上一样的接口,这样的Mock也更接近于线上的环境。我们当然不用从头用Node或者Php写一个完整的后端服务,已经有许多工具造好了轮子。
我试用了许多工具,最后觉得还是 Json-Server 最为方便。这个工具在github上有11000个star,可见他的火爆之处。有便于其他同类工具,Json-Server基于REST API,配合使用Proxy,效率极其高。下面我简单说下使用方法,以及我在项目中是如何与Webpack整合的。
30秒内创建完整的REST API
安装Json-Server:
npm install -g json-server
在项目中新建一个test.json文件,我们现在要模拟一个/issues
和/total
接口
\\ test.json
{"issues": [{"id": 101,"text": "something is not right"},{"id": 102,"text": "crash on login"}],"total": {"data": {"exchange_count": "10","share_count": "23","patent_count": "7","article_count": "37","exchangeRecords": []},"success": true}
}
启动服务
json-server --watch test.json --port 9090
访问localhost:9090
现在可以直接按照RESTFUL的规范调用这个接口,并且所做的POST和DELETE等请求,会直接修改test.json文件的值。
➜ ~ curl http://localhost:9090/issues
[{"id": 101,"text": "something is not right"},{"id": 102,"text": "crash on login"}
]%
➜ ~ curl http://localhost:9090/issues/2
{}%
➜ ~ curl http://localhost:9090/issues/101
{"id": 101,"text": "something is not right"
}%
➜ ~ curl -X DELETE http://localhost:9090/issues/102
{}%
除此之外,还可以继续增加路由规则。创建一个routes.json文件
{"/api/": "/","/blog/:resource/:id/show": "/:resource/:id"
}
启动服务
json-server --watch test.json --routes routes.json
如果接口并不是Restful或者比较冗长,你也可以采取路由的方法模拟。
整合Webpack Dev Server
在项目中使用JsonServer,还需要再做点小处理。通常在本地调试的时候我们已经启动了一个静态服务,因此需要用代理服务进行跨域(两个服务分别在两个端口上)。对于使用Webpack打包的项目,已经使用了它自带的webpack-dev-server服务,它很贴心的提供了proxy参数来解决这个问题。在webpack.config.js做以下配置:
devServer:{proxy: {'/gm/api/*': {target: 'http://localhost:9090',secure: false}}}
在package.json中新添加一个scripts:
"scripts": {"dev": "webpack-dev-server --inline --hot --no-info","build": "cross-env NODE_ENV=production webpack --progress --hide-modules","mock": "node_modules/.bin/json-server --watch mock/db.json --port 9090","mockdev": "npm run mock & npm run dev"},
由于json-server是命令行工具,若没有全局安装需要用相对路径去调用它: node_modules/.bin/json-server
。路径不能少,否则会提示找不到命令哦。
这个世界终于清净啦!在代码中每次调用/gm/api/issues
的时候,都会调用到json-server服务去,可以真是模拟线上的接口调用情况。现在可以把所有接口都集中写在一个json文件中,代码里面线上环境和本地Mock也保持了一致,不需要再切来切去啦!
如果你使用的本地静态服务并没有提供代理的功能,那可以使用 阿里的开源工具anyproxy ,同样给力!
加上Faker试试?
如果我们想在Mock的时候生成更多的随机数据,这个时候就需要faker了!faker.js可以用来产生大量的模拟假数据,配合json-server,我来给大家举个栗子��:
npm install faker lodash –save-dev
在项目中新建一个generate.js文件
module.exports = function(){var faker =require("faker");vae _ = require("lodash");return {people: _.times(100,function (n) {return {id: n,name: faker.name.findName(),avatar: faker.internet.avatar()}})}
}
使用命令
json-server generate.js
Done!生成了100条数据,关于faker的更多用法请参照官网,它能够生存许多常见的随机数据,faker.js。
Tips
在使用的过程中,我发现WebStorm有一个很好用的小工具,叫做TestRestfulWebService。(双击shift输入工具名快速唤出)可以直接用来测试json-server。
作者:分队长左伦
链接:http://www.jianshu.com/p/81373d90f9f0
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
构建前端Mock Server的利器/Json-Server相关推荐
- JSON Server在快速开发过程中的使用
在开发过程中,接口多半是滞后于页面开发的.利用JSON Server快速搭建模拟返回REST风格的后台数据,保证前后端开发的分离.前后端开发只要设定好接口以及数据的定义,剩下的就可以各自开发,最后集成 ...
- JavaScript XHR使用 JSONPlaceholder API 并本地搭建JSON server REST API
有时,了解地面上的事情是如何发生的非常重要.本文将讨论如何借助最喜爱的 REST API 在 vanilla JavaScript 中使用 XHR - XMLHttpRequest:JSON占位符. ...
- SQL Server 中的 JSON 数据
下面是 JSON 文本的示例 [{ "name": "John", "skills": ["SQL", "C# ...
- 教你使用 koa2 + vite + ts + vue3 + pinia 构建前端 SSR 企业级项目
大厂技术 高级前端 Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 前言 大家好,我是 易[1],在上一篇文章中,我们有讲到<如何使用 vite+vue3 ...
- 客户端Mock服务端的JSON数据
http://hlyu.cn/?p=392 http://hlyu.cn/?p=392 http://hlyu.cn/?p=392 客户端Mock服务端的JSON数据 场景1:服务端和客户端已经制定了 ...
- 使用 Nginx 构建前端日志统计服务(打点采集)服务
使用 Nginx 构建前端日志统计服务(打点采集)服务 工作中经常会遇到需要"数据支撑"决策的时候,那么可曾想过这些数据从何而来呢?如果业务涉及 Web 服务,那么这些数据的来源之 ...
- 前端 mock 数据及工具介绍
前端 mock 数据及工具介绍 阅读本文,需要有前端开发的简单知识,接下来我们分别从介绍 Mock 数据概念(what).为啥要 Mock(why).如何 mock(how).mock 工具等方面来展 ...
- 前端 mock 数据
前端 mock 数据 Easy Mock 由于easy mock线上服务基本打不开的情况,所以有能力的还是做一下本地部署(参考) 在easymock创建一个项目,并将项目的 Base URL 配置到a ...
- 模拟数据(前端mock,JSON-Server)
前端mock 目的:体验前端mock接口数据 1)安装 yarn add axios mockjs 2)发送请求 App.vue import axios from "axios" ...
最新文章
- ubuntu解压zip文件命令_Linux常用命令10 - unzip
- 如何替换所有出现的字符串?
- 我说分布式事务之消息最终一致性事务(二):RocketMQ的实现
- 美学评价_卡美学的真正美
- 后缀数组2.0--Height数组(bzoj 1717: [Usaco2006 Dec]Milk Patterns 产奶的模式)
- zynq开发系列6:创建AXI IP实现PS对PL的数据配置(步骤一)
- artcam2008 stp 教程_ArtCAM_中文版使用教程
- 微软Azure、谷歌GAE、亚马逊AWS比較
- 便携式车用CAN分析仪-DBC解码、J1939和图形化分析
- java.sql.SQLException:
- 全面对战LILO 和 GRUB
- 凸优化学习(一)凸集与凸函数、凸优化问题
- 基于SpingBoot2.0与activiti7.x构建的一套工作流程管理系统
- 标点符号的英语名称翻译
- 易语言 给程序加上记住账号功能
- PTA 校选拔 7-10 宇航员的寻宝图(BFS)
- 小学计算机教师集体备课计实,小学科学集体备课记录(年.doc
- 大数据智慧数字电商第五课 程序整合 可视化和BI分析
- 验证回文字符串 II(贪心+双指针)
- 在pc端上操作手机工具分享