前端模拟接口工具-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)
      		}
      	})
      }
相关推荐
m0_4711996327 分钟前
【vue】vue2和vue3响应式原理区别
前端·javascript·vue.js
拜无忧39 分钟前
纯css,顺时针3d旋转基座(摩天轮效应)
前端·css
奋斗猿1 小时前
从0到1开发跨平台桌面应用:Electron 实战全指南
前端·electron
之恒君1 小时前
script 标签中的 async 和 defer 的区别
前端·javascript
浪浪山_大橙子1 小时前
使用Electron+Vue3开发Qwen3 2B桌面应用:从想法到实现的完整指南
前端·人工智能
狗哥哥1 小时前
聊聊设计模式在 Vue 3 业务开发中的落地——从一次代码重构说起
前端·架构
shenzhenNBA1 小时前
如何在python文件中使用日志功能?简单版本
java·前端·python·日志·log
掘金泥石流1 小时前
分享下我创业烧了 几十万的 AI Coding 经验
前端·javascript·后端
用户47949283569151 小时前
JavaScript 为什么选择原型链?从第一性原理聊聊这个设计
前端·javascript
new code Boy1 小时前
vscode左侧栏图标及目录恢复
前端·javascript