首页 > 其他分享 >前端 - 使用json-server搭建单机mock平台

前端 - 使用json-server搭建单机mock平台

时间:2023-10-13 13:46:53浏览次数:46  
标签:文件 db request js json server mock

使用json-server搭建单机mock平台

 简介

json-server是一个 Node 模块,可以指定一个json文件作为数据源,运行 Express 服务器。可以用来在本地快速搭建一个REST API风格的后端服务,模拟服务端接口数据。

官网地址:json-server - npm (npmjs.com)

Github地址:GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

使用

新建一个npm项目,项目结构如下

其中各个文件的作用是

json-server
  - node_modules
  - public // 项目启动后的首页的静态资源,可以直接从官方git中的public文件夹下复制过来
  - db.json // 数据存储文件
  - json-server.json // 配置文件
  - middleware.js // 自定义js逻辑
  - package.json
  - package-lock.json
  - routes.json // 自定义路由文件

package.json的文件内容如下

{
  "name": "json-server",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "json-server -c json-server.json db.json --middlewares middleware.js"
  },
  "dependencies": {
    "json-server": "0.17.4"
  }
}

在项目中运行 npm install,加载 json-server 依赖。加载成功后执行 json-server -v 查看版本号,测试是否安装成功

json-server.json 内容如下,主要作用为配置一些系统参数

{
  "port": 5000,
  "watch": true,
  "static": "./public",
  "routes": "./routes.json",
  "read-only": false,
  "no-cors": false,
  "no-gzip": false
}

接着编辑db.json,这里的 json key (这里是“demo”)是对外暴露的接口,json value 是对外返回的数据结构

{
  "demo": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ]
}

routes.json中配置的是路由转发关系,没有特殊需求不配置也是可以的

{
  "/test":"/demo"
}

由于项目中的接口默认为POST方式,但在 json-server 的默认配置中,POST请求会对db.json文件中的数据进行修改。 所以在middleware.js文件中,将请求进来的POST转换为GET,以获得mock返回值,但日志输出时的请求方式还是GET。

middleware.js

module.exports = (request, response, next) => {
    if (request.method === 'POST') {
        request.method = 'GET'
        request.query = request.body
    }
    next()
}

上述文件都配置完成后,在控制台运行 npm run start 即可启动

 由于配置了路由,所以以下两个url都是可以访问到数据的

 在控制台也会打印出对应的访问日志

 

标签:文件,db,request,js,json,server,mock
From: https://www.cnblogs.com/helios-fz/p/17761754.html

相关文章

  • EasyMock 使用方法与原理剖析
    https://www.ibm.com/developerworks/cn/opensource/os-cn-easymock/ Mock方法是单元测试中常见的一种技术,它的主要作用是模拟一些在应用中不容易构造或者比较复杂的对象,从而把测试与测试边界以外的对象隔离开。编写自定义的Mock对象需要额外的编码工作,同时也可能引入错误。Ea......
  • ubuntu server 网速测试
    ubuntuserver网速测试 speedtest-cli是一个用于测试网络带宽的命令行工具,可以快速测量下载和上传速度。你可以按照以下步骤安装和使用它:打开终端。安装speedtest-cli:sudo apt-get install speedtest-cli运行测试:speedtest-cli ......
  • idea 中无法连接 sql server 数据库,报错 [08S01] 驱动程序无法通过使用安全套接字层(S
    报的错误信息如下:[08S01]驱动程序无法通过使用安全套接字层(SSL)加密与SQLServer建立安全连接。错误:“PKIXpathbuildingfailed:sun.security.provider.certpath.SunCertPathBuilderException:unabletofindvalidcertificationpathtorequestedtarget”。ClientC......
  • Python中生成GeoJSON数据
    要在Python中生成GeoJSON数据,可以使用GeoJSON库,例如geojson库或geopandas库。以下是使用这些库生成GeoJSON数据的简单示例:使用geojson库生成GeoJSON数据首先,确保已安装了geojson库,可以使用pip进行安装:pipinstallgeojson然后,可以按照以下方式生成GeoJSON数据:importgeojso......
  • 动态的中国地图代码--json+echarts实现
    动态获取后台数据(list类型)的那种--终于会啦~~~~~~~<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>ECharts</title><!--引入echarts.js--><scriptsrc="/js/echarts.min.js&quo......
  • 21 JSONP
    JSONP为了解决浏览器跨域问题.jquery提供了jsonp请求.在网页端如果见到了服务器返回的数据是:​ xxxxxxxxxxdjsfkldasjfkldasjklfjadsklfjasdlkj({json数据})​ 在Preview里面可以像看到json一样去调试這就是jsonp。这东西依然是ajax.jsonp的逻辑是.在发送请求的时候.带......
  • win Server系统安装“.NET Framework 3.5”
    Win2012、Win2016中.NETFramework版本分别是4.5与4.6,因此需要手动安装 .NETFramework3.5。(Win2012和Win2016中的.NET3.5不通用)iso镜像sources/sxs目录中有 .NETFramework3.5安装文件(路径:sources/sxs)将文件单独放如一个目录当中,并在系统中调用   ......
  • typescript: Observer Pattern
     /***ObserverPattern观察者是一种行为设计模式,允许一个对象将其状态的改变通知其他对象*file:Observerts.ts*TheSubjectinterfacedeclaresasetofmethodsformanagingsubscribers.*/interfaceGeovinSubject{//Attachanobservertothesub......
  • 【前端小技巧】如何使用 Eolink Apilkit 调用 Mock ?
    在开发过程中,进度比较赶的情况下,前端人员当页面写完时,后台的接口还没写完,等要交付的时候后端才把接口给你,这个时候就很尴尬。这个时候Mock就可以很好的解决这个问题,前端团队可以在API还没开发完成的情况下,借助MockAPI实现预对接,加速开发进程。测试团队可以通过MockAPI解......
  • ​左手 Serverless,右手 AI,7 年躬身的古籍修复之路
    作者:宋杰“AI可以把我们思维体系当中,过度专业化、过度细分的这些所谓的知识都替代掉,让我们集中精力去体验自己的生命。我挺幸运的,代码能够有AI辅助,也能够有Serverless解决我的运营成本问题。Serverless它是一个GameChanger,就是彻底改变云计算模式的创新。”我叫宋杰,是......