SSH 电商项目实战（三）：EasyUI 搭建后台管理系统页面框架

后台框架技术选型：EasyUI vs 传统 Frameset

对比两种经典后台布局方案：

结论：EasyUI 以 jQuery 为基础，提供 Layout、Tree、DataGrid、Form、Dialog 等企业级组件，零 JS 深度即可构建专业后台，是传统 SSH 项目的最佳搭档。

步骤 1：公共资源抽取 (head.jspf)

<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="https://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<title>易购商城后台管理</title>

<!-- EasyUI 核心 CSS/JS -->
<link rel="stylesheet" href="${ctx}/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="${ctx}/easyui/themes/icon.css">
<link rel="stylesheet" href="${ctx}/easyui/themes/color.css">
<script src="${ctx}/easyui/jquery.min.js"></script>
<script src="${ctx}/easyui/jquery.easyui.min.js"></script>
<script src="${ctx}/easyui/locale/easyui-lang-zh_CN.js"></script>

步骤 2：主框架页面 (aindex.jsp)

<%@ include file="/public/head.jspf" %>
<body class="easyui-layout">
    <!-- 顶部区域 -->
    <div data-options="region:'north', border:false" style="height:60px;background:#fafafa;padding:10px">
        <h2>易购商城后台管理系统</h2>
    </div>

    <!-- 左侧菜单区域 -->
    <div data-options="region:'west', title:'系统菜单', split:true, border:false" style="width:200px">
        <div id="menu" class="easyui-accordion" data-options="fit:true,border:false">
            <div title="基础管理" data-options="iconCls:'icon-save',selected:true">
                <ul>
                    <li><a href="#" data-url="category_list.action">分类管理</a></li>
                    <li><a href="#" data-url="product_list.action">商品管理</a></li>
                </ul>
            </div>
            <div title="订单管理" data-options="iconCls:'icon-edit'">
                <ul>
                    <li><a href="#" data-url="order_list.action">订单列表</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 中心工作区 -->
    <div data-options="region:'center', border:false">
        <div id="tabs" class="easyui-tabs" data-options="fit:true,border:false,plain:true">
            <div title="首页" data-options="closable:false" style="padding:20px">
                欢迎使用易购商城后台管理系统
            </div>
        </div>
    </div>
</body>

步骤 3：菜单点击动态打开 Tab (JavaScript)

<script>
$(function() {
    // 1. 菜单链接点击事件（事件委托）
    $('#menu a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var title = $this.text();
        var url = $this.data('url'); // HTML5 data-* 属性存储 Action URL
        var icon = $this.data('icon') || 'icon-standard';
        
        openTab(title, url, icon);
    });

    // 2. 打开/切换 Tab 核心函数
    function openTab(title, url, icon) {
        var $tabs = $('#tabs');
        
        // 已存在则选中
        if ($tabs.tabs('exists', title)) {
            $tabs.tabs('select', title);
            // 可选：刷新 iframe 内容
            // var tab = $tabs.tabs('getSelected');
            // tab.panel('refresh', url);
            return;
        }
        
        // 新建 Tab：使用 iframe 加载后台页面（保持页面隔离）
        $tabs.tabs('add', {
            title: title,
            closable: true,
            iconCls: icon,
            content: '<iframe src="' + url + '" frameborder="0" style="width:100%;height:100%;"></iframe>',
            // 可选：href 模式（仅加载 body 片段，需后台配合）
            // href: url,
            // onLoad: function() { ... }
        });
    }
});
</script>

步骤 4：通用页面跳转 Action (SendAction)

@Controller("sendAction")
@Scope("prototype")
public class SendAction extends ActionSupport {
    public String execute() {
        return "send"; // 通用结果名
    }
}

<!-- struts.xml 通用映射 -->
<action name="send_*_*" class="sendAction">
    <result name="send">/WEB-INF/{1}/{2}.jsp</result>
</action>

访问 send_category_list.action → 自动映射 /WEB-INF/category/list.jsp，实现「约定优于配置」的页面分发。

步骤 5：子页面开发规范 (list.jsp)

<%@ include file="/public/head.jspf" %>
<body>
    <!-- 工具栏 -->
    <div id="toolbar" style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="add()">新增</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="edit()">编辑</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()">删除</a>
    </div>

    <!-- DataGrid 数据表格 -->
    <table id="dg" title="分类列表" class="easyui-datagrid" 
           data-options="
               url:'category_queryJoinAccount.action',
               toolbar:'#toolbar',
               pagination:true,
               fitColumns:true,
               singleSelect:true
           ">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'id',width:80">编号</th>
                <th data-options="field:'type',width:150">分类名称</th>
                <th data-options="field:'hot',width:80,formatter:hotFormatter">热销</th>
                <th data-options="field:'account.login',width:150">管理员</th>
            </tr>
        </thead>
    </table>

    <script>
    function hotFormatter(val, row, idx) {
        return val ? '<input type="checkbox" checked disabled>' : '<input type="checkbox" disabled>';
    }
    // 增删改查 JS 函数...
    </script>
</body>

项目结构规范

WebRoot/
├── public/
│   └── head.jspf          # 公共头部
├── easyui/                # EasyUI 资源库
├── WEB-INF/
│   ├── main/
│   │   └── aindex.jsp     # 主框架
│   ├── category/
│   │   ├── list.jsp       # 分类列表页
│   │   └── edit.jsp       # 分类编辑页
│   └── product/
│       └── list.jsp
└── index.jsp              # 登录/入口页

总结

EasyUI 后台框架核心三件套：Layout 布局 + Accordion 菜单 + Tabs 工作区 + iframe 页面隔离。配合 Struts2 通用分发 Action，实现「菜单配置即页面路由」的低维护成本架构。后续开发只需在 WEB-INF/模块/ 下编写 JSP 片段，专注业务逻辑，框架层零侵入。

1. 上一篇文章： SSH 电商项目实战（七）：Struts2 整合 JSON 实现 EasyUI DataGrid 数据交互
2. 下一篇文章： Java Web 验证码实现全攻略：Servlet 绘图、Session 校验、前端交互

Java 相關知識

Java 物件、類別與方法重載核心觀念入門

物件導向三要素 概念說明程式對應 物件現實實體的抽

深度解析 Servlet 線程安全問題與最佳實踐方案

Servlet 容器默認採用多線程模型處理請求：單一 Ser

Java 集合框架繼承結構圖解：Collection/Map 體系全景圖

集合框架核心體系概覽 Java 集合框架分為兩大頂層接口：C

MIDP 高級 UI 組件深度解析（四）：Alert 警告框完整指南

javax.microedition.lcdui.Alert