简介:Ext+Struts整合是Web开发中常用的技术组合,将ExtJS前端框架与Struts1.2后端MVC框架结合,实现前后端分离。本教程将提供一步步的实战指导,从引入依赖到编写Action类,帮助开发者掌握Ext+Struts整合的完整流程。通过构建交互式用户界面和处理复杂业务逻辑,开发者将学会创建高效、功能强大的企业级应用。
1. ExtJS简介
ExtJS是一个基于JavaScript的客户端Web应用程序开发框架,用于构建具有丰富用户界面的Web应用程序。它提供了一套全面的UI组件库,包括网格、树形结构、表单、图表等,使开发人员能够快速轻松地创建交互式和响应式Web应用程序。
ExtJS采用面向对象的设计模式,具有模块化、可扩展性和可重用性。它支持多种浏览器,包括IE、Firefox、Chrome和Safari,并提供对各种后端技术(如Java、.NET和PHP)的支持。
2. Struts1.2简介
1. Struts框架概述
Struts是Apache软件基金会开发的一个基于MVC(模型-视图-控制器)模式的Web应用框架。它提供了一组组件和API,简化了Web应用程序的开发和维护。
2. Struts1.2架构
Struts1.2框架采用MVC模式,其架构主要包括以下组件:
- 控制器(Controller): 负责处理用户请求,并根据请求转发到相应的动作类。
- 动作类(Action): 负责处理业务逻辑,并生成响应结果。
- 模型(Model): 代表应用程序的数据,通常由JavaBean或POJO对象表示。
- 视图(View): 负责将模型数据呈现给用户,通常由JSP页面或其他模板引擎表示。
3. Struts1.2工作流程
Struts1.2的工作流程如下:
- 用户发送请求到Web服务器。
- Web服务器将请求转发到控制器(Controller)。
- 控制器根据请求选择并调用相应的动作类(Action)。
- 动作类处理业务逻辑,并生成响应结果。
- 控制器将响应结果转发到视图(View)。
- 视图将响应结果呈现给用户。
4. Struts1.2优势
Struts1.2框架具有以下优势:
- MVC模式: 清晰的分离了业务逻辑、数据和表示层,提高了代码的可维护性和可扩展性。
- 可配置性: 通过XML配置文件进行配置,可以灵活定制框架的行为。
- 扩展性: 提供了丰富的API和扩展机制,可以轻松扩展框架的功能。
- 社区支持: 拥有庞大的社区支持,提供丰富的文档和示例。
5. 代码示例
以下是一个简单的Struts1.2动作类示例:
public class HelloWorldAction extends Action {
@Override
public String execute() throws Exception {
// 业务逻辑处理
// 设置响应结果
return SUCCESS;
}
}
6. 总结
Struts1.2是一个成熟且广泛使用的Web应用框架,它采用MVC模式,提供了一组组件和API,简化了Web应用程序的开发和维护。
3. Ext+Struts整合原理
3.1 架构设计
Ext+Struts整合遵循MVC(Model-View-Controller)架构设计,其中:
- Model(模型) :负责业务逻辑和数据处理,通常由JavaBean或POJO表示。
- View(视图) :负责前端界面展示,由ExtJS组件和模板组成。
- Controller(控制器) :负责协调模型和视图之间的交互,由Struts Action类实现。
3.2 数据交互机制
Ext+Struts整合通过以下机制实现数据交互:
- 前端(ExtJS) :通过AJAX请求向服务器发送数据,并接收服务器返回的JSON数据。
- 后端(Struts) :接收前端请求,调用Action类处理业务逻辑,并返回JSON数据。
3.3 流程图
以下流程图展示了Ext+Struts整合的数据交互流程:
sequenceDiagram
participant ExtJS as Ext
participant Struts as Struts
Ext->Struts: AJAX Request
Struts->Ext: JSON Response
3.4 核心技术
Ext+Struts整合涉及以下核心技术:
- ExtJS :前端JavaScript框架,用于创建交互式Web界面。
- Struts :Java Web框架,用于处理HTTP请求并协调业务逻辑。
- JSON :数据交换格式,用于在ExtJS和Struts之间传输数据。
- AJAX :异步JavaScript和XML,用于在不刷新页面的情况下与服务器交互。
3.5 优势
Ext+Struts整合具有以下优势:
- 清晰的分层架构 :MVC架构使代码组织和维护更加容易。
- 高效的数据交互 :AJAX请求和JSON响应优化了数据交互性能。
- 强大的前端界面 :ExtJS提供丰富的组件和模板,可创建复杂且交互式的前端界面。
- 成熟的Web框架 :Struts是一个经过验证的Web框架,提供了广泛的功能和扩展性。
4. ExtJS前端界面设计
ExtJS是一个功能强大的JavaScript框架,用于构建动态、交互式和跨平台的Web应用程序。本章将介绍ExtJS前端界面设计的核心概念,包括组件基础、布局管理、表单设计和事件处理。
4.1 组件基础
ExtJS提供了一套丰富的组件库,用于创建各种用户界面元素,包括按钮、文本框、下拉列表、网格和图表。这些组件提供了丰富的功能,例如数据绑定、验证和事件处理。
组件创建:
ExtJS组件可以通过两种方式创建:
- 声明式创建: 使用ExtJS的XML配置语法来声明组件。
- 编程式创建: 使用ExtJS的JavaScript API来创建组件。
组件配置:
每个组件都有一组属性,可以用来配置其外观、行为和功能。这些属性可以通过组件的构造函数或通过调用其set方法来设置。
组件事件:
ExtJS组件支持各种事件,例如点击、鼠标悬停和值更改。这些事件可以通过调用组件的addListener方法来处理。
4.2 布局管理
ExtJS提供了多种布局管理器,用于组织和定位应用程序中的组件。这些布局管理器包括:
- AbsoluteLayout: 允许开发人员精确指定每个组件的位置和大小。
- BorderLayout: 将应用程序窗口划分为五个区域(北、南、东、西和中心)。
- BoxLayout: 将组件排列成水平或垂直的盒子。
- CardLayout: 一次只显示一个组件,类似于卡片堆栈。
布局管理器配置:
布局管理器可以通过组件的layout属性来配置。每个布局管理器都有自己的一组特定配置选项。
4.3 表单设计
ExtJS提供了强大的表单设计功能,包括文本框、下拉列表、复选框和单选按钮。这些表单组件支持数据验证、错误处理和自动提交。
表单创建:
ExtJS表单可以通过Ext.form.Panel类来创建。表单面板包含一组表单字段,可以根据需要进行排列和配置。
表单验证:
ExtJS表单支持客户端验证,使用Ext.form.field.VType类来定义自定义验证规则。
表单提交:
ExtJS表单可以通过调用其submit方法来提交。表单数据将被序列化并发送到服务器端处理。
4.4 事件处理
ExtJS提供了灵活的事件处理机制,允许开发人员响应用户交互和应用程序事件。事件处理可以通过以下方式实现:
- 组件事件: 如前所述,ExtJS组件支持各种事件,可以通过addListener方法来处理。
- 全局事件: ExtJS还支持全局事件,例如窗口加载和页面滚动。这些事件可以通过Ext.EventManager类来处理。
- 自定义事件: 开发人员还可以创建自己的自定义事件,并使用Ext.util.Observable类来触发和处理这些事件。
5. Struts配置设计
Struts框架中,配置信息主要存储在 struts-config.xml
文件中,用于定义Action、Result、Interceptor等组件的配置信息。本章将详细介绍Struts配置设计的三个主要方面:Action配置、Result配置和Interceptor配置。
5.1 Action配置
Action配置用于定义Action的元数据信息,包括Action的名称、类路径、方法等。通过Action配置,Struts框架可以将请求映射到相应的Action类和方法上。
5.1.1 Action元素
Action配置使用 <action>
元素定义,其属性如下:
| 属性 | 说明 | |---|---| | name | Action的名称,用于映射请求路径 | | class | Action类的全限定类名 | | method | Action类中处理请求的方法名称 | | path | 请求路径,用于将请求映射到Action |
5.1.2 Action配置示例
<action name="login" class="com.example.struts.LoginAction" method="execute" path="/login.do"/>
该配置定义了一个名为 login
的Action,映射到请求路径 /login.do
。当请求该路径时,Struts框架将调用 com.example.struts.LoginAction
类的 execute
方法来处理请求。
5.2 Result配置
Result配置用于定义Action处理请求后的结果,包括页面跳转、重定向、JSON响应等。通过Result配置,Struts框架可以根据Action处理结果将请求转发到相应的页面或执行其他操作。
5.2.1 Result元素
Result配置使用 <result>
元素定义,其属性如下:
| 属性 | 说明 | |---|---| | name | Result的名称,用于在Action中引用 | | type | Result的类型,如 forward
(页面跳转)、 redirect
(重定向)、 json
(JSON响应) | | value | Result的值,如页面路径、重定向地址、JSON数据 |
5.2.2 Result配置示例
<result name="success" type="forward" value="/success.jsp"/>
<result name="error" type="redirect" value="/error.jsp"/>
<result name="json" type="json" value="{'success': true}"/>
该配置定义了三个Result: success
(页面跳转)、 error
(重定向)、 json
(JSON响应)。
5.3 Interceptor配置
Interceptor配置用于定义拦截器,拦截器是一种在Action执行前后执行的代码块,可以用于日志记录、权限控制、数据验证等功能。通过Interceptor配置,Struts框架可以扩展Action的处理流程,实现更复杂的功能。
5.3.1 Interceptor元素
Interceptor配置使用 <interceptor>
元素定义,其属性如下:
| 属性 | 说明 | |---|---| | name | Interceptor的名称,用于在Action中引用 | | class | Interceptor类的全限定类名 | | params | Interceptor的参数,用于配置Interceptor的行为 |
5.3.2 Interceptor配置示例
<interceptor name="logging" class="com.example.struts.LoggingInterceptor">
<param name="logPath" value="/var/log/struts.log"/>
</interceptor>
该配置定义了一个名为 logging
的Interceptor,用于记录日志。Interceptor类为 com.example.struts.LoggingInterceptor
,参数 logPath
用于指定日志文件路径。
5.3.3 Interceptor应用
要在Action中应用Interceptor,需要在 <action>
元素中使用 <interceptor-ref>
元素引用Interceptor。
<action name="login" class="com.example.struts.LoginAction" method="execute" path="/login.do">
<interceptor-ref name="logging"/>
</action>
该配置将 logging
Interceptor应用于 login
Action。这意味着在执行 login
Action之前和之后, logging
Interceptor都会被调用。
6. Action类编写
6.1 Action类结构
Action类是Struts框架的核心组件,负责处理用户请求并返回响应。一个典型的Action类包含以下方法:
public class MyAction extends Action {
@Override
public String execute() throws Exception {
// 处理用户请求并返回响应
return SUCCESS;
}
}
-
execute()
方法:这是Action类的入口方法,负责处理用户请求并返回响应。 -
SUCCESS
:这是一个常量,表示请求处理成功。
6.2 数据获取和处理
Action类可以通过以下方式获取和处理数据:
- 请求参数: 通过
HttpServletRequest
对象获取请求参数。 - 表单数据: 通过
ActionForm
对象获取表单数据。 - 数据库: 通过JDBC或ORM框架访问数据库。
- 其他数据源: 例如,文件系统、Web服务等。
数据获取和处理的代码示例:
public class MyAction extends Action {
@Override
public String execute() throws Exception {
// 获取请求参数
String name = request.getParameter("name");
// 获取表单数据
MyForm form = (MyForm) form;
// 处理数据
// ...
// 返回响应
return SUCCESS;
}
}
6.3 数据响应
Action类可以通过以下方式返回响应:
- 转发: 将请求转发到另一个Action或JSP页面。
- 重定向: 将用户重定向到另一个URL。
- JSON: 返回JSON格式的数据。
- XML: 返回XML格式的数据。
数据响应的代码示例:
public class MyAction extends Action {
@Override
public String execute() throws Exception {
// 转发到另一个Action
return "forward:myOtherAction";
// 重定向到另一个URL
return "redirect:http://www.example.com";
// 返回JSON数据
return "json:{name:'John', age:30}";
// 返回XML数据
return "xml:<user><name>John</name><age>30</age></user>";
}
}
7.1 项目搭建
1. 创建Java项目
- 使用IDE(如Eclipse)创建一个新的Java项目。
- 导入Struts 1.2和ExtJS库。
2. 配置Web.xml
- 在Web.xml中配置Struts 1.2框架,包括Action映射、结果映射和拦截器。
3. 配置struts.xml
- 创建struts.xml文件,配置Action类和结果页面。
4. 创建ExtJS前端页面
- 创建一个HTML文件,包含ExtJS组件和布局。
- 链接ExtJS库和自定义的JavaScript文件。
7.2 前端界面开发
1. 创建ExtJS组件
- 使用ExtJS组件库创建所需的组件,如面板、表单和按钮。
- 配置组件属性,如标题、布局和事件处理程序。
2. 布局管理
- 使用ExtJS布局管理器组织组件,如BorderLayout、BorderLayout和FitLayout。
- 设置布局属性,如对齐方式和边距。
3. 表单设计
- 创建ExtJS表单,包括输入字段、文本区域和下拉列表。
- 设置表单验证规则和提交处理程序。
4. 事件处理
- 为ExtJS组件添加事件处理程序,如点击、鼠标悬停和键盘事件。
- 在事件处理程序中执行所需的逻辑,如提交表单或更新数据。
简介:Ext+Struts整合是Web开发中常用的技术组合,将ExtJS前端框架与Struts1.2后端MVC框架结合,实现前后端分离。本教程将提供一步步的实战指导,从引入依赖到编写Action类,帮助开发者掌握Ext+Struts整合的完整流程。通过构建交互式用户界面和处理复杂业务逻辑,开发者将学会创建高效、功能强大的企业级应用。