AI导哈

书籍收藏应用

Book Favorites是一个全栈Web应用，允许用户注册、登录、浏览书籍列表、添加个人收藏书籍，并提供响应式用户界面和受保护的路由。

  • by sifiadlene
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 sifiadlene/copilot-agent-and-mcp

使用说明

书籍收藏应用

[!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 <repo-url>
cd <repo-name>

  2. 安装依赖项：

  npm install
  cd frontend
  npm install
  cd ..

  1. 运行后端服务器：

    npm run start:backend

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

  2. 运行前端应用程序：

    打开第二个终端。

    npm run start:frontend

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

  3. 运行测试（可选）：

    打开第三个终端。

    npm run test

  4. 用法：

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

相关 MCP