EasyUI的使用
构建前端测试项目
引入依赖
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.5.RELEASE</version>
</parent>
<dependencies>
<!--SpringWeb Test-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
</dependency>
<!--文件支持-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
<!--添加jsp支持-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<!--自动监测页面更新-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
构建入口类，并配置sprintboot
# 服务基本配置
server.port=8080
server.servlet.context-path=/
server.servlet.init-parameters.development=true
# 文件上传
spring.servlet.multipart.enabled=true
spring.servlet.multipart.max-file-size=1MB
spring.servlet.multipart.location=/Users/admin/Desktop/uploadTmpDir
# post表单提交乱码
spring.http.encoding.charset=UTF-8
server.tomcat.uri-encoding=UTF-8
进入EasyUI官网下载 （免费版即可）
在项目webapp中创建 static 文件夹，存放静态资源
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xVwIPkam-1585665219657)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1584943495880.png)]
使用 spring-boot:run 插件启动项目
引入EasyUI中的样式
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css">
<script type="text/javascript" src="/static/common/jquery.min.js"></script>
<script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
<!--语言包默认放最后否则不生效-->
<script type="text/javascript" src="/static/easyui/locale/easyui-lang-zh_CN.js"></script>
EasyUI中的组件
按钮
链接按钮
方式一：
<a href="#" class="easyui-linkbutton" >按钮1</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" >按钮2</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-redo',iconAlign:'right',plain:true" >按钮4</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-man'"style="width:100px;height: 30px" >按钮7</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-man'" onclick="clickMe()" style="width:100px;height: 30px" >按钮8</a>
方式二：
<script>
$(function () {
$('#btn1').linkbutton({
iconCls: 'icon-search',
iconAlign:'right',
width:100,
height: 30,
onClick:function () {
alert("点我了")
}
});
})
</script>
<a id="btn1">按钮</a>
开关按钮
方式一：
<script>
function change(check) {
console.log("是否选中："+check)
}
</script>
<input class="easyui-switchbutton" data-options="onText:'Yes',offText:'No'" checked>
<input class="easyui-switchbutton" data-options="onText:'男',offText:'女',width:100,height:30,handleWidth:50,handleText:'性别'">
<input class="easyui-switchbutton" data-options="onText:'男',offText:'女',width:100,height:30,handleWidth:50,handleText:'性别',onChange:change">
方式二：
<script>
$(function () {
$("#sw_btn").switchbutton({
onText:'男',
offText:'女',
width:100,
height:30,
handleWidth:40,
handleText:'性别',
disabled:true,
onChange:function (checked) {
console.log("checked:"+checked)
}
})
$("#l_btn1").linkbutton({
iconCls:"icon-ok",
onClick:function () {
$("#sw_btn").switchbutton("check")
}
})
$("#l_btn2").linkbutton({
iconCls:"icon-redo",
onClick:function () {
$("#sw_btn").switchbutton("uncheck")
}
})
})
</script>
<input id="sw_btn" >
<a id="l_btn1">选中</a>
<a id="l_btn2"> 取消</a>
菜单
菜单模板
<div id="menu1" class="easyui-menu" style="width:120px;">
<div>New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div data-options="iconCls:'icon-man'"><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div>
</div>
<div data-options="iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-redo'">Exit</div>
</div>
在菜单被创建的时候它是隐藏和不可见的。调用’show’方法显示菜单。
<script>
$(function () {
//截获鼠标右击位置
$("html").contextmenu(function (e) {
$("#menu1").menu("show",{left:e.clientX, top:e.clientY})
return false;
})
})
</script>
菜单注册动作
$("#menu1").menu({
onClick:function(item){
console.log(item)
if(item.text == "Exit"){
var target=item.target
$("#menu1").menu('setText', {target: target, text: '退出'})
}
if(item.text == "退出"){
var target=item.target
$("#menu1").menu('setText', {target: target, text: 'Exit'})
}
}
})
表单控件
validatebox验证框
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />
class可选值：
easyui-validatebox 普通验证
easyui-textbox 文本框
easyui-passwordbox 密码框
validType可选值
email：匹配E-Mail的正则表达式规则。
url：匹配URL的正则表达式规则。
length[0,100]：允许在x到x之间个字符。
remote['http://.../action.do','paramName']：发送ajax请求需要验证的值，当成功时返回true。
自定义验证规则
在common文件夹下创建 validatebox.default.js 文件 (书写自定义验证规则)
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
validator: function(value, param){
return value.length == param[0];
},
message: '请输入{0}个字符.'
}
});
在表单中进行应用
<input id="client" class="easyui-validatebox" data-options="required:true,validType:'minLength[6]'" />
表单数据验证后提交
表单数据
<form id="form1" method="post">
用户名：<input id="vv" class="easyui-textbox" name="name" data-options="required:true,validType:'remote[\'/ValidateController/name\',\'name\']'" /><br/>
密码：<input id="client" class="easyui-passwordbox" name="password" data-options="required:true,validType:'minLength[6]'" /><br/>
Email：<input id="myclient" name="email"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
remote 验证的Controller
@RestController
@RequestMapping("/ValidateController")
public class ValidateController {
private static Logger logger= LoggerFactory.getLogger(ValidateController.class);
private List<String> reserveName= Arrays.asList("admin","test");
@PostMapping(value = "name")
public boolean isValidate(String name) {
logger.debug("name:"+name);
return !reserveName.contains(name);
}
}
表单中的字段全部验证成功后才能提交
$(function () {
$("#form1").form({
//表单提交链接
url:'/xxx/xxx',
//返回true表单正常提交
onSubmit: function(){
console.log("----validate----")
//当所有字段都有效的时候返回true。
return $("#form1").form("validate")
},
//表单成功后触发，只要提交即可
success:function(data){
alert(data)
}
})
})
表单本地数据回填
<a id="btn_1">表单本地数据回填</a>
$("#btn_1").linkbutton({
"onClick":function () {
$("#form1").form(
"load",{
name:'aaa',
password:"111111",
email:'mymail@gmail.com',
})
}
})
表单远程数据回填
<a id="btn_2">表单远程数据回填</a>
$("#btn_2").linkbutton({
"onClick":function () {
$("#form1").form(
"load",'/ValidateController/getForm'
)
}
})
@RestController
@RequestMapping("/ValidateController")
public class ValidateController {
private static Logger logger= LoggerFactory.getLogger(ValidateController.class);
@GetMapping(value = "/getForm")
public Map<String,Object> getForm(){
Map<String,Object> map=new HashMap<>();
map.put("name","aaa");
map.put("password","111111");
map.put("email","qqq@qq.com");
return map;
}
}
Combobox下拉列表
普通方式创建
<select class="easyui-combobox" name="dept" style="width:200px;">
<option value="gg">攻关部</option>
<option value="yf">研发部</option>
<option value="sc">市场部</option>
<option value="cp">产品部</option>
</select>
jquery方式创建 (从controller中直接拿值)
<input id="cc" name="dept" value="aa">
$('#cc').combobox({
url:'/ValidateController/combobox',
valueField:'key',
textField:'value'
});
@PostMapping(value="/combobox")
public List<Map<String,Object>> combobox(){
List<Map<String,Object>> list=new ArrayList<>();
Map<String,Object> m1=new HashMap<>();
m1.put("key","gg");
m1.put("value","公关部");
HashMap<String, Object> m2 = new HashMap<>();
m2.put("key","ya");
m2.put("value","研发部");
HashMap<String, Object> m3 = new HashMap<>();
m3.put("key","sc");
m3.put("value","市场部");
m3.put("selected","true");
list.add(m1);
list.add(m2);
list.add(m3);
return list;
}
日期输入框
<input id="dd" type= "text" class= "easyui-datebox" required ="required"> </input>
<!--editable定义用户是否可以手动输入-->
<input class="easyui-datetimebox" name="birthday"
data-options="required:true,showSeconds:true,editable:false" style="width:300px">
Dialog 窗口
对话框窗口
<div id="login_dialog"></div>
<div id="register_dialog"></div>
//javascript页面加载完毕后执行如下代码
$("#login_dialog").dialog({
//高度不写默认自适应填写字段的多少（一般不写）
width:400,
title:"用户登录",
top:120,
//定义窗口是否可关闭
closed:false,
iconCls:'icon-man',
//定义是否显示关闭按钮。
closable:false,
//定义是否显示关闭按钮。
draggable:false,
//对话框窗口中的内容（表单）
href:'login.html',
cache:false,
//定义是否显示关闭按钮。
modal:true,
toolbar:[{
text:'注册',
iconCls:'icon-add',
handler:function(){
$("#login_dialog").dialog("close")
$("#register_dialog").dialog("open")
}
}],
buttons:[{
text:'提交',
iconCls:'icon-ok',
handler:function(){
$("#user_login_form").form("submit")
}
},{
text:'重置',
iconCls:'icon-redo',
handler:function(){
$("#user_login_form").form("reset")
}
}]
})
login.html 页面中没有等标签，只有表单和
login.html（注意页面布局）
<script>
$(function () {
$("#user_login_form").form({
//表单提交链接
url:'http://localhost:9090/UserModel/formUserManager/userLogin',
//返回true表单正常提交
onSubmit: function(){
//当所有字段都有效的时候返回true。
return $("#user_login_form").form("validate")
}
// ,
// //表单成功后触发，只要提交即可
// success:function(data){
// alert(data)
// }
})
})
</script>
<form id="user_login_form" method="post">
<div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
<input name="name" class="easyui-textbox" data-options="required:true,prompt:'用户名',iconCls:'icon-man'" style="height: 100%;width: 100%" >
</div>
<div style="height: 40px;margin-top: 5px;padding: 0 10% 0 10%">
<input name="password" class="easyui-passwordbox" data-options="required:true,prompt:'密码',iconCls:'icon-lock'" style="height: 100%;width: 100%" >
</div>
<div style="height:40px;margin-top: 5px;margin-bottom: 10px;padding: 0 10% 0 10%">
<div style="float: left;width: 30%;height:100%;background-color: #3d3d3d">
<img id="imgVcode" src="http://localhost:9090/UserModel/Create/createImg" style="height:100%;width: 110px" class="Ucc_captcha Captcha-image" onClick="changeImage()">
</div>
<div style="float: left;width: 70%;height:100%;">
<input name ="clientCode" class="easyui-textbox" data-options="prompt:'输入4位验证码',required:true,validType:'minLength[4]'" style="height: 100%;width: 100%" >
</div>
</div>
</form>
布局
<body class="easyui-layout">
<div data-options="region:'north',split:true,border:false,href:'head.html'" style="height:80px;"></div>
<div data-options="region:'south',split:true,border:false,href:'foot.html'" style="height:60px;"></div>
<div data-options="region:'west',title:'操作系统',split:true,border:false,href:'left.html',collapsible:true,tools:'#tools'" style="width:180px;"></div>
<div id="tools">
<a href="#" class="icon-reload" onclick="javascript:alert('刷新')"></a>
</div>
<div data-options="region:'center',border:false" style="padding:5px"></div>
</body>
直接通过 href:‘foot.html’ 引入页面即可
slid-menu侧栏菜单
<div id="slid-menu" data-options="fit:true"></div>
$("#slid-menu").sidemenu({
border:false,
multiple:false,
data:[{
"text": "用户管理",
"iconCls": "icon-man",
"state": "close",
"children": [{
"iconCls": "icon-edit",
"text": "用户数据表格",
"attributes":{"url":"/form/test"}
},{
"text":"用户分析报表",
"iconCls": "icon-search",
"attributes":{"url":"/form/test"}
}]
},{
"text": "订单管理",
"iconCls": "icon-sum",
"state": "close",
"children": [{
"iconCls": "icon-print",
"text": "订单数据表格",
"attributes":{"url":"/form/test"}
},{
"text": "订单分析报表",
"iconCls": "icon-tip",
"attributes":{"url":"/form/test"}
}]
}],
onSelect:function (item) {
console.log(item)
//点击开启选项卡
addTabs(item)
}
})
Tabs 选项卡配置
function addTabs(item){
//判断是否已经打开tab
if($('#center_tabs').tabs("exists",item.text)){
//如果选项卡已经打开，则选中该选项卡
$('#center_tabs').tabs("select",item.text)
return;
}else{
$('#center_tabs').tabs('add',{
title:item.text,
//对应上面 data 数据中的attributes属性，加载选项卡中的内容
href:item.attributes['url'],
"iconCls": item.iconCls,
closable:true,
//选项卡中的小工具
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
//小工具刷新选项卡
var tab= $('#center_tabs').tabs("getTab",item.text)
tab.panel("refresh")
}
}]
});
var tab= $('#center_tabs').tabs("getTab",item.text)
//设置鼠标移入则选中该选项卡
tab.panel('options').tab.unbind().bind('mouseenter',function(e){
$('#center_tabs').tabs('select', item.text);
});
}
}
选项卡中内容显示
<!--数据表格选项卡展示-->
<table id="user_dg"></table>
<!--选项卡的头-->
<div id="tb">
<!--选项卡上的工具栏-->
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
<div style="float: right;width: 30%;">
<!--选项卡上的搜索框-->
<input id="user_sb" class="easyui-searchbox" style="width:100%;" data-options="prompt:'Please Input Value',menu:'#mm'"></input>
<div id="mm" style="width:180px;float: right;margin-right: 0px">
<div data-options="name:'name',iconCls:'icon-man'">用户名</div>
<div data-options="name:'email',iconCls:'icon-ok'">邮件</div>
</div>
</div>
</div>
$(function () {
$("#user_dg").datagrid({
url:'/formUserManager/queryUserByPage',
method:"get",
fitColumns:true,
toolbar: '#tb',
//数据表格中的颜色一行一环
striped:true,
//分页工具栏
pagination:true,
rownumbers:true,
//一次只允许选择一行
singleSelect:true,
pageNumber:1,
pageSize:10,
pageList:[5,10,15,20,25,30],
//查询参数
queryParams: {
column: '',
value: ''
},
//表格中数据的属性设置
columns:[[
{field:'id',title:'用户ID',width:5,align:"center"},
{field:'name',title:'用户名',width:5,align:"center"},
{field:'password',title:'密码',width:10,align:"center",formatter: function(value,row,index){
return "********"
}
},
{field:'sex',title:'性别',width:5,align:"center",formatter: function(value,row,index){
//性别进行格式化输出
// console.log(value+" "+row+" "+index)
return value?"男":"女"
}
},
{field:'birthDay',title:'生日',width:10,align:"center"},
{field:'email',title:'邮箱',width:15,align:"center"},
{field:'photo',title:'图片',width:10,align:"center",formatter: function(value,row,index){
//用户图片展示
return "<img style='width:50px;height:50px;border-radius: 50%' src='http://centos/"+value+"'/>"
}
},
]]
});
})
搜索框的使用
<!--选项卡上的搜索框-->
<input id="user_sb" class="easyui-searchbox" style="width:100%;" data-options="prompt:'Please Input Value',menu:'#mm'"></input>
<div id="mm" style="width:180px;float: right;margin-right: 0px">
<div data-options="name:'name',iconCls:'icon-man'">用户名</div>
<div data-options="name:'email',iconCls:'icon-ok'">邮件</div>
</div>
// 搜索框的使用
$('#user_sb').searchbox({
searcher: function (value, name) {
alert(value + "," + name)
}
})
选项卡中删除按钮
//删除按钮
$("#user_dg_delete").linkbutton({
onClick:function () {
//弹出确认删除框
$.messager.confirm('删除', '请确认删除此条用户信息!', function(r){
if (r){
//确保用户有选中的行
var rows = $("#user_dg").datagrid('getSelections');
if(rows.length<1){
$.messager.alert('提示','至少选择一行数据删除!')
return
}else{
//获取要删除的数据id
var ids=[];
for(i in rows){
ids.push(rows[i].id)
//假删数据
// var rowindex = $("#user_dg").datagrid('getRowIndex',rows[i]);
// $("#user_dg").datagrid('deleteRow',rowindex)
}
//发送ajax请求，删除数据库中的数据，并刷新页面
$.ajax({
url:"/formUserManager/delteUserByIds",
type:"DELETE",
data:{ids:ids.join(",")},
success:function (data) {
console.log("ajax返回的数据"+data)
//刷新页面
$("#user_dg").datagrid("reload")
}
})
console.log(ids);
}
}
});
}
})
<a id="user_dg_delete"class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
Controller中的逻辑
@DeleteMapping(value = "/delteUserByIds")
@ResponseBody
public String delteUserByIds(@RequestParam(value = "ids") Integer[] ids){
String url=prefix+"/deleteUserByIds?ids={id}";
Map<String,Object> parameters=new HashMap<String,Object>();
parameters.put("id", Arrays.stream(ids).map(i->i.toString()).reduce((v1,v2)->v1+","+v2).get());
restTemplate.delete(url,parameters);
return "ok";
}
页面背景图片
<body style="background: url('http://www.uimaker.com/uploads/userup/0/1413012235-43G.png')"></body>
html页面的当前用户展示
登录成功后，在controller中往session中添加 user 对象
session.setAttribute("user",loginUser);
在 html 页面中，调用手写插件返回当前登录的用户名
<!--首先引入手写的插件-->
<script type="text/javascript" src="/static/common/plugin.js"></script>
<script>
//显示用户信息，调用插件
$("#current_user").sessionUser({
url:'/formUserManager/sessionUser'
})
</script>
<span id="current_user" style="color: darkgoldenrod"></span>
手写插件内容如下：
$.fn.extend({
sessionUser:function(options){
var defaultOptions={
url:"/formUserManager/sessionUser"
}
options=$.extend(defaultOptions,options)
$(this).each(function (i,item) {
$.get(options.url,function(data){
$(item).text(data.name)
})
})
}
})
用户登出
在页面定义一个退出登录的按钮
<a id="exit">退出登录</a>
为单击退出按钮注册事件
$(function () {
//点击退出按钮
$("#exit").linkbutton({
iconCls: 'icon-cancel',
iconAlign:'right',
width:100,
height: 30,
onClick:function () {
//弹出确定退出消息框
$.messager.confirm('三思啊', '你确定要退出吗?', function(r){
if (r){
$.ajax({
url:"/formUserManager/logout",
type:"post",
success:function (data) {
window.location.href="http://localhost:9999/user/dialog.html";
}
})
}
});
}
});
})
在 controller 中提供消除session中数据的方法
@PostMapping(value = "/logout")
@ResponseBody
public void logout( HttpSession session){
session.invalidate();
//session.removeAttribute("user");
}
HTML页面背景图片的设置
在HTML页面的同一个文件夹下添加背景图片 background.png
<body style="background-image: url('background.png')">
height: 30,
onClick:function () {
//弹出确定退出消息框
$.messager.confirm('三思啊', '你确定要退出吗?', function(r){
if (r){
$.ajax({
url:"/formUserManager/logout",
type:"post",
success:function (data) {
window.location.href="http://localhost:9999/user/dialog.html";
}
})
}
});
}
});
})
在 controller 中提供消除session中数据的方法
```java
@PostMapping(value = "/logout")
@ResponseBody
public void logout( HttpSession session){
session.invalidate();
//session.removeAttribute("user");
}
HTML页面背景图片的设置
在HTML页面的同一个文件夹下添加背景图片 background.png
<body style="background-image: url('background.png')">
2192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
