19、Ext JS 应用部署与WordPress主题构建指南-优快云博客

本文链接：https://blog.youkuaiyun.com/python/article/details/149384429

Ext JS 应用部署与WordPress主题构建指南

1. 生产环境部署

在开发过程中，我们有开发环境的 app 文件夹和所有开发的代码。而在生产环境中，我们需要将特定的代码部署到生产文件夹。

首先，我们需要将 translations 和 php 文件夹复制到生产文件夹，之后就可以再次测试应用程序，它应该能按预期工作。

如果要部署应用程序，只需将 masteringextjs/build/Packt/production 中的所有内容转移到 Web 服务器上的所需文件夹。

生产构建有诸多好处。虽然我们可以直接将开发代码部署到生产环境，但不建议这样做。生产构建能提升文件加载性能，并减小文件大小。例如，在浏览器中打开应用程序，登录并打开静态数据模块中的 “Actors” 屏幕，使用开发代码时，应用程序会发出 911 个请求，传输 4.8 MB 数据给用户，完成操作需要 13.92 秒；而使用生产构建，请求数为 450 个（由于有大量图像图标要显示，这个数字仍然较大），传输数据仅 87.9 KB。并且，在开发环境中，浏览器会加载每个 Ext JS 类，仅渲染登录屏幕就会加载 400 多个 JavaScript 文件；而生产构建只加载 4 个 JavaScript 文件。所以，为了性能考虑，应始终部署生产构建，开发代码仅用于开发目的。

2. 从 Web 到桌面：Sencha Desktop Packager

除了将 Ext JS 代码部署到 Web 服务器，我们还可以将其分发为桌面应用程序。Sencha Desktop Packager 是 Sencha 提供的一个付费工具，我们可以下载试用版进行测试。下载地址为：http://www.sencha.com/products/desktop-packager/。

2.1 安装步骤

Mac OS 和 Linux ：
1. 下载 Sencha Desktop Packager 后，将其解压到所选目录，例如 /Users/loiane/bin/Sencha/SenchaDesktopPackager 。
2. 使用终端设置 PATH，命令如下：

export PATH=$PATH:/Users/loiane/bin/Sencha/SenchaDesktopPackager

3. 打印 PATH 变量（`echo $PATH`）以确保设置成功。
4. 测试 `ionpackage` 命令是否正常工作。

Windows ：
1. 假设 Sencha Desktop Packager 的目录为 C:/SenchaDesktopPackager 。
2. 右键点击 “我的电脑” 图标，选择 “属性”。
3. 点击 “高级系统设置”。
4. 点击 “环境变量…”。
5. 在 “系统变量” 框中找到 “Path” 并点击 “编辑…”。
6. 在末尾添加 ;C:\SenchaDesktopPackager ，然后点击 “确定” 保存。
7. 打开终端，输入 ionpackage 命令进行测试。

2.2 应用程序打包

打包应用程序的一个要求是生产构建已准备好。在项目文件夹内，我们需要创建一个 JSON 文件进行配置。创建一个名为 desktoppackager.json 的新文件，内容如下：

{
    "applicationName": "Mastering Ext JS",
    "applicationIconPaths": ["HelloWorld.ico", "HelloWorld.icns"],
    "versionString": "1.0",
    "outputPath": "build/Packt/package/",
    "webAppPath": "build/Packt/production/",
    "settings": {
        "mainWindow": {
            "autoShow": true
        }
    }
}

我们还需要一个图标来代表应用程序，可以使用 Sencha Desktop Packager 示例文件夹中的 HelloWorld.icns 和 HelloWorld.ico 图标。

然后，使用终端将目录更改为应用程序目录，并输入以下命令：

ionpackage desktoppackager.json

如果是首次使用 Sencha Desktop Packager，系统会提示输入 Sencha 用户 ID 和密码（与 Sencha 论坛使用的相同）。命令完成后，打开 build 目录，会看到新创建的 Packt/package 目录，其中包含一个名为 “Mastering Ext JS” 的本地应用程序（Mac OS 为 .app 文件，Windows 为 .exe 文件）。

2.3 服务器端所需更改

当我们执行打包后的应用程序时，可能会遇到错误。我们可以像在普通浏览器中一样进行调试。在 desktoppackager.json 的 settings 属性中添加以下配置：

"remoteDebuggingPort": 9100

再次运行 ionpackage desktoppackager.json 命令，等待新的可执行文件创建完成。打开该文件，并在 Webkit 浏览器（如 Chrome）中访问 http://localhost:9100 ，应用程序名称会列出，点击它即可使用所有开发者工具选项。

我们会发现 Sencha Desktop Packager 也打包了 PHP 代码，但它不支持 PHP 代码，仅支持 HTML、CSS 和 JavaScript 代码。因此，我们的服务器端代码（无论使用 PHP、Java、.NET 等何种语言）必须部署在 Web 服务器上，桌面应用程序将访问它。

对于首次测试，我们需要在代码中的所有存储、代理和 Ajax 请求中添加完整的 URL。例如，以 “Menu Store” 为例，在原 URL 前添加 http://localhost/masteringextjs ，结果如下：

url: 'http://localhost/masteringextjs/php/menu.php'

然后搜索所有存储、代理和 Ajax 请求（在控制器内）并进行相同操作。完成所有更改后，再次进行生产构建（注意更新 build/Packt/production 目录中的 index.html 文件），移除生产构建中的 php 文件夹并进行测试。最后，再次运行 ionpackage desktoppackager.json 命令，测试本地应用程序，它应该能像在浏览器中访问一样正常工作。

2.4 Ajax、JSONP 与 CORS

在应用程序中，我们大量使用 Ajax 请求，而 Ajax 只允许从一个域到同一域的请求，不允许跨域请求。如果我们要将应用程序分发给不同域的用户，或者将 Ext JS 代码部署在一个服务器，服务器端代码部署在另一个服务器（不同域），就会遇到问题。

我们可以使用 JSONP，但需要更改服务器端代码以返回 JSONP 回调参数，并且 JSONP 仅适用于 GET 请求，无法使用 POST、PUT 和 DELETE 请求。

幸运的是，还有 Cross-Origin Resource Sharing（CORS）这个解决方案。在服务器端代码中启用 CORS 后，我们就可以进行跨域的 Ajax 请求。例如，在 PHP 中，只需在所有 PHP 文件的开头添加以下代码：

<?php  header("Access-Control-Allow-Origin: *");

同时，我们还需要在 desktoppackager.json 文件中进行一些更改，添加允许跨站点访问的特殊配置：

{
    "applicationName": "Mastering Ext JS",
    "applicationIconPaths": ["HelloWorld.ico", "HelloWorld.icns"],
    "versionString": "1.0",
    "outputPath": "build/Packt/package/",
    "webAppPath": "build/Packt/production/",
    "settings": {
        "remoteDebuggingPort": 9100,
        "security": {
            "allowCrossSite": true
        },
        "mainWindow": {
            "autoShow": true
        }
    }
}

如果要将本地应用程序分发给不同用户，或者在不同域部署代码，就需要在代码中启用 CORS。

3. WordPress 主题构建

Ext JS 不仅可用于 CRUD 应用程序，还可用于构建 WordPress 主题。WordPress 是一个用于创建网站或博客的内容管理工具。

3.1 准备工作

在开始构建主题之前，需要安装 WordPress。可以使用自己博客的 WordPress 实例，也可以进行本地安装。如果不知道如何安装 WordPress，可以参考教程：http://codex.wordpress.org/Installing_WordPress。

3.2 WordPress 主题文件介绍

创建新的 WordPress 主题时，需要创建一些能被 WordPress 自动识别的文件，常见文件如下：
| 文件名称 | 作用 |
| ---- | ---- |
| header.php | 包含主题代码直到 </head> 标签，WordPress 会将博客转换为单个 HTML 页面，该文件用于渲染页面头部 |
| sidebar.php | 可选文件，可通过 WordPress 的 get_sidebar() 函数调用，用于渲染侧边栏和小部件 |
| footer.php | 用于结束 HTML 代码，包裹主题，也可在此显示小部件 |
| page.php | 用于显示单页，如 “关于” 页面、“新闻” 页面等 |
| single.php | 用于显示单个博客文章，源代码与 page.php 类似 |
| index.php | 博客渲染时调用，用于显示文章、搜索结果、头部、页脚、侧边栏、错误消息等 |
| functions.php | 可用于放置额外的主题函数 |
| comments.php | 用于显示评论、引用和评论表单 |

3.3 主题结构搭建

导航到主题目录 masteringextjs/wordpress/wp-content/themes ，创建一个名为 ext-theme 的新文件夹。在该文件夹中创建以下文件（文件可以为空）： comments.php 、 footer.php 、 functions.php 、 header.php 、 index.php 、 page.php 、 sidebar.php 、 single.php 和 style.css 。同时，创建或粘贴一个名为 screenshot.png 的文件，用于代表主题。

为了让主题在 WordPress 仪表盘上显示，需要修改 style.css 文件，添加以下内容：

/*
Theme Name: Mastering Ext JS
Theme URI: http://packtpub.com
Description: Wordpress theme example for Mastering Ext JS Book - http://packtpub.com
Author: Loiane Groner
Version: 1.0
Tags: minimalistic, simple, extjs, sidebar, elegant, masteringextjs
*/

打开 WordPress 仪表盘的 “外观” 菜单，就可以看到我们的主题并激活它。激活后，博客页面可能是空白的，但这是正常的，意味着我们可以开始构建主题了。

主题的主要部分包括：
- Header ：包含博客标题、描述和搜索字段，下方有导航链接，方便读者在博客页面间导航。
- Sidebar ：包含用于显示分类、存档、近期文章、标签云等的小部件，以及一个自定义小部件（“My Books”）。
- Footer ：包含版权信息。
- Content Area ：包含最新文章列表。

接下来，我们就可以开始编码构建这个主题了。

graph LR
    A[开始] --> B[生产环境部署]
    B --> C[Sencha Desktop Packager 安装与打包]
    C --> D[服务器端更改]
    D --> E[处理 Ajax、JSONP 与 CORS]
    E --> F[WordPress 主题构建]
    F --> G[准备工作]
    G --> H[了解主题文件]
    H --> I[搭建主题结构]
    I --> J[开始编码]
    J --> K[结束]

4. 构建 WordPress 主题各部分

4.1 构建 Header

Header 部分包含博客的标题、描述和搜索字段，以及导航链接。以下是一个简单的 header.php 文件示例：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
        <form role="search" method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
            <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="搜索...">
            <input type="submit" id="searchsubmit" value="搜索">
        </form>
        <nav>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav>
    </header>

在这个示例中，我们使用了 WordPress 的函数来输出博客的名称、描述和搜索表单。导航菜单使用 wp_nav_menu 函数，需要在 functions.php 中注册菜单位置。

4.2 构建 Sidebar

Sidebar 部分用于显示各种小部件，如分类、存档、近期文章等。以下是 sidebar.php 文件示例：

<aside id="sidebar">
    <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    <?php endif; ?>
</aside>

在 functions.php 中，我们需要注册侧边栏：

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          => '侧边栏',
        'id'            => 'sidebar-1',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

这样，我们就可以在 WordPress 仪表盘的小部件区域添加和管理侧边栏小部件。

4.3 构建 Footer

Footer 部分通常包含版权信息等内容。以下是 footer.php 文件示例：

    <footer>
        <p>&copy; <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?> 版权所有</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

在这个示例中，我们使用 date 函数输出当前年份，并使用 bloginfo 函数输出博客名称。

4.4 构建 Main page

Main page 通常显示最新的文章列表。以下是 index.php 文件示例：

<?php get_header(); ?>
    <main>
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
                <article>
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <p><?php the_excerpt(); ?></p>
                    <p><a href="<?php the_permalink(); ?>">阅读更多</a></p>
                </article>
            <?php endwhile; ?>
            <?php the_posts_navigation(); ?>
        <?php else : ?>
            <p>没有找到文章。</p>
        <?php endif; ?>
    </main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

在这个示例中，我们使用 WordPress 的循环来输出文章列表，包括文章标题、摘要和阅读更多链接。如果没有文章，则显示提示信息。

4.5 构建 Single post page

Single post page 用于显示单个博客文章的详细内容。以下是 single.php 文件示例：

<?php get_header(); ?>
    <main>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <article>
                <h1><?php the_title(); ?></h1>
                <p><?php the_date(); ?> | <?php the_author(); ?></p>
                <?php the_content(); ?>
                <?php comments_template(); ?>
            </article>
        <?php endwhile; endif; ?>
    </main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

在这个示例中，我们输出文章的标题、日期、作者和内容，并使用 comments_template 函数显示评论部分。

4.6 构建 Single page

Single page 用于显示单页内容，如关于页面、新闻页面等。 page.php 文件示例与 single.php 类似：

<?php get_header(); ?>
    <main>
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <article>
                <h1><?php the_title(); ?></h1>
                <?php the_content(); ?>
            </article>
        <?php endwhile; endif; ?>
    </main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

5. 主题样式设置

我们之前创建了 style.css 文件，现在可以为主题添加样式。以下是一个简单的 style.css 文件示例：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
header {
    background-color: #333;
    color: white;
    padding: 20px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 20px;
}
nav ul li a {
    color: white;
    text-decoration: none;
}
main {
    padding: 20px;
}
aside {
    float: right;
    width: 25%;
    padding: 20px;
}
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

在这个示例中，我们为页面的各个部分设置了基本的样式，如背景颜色、字体、边距等。

6. 总结

通过以上步骤，我们完成了 Ext JS 应用的生产环境部署，使用 Sencha Desktop Packager 将应用打包为本地应用程序，并解决了跨域请求的问题。同时，我们还学习了如何使用 Ext JS 构建 WordPress 主题，包括主题结构的搭建、各部分的构建和样式设置。

以下是整个过程的步骤总结表格：
| 步骤 | 内容 |
| ---- | ---- |
| 1 | 进行生产环境部署，复制必要文件夹，测试应用 |
| 2 | 安装 Sencha Desktop Packager，配置环境变量 |
| 3 | 创建 desktoppackager.json 文件，打包应用程序 |
| 4 | 解决服务器端问题，添加完整 URL，重新构建生产环境 |
| 5 | 处理跨域请求，启用 CORS |
| 6 | 安装 WordPress，了解主题文件 |
| 7 | 搭建 WordPress 主题结构，修改 style.css 文件 |
| 8 | 构建主题的 Header、Sidebar、Footer、Main page、Single post page 和 Single page |
| 9 | 设置主题样式 |

graph LR
    A[构建 Header] --> B[构建 Sidebar]
    B --> C[构建 Footer]
    C --> D[构建 Main page]
    D --> E[构建 Single post page]
    E --> F[构建 Single page]
    F --> G[设置主题样式]
    G --> H[完成主题构建]

通过这些操作，我们可以创建一个功能完整、美观的 WordPress 主题，同时确保 Ext JS 应用在不同环境下的正常运行。