主要学的框架: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包
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5yNmlTN4QzMygzN2EDO4gjY0QTYzYWOmNjM4ITMilzM08CX3EzLcZDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL5M3Lc9CX6MHc0RHaiojIsJye.png)
代码演示
首先需要布局,导jar包:
第一步:看api
第二步:看demo
界面效果图
看api学习:
运行结果:
注意:路径,顺序(一定按照别人官方文档顺序加载)
左侧加载
看demo树形tree加载:
出现如下效果:
看api:
创建js文件
注意:要和jsp和json数据在同级目录
然后去index.jsp 引入json
键不能变,值可变
实体类的描述
自定义mvc框架
导入需要用到的jar包:
web.xml配置中央控制器
工具类
链接:https://pan.baidu.com/s/1lhZ_nv5Vn0GcPgdNEJzD9w 提取码:qt7t
MenuDao
MenuAction
配置web.xml
创建conf文件下mvc.xml
修改js
index.jsp主页面
运行效果如下