Copilot Agent MCP Workshop

书籍收藏应用

\[!NOTE\]（注：此标记通常用于表示以下内容为注意事项或提示） 这是一个演示仓库，将在GitHub Copilot Agents和MCP培训课程期间使用。

功能性

“Book Favorites”是一个全栈网页应用，允许用户：

• 注册新账户或使用现有凭据登录
• 浏览精选的50本书单
• 从他们的个人喜爱列表中添加书籍
• 在专门区域查看他们喜爱的书籍
• 享受简洁、现代且响应迅速的用户界面
• 体验受保护的路由（仅登录用户可访问书籍和收藏页面）

技术

• 前端：

- 使用React、Redux Toolkit和React Router构建 - 使用CSS模块实现模块化、响应式和现代的样式设计 - 通过Redux切片进行用户认证、书籍和收藏夹的状态管理 - 基于JWT的身份验证；令牌存储在localStorage中，并随API请求一起发送 - 保护路由和导航，实现无缝用户体验

• 后端：

- 使用Express.js的Node.js来创建RESTful API端点 - 使用JWT（JSON网络令牌）进行用户身份验证 - 使用JSON文件实现数据持久化books.json 和 users.json) - 用于认证、书籍和收藏夹的模块化路由结构 - 前端与后端通信已启用CORS（跨源资源共享）

• 其他：

- 适用于桌面和移动设备的响应式设计 - 清除空状态和错误处理 - 注重导航与反馈的现代用户界面/用户体验设计

______________________________________________________________________

设置

1. 克隆仓库：

   git clone 
   cd 

1. 安装依赖项：

  npm install
  cd frontend
  npm install
  cd ..

1. 运行后端服务器：

   npm run start:backend

后端运行在 http://localhost:4000 翻译为中文是：“本地主机上的4000端口”。不过，通常我们不会直接这样翻译URL，而是根据上下文可能解释为“访问本地运行的4000端口服务”或“打开本地4000端口的网页/应用”。在这里，为了简洁明了，可以翻译为“访问本地4000端口服务”

Backend execution logs example

1. 运行前端应用程序：

打开第二个终端。

   npm run start:frontend

前端运行在 http://localhost:5173 翻译为中文是：“本地主机的5173端口”。不过，通常我们不会直接翻译网址的格式，而是根据上下文来解释其含义。在这个例子中，它指的是运行在本地计算机（即你自己的电脑）上的某个Web应用或服务，监听的是5173端口

Frontend execution logs example

1. 运行测试（可选）：

打开第三个终端。

   npm run test

Tests execution logs example

1. 用法：

- 注册一个新账户或使用现有账户登录sandra/sandra))。 - 浏览书籍，添加收藏，享受这款应用吧！