李昦1. 项目概述
这套基于Java SpringBoot+Vue3+MyBatis的在线装修管理系统，采用前后端分离架构，后端使用MySQL数据库存储数据。系统主要面向装修公司、设计师和业主，提供从设计到施工的全流程管理功能。我在实际开发过程中发现，这种技术组合特别适合中小型装修企业的数字化需求，既能保证系统性能，又具备良好的扩展性。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构解析
2.1 后端技术栈
SpringBoot 2.7.x作为后端框架，提供了完善的依赖管理和自动配置。我选择这个版本是因为它在稳定性和新特性之间取得了很好的平衡。MyBatis 3.5.x作为ORM框架，配合MyBatis-Plus 3.5.x使用，大大简化了数据库操作。
注意：MyBatis-Plus虽然方便，但在复杂查询时还是建议使用原生MyBatis的XML配置方式，这样可以获得更好的SQL控制权。
数据库使用MySQL 8.0，主要考虑到以下几点：
- 装修行业数据关系明确但不算特别复杂
- MySQL在中小型应用中性能表现优异
- 社区支持和工具生态完善
2.2 前端技术栈
Vue3作为前端框架，配合TypeScript使用。Element Plus作为UI组件库，它的表单和表格组件特别适合装修管理系统中的各种数据展示需求。
在实际开发中，我特别推荐使用Vue3的Composition API，它让代码组织更加清晰。比如装修项目的状态管理可以这样实现：
javascript复制// 使用Pinia进行状态管理
import { defineStore } from 'pinia'
export const useProjectStore = defineStore('project', {
state: () => ({
currentProject: null,
projectList: []
}),
actions: {
async fetchProjects() {
// 获取项目列表
}
}
})
3. 核心功能实现
3.1 装修项目管理模块
这个模块是整个系统的核心，包含项目创建、进度跟踪、材料管理等功能。后端API设计遵循RESTful规范：
code复制GET /api/projects - 获取项目列表
POST /api/projects - 创建新项目
GET /api/projects/{id} - 获取项目详情
PUT /api/projects/{id} - 更新项目信息
数据库表设计示例：
sql复制CREATE TABLE `project` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL COMMENT '项目名称',
`customer_id` bigint NOT NULL COMMENT '客户ID',
`designer_id` bigint NOT NULL COMMENT '设计师ID',
`start_date` date DEFAULT NULL COMMENT '开始日期',
`end_date` date DEFAULT NULL COMMENT '结束日期',
`status` tinyint DEFAULT '0' COMMENT '项目状态',
`budget` decimal(10,2) DEFAULT NULL COMMENT '预算',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.2 材料管理模块
装修材料管理是个复杂的工作，需要考虑材料分类、供应商、库存等多个维度。我采用了树形结构来组织材料分类：
java复制// 材料分类实体
@Data
public class MaterialCategory {
private Long id;
private String name;
private Long parentId;
private Integer level;
private List<MaterialCategory> children;
}
前端使用Element Plus的Tree组件展示材料分类：
vue复制<el-tree
:data="categories"
node-key="id"
:props="defaultProps"
@node-click="handleNodeClick"
/>
4. 前后端交互实现
4.1 API接口设计
前后端分离架构中，API设计至关重要。我采用Swagger来自动生成API文档，SpringBoot中配置如下：
java复制@Configuration
@EnableSwagger2
public class SwaggerConfig {
@Bean
public Docket api() {
return new Docket(DocumentationType.SWAGGER_2)
.select()
.apis(RequestHandlerSelectors.basePackage("com.decor.management.controller"))
.paths(PathSelectors.any())
.build();
}
}
4.2 跨域问题解决
开发环境中经常遇到跨域问题，我在SpringBoot中配置了全局CORS：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
}
注意：生产环境应该严格限制allowedOrigins，而不是使用"*"
5. 系统安全实现
5.1 认证与授权
使用Spring Security + JWT实现认证：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()));
}
}
5.2 数据安全
敏感数据如客户联系方式需要加密存储，我使用AES算法：
java复制public class CryptoUtils {
private static final String SECRET_KEY = "your-secret-key-here";
public static String encrypt(String data) {
// 实现加密逻辑
}
public static String decrypt(String encryptedData) {
// 实现解密逻辑
}
}
6. 性能优化实践
6.1 数据库优化
装修项目查询往往涉及多表关联，我通过以下方式优化：
- 合理设计索引
- 使用MyBatis二级缓存
- 复杂查询使用存储过程
6.2 前端性能优化
Vue3项目通过以下方式优化：
- 组件懒加载
- 路由懒加载
- 使用keep-alive缓存常用组件
vue复制<template>
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive" />
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>
</template>
7. 常见问题与解决方案
7.1 MyBatis映射问题
当实体类属性名和数据库字段名不一致时，可以通过@ResultMap解决：
java复制@Results(id = "userResultMap", value = {
@Result(property = "userId", column = "user_id"),
@Result(property = "userName", column = "user_name")
})
@Select("SELECT * FROM user WHERE id = #{id}")
User getUserById(Long id);
7.2 Vue3响应式问题
使用reactive定义的对象在解构后会失去响应性，应该使用toRefs：
javascript复制import { reactive, toRefs } from 'vue'
const state = reactive({
project: null,
materials: []
})
// 错误方式 - 会失去响应性
const { project } = state
// 正确方式
const { project } = toRefs(state)
8. 部署方案
8.1 后端部署
使用Docker部署SpringBoot应用：
dockerfile复制FROM openjdk:11
VOLUME /tmp
ADD target/decor-management.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]
8.2 前端部署
使用Nginx部署Vue3应用：
nginx复制server {
listen 80;
server_name your-domain.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
}
}
9. 开发心得
在实际开发这套系统过程中，我总结了几个关键点：
- 装修行业的业务流程一定要梳理清楚，最好先画出完整的流程图
- 材料管理模块是最复杂的部分，需要提前设计好数据结构
- 项目进度跟踪要考虑各种异常情况（如材料延期、设计变更等）
- 报表统计功能要预留足够的扩展性，客户后期往往会有新的统计需求
对于新手开发者，我建议先从核心的装修项目管理模块入手，逐步扩展其他功能。遇到性能问题时，先使用工具（如Arthas、Chrome DevTools）定位瓶颈，再有针对性地优化。