HDU-CS-WIKI

Appearance

4.2.3.7 模块作业 ​

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

作业：电子书商城 ​

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

要求：

  1. 多页面：

    • 使用 React Router 管理多页面。当然你要单页面也行，不强求。
    • 首页：展示电子书列表和推荐书籍。
    • 书籍详情页：展示电子书的详细信息。
    • 购物车页面：展示用户选择的书籍和总价，支持删除书籍。
    • 结算页面：填写用户信息并确认购买。

  2. 全局状态管理：

    • 使用 Zustand 管理购物车中的书籍状态，计算总价和处理添加 / 删除操作。
    • 管理用户登录状态（可选，自行拓展 json-server）。

  3. 服务端请求：

    • 使用 React Query 从后端 API 获取电子书列表、书籍详情（可以使用 Mock 数据或 JSON 服务器）。（想一想，为什么不推荐 useEffect ）
    • 提交用户购买信息到服务器，并模拟返回购买结果。

  4. 资源（可选要求）：

    • 支持资源缓存和优化，确保在多次访问时减少加载时间。

可选功能：

  • 用户登录 / 注册功能。需要自行拓展 json-server。
  • 用户书籍购买历史查看。需要自行拓展 json-server。
  • 书籍的封面图片资源，使用公共 API 或本地图片。

后端部署 ​

为了提供一个尽量简单的标准的后端环境，我们会使用 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 来请我批改并给出意见。如果有问题也欢迎提问。

Made with ❤️ by ALL 协作者

Copyright © 2023-present Evan You && ALL 协作者