前端模拟接口工具-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)
      		}
      	})
      }
相关推荐
pobu1686 分钟前
aksk前端签名实现
java·前端·javascript
烛阴12 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw017 分钟前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦30 分钟前
VUE实现数字翻牌效果
前端·javascript·vue.js
南岸月明39 分钟前
我与技术无缘,只想副业搞钱
前端
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin1 小时前
前端八股-promise
前端·javascript
星语卿2 小时前
浏览器重绘与重排
前端·浏览器
小小小小宇2 小时前
前端实现合并两个已排序链表
前端