ONE实验室1. 项目背景与核心价值
在房地产行业数字化转型的浪潮中，售楼管理系统的信息化建设已成为提升销售效率的关键环节。传统纸质台账和Excel管理方式存在数据易丢失、流程难追溯、统计效率低下等痛点，这正是我们选择SpringBoot+Vue全栈技术架构开发售楼管理系统的根本原因。
这个系统最核心的业务价值在于实现了三大转变：
- 从人工登记到自动化流程：客户到访、认购、签约全流程线上化
- 从碎片化数据到统一数据中心：所有房源、客户、交易数据集中管理
- 从经验决策到数据驱动：实时生成销售漏斗分析、去化率统计等业务报表
技术选型上，后端采用SpringBoot 2.7 + MyBatis-Plus 3.5的组合，前端使用Vue 3 + Element Plus，数据库选用MySQL 8.0。这套技术栈的选择主要基于：
- SpringBoot的自动配置特性大幅减少了XML配置
- MyBatis-Plus提供的ActiveRecord模式简化了DAO层开发
- Vue 3的Composition API更适合复杂前端状态管理
- MySQL在事务处理和复杂查询方面的成熟表现
提示：实际开发中发现，MyBatis-Plus的Lambda查询构造器能减少90%的SQL编写工作量，但需要特别注意Wrapper条件构造时的NPE问题
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计与技术实现
2.1 后端工程结构规划
采用经典的三层架构，但根据业务特性做了针对性调整：
code复制src/
├── main/
│ ├── java/
│ │ └── com/
│ │ └── estate/
│ │ ├── config/ # 自定义配置类
│ │ ├── controller/ # 按业务模块分包
│ │ ├── service/
│ │ │ ├── impl/ # 接口与实现分离
│ │ ├── dao/ # 使用MyBatis-Plus BaseMapper
│ │ ├── entity/ # 带Lombok注解的POJO
│ │ └── util/ # 自定义工具类
├── resources/
│ ├── mapper/ # XML映射文件
│ └── application-dev.yml # 多环境配置
关键配置示例（application-dev.yml）：
yaml复制mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
global-config:
db-config:
logic-delete-field: deleted # 逻辑删除字段
logic-not-delete-value: 0
logic-delete-value: 1
2.2 前端工程化实践
Vue 3项目采用TypeScript强化类型检查，主要技术方案：
- 路由管理：Vue Router 4实现动态路由权限控制
- 状态管理：Pinia替代Vuex作为状态管理方案
- UI组件：Element Plus按需引入减小打包体积
- 构建优化：配置splitChunks实现代码分割
典型页面组件结构：
javascript复制// 房源列表组件
<script setup lang="ts">
import { ref } from 'vue'
import { useHouseStore } from '@/stores/house'
const houseStore = useHouseStore()
const tableData = ref<HouseItem[]>([])
const loadData = async () => {
tableData.value = await houseStore.fetchHouses()
}
</script>
2.3 数据库设计要点
核心表结构设计遵循几个原则：
- 业务主表与字典表分离（如house_info与house_type）
- 预留扩展字段（ext_info JSON类型）
- 建立合理的索引策略
关键表示例：
sql复制CREATE TABLE `customer` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(50) COLLATE utf8mb4_bin NOT NULL,
`phone` varchar(20) COLLATE utf8mb4_bin NOT NULL,
`gender` tinyint DEFAULT '0',
`source` tinyint COMMENT '客户来源',
`sales_id` bigint COMMENT '归属销售',
`created_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `idx_phone` (`phone`),
KEY `idx_sales` (`sales_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;
3. 核心业务模块实现
3.1 房源管理模块
采用状态机模式管理房源生命周期：
code复制待售 -> 已预定 -> 已签约 -> 已备案
↘ 已退订 ↗
后端关键代码实现：
java复制@PostMapping("/reserve")
public Result reserve(@RequestBody ReserveDTO dto) {
House house = houseService.getById(dto.getHouseId());
if (house.getStatus() != HouseStatus.AVAILABLE) {
throw new BusinessException("当前房源不可预定");
}
house.setStatus(HouseStatus.RESERVED);
houseService.updateById(house);
// 生成预定记录
ReserveRecord record = new ReserveRecord();
record.setCustomerId(dto.getCustomerId());
record.setSalesId(SecurityUtils.getUserId());
reserveService.save(record);
return Result.success();
}
3.2 客户跟进系统
实现客户360°视图，包含：
- 基础信息管理
- 跟进记录时间轴
- 意向房源关联
- 交易历史查询
前端使用ECharts实现客户画像：
javascript复制const renderCustomerPortrait = () => {
const chart = echarts.init(domRef.value)
chart.setOption({
radar: {
indicator: [
{ name: '购买意向', max: 100 },
{ name: '预算匹配', max: 100 },
{ name: '跟进热度', max: 100 }
]
},
series: [{
data: [{
value: [85, 76, 92],
name: '客户评分'
}]
}]
})
}
3.3 销售数据看板
关键技术实现点：
- 使用Spring Schedule定时统计昨日/本月数据
- MyBatis动态SQL处理复杂统计查询
- Vue中使用WebSocket实现实时数据推送
统计SQL示例：
xml复制<select id="selectSalesFunnel" resultType="map">
SELECT
COUNT(CASE WHEN status=0 THEN 1 END) as potential,
COUNT(CASE WHEN status=1 THEN 1 END) as reserved,
COUNT(CASE WHEN status=2 THEN 1 END) as signed
FROM customer
WHERE sales_id = #{salesId}
</select>
4. 开发中的典型问题与解决方案
4.1 并发订房问题
当多个销售同时操作同一房源时，出现超卖现象。最终采用两种方案结合：
- 数据库乐观锁：
java复制@Update("UPDATE house SET status=#{status}, version=version+1
WHERE id=#{id} AND version=#{version}")
int updateWithVersion(House house);
- Redis分布式锁：
java复制public boolean lockHouse(Long houseId) {
String key = "lock:house:" + houseId;
return redisTemplate.opsForValue()
.setIfAbsent(key, "1", 30, TimeUnit.SECONDS);
}
4.2 大数据量导出优化
客户名单导出超过万条时出现OOM，最终解决方案：
- 使用POI的SXSSFWorkbook实现流式导出
- 分页查询避免一次性加载全部数据
- 增加导出进度提示
核心代码片段：
java复制try (SXSSFWorkbook workbook = new SXSSFWorkbook(100)) {
Sheet sheet = workbook.createSheet("客户名单");
int pageNo = 1;
while (true) {
Page<Customer> page = customerService.page(
new Page<>(pageNo, 500),
queryWrapper
);
if (page.getRecords().isEmpty()) break;
// 填充数据行...
pageNo++;
}
workbook.write(response.getOutputStream());
}
4.3 权限控制方案
采用RBAC模型实现，关键设计：
- 用户-角色-权限三级结构
- 前端路由动态生成
- 后端接口注解鉴权
Spring Security配置示例：
java复制@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/api/house/**").hasAnyRole("SALES_MANAGER", "ADMIN")
.antMatchers("/api/customer/**").hasRole("SALES")
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()));
}
5. 部署与性能调优
5.1 生产环境部署方案
采用Docker Compose编排服务：
yaml复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- ./mysql/data:/var/lib/mysql
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
frontend:
build: ./frontend
ports:
- "80:80"
5.2 性能优化实践
通过Arthas诊断发现的性能瓶颈及解决方案：
- N+1查询问题：使用MyBatis-Plus的@TableField(select = false)延迟加载关联属性
- 重复权限校验：增加Spring Cache缓存权限数据
- 大列表查询：添加合理的分页参数默认值
JVM参数调整：
bash复制java -jar -Xms512m -Xmx1024m -XX:+UseG1GC
-XX:MaxGCPauseMillis=200 backend.jar
5.3 监控系统集成
采用Prometheus + Grafana搭建监控看板，关键指标：
- 应用指标：JVM内存、GC次数、接口QPS
- 业务指标：每日新增客户数、房源去化率
- 异常监控：使用Sentinel对接报警系统
SpringBoot集成配置：
java复制@Bean
public MeterRegistryCustomizer<PrometheusMeterRegistry> metrics() {
return registry -> registry.config().commonTags("application", "estate-system");
}
在项目上线后，我们特别发现Element Plus的表格组件在渲染超过500条数据时会出现明显卡顿。最终的解决方案是采用虚拟滚动技术，配合后端分页查询，将单页数据量控制在100条以内。同时对于导出需求，改为引导用户设置筛选条件后生成后台任务，通过邮件发送结果文件。这个经验告诉我们，在管理类系统中，必须时刻考虑数据规模增长对用户体验的影响，在架构设计阶段就要预留性能优化空间