Extjs 4 MVC - App.JS 查找我的控制器的相对路径问题 - 在带有 Spring MVC 的 WEB-INF 下

2023-11-29

也许我的问题的解决方案包含在问题中,但基本上 我是 ExtJs 4 MVC 的新手,在放置 JSP 的位置时遇到一些困难。

我正在使用带有请求映射注释的 Spring MVC。

我在 ExtJs App.JS 查找控制器时遇到相对路径问题。

我通常将 JSP 放在 WEB-INF/views 下,而我的 ExtJs 4 应用程序位于 WebContent/app 中。

我正在尝试设置示例,如下所示:http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture

在示例中,index.html 包含在应用程序包中。

所以我有一个名为 WEB-INF/views/sample-view.jsp 的视图,其中包括 app.js 脚本,该脚本运行良好。 我的应用程序有一个像示例一样的控制器,这就是问题所在,因为它似乎尝试使用 appFolder 和控制器在 ExtJs 内部找到它。

找不到这个资源,因为我的视图都在另一个包中。这有道理吗?

我应该将我的视图移出 WEB-INF 吗?如果是这样,Spring MVC 会抱怨吗?

Thanks,

Lisa


对于第一次尝试运行此程序,最简单的方法是使用所有静态文件,以保持简单。一旦应用程序从静态 html 和 js 文件运行,就可以进行迁移以使用 spring mvc 和 jsp 页面。

首先,确保 webapp 文件夹下有一个名为 resources 的文件夹,假设 webapp 是现有 WEB-INF 文件夹的父文件夹。

使用静态 html 页面的基本起始文件夹结构为:

    webapp
    - resources
    -- app
    -- css
    --- ext-all.css
    -- sass
    -- themes
    - WEB-INF
    -- spring
    -- classes
    -- views
    index.html
    app.js
    ext-all-debug.js

在 WEB-INF 中可能有一个带有 mvc-config.xml 文件或类似文件的 spring 文件夹。在该配置文件中,需要使用资源标签指定资源文件夹来提供静态内容。很可能,第一个 mvc:annotation-driven 标签在配置文件中已经处于领先地位,如下面的片段所示。将下面提到的资源标签添加到配置文件中。

        <!-- Configures support for @Controllers -->
        <mvc:annotation-driven />

        <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
        <resources mapping="/resources/**" location="/resources/" />

有了这个,资源文件夹就可以提供index.html 文件,就像Sencha 示例的设置一样。

所有这些都让您能够从如下网址构建第一个示例:http://localhost:8080/resources/index.html

下载并解压后,Ext JS zip 包含一个资源文件夹。将该文件夹的子文件夹复制到 webapp/resources 文件夹中。还将 ext-all.debug.js 复制到 webapp/resources 文件夹。

然后在 webapp/resources 中创建 index.html,其内容类似于 Sencha 教程:

    <html>
    <head>
        <title>Static Account Manager</title>

        <link rel="stylesheet" type="text/css" href="./css/ext-all.css">

        <script type="text/javascript" src="./ext-all-debug.js"></script>

        <script type="text/javascript" src="./app.js"></script>
    </head>
    <body></body>
    </html>

在 webapp/resources 文件夹中创建 app.js,如以下代码片段所示,并且足以使用 app.js 中配置的单个面板启动并运行。从这一点来看,本教程很容易移植到此设置。

    Ext.application({
            name: 'AM',
            appFolder: 'app',

                launch: function() {
                            Ext.create('Ext.container.Viewport', {
                                            layout: 'fit',
                                             items: [
                    {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                     }
                      ]
               });
       }
   });

静态 html 文件正确运行后,可以从视图文件夹中使用 jsp,其内容如下:

    <html>
    <head>
        <title>JSP Account Manager</title>

        <link rel="stylesheet" type="text/css" href="./resoures/css/ext-all.css">

        <script type="text/javascript" src="./resoures/ext-all-debug.js"></script>

        <script type="text/javascript" src="./resoures/app.js"></script>
    </head>
    <body></body>
    </html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Extjs 4 MVC - App.JS 查找我的控制器的相对路径问题 - 在带有 Spring MVC 的 WEB-INF 下 的相关文章

随机推荐