先说说我对这类项目的整体看法。在GitHub和各类毕设选题网站上，"SSM公寓出租系统"这个组合出现的频率相当高，能看出来它踩中了JavaWeb课程设计、毕业设计最核心的几个需求点：前端选型偏传统，后端用主流SSM框架，数据库是MySQL，整套技术栈都是学校课堂上教过的内容。但恰恰因为"看起来简单"，很多同学把项目拷贝下来之后，第一步跑通环境就卡了半天，后面改代码、调样式、写报告又踩了一堆细节坑。

这篇文章就从我实际带项目的视角，把这个系统的设计思路、核心实现、环境配置和常见问题全部拆开讲一遍。不管你是准备拿它交课程设计，还是想在此基础上改成毕业设计，或者纯粹想练一下SSM整合的手感，这篇内容都可以直接照着操作。

1. 项目整体设计与思路拆解

1.1 这个系统到底解决了什么问题

公寓房屋出租系统的业务本质，其实就是管好"房、租客、合同、账单"这四样东西。很多同学容易把这类管理系统想复杂，一上来就设计十几个表，最后发现代码写不完、关联查不清楚、答辩也讲不明白。这个项目的合理做法是收敛到核心链条上。

典型的业务闭环是这样的：

• 房东录入公寓房源，包括户型、朝向、面积、月租金、状态（已租/待租）。
• 租客在前台浏览房源，预约看房或者直接下单。
• 管理员后台审核租约，生成租赁合同，记录租期起止时间。
• 每个月根据合同生成账单，记录水电气费、房租、押金等。
• 到期自动提醒续租或者退租。

围绕这个闭环，后端需要提供房源的增删改查、租客信息的维护、合同的生成与状态流转、账单的定期管理。前端则要分成两个视角：用户端浏览房源、查看个人租约和账单；管理端维护所有数据、查看统计图表。

1.2 为什么选SSM+JSP+EasyUI这套组合

先说SSM——Spring、SpringMVC、MyBatis这套组合是JavaWeb教学体系里面最经典的一套。Spring负责管理对象依赖，SpringMVC负责接收前端请求和返回视图，MyBatis负责数据库操作。这三者各管一段，分层清楚，非常适合做课程设计：代码结构容易讲清楚，答辩的时候也容易说明白每一步做了什么。

再看JSP和EasyUI这个组合。现在很多商业项目已经用Vue、React这类前后端分离方案了，但课程设计和毕业设计里面，JSP仍然有不可替代的优势：它能在服务器端直接渲染数据，不需要额外搭建前端工程，也不需要处理跨域问题。EasyUI作为一套基于jQuery的UI组件库，提供了datagrid表格、dialog弹窗、form表单、tree树形菜单这些现成组件，写后台管理界面效率非常高，而且外观不需要自己写CSS，视觉效果统一。

前后端分离虽然时髦，但对于一个课程设计来说，涉及的技术链路更长——你要额外配置Node环境、处理接口鉴权、考虑跨域、构建产物打包，任何一个环节出问题都会耽误大量时间。用JSP加EasyUI，整套开发链路短，部署也简单，一个Tomcat就能跑起来，这正是它适合这个场景的关键。

1.3 系统模块划分与数据库设计思路

从功能模块上看，这个系统可以分为五个核心区域：

数据库设计上，核心表建议这么规划：user表（用户/管理员）、house表（房源）、tenant表（租客）、contract表（合同）、bill表（账单）。我见过不少同学把用户和租客合并成一张表，从操作上讲是可以的，但答辩的时候容易被问"为什么合表"，与其解释不清，不如一开始就分开。

表结构里面有几个关键字段值得注意。house表中的status字段建议用整数类型，0待租、1已租、2下架，不要用字符串，方便搜索和统计。contract表中的start_date和end_date建议用date类型而不是datetime，因为合同只需要精确到天。bill表中的bill_month字段建议存成varchar格式的"2025-06"，不要用日期类型，否则月度统计的时候还要额外做格式化。

2. 核心功能实现与EasyUI、ECharts应用

2.1 环境准备阶段的关键操作

在写任何业务代码之前，先把环境搭好，这是整个项目里面最容易出问题也最影响心态的一步。尤其是MySQL和Tomcat的版本搭配问题，很多人之前完全没有意识到版本之间还有兼容性差异。

MySQL建议装5.7版本，而不是8.0。原因在于SSM项目经常使用数据库连接驱动com.mysql.jdbc.Driver，这个驱动类在MySQL 5.7下完全正常，但到了8.0就会提示Loading class相关警告，必须换成com.mysql.cj.jdbc.Driver，同时还得手动配置时区参数，比如serverTimezone=Asia/Shanghai，否则连接的时候会报The server time zone value错误。对于初学阶段的项目，直接规避比绕弯子更实际。

Idea中运行JavaWeb项目的配置这里也顺手说一下。用Maven构建的项目，在pom.xml中配置好依赖之后，需要在Idea的Project Structure里面把Artifacts类型指定为war包，然后在Run/Debug Configurations中添加一个Tomcat Server -> Local，Deployment里面把构建好的war包添加进去。注意Application context这里建议设置成/，也就是直接以根路径访问项目，否则访问页面的时候URL会多一层项目名，比如http://localhost:8080/ssm_house_war_exploded/login.jsp，看起来非常别扭。

2.2 EasyUI表格的动态加载与操作栏绑定

EasyUI的datagrid是后台管理系统最核心的组件，它的使用逻辑和普通HTML表格完全不同。普通表格是在页面加载时一次性把数据渲染好，而datagrid是基于URL异步加载数据，它自己管理分页、排序和刷新。

举个典型用法。在houseList.jsp页面，你需要先定义一个<table>标签，然后通过JS初始化为datagrid：

$('#dg').datagrid({ url: '/house/list', method: 'get', fitColumns: true, rownumbers: true, pagination: true, pageSize: 10， columns: [[ { field: 'id', title: '编号', width: 60 }, { field: 'title', title: '房源标题', width: 180 }, { field: 'area', title: '面积(㎡)', width: 80 }, { field: 'price', title: '月租金(元)', width: 90 }, { field: 'status', title: '状态', width: 70, formatter: function(value) { return value == 0 ? '待租' : (value == 1 ? '已租' : '已下架'); } }, { field: 'handle', title: '操作', width: 140, formatter: function(value, row) { return '<a href="#" onclick="editHouse(' + row.id + ')">编辑</a> ' + '<a href="#" onclick="deleteHouse(' + row.id + ')">删除</a>'; } } ]] });

有几个地方非常容易踩坑。

第一，field: 'handle'这一列对应的数据源里面根本不存在这个字段，它是通过formatter函数动态拼接出来的HTML字符串。EasyUI会把这一段字符串直接插入到表格单元格里面，所以onclick="editHouse(2)"这种写法是可以正常执行的。

第二，分页参数的问题。EasyUI的datagrid在请求后端时，默认传递的参数名是page和rows，不是pageNum和pageSize。如果你的后端Controller接收的参数名写的是pageNum和pageSize，那表格翻页之后数据就加载不出来了。正确做法是在Controller中用@RequestParam(value = "page", defaultValue = "1") Integer page这种方式对齐参数名，或者在使用分页插件PageHelper时注意参数映射关系。

第三，查询条件回显的问题。经常有同学在搜索框输入条件后点击查询，表格数据确实刷新了，但搜索框里的内容还在，再次查询时发现条件被清掉了。这个问题的根源在于，点击查询时你是通过$('#dg').datagrid('load', params)传参的，而params是动态拼接的普通对象，页面刷新后自然就没了。解决办法是自己定义一个全局变量保存搜索条件，或者把搜索表单做成隐藏域，查询时从隐藏域里面取。

2.3 ECharts统计图表的实现与数据接口设计

ECharts在公寓出租系统里面最常见的应用场景，一个是房源月租金分布柱状图，一个是近半年的成交合同数折线图。这两个图表对于答辩来说非常有展示价值，能直观地证明系统不只是一个增删改查的列表。

实现方式上，前端在statistics.jsp页面引入ECharts的JS文件，然后定义一个div容器：

<div id="rentChart" style="width: 600px; height: 400px;"></div>

接下来在JS里面初始化图表并配置相关属性：

var chart = echarts.init(document.getElementById('rentChart')); chart.setOption({ title: { text: '各房源月租金对比' }, tooltip: {}, xAxis: { data: houseTitleList }, yAxis: {}, series: [{ name: '月租金', type: 'bar', data: priceList }] });

这里的houseTitleList和priceList不是前端硬编码的，而是通过Ajax从后端接口拿回来的数组：

$.ajax({ url: '/statistics/rent', type: 'get', dataType: 'json', success: function(data) { chart.setOption({ xAxis: { data: data.titles }, series: [{ data: data.prices }] }); } });

对应的后端接口返回一个JSON对象，里面包含两个数组。在Controller里面可以这么写：

@RequestMapping("/statistics/rent") @ResponseBody public Map<String, Object> rentStatistics() { List<House> houses = houseService.findAll(); List<String> titles = houses.stream().map(House::getTitle).collect(Collectors.toList()); List<Integer> prices = houses.stream().map(House::getPrice).collect(Collectors.toList()); Map<String, Object> result = new HashMap<>(); result.put("titles", titles); result.put("prices", prices); return result; }

这样一个前后端联动的统计功能就完成了。

如果要做近半年合同数量的折线图，逻辑类似，只是SQL层要用到DATE_FORMAT或者MONTH函数按月分组统计，然后按月份排序。这里提醒一个细节：如果你用GROUP BY按月分组，在没有数据的月份会直接缺行，折线图就会断开。稳妥的做法是先查出12个月份列表，再跟统计数据做匹配，没有数据的月份补零。

2.4 JSP页面中个人信息展示与局部刷新处理

JSP页面的一大特点是服务端渲染，数据直接塞在页面里。但是对于个人信息展示这种场景，直接用${sessionScope.user.username}这种方式在页面加载时渲染是没问题的，关键是要处理好用户登录之后的信息刷新问题。

有一个比较典型的问题：用户修改了头像或者昵称之后，页面重新跳转回来发现还是老数据。这是因为Session里面的user对象没有被更新，页面从Session取值自然就是旧的。解决方案是在昵称、头像修改的后端接口中，修改完数据库之后同步更新Session：

@RequestMapping("/user/updateInfo") public String updateInfo(User user, HttpServletRequest request) { userService.update(user); User updatedUser = userService.findById(user.getId()); request.getSession().setAttribute("loginUser", updatedUser); return "redirect:/user/profile"; }

还有关于"JSP页面让加载完后刷新一次"这个需求，常见场景是系统启动后初次访问统计页面，数据还没渲染完，或者ECharts图表容器宽度不对导致显示异常。一个比较简单的处理方式是给<body>标签加一个onload事件，触发一次location.reload()。但要注意这个操作会带来无限刷新问题——页面每次加载完又会触发刷新。解决办法是加一个URL参数标记：

window.onload = function() { if (location.search.indexOf('refresh=1') == -1) { location.href = location.href + (location.href.indexOf('?') == -1 ? '?' : '&') + 'refresh=1'; } };

这样只有当URL中没有refresh=1时才触发刷新，有的话就正常访问。不过说实话，这种方案属于应急手段，更合理的做法是排查到底是什么原因导致首次加载数据异常，比如Ajax请求时序问题、ECharts容器初始化过早之类，把根因解决掉才是正路。

3. SSM框架整合与关键配置细节

3.1 SSM常用注解的使用位置与作用

SSM框架里面注解是串联起整个项目的中枢，很多同学代码能跑通，但问起来每个注解是干什么的，就说不清楚了。这里把最常用的一批注解按层梳理一遍。

Controller层：

• @Controller：标识这是一个SpringMVC的控制器，Spring扫描到之后会把它注册成Bean。
• @RequestMapping：映射URL到具体的方法，可以用在类上定义模块前缀，也可以用