模拟接口的方式: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/

 

 

 

posted @   Lamb~  阅读(643)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示