全栈企业级 IT 公司官网系统 | 前台展示 + 后台管理一体化解决方案
--- ## 项目简介 TechCorp 官网系统是一套面向 IT 科技公司的全栈企业官网解决方案，包含**客户前台展示**与**管理员后台管理**两大子系统。系统采用前后端分离架构，提供企业品牌展示、服务项目介绍、项目案例展示、在线接单、即时聊天、留言反馈等完整功能链，同时配套 RBAC 权限管控的后台管理系统。 ## 核心技术栈 ### 后端 | 技术 | 说明 | 版本 | |------|------|------| | Spring Boot | 微服务框架 | 3.2.1 | | Java | 运行环境 | 17 | | MyBatis-Plus | ORM 框架 | 3.5.5 | | MySQL | 关系型数据库 | 8.0 | | Redis | 缓存数据库 | 7.x | | JWT (jjwt) | 身份认证 | 0.12.3 | | SpringDoc OpenAPI | 接口文档 | 2.3.0 | | Hutool | 工具类库 | 5.8.23 | | Lombok | 代码简化 | - | ### 前端（前台 + 后台） | 技术 | 说明 | 版本 | |------|------|------| | Vue 3 | 渐进式框架 | 3.4 | | TypeScript | 类型安全 | 5.3 | | Vite | 构建工具 | 5.x | | Element Plus | 组件库 | 2.4 | | Pinia | 状态管理 | 2.1 | | Vue Router | 路由管理 | 4.2 | | Axios | HTTP 客户端 | 1.6 | | Sass | CSS 预处理器 | 1.70 | --- ## 系统模块 ### 前台展示系统 (`frontend/`) | 模块 | 路由 | 功能说明 | |------|------|----------| | 首页 | `/` | 轮播 Banner、核心优势、服务预览、案例展示、合作伙伴 | | 关于我们 | `/about` | 公司介绍、统计数据、核心团队 | | 服务项目 | `/services` | 服务列表展示 | | 项目案例 | `/projects` | 案例列表 | | 项目详情 | `/project/:id` | 案例详细内容 | | 联系我们 | `/contact` | 在线留言表单 + 联系方式展示 | | 在线下单 | `/order` | 需求提交表单 + 接单流程说明 | | 在线聊天 | `/chat` | 实时在线客服对话 | ### 后台管理系统 (`admin-frontend/`) | 模块 | 功能 | 权限标识 | |------|------|----------| | **首页统计** | Dashboard 数据概览 | - | | **系统管理** | | | | 用户管理 | 系统用户 CRUD | `system:user` | | 角色管理 | 角色 CRUD | `system:role` | | 权限管理 | 权限菜单 CRUD | `system:permission` | | **内容管理** | | | | 轮播图管理 | Banner 图片 CRUD | `content:banner` | | 项目案例管理 | 案例 CRUD | `content:project` | | 服务项目管理 | 服务项 CRUD | `content:service` | | 合作伙伴管理 | 合作伙伴 CRUD | `content:partner` | | 联系我们配置 | 联系方式配置 | `content:contact` | | **业务管理** | | | | 接单管理 | 订单状态跟进 | `business:order` | | 留言管理 | 留言回复处理 | `business:message` | | 聊天管理 | 在线客服会话 | `business:chat` | --- ## 项目截图  ## 快速启动 ### 环境要求 - Node.js >= 18 - Java 17+ - Maven 3.8+ - MySQL 8.0+ - Redis 7.x ### 数据库初始化 ```sql -- 执行 SQL 脚本创建数据库和表结构 source sql/init.sql ``` > 脚本自动创建 `techcorp` 数据库，包含全部业务表并初始化演示数据。 ### 后端启动 ```bash cd backend # 编译打包 mvn clean package -DskipTests # 启动服务（默认端口 8082） mvn spring-boot:run ``` ### 前台启动 ```bash cd frontend npm install npm run dev # 开发模式，默认端口 5173 ``` ### 后台启动 ```bash cd admin-frontend npm install npm run dev # 开发模式，默认端口 5174 ``` --- ## 接口文档 启动后端服务后访问： - Swagger UI: `http://localhost:8082/swagger-ui.html` - API 文档: `http://localhost:8082/v3/api-docs` --- ## 数据库设计 ### 系统管理表 | 表名 | 说明 | |------|------| | `sys_user` | 系统用户表（用户名/密码/昵称/状态） | | `sys_role` | 角色表（名称/编码/描述） | | `sys_permission` | 权限表（名称/编码/类型/路由/组件） | | `sys_user_role` | 用户-角色关联表 | | `sys_role_permission` | 角色-权限关联表 | ### 业务表 | 表名 | 说明 | |------|------| | `banner` | 轮播图表（标题/图片/链接/排序） | | `project` | 项目案例表（标题/封面/描述/技术栈） | | `service_item` | 服务项目表（名称/图标/描述/价格） | | `order` | 接订单表（标题/预算/联系人/状态） | | `message` | 留言表（姓名/邮箱/内容/回复） | | `chat_record` | 聊天记录表（会话ID/发送者/内容） | | `partner` | 合作伙伴表（名称/Logo/网站） | | `site_config` | 网站配置表（站点名称/联系方式/备案号） | ### 内建账号 | 用户名 | 密码 | 角色 | |--------|------|------| | `admin` | `admin123` | 超级管理员（全部权限） | --- ## 项目结构 ``` techcorp/ ├── frontend/ # 前台展示 (Vue 3 + Vite) │ ├── src/ │ │ ├── api/ # API 接口封装 │ │ ├── components/ # 公共组件 (AppHeader) │ │ ├── router/ # 路由配置 │ │ ├── stores/ # Pinia 状态管理 │ │ ├── styles/ # 全局样式 │ │ ├── utils/ # 工具函数 │ │ └── views/home/ # 前台页面 │ ├── index.html │ └── package.json │ ├── admin-frontend/ # 后台管理 (Vue 3 + Vite) │ ├── src/ │ │ ├── api/ # API 接口封装 │ │ ├── components/ # 公共组件 (DynamicMenu) │ │ ├── router/ # 路由 + 权限守卫 │ │ ├── stores/ # Pinia 状态管理 │ │ ├── styles/ # 全局样式 │ │ ├── utils/ # 工具函数 │ │ └── views/ # 后台页面 │ │ ├── system/ # 系统管理 │ │ ├── content/ # 内容管理 │ │ ├── business/ # 业务管理 │ │ └── ... │ ├── index.html │ └── package.json │ ├── backend/ # 后端 (Spring Boot 3.2) │ ├── src/main/java/com/techcorp/ │ │ ├── common/ # 通用工具 (Result/JwtUtil) │ │ ├── config/ # 配置 (CORS/Jackson/Redis/JWT) │ │ ├── controller/ # 控制器层 │ │ ├── dto/ # 数据传输对象 │ │ ├── entity/ # 实体类 │ │ ├── mapper/ # MyBatis 映射接口 │ │ └── service/ # 服务层 │ ├── src/main/resources/ │ │ ├── mapper/ # XML 映射文件 │ │ └── application.yml # 配置文件 │ └── pom.xml │ ├── sql/ │ └── init.sql # 数据库初始化脚本 │ ├── README.md └── README.en.md ``` --- ## 特性亮点 ### 前台 - 响应式设计：完美适配桌面端、平板、手机端 - 动态轮播：后台可配置 Banner 图片和链接 - 服务展示：服务项目列表，带图标和参考价格 - 案例展示：项目案例卡片，支持分类和技术栈标签 - 在线接单：需求表单提交，带表单验证 - 在线客服：Web 即时聊天，定时轮询刷新 - 留言反馈：访客留言，后台回复处理 ### 后台 - RBAC 权限控制：用户 → 角色 → 权限三级模型 - 动态菜单：根据权限动态生成侧边导航 - 全功能 CRUD：覆盖全部业务模块的增删改查 - 订单流程管理：状态流转（待处理/进行中/已完成/已取消） - 留言回复：管理员在线回复访客留言 - 聊天管理：查看所有会话记录，客服回复 - 站点配置：网站名称、关键词、联系方式等动态配置 --- ## 许可证 MIT License