1. 前期回顾

项目源码地址：https://github.com/ruogu-coder/ruogu-like

在前面的内容中，我们完善了后端系统的引入 Redis、 消息队列、分布式数据库 TiDB，对系统进行压力测试和可观测性优化，但是这个系统最后要呈现出来还是需要通过前端页面。

2. 本期目标

利用 Cursor 生成前端项目，对接后端接口，将博客和点赞展示在页面当中。

3. 代码实现

3.1. 创建前端目录

在 ruogu-like目录下新建front-code目录

3.2. cursor 实现

1. 使用 cursor 打开ruogu-like项目

项目需求：

• 项目名称： 亿级流量点赞系统

• 技术栈： Vue 3 + Vite + Ant Design Vue

• 功能模块：

• 用户管理： 包括用户注册、登录、信息修改、密码修改、冻结/解冻、删除等功能。

• 博客管理： 包括博客列表展示、博客详情查看等功能。

• 点赞功能： 包括点赞和取消点赞功能。

接口文档：

• 接口地址： http://localhost:8080/api/v3/api-docs
• 接口详情： 请参考提供的 OpenAPI 3.0 规范文档。
• 一定要按照接口文档来实现

具体要求：

1. 用户管理模块：

   • 用户注册： 实现用户注册功能，包括账号、密码和确认密码的输入验证。
   • 用户登录： 实现用户登录功能，登录成功后返回用户信息并保存在本地存储中。
   • 用户信息修改： 允许用户修改个人信息，如昵称、头像和简介。
   • 密码修改： 允许用户修改密码，需要验证旧密码并确认新密码。
   • 用户冻结/解冻： 管理员可以冻结或解冻用户账号。
   • 用户删除： 管理员可以删除用户账号。
   • 用户列表： 实现用户列表的分页展示，支持按用户昵称、角色等条件进行筛选。

2. 博客管理模块：

   • 博客列表： 实现博客列表的分页展示，支持按博客名称进行筛选。
   • 博客详情： 根据博客 ID 获取博客详情信息。

3. 点赞功能模块：

   • 点赞： 用户对博客进行点赞操作。
   • 取消点赞： 用户取消对博客的点赞操作。

4. 其他要求：

   • 响应式设计： 确保项目在不同设备上具有良好的响应式表现。
   • 代码规范： 遵循 Vue 3 的最佳实践和代码规范。
   • 错误处理： 对接口请求进行错误处理，并给出相应的提示信息。
   • 用户体验： 注重用户体验，提供友好的交互界面和操作流程。

5. 生成位置要求：

   1. 项目的绝对路径 C:\Users\Administrator\IdeaProjects\ruogu-like\front-code
   2. front-code 为项目最上级的目录

生成代码结构：

• src/views/：存放各个功能模块的视图组件。

• User/：用户管理模块相关组件。

• Register.vue：用户注册页面。

• Login.vue：用户登录页面。

• Profile.vue：用户个人信息页面。

• Password.vue：用户密码修改页面。

• List.vue：用户列表页面。

• Blog/：博客管理模块相关组件。

• List.vue：博客列表页面。

• Detail.vue：博客详情页面。

• src/components/：存放可复用的组件。

• ThumbButton.vue：点赞按钮组件。

• src/api/：存放 API 请求相关代码。

• user.js：用户管理模块的 API 请求。

• blog.js：博客管理模块的 API 请求。

• thumb.js：点赞功能模块的 API 请求。

• src/store/：存放 Vuex 状态管理相关代码。

• index.js：Vuex 状态管理入口文件。

• modules/：存放各个模块的状态管理代码。

• user.js：用户管理模块的状态管理。

• blog.js：博客管理模块的状态管理。

请根据以上需求生成相应的前端项目代码。

3.3. 展示