天天看点

easyui入门

主要学的框架:layout布局,tree组件,tab组件,简单权限概念,datagrid组件,dialog组件,form组件

需求:完成后台主界面的搭建,单个菜单的管理功能(增删改查)

主要以需求来贯穿easyui的学习

通过layout组件来完成界面的布局

通过tree组件来完成左侧菜单栏的展示

通过点击左侧菜单,来打开右侧选项卡,来学习tab组件

通过演示不同的用户登录,看到不同的菜单,明确权限的用法

通过打开一个选项卡,展示一张表的数据,明确datagrid组件的用法

通过新增,修改用户信息,来明确dialog组件及form组件的用法

根据jquery的学习,我们知道如下三点:

组件式开发的概念

实体类的json串与map集合的json是一样的

对map集合通用的查方法

ui框架在市面上有如下三种(除了分布式)

本次讲的是单机项目,只有一个服务器。分布式会有五六台上十台服务器

easyui=jquery+html4(用来做后台的管理界面):

(流行)市面上已经被淘汰,但它是免费的。

bootstrap=jquery+html5 :

(流行)支持响应式,它的样式不会根据你界面的分辨率调大调小而失效。布局和后台交互需要花钱。就相当于eayui能做的功能bootstrap也能完成,但bootstrap能做的更好看,缺点:要钱

layui:

支持响应式,2016年出来的一种框架,发展历史短,框架不够完善,框架本身存在bug。特点:做的东西好看,但是有些需求不够完善,能开发。

小结:

本次需求案例用easyui做,其他两个都能做。

为什么选easyui来学:第一点:不要钱。第二点:功能完善;第三点:api最全

bootstrap:api网上要零零散散的找

layui:发展历史较短,api相当于easyui没有那么全

案例:

通过layout布局

通过tree加载菜单

通过菜单去打开不同的tab页

学习前端框架:

api

jar包

easyui入门

代码演示

首先需要布局,导jar包:

easyui入门

第一步:看api

第二步:看demo

easyui入门

界面效果图

easyui入门

看api学习:

easyui入门

运行结果:

easyui入门
注意:路径,顺序(一定按照别人官方文档顺序加载)

左侧加载

看demo树形tree加载:

出现如下效果:

easyui入门

看api:

easyui入门

创建js文件

easyui入门
easyui入门
注意:要和jsp和json数据在同级目录

然后去index.jsp 引入json

easyui入门

键不能变,值可变

easyui入门

实体类的描述

自定义mvc框架

导入需要用到的jar包:

easyui入门

web.xml配置中央控制器

工具类

easyui入门
链接:https://pan.baidu.com/s/1lhZ_nv5Vn0GcPgdNEJzD9w 提取码:qt7t

MenuDao

MenuAction

配置web.xml

创建conf文件下mvc.xml

修改js

index.jsp主页面

运行效果如下

easyui入门

继续阅读