后台代码只有控制层(controller),逻辑层(dao),实体类(entiey),再加个main方法运行就ok了
控制层 EmpController .java
package cn.ps.controller;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RestController;
import cn.ps.dao.EmpDao;
import cn.ps.entity.Empattr;
import cn.ps.entity.Result;
@RestController
public class EmpController {
@Autowired
private EmpDao empDao;
@GetMapping("/queryEmp")
public Result<Empattr> queryEmp(String ename,Integer page,Integer rows){
if(ename==null) {
ename="";
}
PageRequest pageRequest=new PageRequest(page-1,rows);
Page<Empattr>findAll=empDao.findByEnameLike("%"+ename+"%",pageRequest);
Result<Empattr> result=new Result<>();
result.setTotal((int)findAll.getTotalElements());
result.setRows(findAll.getContent());
return result;
}
@DeleteMapping("empattr/{empno}")
public Result deleteEmp(@PathVariable("empno") String empno){
Result result=new Result();
try {
empDao.delete(empno);
} catch (Exception e) {
e.printStackTrace();
result.setCode(1);
result.setMsg("删除失败"+e);
}
return result;
}
@PostMapping("/empattr")
public Result addEmp(Empattr empattr){
Result result=new Result();
try {
empDao.save(empattr);
} catch (Exception e) {
e.printStackTrace();
result.setCode(1);
result.setMsg("新增失败"+e);
}
return result;
}
@PutMapping("empattr/{empno}")
public Result updateEmp(@PathVariable String empno ,@Valid Empattr empattr){
Result result=new Result();
try {
empattr.setEmpno(empno);
empDao.save(empattr);
} catch (Exception e) {
e.printStackTrace();
result.setCode(1);
result.setMsg("修改失败"+e);
}
return result;
}
}
逻辑层 EmpDao .java 用来查询分页
package cn.ps.dao;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.repository.CrudRepository;
import cn.ps.entity.Empattr;
public interface EmpDao extends CrudRepository<Empattr, String>{
Page<Empattr> findByEnameLike(String ename,Pageable page);
}
实体类(属性类) Empattr .java
package cn.ps.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
//获取数据库表数据
@Entity
public class Empattr {
//主键
@Id()
//自增长
@GeneratedValue(strategy = GenerationType.AUTO)
private String empno;
//列头
@Column
private String ename;
@Column
private String sal;
@Column
private String job;
@Column
private String email;
@Column
private String phone;
public String getEmpno() {
return empno;
}
public void setEmpno(String empno) {
this.empno = empno;
}
public String getEname() {
return ename;
}
public void setEname(String ename) {
this.ename = ename;
}
public String getSal() {
return sal;
}
public void setSal(String sal) {
this.sal = sal;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
@Override
public String toString() {
return "EmpAttr [empno=" + empno + ", ename=" + ename + ", sal=" + sal + ", job=" + job + ", email=" + email
+ ", phone=" + phone + "]";
}
}
Result.java 提示消息和返回总数
package cn.ps.entity;
import java.util.List;
public class Result<T> {
private int code;
private String msg;
private int total;
private List<T> rows;
public void setRows(List<T> rows) {
this.rows = rows;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public List<T> getRows() {
return rows;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
}
`
运行方法EasyuiMain.main
package cn.ps;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class EasyuiMain {
public static void main(String[] args) {
SpringApplication.run(EasyuiMain.class, args);
}
}
html代码qeasy.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>职员信息</title>
<link rel="stylesheet" type="text/css" href="./resource/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./resource/themes/icon.css">
<link rel="stylesheet" type="text/css" href="./resource/demo.css">
<script type="text/javascript" src="./resource/jquery.min.js"></script>
<script type="text/javascript" src="./resource/jquery.easyui.min.js"></script>
<script >
$(function(){
//查询赋值
var hide=0;
$('#mytable').datagrid({
url:'queryEmp',
method:'get',
title:"员工信息",
pagination:true,
singleSelect:true,
rownumbers:true,
toolbar:[{
//图标
iconCls: 'icon-add',
text:'新增',
handler:function(){
//点击图标显示easyui-window隐藏的表单
$("#addForm").window('open');
}
},'_',{
//图标
iconCls:'icon-remove',
text:'删除',
handler:function(){
//获取表中所选中的行所有参数
var selectObj=$('#mytable').datagrid("getSelected");
$.ajax({
//请求方式
type:'post',
//指向地址
url:'empattr/'+selectObj.empno,
data:{
"_method":'delete'
},
success:function(r){
if(r.code==0){
$.messager.alert('消息','删除成功');
$('#mytable').datagrid('load',{
});
}else{
$.messager.alert('消息','删除失败');
}
}
})
}
},'_',{
//图标
iconCls: 'icon-search',
text:'查询',
handler:function(){
//定义一个变量
if(hide!=0){
//隐藏查询框
$('#mytable').next().hide();
hide = 0;
}else{
//显示查询框
$('#mytable').next().show();
$('#mytable').textbox({
width:300,
buttonText:'查询',
//图标
iconCls:'icon-search',
//向左对齐
iconAlign:'left',
prompt:'请输入姓名',
//点击事件
onClickButton : function(){
//获取选中对象
$('#mytable').datagrid('load', {
//查询的名字
ename: this.value
});
}
})
hide = 1;
}
}
},'_',{
//图标
iconCls:'icon-edit',
text:'修改',
handler:function(){
//获取表中所选中的行所有参数
var selectObj=$('#mytable').datagrid("getSelected");
//点击图标显示easyui-window隐藏的表单
$("#updateForm").window('open');
//获取选中对象
$("#myupdate").form('load',selectObj);
}
}],
columns:[[
{field:'empno',width:'15%',title:"员工编号",sortOrder:true,checkbox:true},
{field:'ename',width:'15%',title:"员工姓名"},
{field:'sal',width:'15%',title:"员工薪水"},
{field:'job',width:'15%',title:"员工职位"},
{field:'email',width:'15%',title:"员工邮箱"},
{field:'phone',width:'15%',title:"电话号码"}
]]
});
//分页
var pg=$('#mytable').datagrid('getPager');
$(pg).pagination({
pageSize:10,//每页显示的记录条数 默认为10条
pageList:[5,10,15,20],//可以设置每页记录条数的列表
beforePageText:'第',//页数文本框显示的汉字
afterPageText:'页 共{pages} 页',
displayMsg:'当前显示 {from} - {to} 条记录 共{total} 条记录 '
});
})
//新增提交
function submitForm(){
//新增提交点击事件
$('#add').form('submit',{
//type:'post',
//地址
url:'empattr',
//提示消息
success:function(msg){
//转换为JSON对象
msg=JSON.parse(msg);
if(msg.code==0){
$.messager.alert('消息','新增成功');
//刷新页面
$('#mytable').datagrid('load',{
});
//关闭表单
$("#addForm").window('close');
}else{
$.messager.alert('消息','新增失败');
}
}
})
};
//新增重置表单
function clearForm(){
$('#add').form('clear');
}
//修改提交
function submitUpForm(){
//获取表中所选中的行所有参数
var selectObj=$('#mytable').datagrid("getSelected");
修改提交点击事件
$('#myupdate').form('submit',{
//地址
url:'empattr/'+selectObj.empno,
//提示消息
success:function(data){
//转换为JSON对象
msg=JSON.parse(data);
if(msg.code==0){
$.messager.alert('消息','修改成功');
//刷新页面
$('#mytable').datagrid('load',{
});
//关闭表单
$("#updateForm").window('close');
}else{
$.messager.alert('消息','修改失败');
}
}
})
};
function clearUpForm(){
$('#myupdate').form('clear');
}
</script>
</head>
<body>
<h1>分页表格</h1>
<table id="mytable">
</table>
<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="ename" data-options="required:true"></input></td>
</tr>
<tr>
<td>员工薪水:</td>
<td><input class="easyui-textbox" type="text" name="sal" data-options="required:true"></input></td>
</tr>
<tr>
<td>员工职位:</td>
<td><input class="easyui-textbox" type="text" name="job" data-options="required:true"></input></td>
</tr>
<tr>
<td>员工邮箱:</td>
<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>电话号码:</td>
<td><input class="easyui-textbox" type="text" name="phone" data-options="required:true"></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>
<div id="updateForm" class="easyui-window" title="修改员工信息" data-options="iconCls:'icon-save',closed:true" style="width:500px;height:300px;padding:5px;">
<form id="myupdate" method="post">
<!-- 把post格式转化为put格式 -->
<input type="hidden" name="_method" value="put">
<table cellpadding="5">
<tr>
<td>员工姓名:</td>
<td><input class="easyui-textbox" type="text" name="ename" data-options="required:true"></input></td>
</tr>
<tr>
<td>员工薪水:</td>
<td><input class="easyui-textbox" type="text" name="sal" data-options="required:true"></input></td>
</tr>
<tr>
<td>员工职位:</td>
<td><input class="easyui-textbox" type="text" name="job" data-options="required:true"></input></td>
</tr>
<tr>
<td>员工邮箱:</td>
<td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
<td>电话号码:</td>
<td><input class="easyui-textbox" type="text" name="phone" data-options="required:true"></input></td>
</tr>
</table>
</form>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUpForm()">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearUpForm()">重置</a>
</div>
</div>
</body>
</html>
配置文件application.properties
server.port=8888
spring.datasource.url=jdbc:mysql://localhost/zuoye
spring.datasource.username=user1
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.show-sql=true