01.EasyUI（基础布局）

一.easyUI的简介

    easyui是一款基于jQuery的前端框架，可以使用其中的组件进行布局以及用来做后台的管理界面。
    EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速提升开发效率。

下载：

EasyUI的官网地址为：http://www.jeasyui.com/  

使用：

    ① 导入EasyUI的资源
    ② 查阅API文档使用EasyUI的组件完成页面开发

搭建环境的步骤如下：

1. 导入需要的css样式文件。easyui.css    icon.css

2. 导入相关的js文件

jquery.min.js
jquery.easyui.min.js
jquery.easyui-lang-zh_CN.js 

3. 注意：
themes中的文件相对路径不能变。

<!-- 引入EasyUI的css依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/default/easyui.css">

<!-- 引入EasyUI的图标依赖 -->
<link rel = "stylesheet" href = "${pageContext.request.contextPath }/js/plugins/easyui/themes/icon.css">

<!-- 引入EasyUI的相关JS依赖 -->
<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/jquery.easyui.min.js"></script>

<script type="text/javascript" src = "${pageContext.request.contextPath }/js/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>

二.easyUI的不足之处

    现在据了解到有三种UI框架，分别是easyUI、bootstrap、layUI这三种。

    不足之处： 从效果来看easyui的界面效果要远远差于bootstrap，跟layui比，界面效果也更差

三.学easyUI的好处

虽然说它的效果界面并不是那么好看，但是它也有它的好处，而且easyUI要简单学些，如果学会的easyUI框架，那么上手layUI就会轻松许多。 

好处：

    1.从金钱的角度上，开发首先会排除掉bootstrap。

    2.从学习文档的完整性、前端框架的稳定性，组件的丰富性考虑，easyui都要优于layui。

    3.从公司的角度考虑选用那个框架成本、公司的后端技术人员前端功底、前端的社区活跃度。

注意：

    使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。
    所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在
    学习如何按照EasyUI的文档来使用其组件并且其常用组件有哪些。 

四.easyUI的特点

    easyUI是一种基于jQuery的用户界面插件集合.

    easyUI为创建现代化，互动，JavaScript应用程序，提供必要的功能。

    使用easyUI你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

    easyUI是个完美支持HTML5网页的完整框架。

    easyUI节省了开发产品的时间和规模。

    easyUI非常简单，但是功能非常强大

五、EasyUI的常用组件

① 基础组件：常用的比较小的功能组件，不是每个网页中都会用到
② 布局组件: 很重要，每个网页都会使用，完成网页的布局的。
③ 菜单与按钮组件:很重要，每个网页都会使用，在网页中完成菜单和按钮的效果
④ 表单组件:很重要，搜集用户数据，封装了常用的数据校验，并支持自定义校验
⑤ 窗口组件:在当前页面中显示子窗口效果，对页面中的功能进行完善。
⑥ 数据网格和树组件:很重要，非常之重要。在网页中显示表格以及树状数据