企业官网建设流程全解析

开源项目 （干净，开箱即用）前后端通干（全栈）

代码托管：https://gitee.com/chen-dongjing/projects

前端：https://gitee.com/chen-dongjing/frontend.git

后端：https://gitee.com/chen-dongjing/backend.git

#首次将代码从本地上传到gitlab步骤
#初始化仓库
git init
#和远程绑定
git remote add origin https://gitee.com/chen-dongjing/backend.git
#将文件添加到本地仓库
git add .
#备注
git commit -m "首次提交：初始化项目完整代码"
#将本地仓库代码推送到远程
git push -u origin master

系统架构说明前端

# 系统开发管理平台

## 项目简介

基于 Vue 3 + Element Plus 的后台管理系统前端框架，提供用户管理、角色管理、菜单管理、字典管理等基础功能。

## 系统架构

### 技术栈

| 技术 | 版本 | 说明 |
|------|------|------|
| Vue | 3.4+ | 前端核心框架 |
| Vue Router | 4.2+ | 路由管理 |
| Pinia | 2.1+ | 状态管理 |
| Element Plus | 2.5+ | UI 组件库 |
| Axios | 1.6+ | HTTP 请求库 |
| Vite | 5.0+ | 构建工具 |
| Sass | 1.69+ | CSS 预处理器 |

### 目录结构

```
frontend/
├── src/
│ ├── api/ # API 接口定义
│ │ ├── system/ # 系统管理相关接口
│ │ │ ├── user.js # 用户管理
│ │ │ ├── role.js # 角色管理
│ │ │ ├── menu.js # 菜单管理
│ │ │ ├── dict.js # 字典管理
│ │ │ └── log.js # 日志管理
│ │ ├── login.js # 登录相关接口
│ │ └── dashboard.js # 仪表盘接口
│ ├── assets/ # 静态资源
│ ├── components/ # 公共组件
│ │ ├── DictSelect/ # 字典选择器
│ │ ├── FileUpload/ # 文件上传
│ │ ├── Pagination/ # 分页组件
│ │ └── ...
│ ├── directive/ # 自定义指令
│ │ ├── permission.js # 权限指令
│ ├── layout/ # 布局组件
│ ├── router/ # 路由配置
│ ├── store/ # 状态管理
│ │ └── modules/
│ │ └── user.js # 用户状态
│ ├── styles/ # 全局样式
│ ├── utils/ # 工具函数
│ │ ├── request.js # Axios 封装
│ │ ├── auth.js # Token 管理
│ │ ├── validate.js # 校验函数
│ │ └── common.js # 通用工具
│ ├── views/ # 页面组件
│ │ ├── login/ # 登录页
│ │ ├── dashboard/ # 仪表盘
│ │ ├── system/ # 系统管理页面
│ │ └── profile/ # 个人中心
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── vite.config.js # Vite 配置
└── package.json # 项目依赖
```

### 架构设计

```
┌─────────────────────────────────────────────────┐
│ Views (页面层) │
│ login | dashboard | system/* | profile | error │
└────────────────────────┬────────────────────────┘
│
┌────────────────────────▼────────────────────────┐
│ Components (组件层) │
│ Pagination | DictSelect | FileUpload | ... │
└────────────────────────┬────────────────────────┘
│
┌────────────────────────▼────────────────────────┐
│ Store (状态管理层) │
│ Pinia - user module │
└────────────────────────┬────────────────────────┘
│
┌────────────────────────▼────────────────────────┐
│ API (接口层) │
│ login | user | role | menu | dict | log │
└────────────────────────┬────────────────────────┘
│
┌────────────────────────▼────────────────────────┐
│ Utils (工具层) │
│ request(Axios) | auth | validate | common │
└────────────────────────┬────────────────────────┘
│
┌────────────────────────▼────────────────────────┐
│ Backend API (后端接口) │
│ http://localhost:8080 │
└─────────────────────────────────────────────────┘
```

### 核心功能

- **用户认证**: 登录/登出、Token 管理、路由守卫
- **权限控制**: 基于角色的权限控制、动态路由、按钮级权限指令
- **系统管理**: 用户管理、角色管理、菜单管理、字典管理
- **组件封装**: 分页、字典选择、文件上传、图标选择等通用组件

## 安装教程

1. 安装依赖
```bash
npm install
```

2. 启动开发服务器
```bash
npm run dev
```

3. 构建生产版本
```bash
npm run build
```

## 使用说明

1. 开发环境访问地址: http://localhost:3000
2. 后端接口代理地址: http://localhost:8080
3. 默认管理员账号: admin / 123456

系统架构说明后端：

## 系统架构说明

这是一个基于 **Spring Boot 3.2.5 + Java 17** 的**后台管理系统后端**，采用经典的 **RBAC（基于角色的访问控制）** 模型，技术栈现代化，分层清晰。

---

### 一、技术栈总览

| 分类 | 技术 | 版本 | 作用 |
|------|------|------|------|
| 基础框架 | Spring Boot | 3.2.5 | 应用框架 |
| 编程语言 | Java | 17 | JDK |
| ORM | MyBatis-Plus | 3.5.5 | 数据访问层，简化 CRUD |
| 数据库 | MySQL | 8.0.33 | 主数据库 |
| 连接池 | Druid | 1.2.22 | 高性能数据库连接池 |
| 缓存 | Spring Data Redis | - | 缓存/会话存储 |
| 鉴权 | JJWT | 0.12.5 | JWT Token 生成与校验 |
| 工具库 | Hutool | 5.8.26 | 通用工具类 |
| API 文档 | Knife4j (OpenAPI 3) | 4.4.0 | Swagger UI 增强 |
| 简化代码 | Lombok | 1.18.32 | 自动生成 getter/setter |
| 参数校验 | Spring Validation | - | 请求参数校验 |

---

### 二、项目分层结构

```
com.qinfen.backend
├── BackendApplication.java ← 启动类
├── common/ ← 公共模块
│ ├── constant/ ← 常量 (Constants.java)
│ ├── exception/ ← 统一异常处理
│ │ ├── BusinessException ← 业务异常
│ │ └── GlobalExceptionHandler ← 全局异常处理器
│ ├── result/ ← 统一响应封装
│ │ ├── Result ← 通用响应体
│ │ ├── PageResult ← 分页响应体
│ │ └── ResultCode ← 响应码枚举
│ └── utils/ ← 工具类
│ └── JwtUtils ← JWT 工具
├── config/ ← 配置类
│ ├── CorsConfig ← 跨域配置
│ ├── Knife4jConfig ← API 文档配置
│ ├── MybatisPlusConfig ← MyBatis-Plus 配置 (分页插件等)
│ ├── RedisConfig ← Redis 配置
│ └── WebMvcConfig ← Web MVC 配置 (注册拦截器)
├── interceptor/ ← 拦截器
│ └── AuthInterceptor ← 登录鉴权拦截器
├── controller/ ← 控制层 (REST API)
│ ├── AuthController ← 认证接口 (登录/登出)
│ ├── UserController ← 用户管理
│ ├── RoleController ← 角色管理
│ ├── MenuController ← 菜单管理
│ └── DashboardController ← 仪表盘统计
├── service/ ← 业务层 (接口 + impl)
│ ├── UserService / impl
│ ├── RoleService / impl
│ ├── MenuService / impl
│ └── DashboardService / impl
├── mapper/ ← 数据访问层 (继承 BaseMapper)
│ ├── UserMapper
│ ├── RoleMapper
│ ├── MenuMapper
│ ├── UserRoleMapper
│ └── RoleMenuMapper
├── entity/ ← 数据库实体 (DO)
│ ├── User / Role / Menu
│ ├── UserRole / RoleMenu
├── dto/ ← 数据传输对象 (入参)
│ ├── UserLoginDTO / UserCreateDTO / UserUpdateDTO / UserQueryDTO / PasswordResetDTO
│ ├── RoleCreateDTO / RoleUpdateDTO / RoleQueryDTO / RoleMenuDTO
│ └── MenuCreateDTO / MenuUpdateDTO
└── vo/ ← 视图对象 (出参)
├── AuthInfoVO / UserVO / RoleVO / MenuVO
├── DashboardStatsVO / SystemInfoVO
```

> 这是标准的 **Controller → Service → Mapper** 三层架构，配合 **DTO / Entity / VO** 三种对象分离入参、持久化对象和出参，职责清晰。

---

### 三、数据库设计（RBAC 模型）

5 张表构成完整的 RBAC 权限体系：

```
sys_user ──(sys_user_role)── sys_role ──(sys_role_menu)── sys_menu
```

| 表名 | 说明 | 关键字段 |
|------|------|----------|
| `sys_user` | 用户表 | username, password(BCrypt), status, 逻辑删除 deleted |
| `sys_role` | 角色表 | role_name, role_code(唯一), sort, status |
| `sys_menu` | 菜单表 | parent_id(树形结构), menu_type(M目录/C菜单/F按钮), path, component, perms(权限标识) |
| `sys_user_role` | 用户-角色关联 | user_id + role_id 多对多 |
| `sys_role_menu` | 角色-菜单关联 | role_id + menu_id 多对多 |

**特性**：
- 所有业务表都有 `create_time` / `update_time` 自动维护
- 采用**逻辑删除**（`deleted` 字段），由 MyBatis-Plus 自动处理
- 初始数据：admin / test 用户，ROLE_ADMIN / ROLE_USER 角色

---

### 四、核心工作流程

#### 1. 认证流程（AuthController + AuthInterceptor）

```
客户端 POST /auth/login
│
▼
AuthController.login(UserLoginDTO)
│ 校验用户名密码 (BCrypt)
│ 查询用户角色
│ 生成 JWT Token (JwtUtils)
▼
返回 { token, userInfo, menus }
│
▼
后续请求携带 Header: Authorization: Bearer <token>
│
▼
AuthInterceptor 拦截 → 解析 JWT → 校验 → 放行/拒绝
(通过 WebMvcConfig 注册，排除 /auth/** 等公开路径)
```

#### 2. 业务请求流程

```
HTTP Request
│
▼
AuthInterceptor (鉴权)
│
▼
GlobalExceptionHandler (异常兜底)
│
▼
Controller (@Valid 参数校验)
│ DTO 入参
▼
Service (业务逻辑)
│ Entity 持久化
▼
Mapper (MyBatis-Plus BaseMapper)
│
▼
MySQL / Redis
│
▼
返回 Result<T> / PageResult<T> (统一响应)
```

#### 3. 统一响应格式

```java
// 成功
{ "code": 200, "message": "success", "data": {...} }
// 分页
{ "code": 200, "message": "success", "data": { "list": [...], "total": 100, "page": 1, "size": 10 } }
// 失败
{ "code": 40001, "message": "用户名或密码错误", "data": null }
```

#### 4. 异常处理

```
Controller / Service 抛出 BusinessException(code, message)
│
▼
GlobalExceptionHandler (@RestControllerAdvice)
│ 捕获后转为统一 Result 响应
│ 同时处理参数校验异常、未知异常
▼
返回错误信息
```

---

### 五、配置要点（application.yml）

| 配置项 | 值 | 说明 |
|--------|-----|------|
| `server.port` | 8080 | 服务端口 |
| `mybatis-plus` | 驼峰映射 + 逻辑删除 + 自增主键 | ORM 配置 |
| `app.jwt.secret` | 默认密钥（生产需更换） | JWT 签名密钥 |
| `app.jwt.expire-hours` | 24 | Token 有效期 |
| 多环境 | dev / test / prod | 用 `spring.profiles.active` 切换 |

---

### 六、架构亮点总结

1. **分层清晰**：Controller / Service / Mapper 三层 + DTO / Entity / VO 三对象，职责单一
2. **RBAC 权限模型**：用户 → 角色 → 菜单，5 张表实现灵活的权限控制，菜单支持树形结构
3. **无状态鉴权**：JWT Token + AuthInterceptor，Redis 用于可能的 Token 黑名单/缓存扩展
4. **统一响应 & 异常**：`Result<T>` + `GlobalExceptionHandler`，前端处理省心
5. **MyBatis-Plus**：省去大部分 CRUD，自带分页、逻辑删除、乐观锁等
6. **API 文档**：Knife4j（Swagger 增强），访问 `/doc.html` 即可查看和调试接口
7. **多环境配置**：dev / test / prod 三套配置隔离
8. **生产就绪**：Druid 连接池、Jackson 日期格式化、Lombok 简化代码

这是一个设计规范、适合作为企业级后台管理系统脚手架的后端项目。