easyui

http://www.jeasyui.net/（中文网）
http://www.jeasyui.com/（英文版）

EasyUI官方下载地址：http://www.jeasyui.com/download/index.php

常见UI：
    Layui，Bootstrap，element ui,ant design,iview

vue 前后端分离

1.什么是easyui？
easyui是一种基于jQuery的用户界面插件集合

2.easyui能带给我们什么好处？
1）easyui是个完美支持HTML5网页的完整框架
2）easyui节省网页开发的时间和规模
3）easyui很简单但功能强大

3.easyui如何使用？
    pageContext.request.contextPath

3.1 引入必要的js和css样式文件
1）引入JQuery（jquery.min.js）
2）引入EasyUI（jquery.easyui.min.js）
3）引入EasyUI的中文国际化js，让EasyUI支持中文（locale/easyui-lang-zh_CN.js）
4）引入EasyUI的样式文件（/themes/default/easyui.css）
5）引入EasyUI的图标样式文件（/themes/icon.css）

3.2 路径问题
  3.2.1 相对路径/绝对路径
  3.2.2 base标签

3.3 页面缓存
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">  

4.组件
分类：Base（基础）、Layout（布局）、Menu and Button（菜单和按钮）、Form（表单）、Window（窗口）、
DataGrid and Tree（表格和树）、Extension（扩展）
本章节主要讲述以下组件的使用：
1）layout（布局组件）
2）accordion（分类组件）
3）tree（树形组件）
4）tabs（选项卡组件）
5）datagrid和pagination（表格和分页组件）
6）dialog和messager（窗口组件）
7）form（表单组件）

一、tree控件和tab控件

script代码:

$(function() {
		$('#myTree').tree({
			url : ctx + '/data/tree_data1.json',//请求地址
			animate : true,//折叠或者展开的时候是否显示动画效果
			onDblClick : function(node) {
				//alert(node.text+"   "+node.id+"   "+node.state);  // 在用户双击的时候提示
				//alert(node.iconCls);//图标
				//拿到对应的后代节点的集合
				var cs=$('#myTree').tree('getChildren',node.target);
				alert(cs.length);
				if(cs.length==0){
					//判断是否存在
					var f = $('#myTab').tabs('exists',node.text);
					//alert(f);
					if(!f){//说明不存在
						//新打开一个选项卡(tab页) iconCls:'icon-ok' 
						$('#myTab').tabs('add',{    
						    title:node.text, // 标题  
						    content:node.text,  //内容
						    closable:true,  //是否可关闭
						    iconCls:node.iconCls
						});  
					}
					else{//说明存在 让其对应选中
						$('#myTab').tabs('select',node.text);
					}
				}
				
			}
		});
	})

界面代码：

<div data-options="region:'north',split:true"
		style="height: 100px; text-align: center;">
		<h1>书籍管理后台</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 70px; text-align: center;">
		<b>&copy;玉渊工作室，未经允许不可随意使用</b>
	</div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 200px;">
		<!-- 左侧tree控件 -->
		<ul id="myTree" class="easyui-tree">

		</ul>

	</div>
	<div data-options="region:'center'"
		style="padding: 5px; background: #fff;">
		
		<!-- 中间的tab控件 -->
		<div id="myTab" class="easyui-tabs" style="width:100%; height: 100%;">
			<div data-options="iconCls:'icon-application-home'" title="首页" style="padding: 20px; display: none;">
				<img src="images/lb1.png" width="100%" height="100%">
			</div>
		</div>
	</div>