1. 项目概述
作为一名有10年Java全栈开发经验的工程师,最近我完成了一个基于SpringBoot的家装服务管理系统。这个项目源于实际需求——装修行业普遍存在项目管理混乱、客户沟通不畅的问题。通过这个系统,装修公司可以实现从客户咨询、方案设计到施工管理的全流程数字化管控。
系统采用前后端分离架构,后端基于SpringBoot+MyBatisPlus,前端使用Vue.js,数据库选用MySQL。在开发过程中,我特别注重系统的易用性和扩展性,采用了模块化设计思路,使得各功能模块既能独立运行又可灵活组合。下面我将从技术实现角度详细解析这个项目的开发过程。
2. 技术架构设计
2.1 整体架构设计
系统采用标准的B/S架构,分为表现层、业务逻辑层和数据访问层:
code复制客户端浏览器(HTML+CSS+JS/Vue)
↑↓ HTTP/HTTPS
SpringBoot应用服务器
↑↓ JDBC
MySQL数据库
这种分层架构的优势在于:
- 前后端完全解耦,便于独立开发和部署
- 通过RESTful API进行数据交互,接口标准化
- 各层职责明确,便于维护和扩展
2.2 技术栈选型
后端技术栈:
- SpringBoot 2.7.x:简化配置,快速构建微服务
- MyBatis-Plus 3.5.x:增强的ORM框架,减少SQL编写
- Shiro 1.10.x:负责认证和授权
- Lombok:简化POJO编写
- Swagger:API文档生成
前端技术栈:
- Vue 3.x:响应式前端框架
- Element Plus:UI组件库
- Axios:HTTP客户端
- Vue Router:路由管理
- Pinia:状态管理
数据库:
- MySQL 8.0:关系型数据库
- Redis:缓存会话和数据
选择这些技术的主要考虑:
- SpringBoot的自动配置和起步依赖能极大提升开发效率
- MyBatis-Plus在MyBatis基础上提供了更多便捷功能
- Vue 3的组合式API更适合复杂前端应用开发
- MySQL 8.0在性能和功能上都有显著提升
3. 核心功能实现
3.1 用户认证模块
认证模块采用JWT+Shiro的方案,流程如下:
java复制// JWT工具类核心代码
public class JwtUtil {
private static final String SECRET_KEY = "your-secret-key";
private static final long EXPIRATION = 86400000; // 24小时
public static String generateToken(User user) {
return Jwts.builder()
.setSubject(user.getUsername())
.claim("roles", user.getRoles())
.setIssuedAt(new Date())
.setExpiration(new Date(System.currentTimeMillis() + EXPIRATION))
.signWith(SignatureAlgorithm.HS512, SECRET_KEY)
.compact();
}
public static Claims parseToken(String token) {
return Jwts.parser()
.setSigningKey(SECRET_KEY)
.parseClaimsJws(token)
.getBody();
}
}
安全配置要点:
- 密码采用BCrypt加密存储
- 接口访问添加权限注解
- 敏感操作记录日志
- 定期更换JWT密钥
3.2 项目管理模块
项目管理是系统的核心,主要包含以下功能:
- 项目创建与基本信息维护
- 进度跟踪(甘特图展示)
- 材料管理
- 工人调度
- 验收管理
数据库设计关键表:
sql复制CREATE TABLE `project` (
`id` bigint NOT NULL AUTO_INCREMENT,
`project_name` varchar(100) NOT NULL,
`customer_id` bigint NOT NULL,
`start_date` date NOT NULL,
`end_date` date DEFAULT NULL,
`status` tinyint NOT NULL COMMENT '0-未开始 1-进行中 2-已完工 3-已验收',
`budget` decimal(12,2) DEFAULT NULL,
`address` varchar(200) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.3 材料管理模块
材料管理实现了从采购到使用的全流程跟踪:
java复制// 材料入库服务层代码
@Service
public class MaterialServiceImpl implements MaterialService {
@Autowired
private MaterialMapper materialMapper;
@Autowired
private StockMapper stockMapper;
@Transactional
public void stockIn(MaterialStockInDTO dto) {
// 1. 记录入库单
MaterialStockIn stockIn = new MaterialStockIn();
BeanUtils.copyProperties(dto, stockIn);
stockIn.setOperator(SecurityUtils.getCurrentUserId());
stockIn.setStockInTime(new Date());
stockMapper.insert(stockIn);
// 2. 更新库存
Material material = materialMapper.selectById(dto.getMaterialId());
material.setStock(material.getStock() + dto.getQuantity());
materialMapper.updateById(material);
}
}
4. 系统特色功能
4.1 可视化进度管理
通过集成ECharts实现了项目进度可视化:
javascript复制// 甘特图组件
export default {
data() {
return {
ganttOptions: {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
xAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
yAxis: {
type: 'category',
data: ['水电改造', '泥瓦工程', '木作工程', '油漆工程', '安装工程']
},
series: [
{
name: '进度',
type: 'bar',
data: [85, 70, 45, 30, 10],
label: {
show: true,
position: 'right',
formatter: '{c}%'
}
}
]
}
}
}
}
4.2 移动端适配
通过响应式设计实现多端适配:
css复制/* 响应式布局示例 */
.project-card {
width: 100%;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.project-card {
width: calc(50% - 15px);
float: left;
margin-right: 30px;
}
.project-card:nth-child(2n) {
margin-right: 0;
}
}
@media (min-width: 1200px) {
.project-card {
width: calc(33.333% - 20px);
}
.project-card:nth-child(2n) {
margin-right: 30px;
}
.project-card:nth-child(3n) {
margin-right: 0;
}
}
5. 开发经验分享
5.1 性能优化实践
-
数据库优化:
- 合理设计索引,避免全表扫描
- 使用连接池控制连接数
- 大数据量表采用分表策略
-
缓存策略:
- 热点数据使用Redis缓存
- 采用多级缓存架构
- 合理设置缓存过期时间
-
接口优化:
- 批量操作代替循环单次操作
- 使用DTO减少不必要字段传输
- 异步处理耗时操作
5.2 常见问题解决
问题1:MyBatis-Plus批量插入性能差
解决方案:
java复制// 使用批量插入优化
@Transactional
public void batchInsert(List<Material> materials) {
SqlSession session = sqlSessionTemplate.getSqlSessionFactory().openSession(ExecutorType.BATCH);
MaterialMapper mapper = session.getMapper(MaterialMapper.class);
for (Material material : materials) {
mapper.insert(material);
}
session.commit();
session.clearCache();
session.close();
}
问题2:Vue组件重复渲染
解决方案:
javascript复制export default {
computed: {
// 使用计算属性缓存结果
filteredProjects() {
return this.projects.filter(p => p.status === this.activeStatus)
}
},
watch: {
// 深度监听对象变化
searchForm: {
handler() {
this.loadData()
},
deep: true
}
}
}
6. 项目部署方案
6.1 生产环境部署
推荐使用Docker Compose进行容器化部署:
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: root123
MYSQL_DATABASE: decoration
volumes:
- ./mysql/data:/var/lib/mysql
ports:
- "3306:3306"
redis:
image: redis:6.2
ports:
- "6379:6379"
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
- redis
frontend:
build: ./frontend
ports:
- "80:80"
6.2 持续集成方案
使用Jenkins实现自动化部署:
- 代码提交触发构建
- 执行单元测试
- 构建Docker镜像
- 推送到私有仓库
- 滚动更新生产环境
groovy复制pipeline {
agent any
stages {
stage('Build') {
steps {
sh 'mvn clean package -DskipTests'
}
}
stage('Test') {
steps {
sh 'mvn test'
}
}
stage('Docker Build') {
steps {
sh 'docker build -t decoration-backend .'
}
}
stage('Deploy') {
steps {
sh 'kubectl set image deployment/decoration-backend *=decoration-backend:latest'
}
}
}
}
7. 项目总结与展望
这个家装服务管理系统从需求分析到最终上线历时3个月,目前已在2家装修公司投入使用,显著提高了他们的项目管理效率。系统的主要优势在于:
- 完整的项目生命周期管理
- 直观的数据可视化展示
- 灵活的权限控制体系
- 良好的移动端适配性
未来可以考虑的改进方向:
- 增加AI智能报价功能
- 集成第三方支付系统
- 开发微信小程序版本
- 引入大数据分析预测工期
在开发过程中,我深刻体会到良好的架构设计对项目可维护性的重要性,以及自动化测试在保证质量方面的价值。建议初学者在类似项目开发中,前期多花时间在技术选型和架构设计上,这会为后续开发节省大量时间。