前阵子刚好把一套基于SSM的垃圾分类查询系统从零到部署完整走了一遍这套东西看着简单真上手才知道里面藏着不少细节——光垃圾数据怎么整理、分类关联怎么设计、分页和搜索怎么配合就够琢磨一阵。这篇把整个项目的设计思路、表结构、核心代码、部署踩坑全部整理出来给正在做javaweb毕设或者想练手SSM整合的朋友做个参考尤其是第一次用JSPBootstrap做管理后台的新手可以少走很多弯路。1. 项目定位与技术选型为什么是SSMJSPBootstrap1.1 这个系统到底要解决什么问题垃圾分类查询系统的核心需求其实很朴素居民拿到一件垃圾不知道属于什么类别打开网页输入名称立刻能查到对应分类和处置建议。但真正动手做的时候你会发现给它扩展成管理系统后需求层次一下子变多了。前端需要提供快速查询入口和分类浏览页面后端需要一个完整的管理后台让运营人员维护垃圾条目、分类说明、公告信息还要统计用户的查询记录。所以我把系统拆成两个主要角色。普通用户可以注册登录、按名称查询垃圾类别、按分类查看垃圾列表、浏览公告管理员登录后台之后可以管理垃圾条目、管理分类、管理用户、发布公告。这个权限模型不算复杂但对学习SSM框架来说刚好合适能覆盖增删改查、关联查询、分页、登录拦截这些最常见的业务场景。1.2 技术选型背后的三个考虑为什么用SSM而不是SpringBoot坦率说放在现在生产环境我更倾向SpringBoot但这个项目定位是教学和毕设SSM的价值在于它把Spring、SpringMVC、MyBatis三个框架的整合过程全部暴露出来配置文件、依赖关系、拦截器、事务控制都得自己一个坑一个坑地趟。你把这个流程走通再去看SpringBoot的自动配置理解深度完全不一样。JSP也是同样的逻辑。很多教程都在讲前后端分离但高校课程和企业里仍有大量遗留系统用JSP而且JSPJSTL可以直接在页面上做数据渲染配合EL表达式对新手理解MVC的分工非常有帮助。Bootstrap则是为了快速解决样式问题它的栅格系统能在没有专门前端工程师的情况下把后台和前台页面做得像模像样。MyBatis层面我选择了XML映射方式而不是注解方式。原因很简单垃圾分类的查询条件是多变的管理员搜索、前台模糊查询、分类筛选SQL需要动态拼接XML里的where和if标签比注解的SelectProvider直观太多了。1.3 系统整体的请求流转结构模块划分上我按照经典的三层架构来做Controller层负责接收请求和参数校验Service层处理业务逻辑和事务Mapper层管数据库操作。实体类对应数据库表VO类负责页面展示数据的组装。一个典型的查询请求流转是这样的用户在页面输入“废旧电池”提交到GarbageController的search方法Controller把关键词传给GarbageServiceService调用GarbageMapper执行模糊查询结果封装成JSON返回给前端前端用jQuery把结果渲染到Bootstrap的卡片组件里。整个链路跑通之后你再去理解SpringMVC的DispatcherServlet机制就会有画面感了。2. 数据库设计垃圾分类数据模型的关键点2.1 表结构规划与关联关系数据库设计是这类项目最容易出彩也最容易翻车的环节。一开始我也想过只建一张垃圾表把所有信息塞进去但后来整理数据时发现垃圾条目和分类之间是明显的多对一关系而且分类需要独立维护属性比如颜色标识、投放要求、处理方式。所以我最终用四张核心表来实现。user表存用户和管理员信息字段包括主键、用户名、密码、联系电话、创建时间、是否管理员。category表存垃圾分类类别字段包括主键、分类名称、分类描述、图标路径、投放要求。garbage表是核心表字段包括主键、垃圾名称、所属分类ID、详细描述、投放提示、创建时间。query_record表记录每次查询行为字段包括主键、用户ID、查询关键词、查询结果、查询时间。这个设计的妙处在于垃圾条目只存category_id不存冗余的分类名称需要展示分类信息时通过JOIN或者二次查询获取。表关系干净了后面做分类统计、条目筛选都方便。2.2 字段设计与数据类型选择的细节先说garbage表。垃圾名称字段我用了varchar(100)有人觉得50就够了其实不够因为很多复合词很长比如“沾了油的快递纸箱”100的长度更保险。关键词搜索走的字段就是name所以我把这个字段加了普通索引。分类ID用int并设置外键逻辑关联注意我在物理层面没建外键约束生产环境不推荐物理外键因为会影响插入性能且难以维护逻辑关联足够。category表的排序字段容易被忽略。分类列表在页面上的展示顺序需要人工控制所以我加了sort_order整型字段查询时ORDER BY sort_order ASC这样可以在不改变主键的情况下灵活调整顺序。投放要求字段用text类型因为内容是长文本而且可能包含换行。query_record表主要用于后台统计热门搜索所以关键词和结果字段都要保留查询时间用datetime并设置默认值为CURRENT_TIMESTAMP。注意MySQL 8.0对datetime默认值的写法有变化DEFAULT CURRENT_TIMESTAMP是可以直接用的但如果你用的版本较老可能需要手动在插入语句里赋值。2.3 垃圾数据的整理与初始化脚本数据是这类系统的灵魂。网上虽然能搜到一些现成的SQL脚本但质量参差不齐有的分类逻辑混乱比如把“创可贴”归到可回收垃圾这明显不对。我最终以国家垃圾分类标准为基础结合社区公开数据总共整理了一千多条常见垃圾条目分成可回收物、有害垃圾、厨余垃圾、其他垃圾四类。每条垃圾数据除了名称和分类我还尽量补充了投放提示比如“饮料瓶投放前请倒空液体并压扁”“过期药品连同包装一并投放”。这些描述虽然会增加录入工作量但对用户来说价值极高直接影响系统的实用性。数据整理完成后用LOAD DATA INFILE或者直接INSERT脚本导入注意字符集统一为utf8mb4否则中文会乱码。3. 后端核心功能实现从环境搭建到底层SQL3.1 SSM整合的工程结构与配置文件要点Maven工程是这个项目的基础。我创建一个ssm-garbage的war包项目标准目录结构是src/main/java、src/main/resources、src/main/webapp。Java包名用com.garbage下面分controller、service、mapper、entity、vo、common六个子包。pom.xml里的依赖要特别注意版本冲突。Spring我用的5.2.xMyBatis用3.5.xmybatis-spring用2.0.xmysql-connector-java用8.0.x。这里有个重点MySQL 8.0的驱动类名变成了com.mysql.cj.jdbc.Driver不是老款的com.mysql.jdbc.Driver同时连接URL必须加上serverTimezoneAsia/Shanghai参数否则会报时区错误。核心配置文件有三个。jdbc.properties只管数据库连接参数spring-context.xml负责组件扫描、数据源、SqlSessionFactory、事务管理器spring-mvc.xml负责Controller扫描、注解驱动、视图解析器、静态资源放行。我写一下spring-context里最重要的数据源配置context:property-placeholder locationclasspath:jdbc.properties/ bean iddataSource classcom.alibaba.druid.pool.DruidDataSource init-methodinit destroy-methodclose property namedriverClassName value${jdbc.driver}/ property nameurl value${jdbc.url}/ property nameusername value${jdbc.username}/ property namepassword value${jdbc.password}/ /bean bean idsqlSessionFactory classorg.mybatis.spring.SqlSessionFactoryBean property namedataSource refdataSource/ property namemapperLocations valueclasspath:mapper/*.xml/ property nametypeAliasesPackage valuecom.garbage.entity/ /bean bean classorg.mybatis.spring.mapper.MapperScannerConfigurer property namebasePackage valuecom.garbage.mapper/ /bean数据源我用的是Druid而不是默认的简单连接池因为它自带监控页面调试的时候能直接看到SQL执行情况和连接池状态。如果你第一次接触数据源的概念可以把它理解成一个“数据库连接的中转仓库”每次请求不需要新建连接直接从仓库里取用完归还性能能提升一个档次。3.2 垃圾分类查询的两种核心SQL写法查询功能是系统的门面我做了两种方式。一种是纯粹的名称模糊查询用户输入一个字或一个词系统在garbage表里匹配另一种是按分类筛选用户点击“有害垃圾”分类系统列出该分类下所有条目。第一种方式的关键在于LIKE语句的位置我一开始写在Java代码里拼接后来发现不好维护改成在Mapper.xml里动态拼接select idsearchByName resultTypecom.garbage.entity.Garbage parameterTypestring SELECT * FROM garbage where if testkeyword ! null and keyword ! name LIKE CONCAT(%, #{keyword}, %) /if /where ORDER BY id DESC /select这里特别提醒一下LIKE CONCAT(%, #{keyword}, %)比直接写LIKE %${keyword}%安全得多后者存在SQL注入风险。用#{}占位符会让MyBatis自动预编译传进来的参数被当成纯数据而不是SQL片段。第二种分类筛选更简单WHERE category_id #{categoryId}但这个查询往往带着分页需求。我手写了MySQL分页LIMIT #{offset}, #{pageSize}offset的计算放在Service层完成(pageNum - 1) * pageSize这一步逻辑很基础但经常有人搞错尤其页码从1开始还是从0开始一定要统一约定。3.3 后台管理的增删改查与登录拦截后台管理模块的代码量大头集中在Controller的CRUD方法上。以垃圾条目管理为例五个基础方法list方法支持分页和条件查询toAdd方法跳转新增页面add方法处理新增请求toEdit方法回显数据edit方法更新数据delete方法做删除。点一下常见问题回显的时候经常遇到数据丢失比如编辑页打开后下拉框没有选中原来的分类。这个下拉框其实是从category表查出来的所有分类回显时要用selected属性判断当前项是否等于garbage.categoryId这个在JSP里可以写select namecategoryId classform-control c:forEach items${categoryList} varcat option value${cat.id} ${cat.id garbage.categoryId ? selected : }${cat.name}/option /c:forEach /select登录拦截我是用SpringMVC的Interceptor实现的写一个LoginInterceptor在preHandle方法里判断Session里有没有loginUser没有就重定向到登录页。拦截器注册是在spring-mvc.xml里完成的要配置拦截路径我的设置是拦截所有/**请求但是放行/user/login、/user/register、静态资源路径/static/**。这里最容易踩的坑是顺序问题放行规则一定要写在拦截规则前面不然静态资源全被拦截。4. 前端页面与Bootstrap布局快速构建可用界面4.1 页面架构与JSP文件规划页面规划上我分成前台和后台两块。前台包含首页、查询结果页、分类浏览页、注册登录页后台包含框架布局页、垃圾列表页、垃圾编辑页、分类管理页、用户管理页、公告管理页。JSP文件放在webapp/WEB-INF/jsp目录下这是Web项目的一个安全习惯——放在WEB-INF下的JSP无法直接通过URL访问必须经Controller转发能防止用户绕过权限直接打开页面。前台和后台各做一个公共header.jspf和footer.jspf片段用% include %指令或者JSTL的c:import引入避免每个页面重复写导航栏和页脚。页面框架我用的是Bootstrap的经典布局左侧固定导航栏加右侧内容区。Bootstrap 4的栅格系统是12列这是我们可以反复利用的规则。栅格的底层逻辑是flex布局真正理解之后你会发现小白也能做整齐的排版。我举一个例子前台查询页面左侧三分之二是查询结果列表右侧三分之一是热门分类入口这个就是col-lg-8和col-lg-4的组合。4.2 Bootstrap组件在项目里的实际用法我用的最顺手的是Bootstrap的卡片组件和模态框。查询结果列表用卡片比表格好看太多每张卡片显示垃圾名称、分类标签、投放提示分类标签用不同颜色的badge区分——橙色是可回收物红色是有害垃圾绿色是厨余垃圾灰色是其他垃圾。badge组件的好处是颜色醒目且不占空间。模态框在编辑页面非常实用。传统的编辑方式是跳转一个新页面但用Bootstrap模态框可以在当前页面弹出一个编辑面板用户体验更好。我用它来做分类信息的快速编辑触发方式是垃圾条目列表每一行右侧的“编辑”按钮点击后通过Ajax请求获取该分类的完整数据然后填充到模态框的表单里提交时再用Ajax发送更新请求。这套交互模式在现在的Web开发里非常常见学好它等于同时掌握了前端和后端的配合方式。表单验证我也是用的Bootstrap相关的验证样式。必填项用HTML5的required属性配合Bootstrap的.is-invalid和.is-valid类可以在不引入额外插件的情况下做到基础的输入反馈。密码强度的校验就自己写正则了至少8位且包含字母和数字。4.3 前台查询交互与Ajax调用的处理前台查询页的核心交互是用户输入关键词点击查询按钮页面不刷新直接通过Ajax从后端取回数据并渲染。这类似我们平时说的“局部刷新”能明显感觉到比传统表单提交流畅。关键代码是用jQuery的$.ajaxfunction searchGarbage() { var keyword $(#keyword).val().trim(); if (keyword ) { alert(请输入垃圾名称); return; } $.ajax({ url: /garbage/search, type: GET, data: { keyword: keyword }, dataType: json, success: function(data) { if (data.code 200) { renderResult(data.data); } else { $(#resultArea).html(p classtext-muted没有找到相关结果/p); } }, error: function() { alert(请求失败请稍后重试); } }); }后端的Controller方法加ResponseBody注解返回统一的结果对象。我在common包里定义了一个Result类包含code、message、data三个字段所有接口统一返回这个结构前端判断code是否为200来决定渲染逻辑。这个习惯在前后端协作项目里会给你省下很多沟通成本。前端渲染结果的逻辑我用的是JSON.parse之后循环拼接字符串虽然代码不算优雅但简单直接。用ES6的模板字符串可以简化拼接function renderResult(list) { var html ; list.forEach(function(item) { html div classcard mb-2 div classcard-body h5 classcard-title${item.name}/h5 span classbadge badge-primary${item.categoryName}/span p classcard-text mt-2${item.tips}/p /div /div; }); $(#resultArea).html(html); }这里要注意XSS问题如果垃圾名称或描述中包含HTML标签直接拼接可能被浏览器解析执行。稳妥的做法是转义处理我写了一个小工具方法把、、、等字符替换为实体字符。5. 常见问题与排查技巧实录5.1 数据库连接失败的几种典型情况这个项目里九成的新手问题都出在数据库连接上。第一种是驱动类找不到报ClassNotFoundException: com.mysql.jdbc.Driver这是因为依赖配错版本了MySQL 8.x要用com.mysql.cj.jdbc.Driver或者干脆检查一下pom里mysql-connector-java的版本号。第二种是时区错误报The server time zone value Öйú±ê׼ʱ¼ä这个乱码其实是中文时区名解决办法在URL加serverTimezoneAsia/Shanghai。第三种是连接被拒报Communications link failure这种通常是数据库服务没启动或者端口不是默认的3306。Linux下排查可以用netstat -tlnp | grep 3306查看端口是否在监听Windows下可以检查服务管理器里MySQL服务的状态。第四种非常隐蔽密码通过配置文件传入时包含特殊字符比如会把jdbc:mysql://...的URL解析搞乱此时要用URL编码或者调整密码。我建议调试数据库问题时先直接在命令行里用mysql -u root -p测试连接确认命令行能连上再排查Java代码。这一步能帮你缩小问题范围避免在代码里瞎猜。5.2 Tomcat部署JSP项目的常见坑我用的是Tomcat 9配合Maven的tomcat7-maven-plugin插件启动。这个插件虽然名字叫tomcat7但实际可以兼容Tomcat 8.5和9的一些功能在pom.xml配置好path//path就能直接用mvn tomcat7:run启动。启动过程中最常见的问题是JSP编译失败表现是页面报500错误Tomcat日志里有Unable to compile class for JSP。原因多半是taglib指令没写对比如JSTL核心标签库的URI在JSP页面里写成了http://java.sun.com/jsp/jstl/core这个老地址在Jakarta改名之后已经失效了要用http://java.sun.com/jsp/jstl/core在旧项目里可以但新项目建议确认一下依赖版本。另一个常见问题是静态资源404。JSP页面引用的CSS、JS文件返回404原因大概率是SpringMVC的前端控制器DispatcherServlet拦截了所有请求包括静态资源。解决办法是在spring-mvc.xml加静态资源放行配置mvc:resources mapping/static/** location/static//这个配置会告诉DispatcherServlet以/static/开头的请求直接交给默认Servlet处理不再进入Controller。5.3 查询结果为空或者SQL报错的排查如果前台查询返回结果总为空先别急着改代码直接在数据库命令行执行一遍同样的SQL看有没有数据。很多时候问题出在数据没导入或者导入时字符集混乱数据是乱码导致匹配不上。我当初导入数据时忘记指定utf8mb4页面查“苹果”能查出结果但显示乱码后来用ALTER TABLE garbage CONVERT TO CHARACTER SET utf8mb4修正才解决。如果SQL报错Unknown column说明实体类和表字段对不上MyBatis默认使用驼峰映射但表字段是下划线风格需要在mybatis-config.xml设置settings setting namemapUnderscoreToCamelCase valuetrue/ /settings这一步没配置的话category_id永远映射不到categoryId属性上查询出来的对象全是null页面白屏或者空列表排查半天发现是映射问题。还有个细节容易被忽略query_record表在插入记录时如果用户没有登录user_id为空。我在表设计时把user_id设为可空并在代码里判断未登录用户查询时不走写入记录的逻辑避免外键关联查询时出现笛卡尔积。这一点在统计热门查询时尤其重要不能因为一个空值把SQL搞崩。6. 项目扩展与优化建议6.1 搜索体验优化从模糊查询到全文检索目前的LIKE %关键词%在数据量小的时候没问题但垃圾条目超过几千条后性能会明显下降。优化方向有两个第一利用MySQL的全文索引在name字段上建FULLTEXT索引用MATCH...AGAINST语法做全文检索支持更复杂的匹配规则第二引入中文分词组件比如在Java体系里集成HanLP做分词再结合倒排索引实现更精确的搜索。业余项目不建议一上来就引入Elasticsearch那是分布式搜索引擎牛刀杀鸡还会把部署复杂度拉满。先用好MySQL自带能力把性能优化上去等数据量真正到十万级以上再架构升级。6.2 前后端分离的演进方向SSMJSP这套技术栈学完之后我建议你把同一个项目用SpringBootVue重构一遍。不是说要否定SSM而是通过对比理解架构演进的逻辑。JSP的页面渲染适合服务端渲染场景但对复杂交互不够灵活前后端共享一套数据模型也很别扭。改造成Vue之后前端负责路由和交互后端只出接口两个团队可以并行开发。改造时有个讨巧的过渡方案不重写所有页面先把查询结果页改成静态页面加Ajax请求接口其他页面后续逐步替换。这样一次只改一个功能模块不会遇到大爆炸式重构的风险。6.3 从项目到部署的全链路思考最后说点实在的。很多同学做完项目只会用mvn tomcat7:run跑起来看这在本地没问题但真正部署到服务器就会踩各种环境坑。生产部署我当时选择了云服务器加宝塔面板的方式把war包直接扔进Tomcat的webapps目录就能跑。数据库首次启动需要执行初始化脚本我建议把建表SQL和测试数据分开成两个文件schema.sql管结构data.sql管数据便于单独维护。配置方面生产环境的数据库密码绝对不能写在jdbc.properties里明文保存而是要通过环境变量注入或者在部署时手动修改。我习惯在部署脚本里用sed命令自动替换占位符这样既不会把敏感信息提交到代码仓库又能保持部署流程的可重复性。部署完之后一定要测试几个核心链路注册、登录、查询、后台增删改查、会话过期后的重定向逻辑。会话超时这种场景在本地开发时几乎遇不到但用户真实使用的过程中一定会发生Session失效后请求接口会返回什么、前端如何处理这些细节才是项目能真正上线和不能上线的分水岭。我个人做这个项目的最大体会是一个看似简单的管理系统想做到真正顺手拼的是数据质量和细节处理能力。垃圾条目这一千多条数据我前前后后修订了三版才把投放提示写得既准确又易懂。技术栈本身都是现成的难的是把每个环节都按合理的标准去实现。如果你只是照葫芦画瓢跑起来那很快就忘了要是能在跑通的基础上把一个查询优化方案或者一个交互细节吃透这套SSM项目带给你的成长会远超课程本身。
基于SSM的垃圾分类查询系统设计与部署实战
前阵子刚好把一套基于SSM的垃圾分类查询系统从零到部署完整走了一遍这套东西看着简单真上手才知道里面藏着不少细节——光垃圾数据怎么整理、分类关联怎么设计、分页和搜索怎么配合就够琢磨一阵。这篇把整个项目的设计思路、表结构、核心代码、部署踩坑全部整理出来给正在做javaweb毕设或者想练手SSM整合的朋友做个参考尤其是第一次用JSPBootstrap做管理后台的新手可以少走很多弯路。1. 项目定位与技术选型为什么是SSMJSPBootstrap1.1 这个系统到底要解决什么问题垃圾分类查询系统的核心需求其实很朴素居民拿到一件垃圾不知道属于什么类别打开网页输入名称立刻能查到对应分类和处置建议。但真正动手做的时候你会发现给它扩展成管理系统后需求层次一下子变多了。前端需要提供快速查询入口和分类浏览页面后端需要一个完整的管理后台让运营人员维护垃圾条目、分类说明、公告信息还要统计用户的查询记录。所以我把系统拆成两个主要角色。普通用户可以注册登录、按名称查询垃圾类别、按分类查看垃圾列表、浏览公告管理员登录后台之后可以管理垃圾条目、管理分类、管理用户、发布公告。这个权限模型不算复杂但对学习SSM框架来说刚好合适能覆盖增删改查、关联查询、分页、登录拦截这些最常见的业务场景。1.2 技术选型背后的三个考虑为什么用SSM而不是SpringBoot坦率说放在现在生产环境我更倾向SpringBoot但这个项目定位是教学和毕设SSM的价值在于它把Spring、SpringMVC、MyBatis三个框架的整合过程全部暴露出来配置文件、依赖关系、拦截器、事务控制都得自己一个坑一个坑地趟。你把这个流程走通再去看SpringBoot的自动配置理解深度完全不一样。JSP也是同样的逻辑。很多教程都在讲前后端分离但高校课程和企业里仍有大量遗留系统用JSP而且JSPJSTL可以直接在页面上做数据渲染配合EL表达式对新手理解MVC的分工非常有帮助。Bootstrap则是为了快速解决样式问题它的栅格系统能在没有专门前端工程师的情况下把后台和前台页面做得像模像样。MyBatis层面我选择了XML映射方式而不是注解方式。原因很简单垃圾分类的查询条件是多变的管理员搜索、前台模糊查询、分类筛选SQL需要动态拼接XML里的where和if标签比注解的SelectProvider直观太多了。1.3 系统整体的请求流转结构模块划分上我按照经典的三层架构来做Controller层负责接收请求和参数校验Service层处理业务逻辑和事务Mapper层管数据库操作。实体类对应数据库表VO类负责页面展示数据的组装。一个典型的查询请求流转是这样的用户在页面输入“废旧电池”提交到GarbageController的search方法Controller把关键词传给GarbageServiceService调用GarbageMapper执行模糊查询结果封装成JSON返回给前端前端用jQuery把结果渲染到Bootstrap的卡片组件里。整个链路跑通之后你再去理解SpringMVC的DispatcherServlet机制就会有画面感了。2. 数据库设计垃圾分类数据模型的关键点2.1 表结构规划与关联关系数据库设计是这类项目最容易出彩也最容易翻车的环节。一开始我也想过只建一张垃圾表把所有信息塞进去但后来整理数据时发现垃圾条目和分类之间是明显的多对一关系而且分类需要独立维护属性比如颜色标识、投放要求、处理方式。所以我最终用四张核心表来实现。user表存用户和管理员信息字段包括主键、用户名、密码、联系电话、创建时间、是否管理员。category表存垃圾分类类别字段包括主键、分类名称、分类描述、图标路径、投放要求。garbage表是核心表字段包括主键、垃圾名称、所属分类ID、详细描述、投放提示、创建时间。query_record表记录每次查询行为字段包括主键、用户ID、查询关键词、查询结果、查询时间。这个设计的妙处在于垃圾条目只存category_id不存冗余的分类名称需要展示分类信息时通过JOIN或者二次查询获取。表关系干净了后面做分类统计、条目筛选都方便。2.2 字段设计与数据类型选择的细节先说garbage表。垃圾名称字段我用了varchar(100)有人觉得50就够了其实不够因为很多复合词很长比如“沾了油的快递纸箱”100的长度更保险。关键词搜索走的字段就是name所以我把这个字段加了普通索引。分类ID用int并设置外键逻辑关联注意我在物理层面没建外键约束生产环境不推荐物理外键因为会影响插入性能且难以维护逻辑关联足够。category表的排序字段容易被忽略。分类列表在页面上的展示顺序需要人工控制所以我加了sort_order整型字段查询时ORDER BY sort_order ASC这样可以在不改变主键的情况下灵活调整顺序。投放要求字段用text类型因为内容是长文本而且可能包含换行。query_record表主要用于后台统计热门搜索所以关键词和结果字段都要保留查询时间用datetime并设置默认值为CURRENT_TIMESTAMP。注意MySQL 8.0对datetime默认值的写法有变化DEFAULT CURRENT_TIMESTAMP是可以直接用的但如果你用的版本较老可能需要手动在插入语句里赋值。2.3 垃圾数据的整理与初始化脚本数据是这类系统的灵魂。网上虽然能搜到一些现成的SQL脚本但质量参差不齐有的分类逻辑混乱比如把“创可贴”归到可回收垃圾这明显不对。我最终以国家垃圾分类标准为基础结合社区公开数据总共整理了一千多条常见垃圾条目分成可回收物、有害垃圾、厨余垃圾、其他垃圾四类。每条垃圾数据除了名称和分类我还尽量补充了投放提示比如“饮料瓶投放前请倒空液体并压扁”“过期药品连同包装一并投放”。这些描述虽然会增加录入工作量但对用户来说价值极高直接影响系统的实用性。数据整理完成后用LOAD DATA INFILE或者直接INSERT脚本导入注意字符集统一为utf8mb4否则中文会乱码。3. 后端核心功能实现从环境搭建到底层SQL3.1 SSM整合的工程结构与配置文件要点Maven工程是这个项目的基础。我创建一个ssm-garbage的war包项目标准目录结构是src/main/java、src/main/resources、src/main/webapp。Java包名用com.garbage下面分controller、service、mapper、entity、vo、common六个子包。pom.xml里的依赖要特别注意版本冲突。Spring我用的5.2.xMyBatis用3.5.xmybatis-spring用2.0.xmysql-connector-java用8.0.x。这里有个重点MySQL 8.0的驱动类名变成了com.mysql.cj.jdbc.Driver不是老款的com.mysql.jdbc.Driver同时连接URL必须加上serverTimezoneAsia/Shanghai参数否则会报时区错误。核心配置文件有三个。jdbc.properties只管数据库连接参数spring-context.xml负责组件扫描、数据源、SqlSessionFactory、事务管理器spring-mvc.xml负责Controller扫描、注解驱动、视图解析器、静态资源放行。我写一下spring-context里最重要的数据源配置context:property-placeholder locationclasspath:jdbc.properties/ bean iddataSource classcom.alibaba.druid.pool.DruidDataSource init-methodinit destroy-methodclose property namedriverClassName value${jdbc.driver}/ property nameurl value${jdbc.url}/ property nameusername value${jdbc.username}/ property namepassword value${jdbc.password}/ /bean bean idsqlSessionFactory classorg.mybatis.spring.SqlSessionFactoryBean property namedataSource refdataSource/ property namemapperLocations valueclasspath:mapper/*.xml/ property nametypeAliasesPackage valuecom.garbage.entity/ /bean bean classorg.mybatis.spring.mapper.MapperScannerConfigurer property namebasePackage valuecom.garbage.mapper/ /bean数据源我用的是Druid而不是默认的简单连接池因为它自带监控页面调试的时候能直接看到SQL执行情况和连接池状态。如果你第一次接触数据源的概念可以把它理解成一个“数据库连接的中转仓库”每次请求不需要新建连接直接从仓库里取用完归还性能能提升一个档次。3.2 垃圾分类查询的两种核心SQL写法查询功能是系统的门面我做了两种方式。一种是纯粹的名称模糊查询用户输入一个字或一个词系统在garbage表里匹配另一种是按分类筛选用户点击“有害垃圾”分类系统列出该分类下所有条目。第一种方式的关键在于LIKE语句的位置我一开始写在Java代码里拼接后来发现不好维护改成在Mapper.xml里动态拼接select idsearchByName resultTypecom.garbage.entity.Garbage parameterTypestring SELECT * FROM garbage where if testkeyword ! null and keyword ! name LIKE CONCAT(%, #{keyword}, %) /if /where ORDER BY id DESC /select这里特别提醒一下LIKE CONCAT(%, #{keyword}, %)比直接写LIKE %${keyword}%安全得多后者存在SQL注入风险。用#{}占位符会让MyBatis自动预编译传进来的参数被当成纯数据而不是SQL片段。第二种分类筛选更简单WHERE category_id #{categoryId}但这个查询往往带着分页需求。我手写了MySQL分页LIMIT #{offset}, #{pageSize}offset的计算放在Service层完成(pageNum - 1) * pageSize这一步逻辑很基础但经常有人搞错尤其页码从1开始还是从0开始一定要统一约定。3.3 后台管理的增删改查与登录拦截后台管理模块的代码量大头集中在Controller的CRUD方法上。以垃圾条目管理为例五个基础方法list方法支持分页和条件查询toAdd方法跳转新增页面add方法处理新增请求toEdit方法回显数据edit方法更新数据delete方法做删除。点一下常见问题回显的时候经常遇到数据丢失比如编辑页打开后下拉框没有选中原来的分类。这个下拉框其实是从category表查出来的所有分类回显时要用selected属性判断当前项是否等于garbage.categoryId这个在JSP里可以写select namecategoryId classform-control c:forEach items${categoryList} varcat option value${cat.id} ${cat.id garbage.categoryId ? selected : }${cat.name}/option /c:forEach /select登录拦截我是用SpringMVC的Interceptor实现的写一个LoginInterceptor在preHandle方法里判断Session里有没有loginUser没有就重定向到登录页。拦截器注册是在spring-mvc.xml里完成的要配置拦截路径我的设置是拦截所有/**请求但是放行/user/login、/user/register、静态资源路径/static/**。这里最容易踩的坑是顺序问题放行规则一定要写在拦截规则前面不然静态资源全被拦截。4. 前端页面与Bootstrap布局快速构建可用界面4.1 页面架构与JSP文件规划页面规划上我分成前台和后台两块。前台包含首页、查询结果页、分类浏览页、注册登录页后台包含框架布局页、垃圾列表页、垃圾编辑页、分类管理页、用户管理页、公告管理页。JSP文件放在webapp/WEB-INF/jsp目录下这是Web项目的一个安全习惯——放在WEB-INF下的JSP无法直接通过URL访问必须经Controller转发能防止用户绕过权限直接打开页面。前台和后台各做一个公共header.jspf和footer.jspf片段用% include %指令或者JSTL的c:import引入避免每个页面重复写导航栏和页脚。页面框架我用的是Bootstrap的经典布局左侧固定导航栏加右侧内容区。Bootstrap 4的栅格系统是12列这是我们可以反复利用的规则。栅格的底层逻辑是flex布局真正理解之后你会发现小白也能做整齐的排版。我举一个例子前台查询页面左侧三分之二是查询结果列表右侧三分之一是热门分类入口这个就是col-lg-8和col-lg-4的组合。4.2 Bootstrap组件在项目里的实际用法我用的最顺手的是Bootstrap的卡片组件和模态框。查询结果列表用卡片比表格好看太多每张卡片显示垃圾名称、分类标签、投放提示分类标签用不同颜色的badge区分——橙色是可回收物红色是有害垃圾绿色是厨余垃圾灰色是其他垃圾。badge组件的好处是颜色醒目且不占空间。模态框在编辑页面非常实用。传统的编辑方式是跳转一个新页面但用Bootstrap模态框可以在当前页面弹出一个编辑面板用户体验更好。我用它来做分类信息的快速编辑触发方式是垃圾条目列表每一行右侧的“编辑”按钮点击后通过Ajax请求获取该分类的完整数据然后填充到模态框的表单里提交时再用Ajax发送更新请求。这套交互模式在现在的Web开发里非常常见学好它等于同时掌握了前端和后端的配合方式。表单验证我也是用的Bootstrap相关的验证样式。必填项用HTML5的required属性配合Bootstrap的.is-invalid和.is-valid类可以在不引入额外插件的情况下做到基础的输入反馈。密码强度的校验就自己写正则了至少8位且包含字母和数字。4.3 前台查询交互与Ajax调用的处理前台查询页的核心交互是用户输入关键词点击查询按钮页面不刷新直接通过Ajax从后端取回数据并渲染。这类似我们平时说的“局部刷新”能明显感觉到比传统表单提交流畅。关键代码是用jQuery的$.ajaxfunction searchGarbage() { var keyword $(#keyword).val().trim(); if (keyword ) { alert(请输入垃圾名称); return; } $.ajax({ url: /garbage/search, type: GET, data: { keyword: keyword }, dataType: json, success: function(data) { if (data.code 200) { renderResult(data.data); } else { $(#resultArea).html(p classtext-muted没有找到相关结果/p); } }, error: function() { alert(请求失败请稍后重试); } }); }后端的Controller方法加ResponseBody注解返回统一的结果对象。我在common包里定义了一个Result类包含code、message、data三个字段所有接口统一返回这个结构前端判断code是否为200来决定渲染逻辑。这个习惯在前后端协作项目里会给你省下很多沟通成本。前端渲染结果的逻辑我用的是JSON.parse之后循环拼接字符串虽然代码不算优雅但简单直接。用ES6的模板字符串可以简化拼接function renderResult(list) { var html ; list.forEach(function(item) { html div classcard mb-2 div classcard-body h5 classcard-title${item.name}/h5 span classbadge badge-primary${item.categoryName}/span p classcard-text mt-2${item.tips}/p /div /div; }); $(#resultArea).html(html); }这里要注意XSS问题如果垃圾名称或描述中包含HTML标签直接拼接可能被浏览器解析执行。稳妥的做法是转义处理我写了一个小工具方法把、、、等字符替换为实体字符。5. 常见问题与排查技巧实录5.1 数据库连接失败的几种典型情况这个项目里九成的新手问题都出在数据库连接上。第一种是驱动类找不到报ClassNotFoundException: com.mysql.jdbc.Driver这是因为依赖配错版本了MySQL 8.x要用com.mysql.cj.jdbc.Driver或者干脆检查一下pom里mysql-connector-java的版本号。第二种是时区错误报The server time zone value Öйú±ê׼ʱ¼ä这个乱码其实是中文时区名解决办法在URL加serverTimezoneAsia/Shanghai。第三种是连接被拒报Communications link failure这种通常是数据库服务没启动或者端口不是默认的3306。Linux下排查可以用netstat -tlnp | grep 3306查看端口是否在监听Windows下可以检查服务管理器里MySQL服务的状态。第四种非常隐蔽密码通过配置文件传入时包含特殊字符比如会把jdbc:mysql://...的URL解析搞乱此时要用URL编码或者调整密码。我建议调试数据库问题时先直接在命令行里用mysql -u root -p测试连接确认命令行能连上再排查Java代码。这一步能帮你缩小问题范围避免在代码里瞎猜。5.2 Tomcat部署JSP项目的常见坑我用的是Tomcat 9配合Maven的tomcat7-maven-plugin插件启动。这个插件虽然名字叫tomcat7但实际可以兼容Tomcat 8.5和9的一些功能在pom.xml配置好path//path就能直接用mvn tomcat7:run启动。启动过程中最常见的问题是JSP编译失败表现是页面报500错误Tomcat日志里有Unable to compile class for JSP。原因多半是taglib指令没写对比如JSTL核心标签库的URI在JSP页面里写成了http://java.sun.com/jsp/jstl/core这个老地址在Jakarta改名之后已经失效了要用http://java.sun.com/jsp/jstl/core在旧项目里可以但新项目建议确认一下依赖版本。另一个常见问题是静态资源404。JSP页面引用的CSS、JS文件返回404原因大概率是SpringMVC的前端控制器DispatcherServlet拦截了所有请求包括静态资源。解决办法是在spring-mvc.xml加静态资源放行配置mvc:resources mapping/static/** location/static//这个配置会告诉DispatcherServlet以/static/开头的请求直接交给默认Servlet处理不再进入Controller。5.3 查询结果为空或者SQL报错的排查如果前台查询返回结果总为空先别急着改代码直接在数据库命令行执行一遍同样的SQL看有没有数据。很多时候问题出在数据没导入或者导入时字符集混乱数据是乱码导致匹配不上。我当初导入数据时忘记指定utf8mb4页面查“苹果”能查出结果但显示乱码后来用ALTER TABLE garbage CONVERT TO CHARACTER SET utf8mb4修正才解决。如果SQL报错Unknown column说明实体类和表字段对不上MyBatis默认使用驼峰映射但表字段是下划线风格需要在mybatis-config.xml设置settings setting namemapUnderscoreToCamelCase valuetrue/ /settings这一步没配置的话category_id永远映射不到categoryId属性上查询出来的对象全是null页面白屏或者空列表排查半天发现是映射问题。还有个细节容易被忽略query_record表在插入记录时如果用户没有登录user_id为空。我在表设计时把user_id设为可空并在代码里判断未登录用户查询时不走写入记录的逻辑避免外键关联查询时出现笛卡尔积。这一点在统计热门查询时尤其重要不能因为一个空值把SQL搞崩。6. 项目扩展与优化建议6.1 搜索体验优化从模糊查询到全文检索目前的LIKE %关键词%在数据量小的时候没问题但垃圾条目超过几千条后性能会明显下降。优化方向有两个第一利用MySQL的全文索引在name字段上建FULLTEXT索引用MATCH...AGAINST语法做全文检索支持更复杂的匹配规则第二引入中文分词组件比如在Java体系里集成HanLP做分词再结合倒排索引实现更精确的搜索。业余项目不建议一上来就引入Elasticsearch那是分布式搜索引擎牛刀杀鸡还会把部署复杂度拉满。先用好MySQL自带能力把性能优化上去等数据量真正到十万级以上再架构升级。6.2 前后端分离的演进方向SSMJSP这套技术栈学完之后我建议你把同一个项目用SpringBootVue重构一遍。不是说要否定SSM而是通过对比理解架构演进的逻辑。JSP的页面渲染适合服务端渲染场景但对复杂交互不够灵活前后端共享一套数据模型也很别扭。改造成Vue之后前端负责路由和交互后端只出接口两个团队可以并行开发。改造时有个讨巧的过渡方案不重写所有页面先把查询结果页改成静态页面加Ajax请求接口其他页面后续逐步替换。这样一次只改一个功能模块不会遇到大爆炸式重构的风险。6.3 从项目到部署的全链路思考最后说点实在的。很多同学做完项目只会用mvn tomcat7:run跑起来看这在本地没问题但真正部署到服务器就会踩各种环境坑。生产部署我当时选择了云服务器加宝塔面板的方式把war包直接扔进Tomcat的webapps目录就能跑。数据库首次启动需要执行初始化脚本我建议把建表SQL和测试数据分开成两个文件schema.sql管结构data.sql管数据便于单独维护。配置方面生产环境的数据库密码绝对不能写在jdbc.properties里明文保存而是要通过环境变量注入或者在部署时手动修改。我习惯在部署脚本里用sed命令自动替换占位符这样既不会把敏感信息提交到代码仓库又能保持部署流程的可重复性。部署完之后一定要测试几个核心链路注册、登录、查询、后台增删改查、会话过期后的重定向逻辑。会话超时这种场景在本地开发时几乎遇不到但用户真实使用的过程中一定会发生Session失效后请求接口会返回什么、前端如何处理这些细节才是项目能真正上线和不能上线的分水岭。我个人做这个项目的最大体会是一个看似简单的管理系统想做到真正顺手拼的是数据质量和细节处理能力。垃圾条目这一千多条数据我前前后后修订了三版才把投放提示写得既准确又易懂。技术栈本身都是现成的难的是把每个环节都按合理的标准去实现。如果你只是照葫芦画瓢跑起来那很快就忘了要是能在跑通的基础上把一个查询优化方案或者一个交互细节吃透这套SSM项目带给你的成长会远超课程本身。
