前端模拟接口工具-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)
      		}
      	})
      }
相关推荐
wordbaby15 分钟前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹20 分钟前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel27 分钟前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh41 分钟前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的1 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人1 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
xw51 小时前
移动端调试上篇
前端
@菜菜_达2 小时前
Lodash方法总结
开发语言·前端·javascript
YAY_tyy2 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel