# 编程论坛前台 **Repository Path**: zmd1992/programming-forum-front-desk ## Basic Information - **Project Name**: 编程论坛前台 - **Description**: 帖子管理：浏览、搜索、发布、编辑帖子 评论系统：楼层回复、点赞、评分功能 用户系统：注册、登录、个人资料、权限管理 积分系统：积分获取、积分兑换、积分规则 消息通知：系统消息、评论通知、@提醒 收藏功能：帖子收藏、收藏管理 即时通讯：基于 WebSocket 的聊天室 文件上传：图片、头像上传（支持 MinIO） 响应式设计：适配各种屏幕尺寸 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-12-04 - **Last Updated**: 2026-06-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 编程论坛 - 前台项目 ## 项目简介 编程论坛前台项目是一个基于 Vue 3 + Vite + TypeScript 的现代化论坛系统，提供帖子发布、评论互动、积分系统、用户管理等完整的社区功能。 ## 功能特性 - **帖子管理**：浏览、搜索、发布、编辑帖子 - **评论系统**：楼层回复、点赞、评分功能 - **用户系统**：注册、登录、个人资料、权限管理 - **积分系统**：积分获取、积分兑换、积分规则 - **消息通知**：系统消息、评论通知、@提醒 - **收藏功能**：帖子收藏、收藏管理 - **即时通讯**：基于 WebSocket 的聊天室 - **文件上传**：图片、头像上传（支持 MinIO） - **响应式设计**：适配各种屏幕尺寸 ## 项目预览 ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191547.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191611.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191630.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191704.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191738.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191753.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191806.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191820.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191835.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191855.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191919.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191933.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20191951.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20192005.png) ![输入图片说明](img/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202026-06-03%20192057.png) ## 技术栈 ### 核心框架 | 技术 | 版本 | 说明 | |------|------|------| | Vue | 3.5.13 | 渐进式 JavaScript 框架 | | Vue Router | 4.5.0 | Vue.js 官方路由 | | Pinia | 3.0.1 | 新一代状态管理库 | | TypeScript | 5.7.3 | 类型安全的 JavaScript 超集 | | Vite | 6.1.0 | 下一代前端构建工具 | ### UI 组件库 | 技术 | 版本 | 说明 | |------|------|------| | Element Plus | 2.9.5 | Vue 3 组件库 | | Bootstrap | 5.3.8 | CSS 框架（响应式布局） | | Mavon Editor | 3.0.1 | Markdown 编辑器 | ### 工具库 | 技术 | 版本 | 说明 | |------|------|------| | Axios | 1.8.1 | HTTP 客户端 | | ECharts | 5.6.0 | 数据可视化图表库 | | NProgress | 0.2.0 | 页面进度条 | | Screenfull | 6.0.2 | 全屏切换 | | html2canvas | 1.4.1 | HTML 转 Canvas | | Spark MD5 | 3.0.2 | MD5 哈希计算 | | Vue LazyLoad Imgs | 1.0.2 | 图片懒加载 | ## 快速开始 ### 环境要求 - Node.js >= 18.0.0 - npm >= 8.0.0 ### 安装依赖 ```bash # 使用 npm 安装 npm install # 如果遇到 vue-lazyload-imgs 安装错误，请使用以下命令 npm install --ignore-scripts ``` ### 开发模式 ```bash # 启动开发服务器 npm run dev # 访问地址 http://localhost:3000 ``` ### 生产构建 ```bash # 类型检查并构建 npm run build # 仅构建（跳过类型检查） npm run build-only # 预览构建结果 npm run preview ``` ### 类型检查 ```bash npm run type-check ``` ## 项目结构 ``` programming-forum-front-desk/ ├── dist/ # 构建产物目录 ├── public/ # 静态资源目录 │ └── favicon.ico # 网站图标 ├── src/ # 源代码目录 │ ├── api/ # API 接口定义 │ ├── assets/ # 静态资源 │ │ ├── icons/ # SVG 图标 │ │ ├── images/ # 图片资源 │ │ ├── base.css # 基础样式 │ │ └── main.css # 主样式文件 │ ├── components/ # 组件目录 │ │ ├── Chat/ # 聊天组件 │ │ ├── CheckIn/ # 签到组件 │ │ ├── Comment/ # 评论组件 │ │ ├── ContentDetail/ # 内容详情组件 │ │ ├── LoginDialog/ # 登录对话框 │ │ ├── MavonEditor/ # Markdown 编辑器 │ │ ├── Rating/ # 评分组件 │ │ ├── Reply/ # 回复组件 │ │ ├── SvgIcon/ # SVG 图标组件 │ │ └── ... # 其他组件 │ ├── config/ # 配置文件 │ │ └── progress.ts # 进度条配置 │ ├── router/ # 路由配置 │ │ └── index.ts # 路由主文件 │ ├── stores/ # Pinia 状态管理 │ │ ├── counter.ts # 计数器状态 │ │ ├── route.ts # 路由状态 │ │ └── user.ts # 用户状态 │ ├── utils/ # 工具函数 │ │ ├── date.ts # 日期工具 │ │ ├── minio.ts # MinIO 工具 │ │ └── websocket.ts # WebSocket 工具 │ ├── views/ # 页面视图 │ │ ├── Index.vue # 首页 │ │ ├── loginOrRegister.vue # 登录注册页 │ │ ├── contentDetail.vue # 帖子详情页 │ │ ├── personinfo.vue # 个人中心 │ │ └── ... # 其他页面 │ ├── App.vue # 根组件 │ └── main.ts # 入口文件 ├── .env # 环境变量 ├── index.html # HTML 入口 ├── package.json # 项目依赖 ├── vite.config.ts # Vite 配置 ├── tsconfig.json # TypeScript 配置 └── README.md # 项目说明 ``` ## 配置说明 ### 环境变量配置 (.env) ```bash # API 基础地址 VITE_API_URL=http://localhost:8080 ``` ### Vite 配置 (vite.config.ts) 主要配置项： - **开发端口**：3000 - **API 代理**：`/api` → `http://localhost:8080` - **路径别名**：`@` → `src` 目录 - **SVG 图标**：自动注册 `src/assets/icons/svg` 目录下的图标 ### 请求拦截器 (src/api/request.ts) - **请求超时**：60 秒 - **Token 管理**：自动在请求头中携带 `AuthorizationappUser` - **响应处理**：自动处理 401（未授权）、403（禁止）、500（服务端错误）状态码 ## 目录导航 - [技术栈](./docs/技术栈.md) - [目录结构](./docs/目录结构.md) - [路由说明](./docs/路由说明.md) - [API 接口说明](./docs/API接口说明.md) - [组件说明](./docs/组件说明.md) - [样式说明](./docs/样式说明.md) - [开发指南](./docs/开发指南.md) ## 常见问题 ### Q: npm install 失败？ A: 尝试使用 `npm install --ignore-scripts` 跳过部分脚本的执行，然后再运行构建。 ### Q: 如何更改 API 地址？ A: 修改 `vite.config.ts` 中的 `server.proxy.target` 配置，或修改 `.env` 文件中的 `VITE_API_URL`。 ### Q: 如何添加新页面？ A: 在 `src/views/` 目录下创建 `.vue` 文件，然后在 `src/router/index.ts` 中添加路由配置。 ### Q: 如何添加新的 API 接口？ A: 在 `src/api/` 目录下创建或修改相应的 `.ts` 文件，使用 `get/post/put/del` 辅助函数。 ## 开发规范 - 使用 TypeScript 进行类型声明 - 组件采用 `