web结课大作业成果展示
一、项目说明与分析
- 该项目是一个基于 Spring Boot + MyBatis + MySQL 的 Web 应用项目,采用 B/S 架构,用户通过浏览器即可访问。系统分为前端展示和后台管理两大部分:前端面向普通访客,提供全国铁路线路展示、按区域筛选车次、车票查询等功能,界面采用清新柔和的自定义 CSS 设计,支持响应式布局;后台面向管理员,基于 AdminLTE 框架构建,集成了车票管理(增删查改、分页搜索)、用户管理、订单管理以及基于 Spring Security 的 RBAC 权限控制(角色-权限-用户三级模型),并通过 Chart.js 实现车票统计图展示。
- 技术层面,系统采用经典的三层 MVC 架构:表现层使用 Thymeleaf 模板引擎渲染页面,控制层接收请求并调用业务逻辑,数据访问层通过 MyBatis 操作 MySQL 数据库。前端通过 Ajax 异步加载车票数据,结合 PageHelper 分页插件实现高效的数据查询。整个项目从需求分析、系统设计到编码实现、部署运行,完整覆盖了 Web 应用开发的各个阶段,是一个功能完整、界面友好的设计。
二、核心页面介绍
本项目主要包含前端展示和后端管理两个页面
1.前端展示包括
- 首页 :首页分为三个区域:上方展示铁路线路概览,中间按华北、华东等地区分类展示线路入口,下方动态加载热门车次推荐。
- 线路展示页 :线路展示页通过 Ajax 异步获取车票数据,支持按区域标签筛选,前端 JavaScript 根据车站归属区域动态过滤。
- 车票查询页 :车票查询页面,用户输入出发站和到达站,后端基于 PageHelper 分页插件返回数据,前端渲染车票卡片展示余票和票价。
2.后端页面包括
- 管理员登录页 管理后台通过 Spring Security 进行身份认证,不同角色拥有不同的操作权限。
- 仪表盘 后台首页集成 Chart.js 柱状图,统计各站点的车票数量分布,为管理提供数据参考。
- 车票管理 核心功能模块,支持添加车次、分页查询、按站点筛选和删除操作。
- 车票订购 选择可售车次进行订购,系统生成订单记录并关联到用户。
- 用户管理 管理员可查看用户列表、添加新用户,支持按用户名搜索。
- 权限管理 采用 RBAC 权限模型,通过角色关联权限,实现菜单级和操作级的精细控制。
具体的展示见如下视频
三、核心技术简介
1、后端
- Spring Boot — 项目的核心框架。它帮我们省去了繁琐的 XML 配置,内置了 Tomcat 服务器,项目打成一个 jar 包就能直接运行。控制层(Controller)、业务层(Service)都通过 Spring 的 IoC 容器来管理,代码结构很清晰。
- MyBatis — 数据库持久层框架。通过 XML 文件或注解来写 SQL,把数据库表记录映射成 Java 对象。比如你添加一张车票,MyBatis 帮你把表单数据插入到 tm_ticket 表里,查询时也把结果直接封装成 Ticket 对象。
- Spring Security — 负责登录认证和权限控制。用户登录时验证账号密码,登录成功后根据角色加载对应的菜单和操作权限。你在后台看到的不同人看到不同菜单,就是它控制的。
- PageHelper — MyBatis 的分页插件。车票列表、用户列表的分页查询全靠它,前端传 pageNum 和 pageSize,它自动在 SQL 后面拼接 LIMIT 语句,省去了自己写分页代码的麻烦。
- MySQL — 关系型数据库。所有数据都存在这里,包括车票、用户、订单、角色、权限等 8 张表。
2、前端
- Thymeleaf — 服务端模板引擎。它在 HTML 页面里通过 th: 标签把后端数据渲染到前端,比如 th:each 遍历车票列表、th:text 显示文本内容
- AdminLTE — 后台管理界面的 UI 框架。基于 Bootstrap 3,提供了现成的仪表盘、侧边栏菜单、表格样式、弹窗组件,后台页面直接用它的布局。
Chart.js — 前端图表库。后台仪表盘上的柱状图用它生成,通过 Ajax 拿到数据后在前端绘制,不用刷新页面。 - jQuery + Ajax — 前端 JavaScript 工具。页面通过 Ajax 异步请求后端 API,拿到 JSON 数据后动态更新页面内容,比如车票搜索、分页切换都是异步完成的。