准备后端接口服务环境

准备后端接口服务环境(了解)

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

sh 复制代码
yarn global add json-server 或 npm i json-server  -g

代码根目录新建一个 db 目录

在db目录新建 index.json 文件

json 复制代码
{
"cart": [
 {
   "id": 100001,
   "name": "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
   "price": 128,
   "count": 1,
   "thumb": "https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg"
 },
 {
   "id": 100002,
   "name": "网易味央黑猪猪肘330g*1袋",
   "price": 39,
   "count": 14,
   "thumb": "https://yanxuan-item.nosdn.127.net/d0a56474a8443cf6abd5afc539aa2476.jpg"
 },
 {
   "id": 100003,
   "name": "KENROLL男女简洁多彩一片式室外拖",
   "price": 128,
   "count": 2,
   "thumb": "https://yanxuan-item.nosdn.127.net/eb1556fcc59e2fd98d9b0bc201dd4409.jpg"
 },
 {
   "id": 100004,
   "name": "云音乐定制IN系列intar民谣木吉他",
   "price": 589,
   "count": 1,
   "thumb": "https://yanxuan-item.nosdn.127.net/4d825431a3587edb63cb165166f8fc76.jpg"
   }
]
}

进入 db 目录,执行命令,启动后端接口服务 (使用--watch 参数 可以实时监听 json 文件的修改)

sh 复制代码
json-server  --watch  index.json

当服务启动后,可以访问http://localhost:3000/cart获取数据

相关推荐
Keely4028518 分钟前
Claude 配置使用墨刀MCP(modao-proto-mcp)
前端·aigc·claude
少卿24 分钟前
从零构建 React Native 导航体系-React Navigation
前端·react native
Wect24 分钟前
学习React-DnD:实现 TodoList 简单拖拽功能
前端·react.js
前端小书生25 分钟前
Google Map、Solar Api
前端·react.js·google
毕设十刻36 分钟前
基于Vue的售票系统开发3g480(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
行走的陀螺仪1 小时前
前端CI/CD 流程
前端·ci/cd·工程化·自动化构建
裕波1 小时前
前端,不止于 AI。12 月 20 日,FEDAY 2025,长沙见!
前端
excel1 小时前
使用 Canvas 实现扫描效果:宽度计算、透明度控制与旋转
前端
MC丶科1 小时前
Spring Boot + Vue 实现一个在线商城(商品展示、购物车、订单)!从零到一完整项目
前端·vue.js·spring boot
q***49862 小时前
分布式WEB应用中会话管理的变迁之路
前端·分布式