# java-web-ssm **Repository Path**: HyoJoo-W/java-web-ssm ## Basic Information - **Project Name**: java-web-ssm - **Description**: Web技术课程SSM集成小小Demo！ - **Primary Language**: Unknown - **License**: AGPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 6 - **Forks**: 2 - **Created**: 2021-04-09 - **Last Updated**: 2024-09-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: javaWEB, jQuery, SSM ## README # HyoJoo-Gitee-03 **——Web技术课程SSM项目** # 参与贡献 **@HyoJoo-W** **@张皓轩** **@wjy-coding** # 1 项目介绍 ## 1.1 gitee-03-ssm-JavaWeb **本模块是基于JavaBean、Servlet、JSP等技术实现的一个MVC开发模式的程序模块。** ## 1.2 gitee-03-ssm-SSM **本模块是基于Spring、SpringMVC、MyBatis等技术实现的一个MVC开发模式的程序模块。** # 2 项目一 （Servlet、JSP、JavaBean） ## 2.1 项目概述 ### 2.1.1 业务描述 - 基于JavaWeb相关技术编写一个Web应用程序，实现用户的开户、编辑、查询、销户功能模块。 ### 2.2.2 相关实现技术说明 - 前端 - JSP制作服务器端页面、并控制网页行为。使用JSTL标签库协助开发。 - BootStrap协助实现页面样式优化、响应式布局开发。 - 后端 - JavaBean技术实现ORM(对象关系映射)思想，构建实体类User与MySQL数据库服务器交互映射。 - Java Servlet技术实现后端响应前端请求，与前端交互，同时与后端处理业务逻辑 - 数据库设计：MySQL数据库创建单表user表（本项目仅涉及单表操作） - 数据库 - MySQL数据库 - Druid连接池 - Spring JdbcTemplate 简化开发 - 开发模式 - 基于MVC(Model、View、Controller)开发模式进行整体项目的开发 - 项目管理工具 - 使用Maven工具管理项目 ### 2.2.3 项目架构 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130341_35a6de7f_8938068.png "image-20210418110307172.png") 说明： - Java子包 - entity层：实体类，映射数据库的实体表 - dao层：负责与数据交互 - service层：负责处理业务逻辑 - web层：即Servlet层，调用Service层服务处理前端请求 - util包：工具包，自定义JDBCUtils工具类，便于开发 - resource子包 - 项目需要的资源：如Druid数据库连接池的配置文件等 - webapp子包 - css、js包：本项目引入BootStrap框架简化开发，这里放置BootStrap相关资源 - jsp包：包含所有JSP界面 - WEB-INF包：包含本Web项目的配置文件web.xml - index.jsp：欢迎页 ### 2.2.4 UML类图 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130622_997f33aa_8938068.png "屏幕截图.png") ## 2.2 效果截图 ### 2.2.1 主界面mainMenu.jsp ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130650_18c072af_8938068.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130700_62a60182_8938068.png "屏幕截图.png") ### 2.2.2 CRUD——查询 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130710_3364e606_8938068.png "屏幕截图.png") ### 2.2.3 CRUD——修改 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130721_e009a842_8938068.png "屏幕截图.png") ### 2.2.4 CRUD——删除 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130732_01c3db80_8938068.png "屏幕截图.png") ### 2.2.5 CRUD——添加 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130740_5ce129b1_8938068.png "屏幕截图.png") # 3 项目二 （Spring、SpringMVC、MyBatis） ## 3.1 项目概述 ### 3.1.1 业务需求（小小Demo） - 完成用户的CRUD - 完成用户存取款、转账 ### 3.1.2 开发环境 - 操作系统：windows10 家庭版 - IDE：IntelliJ IDEA集成开发环境（Version: 2020.3.1） - JDK: JDK-11 - Web服务器: Tomcat (Version: 8.5.64) - 项目管理工具：Maven （Version：3.6.3） - 数据库：MySQL（Version: 8.0.23） ### 3.1.3 相关技术链 - 前端 - HTML、CSS、JavaScript（不再赘述） - jQuery（简化开发） - BootStrap（简化开发） - 前后端交互 - ajax：Asynchronous Javascript And XML（异步JavaScript和XML) - 数据交互格式：Json - 后端 - Java - Spring：管理对象的容器（Version: 5.3.5） - SpringMVC: 分发请求（Version: 5.3.5） - MyBatis: 持久层框架（Version: 3.5.6） ### 3.1.4 相关依赖包 ==**详见pom.xml文件**== - pagehelperMyBatis分页插件 - Spring、SpringMVC、Mybatis - mysql-connector-java - fastJson（alibaba的Json解析工具） - hibernate-validator（数据校验工具） - ...... ## 3.2 项目构建 ### 3.2.1项目结构 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130813_3038855b_8938068.png "image-20210418122503206.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130826_30c77418_8938068.png "image-20210418123000628.png") ==说明== - java子包 - entity：实体层 - mapper：dao映射层 - service：业务逻辑 - controller：控制层 - resources子包 - com/nut/mapper：*.xml（即MyBatis映射文件） - druid.propertites：Druid连接池资源文件 - applicationContext.xml：Spring配置文件 - spring-mvc.xml：SpringMVC配置文件 - mybatis-config.xml：MyBatis配置文件 - webapp子包 - css：HyoJoo.css（==当然是笔者自定义的啦==） - html：相关页面 - js：使用jQuery控制网页动态行为 - WEB-INF：包含Web应用配置文件web.xml - index.html：欢迎页 ### 3.2.2 配置详解 ## 3.3 效果截图 ### 3.3.1 主界面 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130844_a98dffa0_8938068.png "屏幕截图.png") ### 3.3.2 管理员登录 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130853_06f5542b_8938068.png "屏幕截图.png") ### 3.3.3 用户管理主界面 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130901_8cc53cd6_8938068.png "屏幕截图.png") - 响应式 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130913_9970e0aa_8938068.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130922_6868ff92_8938068.png "屏幕截图.png") ### 3.3.4 CRUD ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130932_358afdab_8938068.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130939_cbb40109_8938068.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130947_87710cd8_8938068.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/130955_40a7efe9_8938068.png "屏幕截图.png") ### 3.3.5 存取款 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/131004_f6148fbe_8938068.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/131011_9b3b0c73_8938068.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/131019_478272dd_8938068.png "屏幕截图.png") ### 3.3.6 转账 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/131027_f9e5045e_8938068.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/131034_fd1d02c4_8938068.png "屏幕截图.png") ## 3.4 测试 - test子包下 - MapperTest：测试Druid、MyBatis是否连接成功等相关CRUD基础测试 - MVCRequestTest：模拟SpringMVC发送请求测试前后端通信成功 ## 3.5 数据校验 - 前端 - 使用JavaScript前端对提交的数据进行初步校验，如数据格式等 - 后端 - 使用JSR303数据校验 ## 3.6 Spring声明式事务管理 - 转账业务是经典事务案例 - 项目中配置了两种事务管理 - 基于XML的声明式事务管理 - 基于注解的声明式事务管理 ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/131046_3b0294db_8938068.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2021/0418/131054_20a0688e_8938068.png "屏幕截图.png") # 4 完结撒花 - ==欢迎指正批评== - ==Talk is easy.Show me the code.==