【Vue】使用 `json-server` 准备后端接口服务环境(了解)

其实在以后我们的开发过程中,当后端接口还没有准备就绪的时候,我们是可以利用一些工具快速的帮我们生成一套增删改查的接口的,这个工具就是json-server

  1. 安装全局工具 json-server (全局工具仅需要安装一次)

    官网:json-server

    yarn global add json-server 或 npm i json-server -g

  2. 代码**根目录(src)**新建一个 db 目录

    叫什么目录名字不重要,重要的是index.json文件

  3. 将资料 index.json 移入 db 目录

    由于文件是json文件,属性名必须用双引号引起来

    json 复制代码
    {
       "cart": [
            {
                "id": 100001,
                "name": "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
                "price": 128,
                "count": 1,
                "thumb": "https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg"
            }
       ]
    }
  4. 进入 db 目录,执行命令,启动后端接口服务 (使用--watch 参数 可以实时监听 json 文件的修改)

    json-server --watch index.json

相关推荐
小满zs18 分钟前
React-router v7 第一章(安装)
前端·react.js
程序员小续24 分钟前
前端低代码架构解析:拖拽 UI + 代码扩展是怎么实现的?
前端·javascript·面试
wangpq31 分钟前
微信小程序地图callout气泡图标在ios显示,在安卓机不显示
前端·vue.js
curdcv_po35 分钟前
Vue3 组件通信方式全解析
前端
Auroral15639 分钟前
基于RabbitMQ的异步通知系统设计与实现
前端·后端
栗筝i40 分钟前
Spring 核心技术解析【纯干货版】- XV:Spring 网络模块 Spring-Web 模块精讲
前端·网络·spring
打野赵怀真42 分钟前
H5如何禁止动画闪屏?
前端·javascript
zhangxingchao42 分钟前
关于浮点数的思考
前端
Riesenzahn43 分钟前
你喜欢Sass还是Less?为什么?
前端·javascript