JavaWeb从新手到入门(三)EeayUI后台管理界面

参考:《传智播客-淘淘商城》

一、EasyUI

1.1 EasyUI

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。jQuery EasyUI 框架提供了创建网页所需的一切,可以帮助用户轻松搭建页面,由于使用简单,是搭建后台管理界面的绝佳选择(后台管理界面对美观和设计感的要求不强,EasyUI可以满足需要)。

1.2 EasyUI的声明

在使用EasyUI之前必须先声明UI控件,有两个方法声明它。

1. 直接在 HTML 声明组件。

dialog content.
2. 编写 JavaScript 代码来创建组件。

$('#cc').combobox({
    url: ...,
    required: true,
    valueField: 'id',
    textField: 'text'
});
声明完成后即可使用EasyUI提供的丰富的应用。

1.3 EasyUI的布局

边框布局(border layout)提供五个区域:east、west、north、south、center。以下是一些通常用法:

  • north 区域可以用来显示网站的标语。
  • south 区域可以用来显示版权以及一些说明。
  • west 区域可以用来显示导航菜单。
  • east 区域可以用来显示一些推广的项目。
  • center 区域可以用来显示主要的内容。
为了应用布局(layout),您应该确定一个布局(layout)容器,然后定义一些区域。布局(layout)必须至少需要一个 center 区域,以下是一个布局(layout)实例:

    

Select language:

我们在一个
容器中创建了一个边框布局(border layout),布局(layout)把容器切割为两个部分,左边是导航菜单,右边是主要内容。最后我们写一个 onclick 事件处理函数来检索数据,'showcontent' 函数非常简单:
function showcontent(language){
        $('#content').html('Introduction to ' + language + ' language');
    }
JavaWeb从新手到入门(三)EeayUI后台管理界面_第1张图片

1.4 EasyUI标签页

EasyUI还可以创建标签页(Tabs 组件),Tabs 一次仅仅显示一个面板(panel),每个面板(panel)都有标题、图标和关闭按钮。 当 Tabs 被选中时,将显示对应的面板(panel)的内容。

JavaWeb从新手到入门(三)EeayUI后台管理界面_第2张图片
从 HTML 标记创建 Tabs,包含一个 DIV 容器和一些 DIV 面板(panel)。

    
First Tab
Second Tab
Third Tab
标签页可以动态添加,只需要调用 'add' 方法即可,代码如下:


这个 html 代码非常简单,我们创建了带有一个名为 'Home' 的 tab 面板的 Tabs。

JavaWeb从新手到入门(三)EeayUI后台管理界面_第3张图片
添加Tab的JavaScript代码如下:

function addTab(title, url){
	if ($('#tt').tabs('exists', title)){
		$('#tt').tabs('select', title);
	} else {
		var content = '';
		$('#tt').tabs('add',{
			title:title,
			content:content,
			closable:true
		});
	}
}

1.5 EasyUI数据网格

EasyUI数据网格(datagrid)的列信息是定义在 标记中,数据是定义在 标记中。确保为所有的数据列设置 field 名称,请看下面的实例:

Col 1 Col 2 Col 3 Col 4 Col 5 Col 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
Data 1 Data 2 Data 3 Data 4 Data 5 Data 6
表头的定义如下:


        
            Col 1
            Col 2
            Col 3
            Details
        
        
            Col 4
            Col 5
            Col 6
                                  
    
JavaWeb从新手到入门(三)EeayUI后台管理界面_第4张图片
如上简单的表格一般难以满足动态更新的需要,动态更新的表格如下图:

JavaWeb从新手到入门(三)EeayUI后台管理界面_第5张图片
其代码如下所示:

    
Item ID Product ID List Price Unit Cost Attribute Stauts
工具栏的定义如下:

    
Item ID: Product ID: Search
当用户输入查询值并按下查询按钮时,'doSearch' 函数将被调用:

function doSearch(){
        $('#tt').datagrid('load',{
            itemid: $('#itemid').val(),
            productid: $('#productid').val()
        });
    }
上面的代码调用了 'load' 方法来加载新的数据网格(datagrid)数据。我们需要传递 'itemid' 和 'productid' 参数到服务器。

1.6 EasyUI树形菜单

一个树形菜单(Tree)可以从标记创建。easyui 树形菜单(Tree)也可以定义在

    元素中。无序列表的
      元素提供一个基础的树(Tree)结构。每一个
    • 元素将产生一个树节点,子
        元素将产生一个父树节点。

        • Folder
          • Sub Folder 1
            • File 11
            • File 12
            • File 13
          • File 2
          • File 3
        • File21
        JavaWeb从新手到入门(三)EeayUI后台管理界面_第6张图片

        二、后台管理界面

        网站的后台管理界面首页为index.jsp,打开网站后默认跳转,界面如下:

        JavaWeb从新手到入门(三)EeayUI后台管理界面_第7张图片

        如下为网站首页源码:

        <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
        
        
        
        
        淘淘商城后台管理系统
        
        
        
        
        
        
        
        
        
        
            
        HTML文件链接了三个CSS样式文件,各自定义了首页和easyUI的颜色样式,然后包含了EasyUI常用的 jquery.min.jsjquery.easyui.min.jseasyui-lang-zh_CN.js三个JS文件。

        index.jsp中使用了easyui-layouteasyui-tree两个EasyUI组件,并为树形菜单提供了方法function,在点击树形菜单时新建标签页,且请求与页面的名称一致,故点击相应菜单项(如“新增商品”:

      • 新增商品
      • )时即可跳转到Url指定的页面:item-add.jsp

        三、界面跳转

        页面打开和跳转需要在服务端添加一个页面跳转服务,因此需要在Web工程中添加一个Controller,即为PageController

        package priv.ality.controller;
        
        import org.springframework.stereotype.Controller;
        import org.springframework.web.bind.annotation.PathVariable;
        import org.springframework.web.bind.annotation.RequestBody;
        import org.springframework.web.bind.annotation.RequestMapping;
        
        /**
         *
         */
        @Controller
        public class PageController {
        
            @RequestMapping("/")
            public String showIndex(){
                return "index";
            }
        
            @RequestMapping("/{page}")
            public String showPage(@PathVariable String page){
                return page;
            }
        }
        该Controller返回的子串经过spring-mvc.xml中定义的prefix和suffix添加后变成/WEB-INF/jsp/*.jsp,即可跳转到相应界面。

        四、SpringMVC 静态资源访问

        后台管理的index.jsp中包含了服务端下的CSS/JS文件(

你可能感兴趣的:(JavaWeb)