spring boo 集成 easyui

最新推荐文章于 2023-12-21 18:45:00 发布

CherishTheMemoryOf

最新推荐文章于 2023-12-21 18:45:00 发布

阅读量416

点赞数

本文详细介绍如何使用jQuery EasyUI和Spring Boot构建高效且美观的Web应用，涵盖实体类、接口、控制器及EasyUI页面配置，实现数据的增删改查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签

jQuery EasyUI有以下特点：
1、基于jquery用户界面插件的集合

2、为一些当前用于交互的js应用提供必要的功能
3、EasyUI支持两种渲染方式分别为javascript方式（如：$(’#p’).panel({…})）和html标记方式（如：class=“easyui-panel”）
4、支持HTML5（通过data-options属性）
5、开发产品时可节省时间和资源
6、简单，但很强大
7、支持扩展，可根据自己的需求扩展控件
8、目前各项不足正以版本递增的方式不断完善

依赖

	<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.10.RELEASE</version>
    </parent>
    <dependencies>
    	<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
	<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
	</dependencies>

需要一个连接数据库的实体类

@Data
//数据库
@Entity  
public class student {
	//主键
	@Id()
	@GeneratedValue(strategy = GenerationType.AUTO)
	private String id;
	//列
	@Column
	private String name;
	@Column
	private String age;
	@Column
	private String sex;
	@Column
	private String email;
	@Column
	private String phone;
	
}

需要实现的接口

						//继承CrudRepository类
public interface NewsDaos extends CrudRepository<student,String> {

	//分页方法
	Page<student> findByNameLike(String myname ,Pageable pa);
		
}

需要一个main

@SpringBootApplication
public class SoleMain {

    public static void main(String[] args) {
        SpringApplication.run(SoleMain.class,args);
    }
}
状态对象
//小辣椒
@Data
public class Result {
	private int total;
	
	private List rows;
	
	private int code;
	
	private String msg;
}

//控制层

//返回json对象
@RestController
public class TCnoller {
	//自动装配
	@Autowired
    private NewsDaos dao;
	
	//查询
	@GetMapping("/index")
	public Result query(String myname,Integer page,Integer rows ){
		//为null的时候付字符串
		if(myname == null) {
			myname="";
		}
		//分页page是从0也开始的 page传的是1
		PageRequest pr=new PageRequest(page-1,rows);
		//查询所有
		Page<student> pa=dao.findByNameLike("%"+myname+"%", pr);
		//状态对象
		Result re=new Result();
		//获取总数
		re.setTotal((int) pa.getTotalElements());
		//获取所有数据
		re.setRows(pa.getContent());
	
		return re;
	}
	//删除
	@DeleteMapping("/dalete/{id}")
	public Result query(@PathVariable String id){
		Result re=new Result();
		try {
			//多个删除
			String [] str=id.split(",");
			for (String string : str) {
					//删除方法
				dao.delete(string); 
			}
		} catch (Exception e) {
			//错误的情况
			re.setCode(1);
			re.setMsg("删除失败"+e.getMessage());
		}
		
		return re;
	}
	//修改
	@PostMapping("/upadd")
	public Result add(student stu){
		Result re=new Result();
		try {
			//新增方法
			dao.save(stu);
			
		} catch (Exception e) {
			re.setCode(1);
			re.setMsg("新增失败"+e.getMessage());
		}
		
		return re;
	}
	//修改
	@PutMapping("/updata/{id}")
	public Result updata(@PathVariable String id,student stu){
		
		Result re=new Result();
		try {
			//传主键就是修改
			dao.save(stu);
			
		} catch (Exception e) {
			re.setCode(1);
			re.setMsg("新增失败"+e.getMessage());
		}
		
		return re;
	}
  
}

easyui html页面

	//导入的js css 文件
	<link rel="stylesheet" type="text/css" href="./resources/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="./resources/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="./resources/demo.css">
	<script type="text/javascript" src="./resources/jquery.min.js"></script>
	<script type="text/javascript" src="./resources/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		//防止js代码先运行
		$(function(){
			//查询所有数据
			$('#myname').datagrid({ 
			//开启数字排列 
				rownumbers:true,
			    url:'index',  
			    method:'get',
			    title:"学生表",
			    //是否单选
			    singleSelect:false,
			    //开启分页
			    pagination:true,
			    toolbar: [{
			    		//图片
					iconCls: 'icon-my_delete',
					text:'删除',
					handler: function(){
						$.messager.confirm('确认对话框', '您想要删除吗？', function(r){
							if (r){
								var str='';
								//获取所有选中所有的
								var sot=$('#myname').datagrid('getSelections');
								//获取单个选中
								var sotr=$('#myname').datagrid('getSelected');
								//each循环
								$.each(sot, function (index, value){
									if(sot.length-1 == index){
										str+=value.id;
										return;
									}
									str+=value.id+',';
								})
									$.ajax({
										type:'post',
										url:'dalete/'+str,
										data:{
											"_method":'delete'
										},
										success:function(data){
											if(data.code == 0){
												alert("删除成功");
												//表格重构
												$('#myname').datagrid('load',{
													page: '1'
												});

											}else{
												alert("删除失败 原因:"+data.msg);
											}
										}
									})  
							}
						});


						
					}
				},'-',{
					iconCls: 'icon-adds',
					text:'新增',
					handler: function(){
						$('#addForm').window('open'); 
					}
				},'-',{
					iconCls: 'icon-updatas',
					text:'修改',
					handler: function(){
						var sot=$('#myname').datagrid('getSelections');
						var adds=$('#myname').datagrid('getSelected');
						if(sot.length == 0){
							alert("请选择一列");
							return;
						}
						if(sot.length > 1){
							alert("一次只能修改一个");
							return;
						}
						//显示
						$('#updatas').window('open'); 
						//给隐藏值
						$('#updata').form('load',adds);
					}
				}],
			    columns:[[    
			    	{field:'ids',width:'20%',align:'left',title:'ID',checkbox:true}, 
			        {field:'id',width:'20%',align:'left',title:'ID'},    
			        {field:'name',width:'20%',align:'left',title:'名字'},    
			        {field:'age',width:'20%',align:'left',title:'年龄'}, 
			        {field:'sex',width:'20%',align:'left',title:'性别'} ,
			        {field:'email',width:'20%',align:'left',title:'邮箱'}
			    ]]    
			}); 
			//自己给分页中文
			var p=$('#myname').datagrid('getPager');
			$(p).pagination({ 
				pageSize:10,
				showPageList:[5,10,15,20],
				beforePageText:'第',
				afterPageText: '页  共{pages}页',
				displayMsg: '当前显示{from} -{to} 条记录 共{total}记录'
			});  
			
		
		})
			//提交
			function submitForm(){
				$('#add').form('submit',{
					url:'upadd',
					success:function(data){
						var s=JSON.parse(data);
						if(s.code == 0){
							alert("新增成功");
							$('#addForm').window('close'); 
							$('#myname').datagrid('load',{
								page: '1'
							});
							$('#add').form('clear');
						}else{
							alert("新增失败 原因:"+data.msg);
							$('#addForm').window('none'); 
							$('#add').form('clear');
						
						}
					}
					
				});
				
			}
			//重置
			function clearForm(){
				$('#add').form('clear');
			}

//新增的一个隐藏的表格

<div id="addForm" class="easyui-window" title="增加员工信息" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:300px;padding:5px;">
		<form id="add" method="post">
	    	<table cellpadding="5">
	    		<tr>
	    			<td>姓名:</td>
	    			<td><input class="easyui-textbox" type="text" name="name" data-options="required:true,validType:'length[2,6]'" missingMessage="请输入2~6之间的姓名" invalidMessage="请输入正确的名字"></input></td>
	    		</tr>
	    		<tr>
	    			<td>年龄:</td>
	    			<td><input class="easyui-textbox" type="text" name="age" data-options="required:true,validType:'length[1,2]'" missingMessage="请输入15~100之间的年龄" invalidMessage="请输入正确的年龄"></input></td>
	    		</tr>
	    		
	    		<tr>
	    			<td>性别:</td>
	    			<td><input class="easyui-textbox" type="text" name="sex" data-options="required:true,validType:'length[0,1]'" missingMessage="请输入男或女" invalidMessage="请输入正确的性别"></input></td>
	    		</tr>
	    		<tr>
	    			<td>邮箱:</td>
	    			<td><input name="email"  class="easyui-textbox" data-options="required:true,validType:'email'" missingMessage="不能为空" invalidMessage="请输入正确的邮箱格式"> </input></td>
	    		</tr>
	    
	    	</table>
	    </form>
	    <div style="text-align:center;padding:5px">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">保存</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	    </div>
	</div>

//替换图片
图片的位置
在这里插入图片描述

你要加人的图片 css 方法
在这里插入图片描述

//名字自定义
.icon-clear{
				//图片位置
	background:url('icons/clear.png') no-repeat center center;
}

图片下载的网址
easyicon

阿里云图片官网