Ext+Struts整合实战教程

鄧寜

于 2024-08-26 15:17:18 发布

阅读量419

点赞数 11

本文链接：https://blog.csdn.net/weixin_42607969/article/details/141608124

版权

本文还有配套的精品资源，点击获取

简介：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组件添加事件处理程序，如点击、鼠标悬停和键盘事件。
在事件处理程序中执行所需的逻辑，如提交表单或更新数据。

本文还有配套的精品资源，点击获取

鄧寜

关注

11
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Ext+Struts整合实战教程

本文还有配套的精品资源，点击获取简介：Ext+Struts整合是Web开发中常用的技术组合，将ExtJS前端框架与Struts1.2后端MVC框架结合，实现前后端分离。本教程将提供一步步的实战指导，从引入依赖到编写Action类，帮助开发者掌握Ext+Struts整合的完整流程。通过构建交互式用户界面和处理复杂业务逻辑，开发者将学会创建高效、功能强大的企业级应用。 ...
复制链接

扫一扫