4.2.3.7 模块作业

我们选择了一个电子书商城作为作业。这里你需要先部署一个 json-server 作为基础的后端，将后端运行起来后，在这个后端的基础上进行前端开发。

作业：电子书商城

项目简介：实现一个简单的电子书商城，用户可以浏览电子书，查看详情，将书籍加入购物车，并模拟结算和购买操作。

要求：

多页面：
- 使用 React Router 管理多页面。当然你要单页面也行，不强求。
- 首页：展示电子书列表和推荐书籍。
- 书籍详情页：展示电子书的详细信息。
- 购物车页面：展示用户选择的书籍和总价，支持删除书籍。
- 结算页面：填写用户信息并确认购买。
全局状态管理：
- 使用 Zustand 管理一些全局的客户端状态，比如目前选中了但是还没放进购物车的书籍。或者可以存登陆状态。不建议用 Zustand 做购物车，因为它原则上用来管理纯客户端状态。当然如果你的购物车是纯客户端实现的那也行，不过可能需要使用 zustand 的 persist middleware 来实现状态持久化存储，免得一个刷新全没了。
- 管理用户登录状态（可选，自行拓展 json-server）。
服务端请求：
- 使用 React Query 可以用 Query 从后端 API 获取电子书列表、书籍详情、购物车。使用 Mutation 来管理需要上传的购物车数据。（想一想，为什么不推荐 useEffect ）
- 提交用户购买信息到服务器，并模拟返回购买结果。
资源（可选要求）：
- 支持资源缓存和优化，确保在多次访问时减少加载时间。

可选功能：

用户登录 / 注册功能。需要自行拓展 json-server。
用户书籍购买历史查看。需要自行拓展 json-server。
书籍的封面图片资源，使用公共 API 或本地图片。(json-server 也自带静态文件托管功能，你们可以自己研究)

后端部署

为了提供一个尽量简单的标准的后端环境，我们会使用 json-server 来 host 需要的电子书数据，生成 API。这个库可以将 JSON 文件包装成一个 API Server，方便前端在后端没写完的时候使用假数据开发并调试。

如果有生之年我们 Wiki 能写出后端教程的话也许可以和这里联动。

按照以下步骤进行设置。

步骤 1: 安装 `json-server`

首先，安装 json-server ，它可以通过 JSON 文件快速创建一个 RESTful API。新建一个空文件夹，随便命名成你想要的名字，打开，在里面运行

bash

npm install json-server

步骤 2: 生成 15 本电子书的数据

我们来生成 15 本电子书的数据，存储在 db.json 文件中：

创建 `db.json`

json

{
  "books": [
    { "id": 1, "title": "JavaScript: The Good Parts", "author": "Douglas Crockford", "price": 29.99 },
    { "id": 2, "title": "Eloquent JavaScript", "author": "Marijn Haverbeke", "price": 25.99 },
    { "id": 3, "title": "You Don't Know JS", "author": "Kyle Simpson", "price": 32.99 },
    { "id": 4, "title": "Clean Code", "author": "Robert C. Martin", "price": 34.99 },
    { "id": 5, "title": "JavaScript: The Definitive Guide", "author": "David Flanagan", "price": 39.99 },
    { "id": 6, "title": "The Pragmatic Programmer", "author": "Andy Hunt", "price": 38.99 },
    { "id": 7, "title": "Refactoring", "author": "Martin Fowler", "price": 36.99 },
    { "id": 8, "title": "Design Patterns", "author": "Erich Gamma", "price": 42.99 },
    { "id": 9, "title": "The Mythical Man-Month", "author": "Frederick P. Brooks Jr.", "price": 29.99 },
    { "id": 10, "title": "Effective Java", "author": "Joshua Bloch", "price": 40.99 },
    { "id": 11, "title": "Introduction to Algorithms", "author": "Thomas H. Cormen", "price": 45.99 },
    { "id": 12, "title": "Programming Pearls", "author": "Jon Bentley", "price": 27.99 },
    { "id": 13, "title": "Code Complete", "author": "Steve McConnell", "price": 37.99 },
    { "id": 14, "title": "The Art of Computer Programming", "author": "Donald E. Knuth", "price": 99.99 },
    { "id": 15, "title": "The Clean Coder", "author": "Robert C. Martin", "price": 33.99 }
  ],
  "cart": []
}

步骤 3: 启动 `json-server`

在你的项目根目录中创建好 db.json 后，使用以下命令启动 json-server ：

bash

npx json-server db.json --port 5000

此命令将在 http://localhost:5000 上启动服务器，并提供 RESTful API 来访问和操作 db.json 中的数据。

步骤 4: API 文档

API 文档（使用 `fetch` 示例）

你现在可以使用 fetch 在前端与 json-server 创建的电子书商城 API 进行交互。通过这些 API，你能够获取书籍列表、查看单本书籍的详情、将书籍添加到购物车、查看购物车内容以及从购物车中删除书籍。希望这个文档能帮助你顺利实现你的项目！如果有其他问题，随时问我。

获取所有电子书

URL: /books
方法: GET
描述：获取所有电子书列表。

请求示例:

javascript

fetch('http://localhost:5000/books')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching books:', error));

响应:

json

[
  { "id": 1, "title": "JavaScript: The Good Parts", "author": "Douglas Crockford", "price": 29.99 },
  { "id": 2, "title": "Eloquent JavaScript", "author": "Marijn Haverbeke", "price": 25.99 },
  { "id": 3, "title": "You Don't Know JS", "author": "Kyle Simpson", "price": 32.99 },
  ...
]

获取单本电子书

URL: /books/:id
方法: GET
描述：根据电子书的 ID 获取单本书籍的详情。

请求示例:

javascript

const bookId = 1; // 替换为你想获取的书籍 ID
fetch(`http://localhost:5000/books/${bookId}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching book:', error));

响应:

json

{ "id": 1, "title": "JavaScript: The Good Parts", "author": "Douglas Crockford", "price": 29.99 }

将书籍添加到购物车

URL: /cart
方法: POST
描述：将电子书添加到购物车。

请求示例:

javascript

fetch('http://localhost:5000/cart', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ bookId: 1 }) // 替换为你要添加的书籍 ID
})
.then(response => response.json())
.then(data => console.log('Book added to cart:', data))
.catch(error => console.error('Error adding book to cart:', error));

响应:

json

[
  { "id": 1, "title": "JavaScript: The Good Parts", "author": "Douglas Crockford", "price": 29.99 }
]

获取购物车内容

URL: /cart
方法: GET
描述：获取当前购物车中的书籍列表。

请求示例:

javascript

fetch('http://localhost:5000/cart')
  .then(response => response.json())
  .then(data => console.log('Cart contents:', data))
  .catch(error => console.error('Error fetching cart:', error));

响应:

json

[
  { "id": 1, "title": "JavaScript: The Good Parts", "author": "Douglas Crockford", "price": 29.99 }
]

删除购物车内容

URL: /cart/:id
方法: DELETE
描述：删除购物车中的某本书籍。

请求示例:

javascript

const cartItemId = 1; // 替换为你要删除的购物车项 ID
fetch(`http://localhost:5000/cart/${cartItemId}`, {
  method: 'DELETE'
})
.then(response => {
  if (response.ok) {
    console.log('Book removed from cart.');
  } else {
    console.error('Error removing book from cart.');
  }
})
.catch(error => console.error('Error:', error));

响应：空响应 ( 204 No Content )

其他提示

你可以在 db.json 中添加其他资源，并且 json-server 会自动为你生成相应的 REST API。
json-server 提供了非常简单的功能，例如过滤、排序等。你可以在 json-server 文档中查看更多高级用法。

现在你已经配置好了一个基于 json-server 的简单电子书商城后端，可以与 React 前端进行 API 请求交互。

前端部署

你应该已经有一个环境了。如果没有，请参考 4.2.3.2 现代前端构建工具中给出的部署指南。

然后用 VSCode 打开文件夹的方式打开整个项目，你需要很多跨文件的编辑和新建 / 删除文件的操作，所以以项目为单位是推荐的。

接下来你应该可以使用模块化的方式来组织，一个组件放进一个 .tsx 文件。不要忘记使用树形组织方式一个文件放一个 JSX 组件。 React: 将 UI 视为树。以及你需要善用 文件夹 来组织你的项目结构，可以在框架给的模板下面自己发挥。

如果一切 OK 就可以开始了，你可以完全自由发挥 —— 或者去抄袭淘宝？随便你们吧，这里又不需要打分。

作业提交

你可以把你的作业的 Github 仓库链接发给 fltbk@outlook.com 来请我批改并给出意见。如果有问题也欢迎提问。

4.2.1 导读模块

4.2.2 前端三件套基础

4.2.3 现代前端技术栈

4.3.1 引入

4.3.2 week-1 前端三件套

4.3.3 week-2 Git初步

4.3.4 week-3 DOM操作 Node基础

4.3.5 week-4 Vue入门 Express路由

4.3.6 week-5 Vue路由 POST请求处理

4.2.3.7 模块作业

作业：电子书商城

后端部署

步骤 1: 安装 `json-server`

步骤 2: 生成 15 本电子书的数据

创建 `db.json`

步骤 3: 启动 `json-server`

步骤 4: API 文档

API 文档（使用 `fetch` 示例）

获取所有电子书

获取单本电子书

将书籍添加到购物车

获取购物车内容

删除购物车内容

其他提示

前端部署

作业提交

4.2.3.7 模块作业 ​

作业：电子书商城 ​

后端部署 ​

步骤 1: 安装 json-server ​

步骤 2: 生成 15 本电子书的数据 ​

创建 db.json ​

步骤 3: 启动 json-server ​

步骤 4: API 文档 ​

API 文档（使用 fetch 示例） ​

获取所有电子书 ​

获取单本电子书 ​

将书籍添加到购物车 ​

获取购物车内容 ​

删除购物车内容 ​

其他提示 ​

前端部署 ​

作业提交 ​

4.2.3.7 模块作业

作业：电子书商城

后端部署

步骤 1: 安装 `json-server`

步骤 2: 生成 15 本电子书的数据

创建 `db.json`

步骤 3: 启动 `json-server`

步骤 4: API 文档

API 文档（使用 `fetch` 示例）

获取所有电子书

获取单本电子书

将书籍添加到购物车

获取购物车内容

删除购物车内容

其他提示

前端部署

作业提交