vlambda博客
学习文章列表

Maven搭建SSH(Struts2+Spring+Hibernate)框架入门教程(二)_1

前面《Maven搭建SSH框架》教程中分别基于 Spring 和 Hibernate 实现了 Service 接口和 DAO 接口功能,接下来基于 Struts2 实现 Web 层功能。

实现Struts2 Web模块

根据前面的 Jsp/Servlet 实现,对需求的理解和 Struts2 开发的相关组件的了解(Struts2 需要单独参考其他资料),Struts2 Web 层的代码需要做以下工作。

1)实现视图层代码(jsp)

视图层代码同以前用 Jsp/Servlet 开发的内容一样,有两个 jsp。

  • Index.jsp,首页框架 jsp。

  • userList.jsp,显示用户列表的 jsp。

2)编写 Action 代码

UserAction.java,实现用户 CRUD 的所有控制逻辑代码。

3)Spring 容器的配置文件

applicationContext.xml,配置 Spring 容器的初始化组件。

4)编写 struts.xml 配置文件

完成 Struts 常量的配置和 Action 的配置。

5)配置 web.xml

配置 Struts 的入口过滤器和 Spring 的初始化 Listener。

1. 创建 Web 工程

基于 webapp 的 Archetypes 创建 Web 工程,这里用的是 webapp-javaee6,如图 1 所示。


图 1  选择 webapp-javaee6 创建 Web 应用


单击 Next 按钮,在输入框中输入对应信息,单击 Finish 按钮,创建一个 Maven 的 Web 工程,仓库目录结构如图 2 所示。


图 2  Struts Web工程结构


2. 配置依赖和插件

pom.xml 内容如下:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>cn.com.mvn.pom</groupId> <artifactId>StrutsPOM</artifactId> <version>0.0.1-SNAPSHOT</version> </parent> <groupId>cn.com.mvn.ssh.demo</groupId> <artifactId>MvnSSHDemo.Struts</artifactId> <packaging>war</packaging> <name>MvnSSHDemo.Struts</name> <url>http://maven.apache.org</url> <dependencies> <!-- struts json插件 --> <!-- https://mvnrepository.com/artifact/org.apache.struts/struts2-json-plugin --> <dependency> <groupId>org.apache.struts</groupId> <artifactId>struts2-json-plugin</artifactId> <version>2.3.28</version> </dependency> <dependency> <groupId>cn.com.mvn.ssh.demo.dao.hibernate</groupId> <artifactId>MvnSSHDemo.DAO.Hibernate</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> <dependency> <groupId>cn.com.mvn.ssh.demo</groupId> <artifactId>MvnSSHDemo.Service</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> <dependency> <groupId>cn.com.mvn.ssh.demo</groupId> <artifactId>MvnSSHDemo.Service.impl</artifactId> <version>0.0.1-SNAPSHOT</version> </dependency> </dependencies> <build> <plugins> <!-- <plugin> <groupId>org.mortbay.jetty</groupId> <artifactId>maven-jetty-plugin</artifactId> <version>6.1.26</version> <configuration> <webAppSourceDirectory>${basedir}/src/main/webapp</webAppSourceDirectory> </configuration> </plugin> --> <plugin> <!-- 指定插件名称及版本号 --> <groupId>org.codehaus.cargo</groupId> <artifactId>cargo-maven2-plugin</artifactId> <version>1.4.8</version> <configuration> <wait>true</wait> <!--是否说明,操作start、stop等后续操作必须等前面操作完成才能继续 --> <container> <!-- 容器的配置 --> <containerId>tomcat7x</containerId> <!-- 指定tomcat版本 --> <type>installed</type> <!-- 指定类型:standalone, installed等 --> <home>C:\java\servers\apache-tomcat-7.0.69_64</home> <!-- 指定Tomcat的位置,即catalina.home --> </container> <configuration> <!-- 具体的配置 --> <type>existing</type> <!-- 类型,existing:存在 --> <home>C:\java\servers\apache-tomcat-7.0.69_64</home> <!-- Tomcat的位置,即catalina.home --> </configuration> <deployables> <!-- 部署设置 --> <deployable> <!-- 部署的War包名等 --> <groupId>cn.com.mvn.ssh.demo</groupId> <artifactId>MvnSSHDemo.Struts</artifactId> <type>war</type> <properties><!-- 部署路径 --> <context>MvnSSHDemo</context> </properties> </deployable> </deployables> <deployer> <!-- 部署配置 --> <type>installed</type> <!-- 类型 --> </deployer> </configuration> <executions> <!-- 执行的动作 --> <execution> <id>verify-deployer</id> <phase>install</phase> <!-- 解析install --> <goals> <goal>deployer-deploy</goal> </goals> </execution> <execution> <id>clean-deployer</id> <phase>clean</phase> <goals> <goal>deployer-undeploy</goal> </goals> </execution> </executions> </plugin> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>2.0.2</version> <configuration> <source>1.5</source> <target>1.5</target> </configuration> </plugin> </plugins> </build></project>

相对以前的工程,这里有如下几点不同。

  • 当前是 webapp 工程,packaging 要设置成 war。

  • 在操作过程中,添加、修改、删除的返回要用 JSON,所以这里需要集成 struts-json 依赖。

  • 本工程用的不是 jetty 插件发布 Web 应用,用的是 cargo-maven2-plugin 插件,直接发布到指定 Tomcat 的 webapps 目录下。

  • cargo-maven2-plugin 插件的配置在文档中有对应的注释。这里强调要注意的地方是粗体显示部分。groupId 和 artifactId 是当前工程的对应值,context 是发布到 Web 服务器中的上下文路径名称。

3. 添加实现代码

1)视图层代码文件内容如下。

<%@page contentType="text/html" pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>测试用户CRUD操作</title><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript"> $(document).ready(function() { // 页面加载完后,自动发searchUsersServlet请求,加载到userListDiv中显示 $("#userListDiv").load("userAction!searchUsers.action"); }); // 新增 按钮事件触发函数 function toAdd() { // 获取addForm中的请求信息 var _data = $("#addForm").serialize(); //alert(_data); // 发添加新用户的Ajax请求 $.ajax({ type : 'post', url : 'userAction!addUser.action', data : _data, success : function(msg) { alert(msg.message); // 更新最新的用户列表信息 $("#userListDiv").load("userAction!searchUsers.action"); } }); } function toEdit() { var _data = $("#editForm").serialize(); alert(_data); $.ajax({ type : 'post', url : 'userAction!editUser.action', data : _data, success : function(msg) { alert(msg.message); $("#userListDiv").load("userAction!searchUsers.action"); } }); } function toDelete() { var chks = $("input[name='checkbox']:checked"); if (chks.length == 0) { alert("请选择要删除的用户"); } else if (chks.length > 1) { alert("一次只能删除一个用户"); } else { var to = confirm("您确定要删除选中的用户?"); if (to) { var _data = "id=" + chks.val(); $.ajax({ type : 'post', data : _data, url : 'userAction!deleteUser.action', success : function(msg) { alert(msg); $("#userListDiv").load("userAction!searchUsers.action"); } }); } } } function toShowAdd() { $("#LayerAdd").show(1000); } function toShowEdit() { //alert($("input[name='checkbox']:checked").length); var chks = $("input[name='checkbox']:checked"); if (chks.length == 0) { alert("请选择要编辑的用户"); } else if (chks.length > 1) { alert("一次只能修改一个用户"); } else { var _data = "id=" + chks.val(); $.ajax({ type : 'post', data : _data, url : 'userAction!searchUser.action?type=byId', dataType : 'json', success : function(msg) { $("#editForm #id").val(msg.urId); $("#editForm #userName").val(msg.urUserName); $("#editForm #age").val(msg.urAge); $("#editForm #status").val(msg.urStatus); //alert($("#editForm #age").val()); $("#LayerEdit").show(1000); } }); } } function toCloseAdd() { $("#LayerAdd").hide(1000); } function toCloseEdit() { $("#LayerEdit").hide(1000); }</script><style type="text/css"><!--.STYLE2 { color: #000000}#LayerAdd { position: absolute; left: 113px; top: 183px; width: 434px; height: 193px; z-index: 1; background-color: #99FFFF; display: none;}#LayerEdit { position: absolute; left: 113px; top: 183px; width: 434px; height: 193px; z-index: 1; background-color: #99FFFF; display: none;}--></style></head><body> <div id="LayerAdd"> <form name="addForm" name="addForm" id="addForm" method="post" action=""> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" align="center"> <strong><BR>添加新用户<br></strong> </td> </tr> <tr> <td width="47%" align="right">用户名:</td> <td width="53%"> <input name="user.urUserName" type="text" id="userName"> </td> </tr> <tr> <td align="right">密码:</td> <td> <input name="user.urPassword" type="password" id="password"> </td> </tr> <tr> <td align="right">年龄:</td> <td> <input name="user.urAge" type="text" id="age"> </td> </tr> <tr> <td colspan="2">&nbsp;</td> </tr> <tr> <td colspan="2" align="center"> <input type="button" name="Submit4" value="添加" onclick="toAdd()"> <input type="button" name="Submit5" value="关闭" onclick="toCloseAdd()"> </td> </tr> </table> </form> </div> <div id="LayerEdit"> <form name="editForm" id="editForm" method="post" action=""> <input type="hidden" name="id" id="id" /> <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" align="center"> <strong><br>修改用户信息<br></strong> </td> </tr> <tr> <td width="47%" align="right">用户名:</td> <td width="53%"> <input name="userName" type="text" id="userName" readonly="readonly"> </td> </tr> <tr> <td align="right">年龄:</td> <td> <input name="age" type="text" id="age"> </td> </tr> <tr> <td align="right">状态:</td> <td> <select name="status" id="status"> <option value="Active">Active</option> <option value="Inactive">Inactive</option> <option value="Locked">Locked</option> <option value="Deleted">Deleted</option> </select> </td> </tr> <tr> <td colspan="2">&nbsp;</td> </tr> <tr> <td colspan="2" align="center"> <input type="button" name="Submit4" value="修改" onclick="toEdit()"> <input type="button" name="Submit5" value="关闭" onclick="toCloseEdit()"> </td> </tr> </table> </form> </div> <p>&nbsp;</p> <p>测试用户CRUD页面</p> <table width="539" border="1"> <tr> <td colspan="5" align="right"> <input type="button" name="Submit" value="新增" onclick="toShowAdd()"> <input type="submit" name="Submit2" value="修改" onclick="toShowEdit()"> <input type="button" name="Submit3" value="删除" onclick="toDelete()"> </td> </tr> <tr> <td> <div id="userListDiv"></div> </td> </tr> </table> <p>&nbsp;</p></body></html>

注:index.jsp 中的 JS 用到了 jQuery,要注意将 jQuery 的 JS 代码添加到应用中,并且用 script 应用到页面。index.jsp 中的添加函数、修改函数和删除函数从后台返回的是用 JSON 封装的提示信息。