准备后端接口服务环境

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

安装全局工具 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获取数据

相关推荐
凉茶社几秒前
shadcn/ui 默认改用 Base UI,Radix 被放弃了吗?
前端
Vuji2 分钟前
ReAct 与 Plan-Execute:两种 Agent 范式的实战对比
前端·agent
用户61595868000224 分钟前
从零原生搭建一个微前端简易框架
前端
小月土星5 分钟前
React + TypeScript 企业级开发实战:从类型约束到组件设计
前端
沙洲11 分钟前
Vite 环境变量终极指南:从原理到企业级实战
前端
刘婉晴19 分钟前
【Web漏洞】SQL 注入实战技巧
前端·数据库·sql
di24k24k40 分钟前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
NutShell Wang1 小时前
每帧重建整条路径、每秒倾倒 48MB 给 GC:实时折线图渲染架构的实测复盘
前端·性能优化·架构·图形渲染·数据可视化·vibe coding
JKooll1 小时前
WPS 表格 DISPIMG 函数实战:用 JavaScript 将图片真正嵌入单元格
javascript·wps
小彤花园1 小时前
和 AI 结对写网站:从 JSON 到一整个工具集
前端·人工智能·程序员