前端模拟接口工具-json-server

根据 JSON 数据生成 RESTful API 模拟服务。

方法:
  • 使用 json-server
    json-server 是一个用来快速生成模拟 REST API 的工具,你可以通过以下步骤使用它:

    1. 安装 json-server

      npm install json-server --save-dev
      
    2. 创建一个 db.json 文件,定义模拟的数据:

      javascript 复制代码
      {
        "banners": [
          { "id": 1, "image": "banner1.jpg", "title": "Banner 1" },
          { "id": 2, "image": "banner2.jpg", "title": "Banner 2" }
        ],
        "my": [
      	  { "id": 3, "image": "banner1.jpg", "title": "Banner 1" },
      	  { "id": 4, "image": "banner2.jpg", "title": "Banner 2" }
        ]
      }
    3. 启动 json-server

      javascript 复制代码
      npx json-server --watch assets/data.json --port 3000

      这样,你就能访问到一个模拟的后端 API,例如 http://localhost:3000/banners。需要以管理员的身份运行

    4. 在前端代码中请求这个模拟接口:

      javascript 复制代码
      const getData1 = () => {
      	uni.request({
      		method:'GET',
      		url: 'my',
      		success: (res) => {
      		    console.log(res.data)  // 模拟的数据
      		},
      		fail: (err) => {
      		    console.error(err)
      		}
      	})
      }
      const getData2 = () => {
      	uni.request({
      		method:'GET',
      		url: 'banners',
      		success: (res) => {
      		    console.log(res.data)  // 模拟的数据
      		},
      		fail: (err) => {
      		    console.error(err)
      		}
      	})
      }
相关推荐
ordinary902 分钟前
指令v-on 调用传参
前端·javascript·vue.js
想一个不重名的名字21 分钟前
web端http请求响应头集合
前端·网络协议·http
右恩26 分钟前
【二维码美化】
服务器·前端·python·学习
蜂鸟视图fengmap1 小时前
蜂鸟云平台2024年1月重大更新:JavaScript SDK v3.1.4 & 微信小程序SDK v0.9.4 亮点解析
开发语言·前端·javascript·微信小程序·ecmascript·主题编辑器·蜂鸟视图
哟哟耶耶2 小时前
component-后端返回图片(数据)前端进行复制到剪切板
前端·javascript·vue.js
小白64022 小时前
浅谈目前我开发的前端项目用到的设计模式
前端·设计模式·状态模式
液态不合群2 小时前
大文件传输与断点续传实现(极简Demo:React+Node.js)
前端·react.js·node.js
儒道易行2 小时前
【bWAPP】XSS跨站脚本攻击实战
前端·web安全·网络安全·xss
陈大鱼头2 小时前
写在裸辞 5 个月之后的年终总结
前端·面试·github