|
|
第18章前端UI框架1.EasyUI框架2.MyBatis下载与安装2.Bootstrap框架3.Vue框架18.1
EasyUI框架EasyUI是在jQuery基础上开发的一个UI插件，目的在于让Web开发者快捷地构建出功能丰富且美观的用
户界面。开发者无需编写复杂的JavaScript，也无需对CSS样式有深入的了解。开发者只需有一些HTML和jQuery基础，就可
以轻松地开发出较好的软件界面。EasyUI控件种类很多，由于篇幅，这里仅介绍本书项目案例篇的项目中用到的几种常用控件。可以从官方
网站下载jQueryEasyUI插件，本书以jquery-easyui-1.5.1版本来介绍。下载jquery-easyui-1
.5.1.zip文件，解压后的目录中主要包含jquery.min.js、jquery.easyui.min.js这两个文件和dem
o、locale、plugins和themes四个目录。demo目录下包含jQueryEasyUI官方提供的例子，locale目
录下包含语言本地化JavaScript文件，plugins目录下包含EasyUI控件分文件的JavaScript，themes目
录下包含样式和图片文件目录。18.1.1Layout控件使用EasyUI的Layout控件可以实现页面布局，布局是有五个区
域（北区north、南区south、东区east、西区west和中区center）的容器。中间的区域面板是必需的，边缘区域面板是
可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局可以嵌套，因此用户可建立复杂的布局。Lay
out控件效果图18.1.2Tabs控件使用Tabs控件可以实现选项卡布局，一般用于中部选项卡。Tabs控件效果图18.1
.3Tree控件Tree控件是Web页面中将数据分层以树形结构显示的，Tree控件在页面上以标签标识。T
ree控件效果图18.1.4DataGrid控件DataGrid控件以表格格式显示数据，并为选择、排序、分组和编辑数据提供了
丰富的支持。数据网格（DataGrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。
它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。DataGrid控件效果图18.2Bootstrap框架Bootstr
ap是美国Twitter公司的设计师MarkOtto和JacobThornton合作基于HTML、CSS、JavaScript
开发的简洁、直观、强悍的前端开发框架，使得Web开发更加快捷。18.2.1Bootstrap简介Bootstrap是一个用
于快速开发Web应用程序和网站的前端框架，基于HTML、CSS、JAVASCRIPT。Bootstrap中包含了丰富的Web组件
，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。Bootstrap包括下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导
航、分页、排版、缩略图、警告对话框、进度条、媒体对象等这些组件。18.2.2环境安装可以从http://getbootstr
ap.com/上下载Bootstrap的最新版本，为了更好的了解和更方便的使用，本书中下载Bootstrap的预编译版本boot
strap-3.3.7-dist.zip。解压缩这个压缩文件，里面包含css和js两个文件夹。其中，css文件夹中主要包含.cs
s文件，这里选择使用bootstrap.min.css文件，这是Bootstrap的基本样式；js文件夹中包含.js文件，这里选
择使用bootstrap.min.js文件，这是Bootstrap的jQuery插件源文件。在HBuilder编辑器中，新建一个名
为BootstrapTest的Web项目，将bootstrap.min.css文件添加到该项目的css目录中，将bootstrap
.min.js文件添加到js目录中。在页面部分，依次引入bootstrap.min.css、jquery
-3.3.1.min.js和bootstrap.min.js。jquery-3.3.1.min.js是jQuery库的基础文件，这
个文件也需要添加到项目的js目录中。18.2.3Bootstrap按钮任何带有class.btn | | |
