1.导入依赖

我这里用的是maven项目，先在pom.xml中加入依赖：

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com..ps</groupId>
    <artifactId>SPRING_MVC_JSON</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

    <!-- 继承默认值为Spring Boot -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.17.RELEASE</version>
    </parent>
    <dependencies>
        <!-- 集成spring MVC -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- 集成mysql -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <!-- mysql驱动包 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!-- 阿里巴巴druid数据库连接池 -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.1.10</version>
        </dependency>
        <!-- 开发工具：修改java代码无须重新运行 -->
        <dependency>	   
            <groupId>org.springframework.boot</groupId>    
            <artifactId>spring-boot-devtools</artifactId>    
            <optional>true</optional>
        </dependency>
        <!--作字符串判读功能-->
        <dependency>
            <groupId>commons-lang</groupId>
            <artifactId>commons-lang</artifactId>
            <version>2.2</version>
        </dependency>
        <!--集成mybatis-plus-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.0-RC1</version>
        </dependency>

    </dependencies>
</project>

2.添加资源文件

在你的resources目录下添加application.properties文件，文件名字固定：

server.port=8081
#mysql
spring.datasource.url=jdbc:mysql://localhost:3306/m1dn
spring.datasource.username=root
spring.datasource.password=ps123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

#Druid
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.druid.stat-view-servlet.login-username=druid
spring.datasource.druid.stat-view-servlet.login-password=123456

3.java代码

结构图：
在这里插入图片描述
3.1:Main类

@SpringBootApplication
public class Main {
	public static void main(String[] args) throws Exception {
        SpringApplication.run(Main.class, args);
    }

    @EnableTransactionManagement
    @Configuration
    @MapperScan("com.baomidou.cloud.service.*.mapper*")
    public class Config {
        /**
         * 分页插件
         */
        @Bean
        public PaginationInterceptor paginationInterceptor() {
            return new PaginationInterceptor();
        }
    }
}

3.2:controller(控制层)：
EmpServlet.java:

@RestController
public class EmpServlet{
    @Autowired
    private EmpService service;

    @GetMapping(value = "/emps")
    public Result emps(String checkName,String sal ,String page, String limit ){
        Result result = null;
        try {
            result = service.queryEmps(checkName,sal ,page, limit);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return result;
    }

    @PostMapping(value = "/emp")
    public Result addEmp(Emp emp){
        Result result = new Result();
        try {
            service.addEmp(emp);
        }catch (Exception e){
            result.setCount(1);
            result.setMsg("新增失败"+e.getMessage());
        }
        return result;
    }

    @PutMapping(value = "/emp/{userId}")
    public Result updateEmp(@PathVariable String userId,Emp emp){
        Result result = new Result();
        try {
            service.updateEmp(emp,userId);
        }catch (Exception e){
            result.setCount(1);
            result.setMsg("修改失败"+e.getMessage());
        }
        return result;
    }

    @DeleteMapping(value = "/emp/{userId}")
    public Result updateEmp(@PathVariable String userId){
        Result result = new Result();
        try {
            service.delete(userId);
        }catch (Exception e){
            result.setCount(1);
            result.setMsg("删除失败"+e.getMessage());
        }
        return result;
    }
}

3.3:entity（实体类）层
Emp.java类：

@TableName("emp")
public class Emp {
	@TableId(type= IdType.AUTO)
	private String empno;
	private String ename;
	private String job;
	@TableField("sal")
	private String mySal;
	private String hiredate;
}

Result.java类：

public class Result {
    private int code;
    private String msg;
    private int count;
    private List data;
}

注意：这两个类的set，get的方法就不展示给你们看了，实际是要加的；

3.4：mapper层
EmpMapper.java类：

@Mapper
public interface EmpMapper extends BaseMapper<Emp> {

}

3.5：service层
EmpService.java接口：

public interface EmpService {
	public Result queryEmps(String checkName, String sal, String curPage, String pageNum) throws Exception;

	public void addEmp(Emp emp);

    void updateEmp(Emp emp, String userId);

	void delete(String userId);
}

EmpServiceImpl.java实现类：

@Service
public class EmpServiceImpl implements EmpService {
	@Autowired
	private EmpMapper empMapper;

	public Result queryEmps(String checkName, String sal, String curPage, String pageNum) throws Exception {
		int curPageIn = Integer.parseInt(curPage);
		int pageNumIn = Integer.parseInt(pageNum);

		if(StringUtils.isEmpty(checkName)) {
			checkName = "";
		}

		//	    条件构造器
		QueryWrapper wrapper = new QueryWrapper();
		wrapper.like("ename", checkName);
		if(StringUtils.isNotEmpty(sal)) {
			wrapper.le("sal", Integer.parseInt(sal));
		}											  // 这里是分页传入的参数：页数和数据量		// 条件构造器
		IPage<Emp> selectPage = empMapper.selectPage(new Page(curPageIn,pageNumIn), wrapper);

		Result result = new Result();
		result.setCode(0);
		result.setCount((int)selectPage.getTotal());
		result.setData(selectPage.getRecords());
		return result;
	}

	public void addEmp(Emp empValue) {
		empMapper.insert(empValue);
	}

	public void updateEmp(Emp empValue,String userId) {
		empValue.setEmpno(userId);
		empMapper.updateById(empValue);
	}

	public void delete(String userId) {
        empMapper.deleteById(userId);
	}
}

4..html文件

showEmp.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="resources/layui/css/layui.css">
<script src="resources/layui/layui.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	layui.use('form', function() {
		var form = layui.form;
		form.on('submit(myForm)', function(data) {
			/*
			    因为在下面已经var了一个table对象所以可以直接用，但是前面一定要加上layui
			 */
			layui.table.reload('EmpTable', {
				url : 'emps',
				where : data.field
			//设定异步数据接口的额外参数
			//,height: 300
			});
			return false;
		});
		
		form.verify({
		  sal: function(value, item){ //value：表单的值、item：表单的DOM对象
			  if(!new RegExp("^([1-9]*[0-9](\.[0-9]+)?)?$").test(value)){
				 return "只能输入数字!";
			  }
		  }
		}); 

		form.on('submit(add)', function(data) {
			console.log(data);
			$.ajax({
				url : 'emp',
				dataType : 'json',
				data : data.field,
				type : 'POST',
				success : function(result) {
					if (result.code == 0) {
						alert("增加成功");
						layer.close(addWindow);
						layui.table.reload('EmpTable', {
							url : 'emps',
							where : data.field
						//设定异步数据接口的额外参数
						});
					} else {
						alert(result.msg);
					}
				}
			});
			return false;
		});

		form.on('submit(update)', function(data) {
			data.field["_method"] = "put";
			$.ajax({
				url : 'emp/' + data.field.empno,
				dataType : 'json',
				data : data.field,
				type : 'POST',
				success : function(result) {
					if (result.code == 0) {
						alert("修改成功");
						layer.close(addWindow);
						layui.table.reload('EmpTable', {
							url : 'emps',
							where : data.field
						//设定异步数据接口的额外参数
						});
					} else {
						alert(result.msg);
					}
				}
			});
			return false;
		});
	});
	var addWindow = null;
	function addData() {
		$("#addButton").show();
		$("#updateButton").hide();
		$("input[name=ename]").val("");
		$("input[name=job]").val("");
		$("input[name=mySal]").val("");
		$("input[name=hiredate]").val("");
		layui.use('layer', function() {
			addWindow = layer.open({
				type : 1,
				area : [ '450px', '500px' ],
				content : $('#addForm')
			});
		});

	}

	function deleteData(empno) {
		$.ajax({
			url : 'emp/' + empno,
			dataType : 'json',
			data : {
				"_method" : 'delete'
			},
			type : 'POST',
			success : function(result) {
				if (result.code == 0) {
					alert("删除成功");
					layui.table.reload('EmpTable', {
						url : 'emps',
						page : 1
					});
				} else {
					alert(result.msg);
				}
			}
		});
		return false;
	}

	function updateData(_this) {
		$("#addButton").hide();
		$("#updateButton").show();
		/*
		    event.srcElement是拿到当前对象
		 *   JSON.parse()是将对象转JSON对象
		 * */
		var scources = JSON.parse(_this.getAttribute("data"));
		layui.form.val("update", scources);
		layui.use('layer', function() {
			addWindow = layer.open({
				type : 1,
				area : [ '450px', '500px' ],
				content : $('#addForm')
			});
		});

	}

	

	layui.use('table', function() {
		var table = layui.table;
		//第一个实例
		table.render({
			elem : '#EmpTable',
			height : 312,
			url : 'emps' //数据接口
			,
			page : true //开启分页
			,
			cols : [ [ //表头
					{
						field : 'empno',
						title : '雇员ID',
						width : '15%',
						sort : true,
						fixed : 'left'
					},
					{
						field : 'ename',
						title : '雇员名称',
						width : '15%'
					},
					{
						field : 'job',
						title : '职务',
						width : '15%',
						sort : true
					},
					{
						field : 'mySal',
						title : '薪水',
						width : '15%'
					},
					{
						field : 'hiredate',
						title : '入职时间',
						width : '15%'
					},
					{
						field : 'delete',
						title : '操作',
						width : '15%',
						templet : function(d) {
							var str = JSON.stringify(d);
							return "<button onclick=deleteData(" + d.empno
									+ ")>删除</button>&nbsp;&nbsp;&nbsp;" +
									/*"<button onclick=updateData('"+d.ename+"','"+d.job+"','"+d.sal+"','"+d.hiredate+"','"+d.empno+"')>修改</button>";*/
									"<button onclick=updateData(this) data="
									+ str + ">修改</button>"
						}
					} ] ]
		});
	});
</script>

<body>
	<form class="layui-form" action="" method="get">
		<div class="layui-inline">
			
			<div class="layui-input-inline" style="width: 200px;">
				<label class="layui-form-label">雇员名称</label>
				<input type="text" name="checkName" autocomplete="off"
					class="layui-input">
			</div>
			
			<div class="layui-input-inline" style="width: 200px;">
				<label class="layui-form-label">雇员薪水</label>
				<input type="text" name="sal" lay-verify="sal" autocomplete="off" class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 100px;">
				<button class="layui-btn" lay-submit lay-filter="myForm">查询</button>
			</div>
			<div class="layui-input-inline" style="width: 100px;">
				<a href="javascript:addData()" class="layui-btn">新增</a>
			</div>
		</div>
	</form>
	<table id="EmpTable"></table>
</body>

<form class="layui-form" action="" style="display: none" id="addForm"
	lay-filter="update">
	<div class="layui-form-item" style="display: none;">
		<label class="layui-form-label">雇员编号</label>
		<div class="layui-input-block">
			<input type="text" name="empno" autocomplete="off"
				class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">雇员名称</label>
		<div class="layui-input-block">
			<input type="text" name="ename" lay-verify="required"
				autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">雇员职位</label>
		<div class="layui-input-block">
			<input type="text" name="job" lay-verify="required"
				autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">雇员薪水</label>
		<div class="layui-input-block">
			<input type="text" name="mySal" lay-verify="number" autocomplete="off"
				class="layui-input">
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">入职时间</label>
		<div class="layui-input-block">
			<input type="text" name="hiredate" lay-verify="date"
				autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-form-item" id="addButton">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>


	<div class="layui-form-item" id="updateButton">
		<div class="layui-input-block">
			<button class="layui-btn" lay-submit lay-filter="update">立即提交</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>

</form>
</html>

注意，这里我运用的layui框架
在这里插入图片描述

5.数据库表，以及运行效果

在这里插入图片描述
然后直接运行Main类的main方法，再去浏览器上看效果：
在这里插入图片描述

版权声明：本文为wufewu原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/wufewu/article/details/84595061