# 编程网前台

**Repository Path**: zmd1992/programming-network-front-desk

## Basic Information

- **Project Name**: 编程网前台
- **Description**: 登录/注册  找回密码	首页 项目中心 	我的项目	文档中心	学习资料
	积分任务  兑换免费资料	项目详情 会员权益对比 视频学习
文档详情	个人中心
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-17
- **Last Updated**: 2026-06-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端文档

---

## 一、前台（programming-network-front-desk）

### 技术栈

| 依赖 | 版本 | 用途 |
|------|------|------|
| Vue 3 | 3.5 | 框架 |
| TypeScript | 5.7 | 类型系统 |
| Vite | 6.1 | 构建工具 |
| Element Plus | 2.9 | UI 组件库 |
| Pinia | 3.0 | 状态管理 |
| Vue Router | 4.5 | 路由 |
| Axios | 1.8 | HTTP 请求 |
| ECharts | 5.6 | 图表 |
| nprogress | 0.2 | 加载进度条 |
| vite-plugin-svg-icons | 2.0 | SVG 图标 |
| vue-lazyload-imgs | 1.0 | 图片懒加载 |
| screenfull | 6.0 | 全屏 |

### 路由表

| 路径 | 页面 | 说明 |
|------|------|------|
| `/login` | login.vue | 登录/注册 |
| `/findpwd` | findpwd.vue | 找回密码 |
| `/index` | Index.vue | 首页 |
| `/itemcenter` | itemcenter.vue | 项目中心 |
| `/myitem` | myitem.vue | 我的项目 |
| `/doccenter` | doccenter.vue | 文档中心 |
| `/studyfile` | studyfile.vue | 学习资料 |
| `/pointTask` | PointsTask.vue | 积分任务 |
| `/exchangeForFreeMaterials` | ExchangeForFreeMaterials.vue | 兑换免费资料 |
| `/itemdetail/:id` | detail.vue | 项目详情 |
| `/memberdetail` | comparisonOfMemberBenefits.vue | 会员权益对比 |
| `/WatchTheVideoWithKnocking/:id` | WatchTheVideoWithKnocking.vue | 视频学习 |
| `/documentDetail/:id` | documentDetail.vue | 文档详情 |
| `/personcenter` | personcenter.vue | 个人中心 |
| `/:pathMatch(.*)` | NotFound | 404 页面 |

### 其它源码地址

后端：https://gitee.com/zmd1992/programming-network-api.git

后台：https://gitee.com/zmd1992/programming-network-backend.git

### 项目截图

![输入图片说明](https://portalback.springautumncome.asia/files/662dbf6f25184c48974479cdf01091d9.png)![输入图片说明](https://portalback.springautumncome.asia/files/822e6470a0cb4a9b98210eb1feff6abd.png)![输入图片说明](https://portalback.springautumncome.asia/files/022de93e88d64c338c3123be600cbb89.png)![输入图片说明](https://portalback.springautumncome.asia/files/16d3e47376c54dabba9d773550d14d19.png)![输入图片说明](https://portalback.springautumncome.asia/files/344cc100c8f942fa82b7c1a675b5485b.png)![输入图片说明](https://portalback.springautumncome.asia/files/cb342329d21143499acf14eab149163b.png)![输入图片说明](https://portalback.springautumncome.asia/files/057defc7322a46d681701692568d59bc.png)![输入图片说明](https://portalback.springautumncome.asia/files/3cb96d919d7c4f3f94e24b326c9e811d.png)![输入图片说明](https://portalback.springautumncome.asia/files/fa919c7024e749c89fa7e747dc330f15.png)![输入图片说明](https://portalback.springautumncome.asia/files/82b07d69a7ea4743bf9aaac2174dfe82.png)![输入图片说明](https://portalback.springautumncome.asia/files/755349b13120421d812eac99595503e7.png)![输入图片说明](https://portalback.springautumncome.asia/files/61bfa418916a44e8a109629907f2873b.png)![输入图片说明](https://portalback.springautumncome.asia/files/4e13c36197014cae938a9d6a32fd2a97.png)![输入图片说明](https://portalback.springautumncome.asia/files/a621cf01fc6648cc8bf974775ab5227c.png)![输入图片说明](https://portalback.springautumncome.asia/files/51abc80b8951469bacaac69b6d95927f.png)![输入图片说明](https://portalback.springautumncome.asia/files/9f8c4523e89849c3b9873d31b5eb63d3.png)![输入图片说明](https://portalback.springautumncome.asia/files/2ed0c9494f6047fc8bae0be7b9e9394e.png)![输入图片说明](https://portalback.springautumncome.asia/files/a11b5b6787424877b3093209d5fe6b3a.png)![输入图片说明](https://portalback.springautumncome.asia/files/2e72875b2b454904ad3bae5f560be888.png)![输入图片说明](https://portalback.springautumncome.asia/files/97d93e6d5ee048e0a772059cebd349ec.png)![输入图片说明](https://portalback.springautumncome.asia/files/8e4fbc7c8eb5469a912efe76a68ca226.png)![输入图片说明](https://portalback.springautumncome.asia/files/a5115a45e1e9441b8880479c024c2857.png)![输入图片说明](https://portalback.springautumncome.asia/files/53e39d2e2a4242d39b63d719ca81a8f0.png)![输入图片说明](https://portalback.springautumncome.asia/files/cc79fc5778ee44d998993a0a049744a5.png")


### 目录结构

```
src/
├── api/                          # API 请求层
│   ├── appuser.ts                # 用户相关
│   ├── attendance-record.ts      # 签到记录
│   ├── doc.ts / doc-content.ts   # 文档
│   ├── features.ts               # 功能特性
│   ├── item.ts                   # 项目
│   ├── itemMaterials.ts          # 项目资料
│   ├── itemMkdir.ts              # 项目目录
│   ├── my-notes.ts               # 笔记
│   ├── obtainItem.ts             # 购买记录
│   ├── paramsetting.ts           # 参数设置
│   ├── play.ts                   # 播放记录
│   ├── points-*.ts               # 积分相关
│   ├── project-discussion.ts     # 项目讨论
│   ├── request.ts                # Axios 封装
│   ├── study-materials.ts        # 学习资料
│   └── tag.ts                    # 标签
├── assets/
│   ├── base.css                  # CSS 重置 + 变量
│   ├── main.css                  # 全局样式（滚动条等）
│   ├── icons/svg/                # 32 个 SVG 图标
│   └── images/                   # 图片资源
├── components/
│   ├── echart/index.vue          # ECharts 封装
│   ├── IconSelect/index.vue      # 图标选择器
│   ├── NotFound/index.vue        # 404 页面
│   ├── SvgIcon/index.vue         # SVG 图标组件
│   └── PayMember.vue             # 支付组件
├── composables/
│   ├── useCountdown.ts           # 倒计时
│   ├── useSmall.ts               # 响应式判断
│   └── useVipMoney.ts            # VIP 金额
├── config/
│   └── progress.ts               # NProgress 配置
├── router/
│   └── index.ts                  # 路由定义
├── stores/
│   ├── route.ts                  # 路由状态
│   └── user.ts                   # 用户状态
├── utils/
│   └── date.ts                   # 日期工具
└── views/                        # 页面组件
    ├── HomeView.vue              # 整体布局（Top + router-view + Footer）
    ├── Top.vue                   # 顶部导航栏
    ├── Footer.vue                # 底部
    ├── Index.vue                 # 首页
    ├── login.vue                 # 登录
    ├── findpwd.vue               # 找回密码
    ├── itemcenter.vue            # 项目中心
    ├── myitem.vue                # 我的项目
    ├── detail.vue                # 项目详情
    ├── doccenter.vue             # 文档中心
    ├── documentDetail.vue        # 文档详情
    ├── studyfile.vue             # 学习资料
    ├── PointsTask.vue            # 积分任务
    ├── ExchangeForFreeMaterials.vue # 兑换资料
    ├── comparisonOfMemberBenefits.vue # 会员权益
    ├── WatchTheVideoWithKnocking.vue  # 视频学习
    └── personcenter.vue          # 个人中心
```

### 页面功能说明

**HomeView.vue** — 布局容器
- 固定顶部导航栏（Top）
- 主体内容 `<router-view>`
- 底部 Footer（弹性吸底）
- 侧边悬停按钮（获取免费资料、联系我们）
- 回到顶部按钮

**Top.vue** — 导航栏
- Logo + 搜索 + 导航菜单
- 登录/注册按钮
- 用户头像下拉菜单
- 响应式隐藏

**Index.vue** — 首页
- 搜索区域（项目搜索）
- 已购项目快速入口
- 项目卡片网格展示
- 功能特性展示
- 数据统计（ECharts 图表：PV/UV）
- VIP 购买弹窗

**itemcenter.vue** — 项目中心
- 搜索 + 分类标签筛选
- 项目卡片（封面 + 标题 + 标签 + 价格）
- VIP 身份显示
- 分页

**myitem.vue** — 我的项目
- 搜索筛选
- 垂直卡片布局
- 学习进度条
- 开始学习 / 项目详情按钮
- 分页

**detail.vue** — 项目详情
- 项目封面、标题、描述
- VIP 购买/单独购买
- 目录结构展示
- 视频试看
- 项目讨论区
- 笔记功能

**login.vue** — 登录/注册
- 邮箱验证码注册
- 密码登录
- 找回密码
- 图形验证码
- 响应式双栏布局

**PointsTask.vue** — 积分任务
- 积分总览
- 每日签到
- 任务列表（关注、学习等）
- 积分明细

**personcenter.vue** — 个人中心
- 头像上传
- 用户信息展示
- 基本资料编辑

**WatchTheVideoWithKnocking.vue** — 视频学习
- 视频播放器
- 目录导航
- 笔记记录
- 学习进度

---

## 二、后台管理（programming-network-backend）

### 路由表

| 路径 | 页面 | 说明 |
|------|------|------|
| `/login` | Login.vue | 后台登录 |
| `/index` | Index.vue | 首页仪表盘 |
| `/doccontent/:docId` | doc-content/index.vue | 文档内容管理 |
| `/itemmkdir/:itemId` | item-mkdir/index.vue | 项目目录管理 |
| `/itemMaterials/:itemId` | itemMaterials/index.vue | 项目资料管理 |
| `/pointtaskscompletedrecord/:pointId` | 完成记录 | 任务审核 |
| `/pointsConsumptionRecord/:pointsInfoId` | 兑换记录 | 消费详情 |
| `/purchasedSeparatelyRecord/:itemId` | 购买记录 | 单独购买记录 |
| `/assignUserList/:roleId` | AssignUserList.vue | 分配用户 |
| `/personSetting` | personSetting.vue | 个人设置 |
| `/:pathMatch(.*)` | NotFound | 404 |

### 布局

```
HomeView.vue
├── layout/header/index.vue     # 顶部栏（折叠、面包屑、全屏、用户）
├── layout/aside/
│   ├── Menu.vue                # 侧边栏菜单根节点
│   └── SubMenu.vue             # 递归子菜单（支持外链）
├── layout/footer/index.vue     # 底部
└── <router-view>               # 内容区域
```

### 项目截图

![输入图片说明](https://portalback.springautumncome.asia/files/5c37b37149254286896830d13a4c6cb0.png)![输入图片说明](https://portalback.springautumncome.asia/files/71804a5f4bad42deae9b43df9beeb386.png)![输入图片说明](https://portalback.springautumncome.asia/files/0a9b3dcac5ba4f0399ad5c37acc64a8c.png)![输入图片说明](https://portalback.springautumncome.asia/files/2c43ac1a0ce843c89e2537b587ef25bd.png)![输入图片说明](https://portalback.springautumncome.asia/files/fe8aa6e9e2a445158f925101a183f86c.png)![输入图片说明](https://portalback.springautumncome.asia/files/cbccadb5cd0f4f25b5f6165764a1517a.png)![输入图片说明](https://portalback.springautumncome.asia/files/48c624810cc24986af773969962f1bf0.png)![输入图片说明](https://portalback.springautumncome.asia/files/409d35cc75674764849a43e6cf6c04aa.png)![输入图片说明](https://portalback.springautumncome.asia/files/5e4453604b80446186fd2830b1ab1bd6.png)![输入图片说明](https://portalback.springautumncome.asia/files/d73a0d9841cf4baebdfe5110f7d7cce0.png)![输入图片说明](https://portalback.springautumncome.asia/files/3647aba04246480cbb72dbaf8870805d.png)![输入图片说明](https://portalback.springautumncome.asia/files/887faec10c354e36b4e5ddcd762a7f42.png)![输入图片说明](https://portalback.springautumncome.asia/files/2234aa276cbc450abb8c0d1d51053bea.png)![输入图片说明](https://portalback.springautumncome.asia/files/2c78d33a2d44438bb1c64438eb84738f.png)![输入图片说明](https://portalback.springautumncome.asia/files/58e5555bbcaf4e8a98eda336159f20ab.png)

### 业务 CRUD 页面

所有后台业务页面统一放置在 `views/background/` 下，遵循相同模板：

| 目录 | 管理内容 |
|------|---------|
| appuser/ | 前台用户管理 |
| attendance-record/ | 签到记录 |
| doc/ | 文档管理 |
| doc-content/ | 文档内容管理 |
| features/ | 功能特性管理 |
| item/ | 项目管理 |
| item-mkdir/ | 项目目录管理 |
| itemMaterials/ | 项目资料管理 |
| my-notes/ | 笔记管理 |
| points-info/ | 积分明细 |
| points-task/ | 积分任务管理 |
| pointsConsumptionRecord/ | 积分消费记录 |
| pointTasksCompletedRecord/ | 任务完成审核 |
| project-discussion/ | 讨论管理 |
| purchased-separately-record/ | 单独购买记录 |
| study-materials/ | 学习资料管理 |

### 系统管理页面

| 目录 | 页面 | 管理内容 |
|------|------|---------|
| system/area/ | index.vue / save.vue | 区域管理 |
| system/dept/ | DeptList.vue / SaveDept.vue | 部门管理 |
| system/dictdata/ | index.vue / save.vue | 字典数据 |
| system/dicttype/ | index.vue / save.vue | 字典类型 |
| system/log/ | LoginLog.vue / OperLog.vue | 日志管理 |
| system/menu/ | MenuList.vue / AddMenu.vue / EditMenu.vue | 菜单管理 |
| system/notice/ | index.vue / save.vue | 公告管理 |
| system/paramsetting/ | index.vue / save.vue | 参数设置 |
| system/post/ | index.vue | 岗位管理 |
| system/role/ | RoleList.vue / AddRole.vue / EditRole.vue / AssignPermissions.vue / AssignUser.vue / AssignUserList.vue | 角色管理 |
| system/user/ | UserList.vue / AddUser.vue / EditUser.vue / personSetting.vue | 用户管理 |
| system/uv/ | index.vue | UV 统计 |

### 监控页面

| 目录 | 页面 | 说明 |
|------|------|------|
| monitor/server.vue | 服务监控 | CPU、内存、JVM、磁盘 |
| monitor/job/index.vue | 定时任务 | Quartz 任务管理 |
| monitor/job/log.vue | 任务日志 | 执行日志 |

### 代码生成

| 页面 | 说明 |
|------|------|
| codegen/index.vue | 选择数据库表 → 配置字段 → 预览/下载代码 |

生成内容包括：
- Controller、Service、ServiceImpl、Mapper（Java）
- Mapper XML
- Vue 页面（index.vue，含搜索、表格、分页、弹窗表单）

### 公共组件

| 组件 | 说明 |
|------|------|
| echart/index.vue | ECharts 图表封装 |
| FileUpload/index.vue | 普通文件上传 |
| FragmentationRushFSUpload/index.vue | RustFS 分片上传 |
| FragmentationUpload/index.vue | 分片上传 |
| ImageUpload/index.vue | 图片上传 |
| MavonEditor/index.vue | Markdown 编辑器 |
| MultiImageUpload/index.vue | 多图上传 |
| SvgIcon/index.vue | SVG 图标组件 |
| IconSelect/index.vue | 图标选择器 |
| Pagination/index.vue | 分页封装 |
| NotFound.vue | 404 |

### 状态管理

| Store | 说明 |
|-------|------|
| stores/user.ts | 用户信息、token、权限 |
| stores/route.ts | 动态路由、侧边栏 |
| stores/setting.ts | 系统设置（主题、布局等） |

### 枚举定义

| 文件 | 说明 |
|------|------|
| enums/FormTypeEnum.ts | 表单类型枚举 |
| enums/QueryTypeEnum.ts | 查询方式枚举 |