1. 项目背景与核心需求
农家乐作为乡村旅游的重要组成部分，近年来呈现爆发式增长。根据文旅部数据显示，2023年全国农家乐数量已突破30万家，年接待游客超过5亿人次。在这种背景下，传统的手工登记、Excel表格管理等模式已经无法满足业务需求。
这个毕设项目要解决的核心问题是：如何通过SSM+Vue技术栈构建一个轻量级但功能完备的客户管理系统。具体需要实现以下业务场景：
- 游客预约管理（时段预约、菜品预定、活动报名）
- 会员积分与消费记录
- 客房/场地资源调度
- 经营数据分析看板
- 移动端便捷操作界面
实际开发中发现，很多农家乐经营者对电脑操作不熟练，因此系统必须做到：界面极度简洁、操作流程不超过3步、关键功能有醒目提示。
2. 技术选型与架构设计
2.1 为什么选择SSM+Vue组合
SSM（Spring+SpringMVC+MyBatis）作为经典JavaEE框架组合，具有以下优势：
- Spring IOC容器管理Bean生命周期
- SpringMVC的注解驱动开发模式
- MyBatis灵活的SQL映射配置
- 成熟的社区生态和教学资源
Vue.js作为前端框架的优势：
- 响应式数据绑定简化DOM操作
- 组件化开发提升复用性
- Vue CLI提供标准化的项目脚手架
- Element UI组件库快速构建管理后台
2.2 系统架构图解
code复制客户端层：Vue SPA + Element UI + Axios
表示层：SpringMVC RESTful API
业务层：Spring Service + 事务管理
持久层：MyBatis + PageHelper分页
数据层：MySQL 8.0 + Redis缓存
2.3 数据库设计要点
农家乐业务特有的数据结构设计：
sql复制CREATE TABLE `reservation` (
`id` bigint NOT NULL AUTO_INCREMENT,
`customer_name` varchar(50) NOT NULL COMMENT '游客姓名',
`phone` varchar(20) NOT NULL COMMENT '联系电话',
`reserve_date` date NOT NULL COMMENT '预约日期',
`time_slot` tinyint NOT NULL COMMENT '时段(1-上午,2-下午,3-晚上)',
`people_count` int DEFAULT '1' COMMENT '人数',
`meal_plan` json DEFAULT NULL COMMENT '预定餐标',
`status` tinyint DEFAULT '0' COMMENT '状态(0-待确认,1-已确认,2-已取消)',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
特别注意：农家乐常有临时变更需求，所有时间相关字段需要预留修改记录功能。
3. 核心功能实现细节
3.1 预约管理模块
前端Vue组件关键代码：
vue复制<template>
<el-calendar v-model="currentDate">
<template #dateCell="{date, data}">
<div @click="handleDateClick(date)">
<div v-for="item in getReservations(date)"
:key="item.id"
class="reservation-badge">
{{ item.timeSlot | timeSlotFormat }}
</div>
</div>
</template>
</el-calendar>
</template>
<script>
export default {
methods: {
async loadReservations(date) {
const res = await this.$http.get('/api/reservations', {
params: { date: this.$dayjs(date).format('YYYY-MM-DD') }
})
this.reservations = res.data
}
}
}
</script>
后端SpringMVC控制器：
java复制@RestController
@RequestMapping("/api/reservations")
public class ReservationController {
@GetMapping
public Result list(@RequestParam String date,
@RequestParam(required = false) Integer status) {
Date queryDate = DateUtils.parseDate(date);
List<Reservation> list = reservationService.queryByDate(queryDate, status);
return Result.success(list);
}
@PostMapping
@Transactional
public Result create(@Valid @RequestBody ReservationDTO dto) {
if(reservationService.checkConflict(dto)){
throw new BusinessException("该时段预约已满");
}
Reservation entity = convertToEntity(dto);
reservationService.save(entity);
return Result.success(entity.getId());
}
}
3.2 会员积分系统设计
采用Redis实现高性能积分操作：
java复制public class MemberPointsService {
private final RedisTemplate<String, String> redisTemplate;
public void addPoints(Long memberId, int points) {
String key = "member:points:" + memberId;
redisTemplate.opsForValue().increment(key, points);
// 记录积分明细
String logKey = "member:points:log:" + memberId;
redisTemplate.opsForList().rightPush(logKey,
LocalDateTime.now() + "|+" + points);
}
public int getPoints(Long memberId) {
String val = redisTemplate.opsForValue()
.get("member:points:" + memberId);
return val == null ? 0 : Integer.parseInt(val);
}
}
3.3 经营数据可视化
使用Vue+ECharts实现动态看板：
vue复制<template>
<div class="dashboard">
<el-row :gutter="20">
<el-col :span="12">
<div ref="incomeChart" style="height:400px"></div>
</el-col>
<el-col :span="12">
<div ref="customerChart" style="height:400px"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted() {
this.initCharts()
this.loadData()
},
methods: {
initCharts() {
this.incomeChart = echarts.init(this.$refs.incomeChart)
this.customerChart = echarts.init(this.$refs.customerChart)
},
async loadData() {
const res = await this.$http.get('/api/dashboard')
this.updateIncomeChart(res.data.incomeTrend)
this.updateCustomerChart(res.data.customerSource)
}
}
}
</script>
4. 开发中的典型问题与解决方案
4.1 前后端日期时间处理
问题现象：前端传递的日期时间在后端解析出错
解决方案：
- 前端统一使用ISO8601格式：
js复制this.$dayjs(date).format('YYYY-MM-DDTHH:mm:ssZ')
- 后端配置全局日期转换器：
java复制@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addFormatters(FormatterRegistry registry) {
DateTimeFormatterRegistrar registrar = new DateTimeFormatterRegistrar();
registrar.setUseIsoFormat(true);
registrar.registerFormatters(registry);
}
}
4.2 MyBatis批量插入优化
农家乐旺季时可能需要快速录入大批量预约记录：
xml复制<insert id="batchInsert" useGeneratedKeys="true" keyProperty="id">
INSERT INTO reservation (...)
VALUES
<foreach collection="list" item="item" separator=",">
(#{item.customerName}, #{item.phone}, ...)
</foreach>
</insert>
Java代码调用：
java复制@Transactional
public void batchCreate(List<Reservation> reservations) {
// 分批处理，每批500条
ListUtils.partition(reservations, 500).forEach(batch -> {
reservationMapper.batchInsert(batch);
});
}
4.3 Vue组件性能优化
当预约日历需要渲染大量数据时的解决方案：
vue复制<script>
export default {
data() {
return {
visibleReservations: {} // 仅保存当前可见日期数据
}
},
methods: {
async handleCalendarChange({ startDate, endDate }) {
const res = await this.$http.get('/api/reservations/range', {
params: {
start: this.$dayjs(startDate).format('YYYY-MM-DD'),
end: this.$dayjs(endDate).format('YYYY-MM-DD')
}
})
this.visibleReservations = res.data.reduce((map, item) => {
const date = item.reserveDate.substring(0, 10)
if(!map[date]) map[date] = []
map[date].push(item)
return map
}, {})
}
}
}
</script>
5. 项目部署与运维实践
5.1 后端部署要点
使用Spring Boot内嵌Tomcat的部署方式：
- 打包可执行JAR：
bash复制mvn clean package -DskipTests
- 生产环境启动脚本：
bash复制#!/bin/bash
nohup java -Xms512m -Xmx1024m -jar \
-Dspring.profiles.active=prod \
-Dserver.tomcat.accesslog.enabled=true \
customer-system.jar > log.out 2>&1 &
5.2 前端Nginx配置
Vue项目打包后的Nginx配置示例：
nginx复制server {
listen 80;
server_name customer.example.com;
location / {
root /opt/customer-system/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
5.3 常见运维问题
- 内存泄漏排查：
bash复制# 查看Java进程内存情况
jcmd <pid> VM.native_memory summary
# 生成堆转储文件
jmap -dump:live,format=b,file=heap.hprof <pid>
- 慢SQL查询监控：
xml复制<!-- mybatis-config.xml -->
<settings>
<setting name="logImpl" value="SLF4J"/>
<setting name="defaultStatementTimeout" value="3"/>
</settings>
6. 毕设论文撰写建议
6.1 技术章节结构参考
-
系统需求分析
- 农家乐行业现状调研
- 用户角色与用例分析
- 非功能性需求（响应时间、并发量等）
-
系统设计
- 架构设计图（建议使用C4模型）
- 数据库ER图（标注主要业务实体关系）
- 核心业务流程时序图
-
关键技术实现
- 预约冲突检测算法
- 移动端适配方案
- 数据可视化实现
6.2 论文图表规范
- 所有图表需要有编号标题，如"图3-1 系统架构图"
- 流程图使用标准符号（开始/结束用椭圆，判断用菱形）
- 数据库表结构展示建议采用三线表
- 代码片段需要说明所在文件和行号范围
6.3 答辩演示技巧
- 演示数据准备：
sql复制-- 生成模拟数据
INSERT INTO reservation(...)
SELECT
CONCAT('游客', n),
CONCAT('138', FLOOR(RAND()*90000000)+10000000),
DATE_ADD(CURDATE(), INTERVAL FLOOR(RAND()*30) DAY),
FLOOR(RAND()*3)+1,
FLOOR(RAND()*10)+1
FROM (
SELECT a.N + b.N * 10 + 1 AS n
FROM
(SELECT 0 AS N UNION SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4
UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION SELECT 9) a,
(SELECT 0 AS N UNION SELECT 1 UNION SELECT 2 UNION SELECT 3 UNION SELECT 4
UNION SELECT 5 UNION SELECT 6 UNION SELECT 7 UNION SELECT 8 UNION SELECT 9) b
) t
WHERE n <= 100;
- 演示重点把握：
- 先展示核心业务流程（客户预约→确认→消费→统计）
- 再演示特色功能（如移动端扫码快速登记）
- 最后呈现数据分析看板
- 问答环节准备：
- 为什么选择SSM而不是Spring Boot？
- 如何保证系统在高并发时的稳定性？
- 客户数据安全采取了哪些措施？