前端模拟接口工具-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)
      		}
      	})
      }
相关推荐
weixin_471383036 分钟前
Taro-03-页面生命周期
前端·javascript·taro
张拭心10 分钟前
Android 17 新特性:MessageQueue 无锁实现
android·前端
Asize13 分钟前
数组数据结构底层:从灵活到陷阱
前端·javascript·算法
十九画生13 分钟前
Ajax 入门:用 XHR 理解前后端异步请求
前端·javascript·后端
yingyima14 分钟前
Python re 模块速查:从实战对比中掌握正则表达式
前端
放下华子我只抽RuiKe51 小时前
FastAPI 全栈后端(三):数据库与 ORM
前端·数据库·react.js·oracle·性能优化·前端框架·fastapi
梵得儿SHI2 小时前
Vue 项目实战与性能优化全攻略:从代码、渲染到首屏,一站式解决卡顿慢加载
前端·vue.js·性能优化·vite·前端面试·前端优化·首屏优化
ShyanZh2 小时前
【skill】HTML PPT Skill:用 Claude Code 一句话生成专业演示文稿
前端·ai·html·powerpoint·skill
AI视觉网奇2 小时前
three教学 3d资产拼接源代码
前端·css·css3
程序猿阿伟3 小时前
《Chrome标签组搭建多任务高效浏览指南》
前端·chrome