1. 项目背景与技术选型解析
这套售楼管理系统采用当前主流的技术栈组合：SpringBoot 2 + Vue 3 + MyBatis-Plus + MySQL 8.0，是一套典型的全栈Java Web应用解决方案。在房地产行业数字化转型的背景下，这类系统正逐渐取代传统的Excel和纸质化管理方式。
为什么选择这套技术组合？从实际开发经验来看：
- SpringBoot 2：相比旧版本，2.x系列在启动速度、内存占用方面有显著优化，特别是对响应式编程的支持更完善。我在多个项目中实测发现，同样的业务逻辑，SpringBoot 2的吞吐量比1.5版本高出30%左右
- Vue 3：组合式API带来的代码组织优势在复杂表单场景下尤为明显。比如楼盘信息录入页面，用Options API可能需要500+行代码，而用Composition API可以压缩到300行以内
- MyBatis-Plus：它的Lambda查询构造器能减少80%的简单SQL编写，但对复杂联表查询仍需手写XML。建议在项目中采用"80%用MP+20%手写SQL"的混合模式
- MySQL 8.0：窗口函数、CTE等新特性对销售数据分析非常有用。例如计算楼盘销售排名时，用
RANK()函数比在Java中处理要高效得多
2. 系统架构设计与核心模块
2.1 整体架构分层
典型的三层架构设计，但增加了几个关键优化点：
code复制前端层（Vue3 + Element Plus）
│
├─ HTTP层（Axios + 自定义拦截器）
│
业务层（SpringBoot）
│
├─ 服务层（Service + 事务控制）
│
├─ 持久层（MyBatis-Plus + 动态数据源）
│
数据层（MySQL 8.0 + Redis缓存）
特别要说明的是动态数据源配置。在售楼系统中，我们通常需要：
- 主库：处理交易类写操作（如签约）
- 从库：处理报表类读操作
- 历史库：存储5年前的老数据
MyBatis-Plus通过@DS注解可以优雅地实现多数据源切换：
java复制@Service
public class ContractService {
@DS("master") // 默认主库
public void signContract(ContractVO vo) {
// 签约逻辑
}
@DS("slave") // 指定从库
public Page<Contract> queryHistory(PageQuery query) {
// 查询逻辑
}
}
2.2 核心功能模块拆解
2.2.1 楼盘管理模块
- 数据结构设计要点：
- 树形结构存储楼盘-楼栋-房间关系
- 使用JSON字段存储户型图等非结构化数据
- 空间数据用MySQL的GIS扩展（如ST_Distance计算距离）
sql复制CREATE TABLE building (
id BIGINT PRIMARY KEY,
project_id BIGINT NOT NULL,
name VARCHAR(50),
floor_count INT,
geo_point POINT SRID 4326, -- 存储经纬度
CONSTRAINT fk_project FOREIGN KEY (project_id) REFERENCES project(id)
);
2.2.2 客户管理模块
- 关键实现技巧：
- 客户画像采用标签化存储（MySQL JSON类型）
- 联系方式加密存储（建议用AES-256）
- 行为轨迹用埋点+ELK分析
2.2.3 合同管理模块
最容易出问题的模块，需要特别注意：
- 合同版本控制（采用Git-like的版本机制）
- 电子签章集成（国内常用e签宝、法大大）
- 打印模板设计（用Freemarker动态生成PDF）
3. 关键技术实现细节
3.1 前后端分离实践
3.1.1 接口规范设计
采用RESTful风格，但需要根据业务场景灵活变通。例如：
- 普通查询：
GET /api/projects?page=1&size=10 - 复杂筛选：
POST /api/projects/query+ RequestBody - 批量操作：
PATCH /api/contracts/batch-status
建议在SpringBoot中统一返回格式：
java复制public class Result<T> {
private int code;
private String msg;
private T data;
private long timestamp = System.currentTimeMillis();
}
3.1.2 文件上传优化
售楼系统常见的文件上传场景：
- 楼盘效果图（单文件，可大至50MB）
- 证件扫描件（多文件，需压缩）
- VR全景图（分片上传）
前端实现示例（Vue3 + Axios）：
javascript复制const uploadVR = async (file) => {
const chunkSize = 5 * 1024 * 1024; // 5MB分片
const chunks = Math.ceil(file.size / chunkSize);
for (let i = 0; i < chunks; i++) {
const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
await axios.post('/api/upload', chunk, {
headers: {
'Content-Type': 'application/octet-stream',
'X-Chunk-Index': i,
'X-Total-Chunks': chunks,
'X-File-Name': encodeURIComponent(file.name)
}
});
}
}
3.2 权限控制方案
3.2.1 基于RBAC的权限模型
mermaid复制graph TD
A[用户] --> B[角色]
B --> C[菜单权限]
B --> D[数据权限]
D --> E[部门过滤]
D --> F[项目过滤]
实际开发中常见的坑：
- 权限缓存不一致问题：修改角色后要主动清除Redis缓存
- 按钮级权限控制：Vue3中可用自定义指令实现
javascript复制// 注册权限指令
app.directive('permission', {
mounted(el, binding) {
if (!checkPermission(binding.value)) {
el.parentNode?.removeChild(el);
}
}
})
// 使用方式
<button v-permission="'contract:delete'">删除合同</button>
3.2.2 数据权限实现
销售数据需要按部门隔离，MyBatis-Plus的解决方案：
- 定义数据权限注解
java复制@Target(ElementType.METHOD)
@Retention(RetentionPolicy.RUNTIME)
public @interface DataScope {
String deptAlias() default "";
String userAlias() default "";
}
- 实现拦截器自动拼接SQL
java复制public void beforeQuery(ISqlParser parser, MappedStatement ms) {
// 获取当前用户数据权限
DataPermission permission = getPermission();
// 拼接SQL条件
if (permission.getDeptIds() != null) {
originalSql = "SELECT * FROM (" + originalSql + ") temp WHERE temp.dept_id IN (" +
StringUtils.join(permission.getDeptIds(), ",") + ")";
}
}
4. 性能优化与安全防护
4.1 数据库优化实践
4.1.1 索引设计策略
必须建立的索引：
- 楼盘表：
(region_id, status)组合索引 - 客户表：
phone唯一索引 +(source, create_time)组合索引 - 合同表：
(project_id, sign_date)组合索引
避免索引失效的写法：
java复制// 错误示例 - 使用函数导致索引失效
queryWrapper.apply("DATE(create_time) = '2023-01-01'");
// 正确写法
queryWrapper.between("create_time", "2023-01-01 00:00:00", "2023-01-01 23:59:59");
4.1.2 分库分表方案
当单表超过500万行时需要考虑分片。售楼系统的典型分片策略：
- 按城市分库（北京库、上海库...）
- 按年份分表（contract_2023、contract_2024...）
ShardingSphere配置示例：
yaml复制spring:
shardingsphere:
datasource:
names: ds0,ds1
sharding:
tables:
contract:
actual-data-nodes: ds$->{0..1}.contract_$->{2022..2023}
table-strategy:
standard:
sharding-column: sign_date
precise-algorithm-class-name: com.example.YearMonthShardingAlgorithm
4.2 安全防护措施
4.2.1 常见攻击防御
- SQL注入：坚持用MyBatis预编译，禁止字符串拼接
- XSS攻击：前端用vue-dompurify过滤，后端统一转义
- CSRF防护：Spring Security默认开启防护
4.2.2 敏感数据保护
- 密码加密：BCrypt + 随机盐
java复制@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder(12); // 强度因子12
}
- 手机号脱敏：数据库存储加密，显示时处理
sql复制-- 存储加密
UPDATE customer SET mobile = AES_ENCRYPT('13800138000', 'secret-key');
-- 查询脱敏
SELECT CONCAT(LEFT(AES_DECRYPT(mobile, 'secret-key'), 3), '****', RIGHT(AES_DECRYPT(mobile, 'secret-key'), 4))
FROM customer;
5. 部署与运维方案
5.1 容器化部署
推荐使用Docker Compose编排：
yaml复制version: '3'
services:
app:
image: openjdk:17-jdk
volumes:
- ./app.jar:/app.jar
command: java -jar /app.jar
ports:
- "8080:8080"
depends_on:
- redis
- mysql
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: property
ports:
- "3306:3306"
volumes:
- mysql_data:/var/lib/mysql
redis:
image: redis:6
ports:
- "6379:6379"
volumes:
mysql_data:
5.2 监控方案
必备的监控项：
- JVM监控：Micrometer + Prometheus
java复制@Bean
MeterRegistryCustomizer<MeterRegistry> metricsCommonTags() {
return registry -> registry.config().commonTags("application", "property-system");
}
- 业务埋点：关键操作日志入库
java复制@Aspect
@Component
public class OperationLogAspect {
@AfterReturning(pointcut = "@annotation(log)", returning = "result")
public void afterReturning(JoinPoint jp, OperationLog log, Object result) {
SysLog log = new SysLog();
log.setOperation(log.value());
log.setParams(JsonUtils.toJson(jp.getArgs()));
logMapper.insert(log);
}
}
- 前端监控：Sentry捕获Vue错误
javascript复制app.use(Sentry, {
dsn: 'your-dsn',
integrations: [
new BrowserTracing({
routingInstrumentation: Sentry.vueRouterInstrumentation(router)
})
],
tracesSampleRate: 0.2
});
6. 典型问题解决方案
6.1 MyBatis-Plus分页失效
常见于自定义SQL场景，正确做法：
- 配置分页插件
java复制@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
- XML文件中不要写LIMIT
xml复制<!-- 错误示例 -->
<select id="selectPage" resultType="...">
SELECT * FROM table LIMIT #{offset}, #{size}
</select>
<!-- 正确写法 -->
<select id="selectPage" resultType="...">
SELECT * FROM table
</select>
6.2 Vue3响应式丢失
在组合式API中常见问题：
javascript复制// 错误示例
const state = reactive({ list: [] });
const fetchData = async () => {
const res = await axios.get('/api/list');
state.list = res.data; // 响应式丢失！
};
// 正确做法1：使用ref
const list = ref([]);
const fetchData = async () => {
const res = await axios.get('/api/list');
list.value = res.data;
};
// 正确做法2：保持引用
const state = reactive({ list: [] });
const fetchData = async () => {
const res = await axios.get('/api/list');
state.list.splice(0, state.list.length, ...res.data);
};
6.3 MySQL 8.0连接问题
新版本默认使用caching_sha2_password认证，旧客户端可能报错。解决方案：
sql复制-- 修改用户密码插件
ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'password';
-- 或者升级客户端驱动
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.28</version>
</dependency>
7. 扩展与二次开发建议
7.1 微服务化改造
当系统规模扩大时，可考虑拆分为：
- 基础服务：楼盘、客户等核心数据
- 交易服务：合同、付款流程
- 报表服务：数据分析与可视化
技术选型建议：
- 注册中心：Nacos
- 服务调用：OpenFeign
- 配置中心：Apollo
- 网关：Spring Cloud Gateway
7.2 低代码扩展
对于简单的表单和流程，可以集成：
- 表单设计器：FormMaking/Variant Form
- 流程设计器：bpmn-js
- 规则引擎：Drools
集成示例：
javascript复制// 在Vue中嵌入表单设计器
<template>
<fm-making-form
:height="600"
@save="handleSave"
/>
</template>
7.3 移动端适配
推荐方案：
- 混合开发：Uni-app打包多端应用
- 小程序：Taro框架
- 原生APP：封装WebView + 原生插件
我在实际项目中采用的优化技巧：
- 使用
vant移动端组件库 - 接口添加
device-type头区分终端 - 关键页面做SSR提升首屏速度