模拟接口的方式:json-server、mock.js
为什么要模拟接口?
项目中后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行开发。为了方便前端代码自测,提高开发效率,可以模拟生成数据进行前后端数据联调。
json-server
在使用json-server时,只需要提供一个json文件,或者写几行简单的js脚本就可以模拟出 restful API 的接口。
安装 json-server
npm install -g json-server
查看是否成功
$ json-server -v
0.14.0
使用
1.创建json文件
{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } }
2.启动json-server服务
注意:要在当前 json 文件所处文件夹下运行终端
json-server db.json
建立服务时可指定端口号主机名等:
json-server -w 路径下的json文件 -p 端口号(默认是3000)-h 主机名(默认localhost)
之后就可以向接口发请求了:
get是获取数据、post是添加数据、put是修改数据、delete是删除数据
mock.js
前后端分离,通过随机数据,模拟各种场景。不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。数据类型丰富,支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。方便扩展,支持支持扩展更多数据类型,支持自定义函数和正则。
官网:http://mockjs.com
github:https://github.com/nuysoft/Mock/wiki 很详细的mock.js相关知识介绍
fastmock 平台
这是一个基于 mock.js 的模拟接口平台,可以让你在没有后端程序的情况下能真实地在线模拟ajax请求。地址:https://www.fastmock.site/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期