利用LayUI+MyBatis实现CRUD操作MySQL数据库

CRUD
create（添加）、read（读取）、update（更新）、delete（删除）

使用到的内容
LayUI+MyBatis+MySQL+JSON

功能

功能点1： 同一表单控制添加、查看、修改三类操作
添加一个用户、查看一个用户、修改一个用户

关闭要清空内容，打开渲染数据，修改时采用了隐藏域传输id，因为把id那一栏给禁用掉了，表单数据获取的时候少了id，而后台接收数据的时候要根据id修改

功能点2： 自动跳页处理（添加单个跳页、删除全部跳页、删除单个跳页）

let data = obj.data;// 数据
let thisCurrentPage =parseInt($(".layui-laypage-curr").text());// 当前页
let record = parseInt($("tr:last").attr("data-index")) + 1;// 每页的数据量
let pageSize = $(".layui-laypage-limits select option:selected").val();// 分页大小

• 1）添加一个用户时，当前数据超过了当前页大小就会自动跳页

// 【添加数据跳页】当前记录数如果加上1大于分页条数就要前进一页
thisCurrentPage = record + 1 > pageSize ? thisCurrentPage + 1 : thisCurrentPage;

• 2）删除一个用户时，如果当前数据只有最后一条（也就是唯一的一条即将要删除）的时候自动跳页

// data.length为要删除的数据条数数量
// 【删除数据跳页】要删除的数据条数减去存在记录条数，结果为0就后退一页
if (thisCurrentPage!=1)
	thisCurrentPage = parseInt(data.length) - record == 0 ? thisCurrentPage -1 : thisCurrentPage;
else
	thisCurrentPage = 1

• 3） 删除单个跳页

let data = obj.data;// 数据
let thisCurrentPage =parseInt($(".layui-laypage-curr").text());// 当前页
let record = parseInt($("tr:last").attr("data-index")) + 1;// 每页的数据量
// 【删除数据跳页】减去1时如果等于0，说明只有一条记录，后面执行删除操作就要后退一页
if (thisCurrentPage!=1)
	thisCurrentPage = (record -1) === 0 ? thisCurrentPage -1 : thisCurrentPage;
else
	thisCurrentPage = 1

功能点3：条件查询时，时间是一个范围值，传输的时候采用了数组传输

// 数据处理，主要是把String类型的数据转换成为数组
public String[] getBir() { return bir; }
// 取得范围
public void setBir(String bir) {
	if(!"".equals(bir) && bir.trim()!=null) {
		String [] temp = new String[2]; 
		// 2020-04-10-2050-05-22
		temp[0] = bir.trim().substring(0,10);
		temp[1] = bir.trim().substring(13,23);
		this.bir = temp;
	}else {
		bir = "";
	}
}

<!-- 传输个映射文件的时候，定义一个参数map，获取值时通过下标来访问 -->
<resultMap id="BaseResultMap" type="top.linksinke.bean.Friend">
    <result column="bir" property="bir" jdbcType="DATE" />
</resultMap>
<select id="findMatch" resultMap="top.linksinke.bean.Friend" parameterMap="matchMap">
  select  
  <include refid="Base_Column_List" /> 
  from `friend`
  <where>
    <if test="bir != null" >
      and bir between #{bir[0]} and #{bir[1]}
    </if>
  </where>
  limit #{startNo},#{endNo}
</select>

功能点4：条件查询时，前端对条件进行了值不为空的循环判断，只要有一个不为空就执行
采用了数组形式，把条件参数放到数组里，然后判断值是否为空

var newArr = new Array([name.val()],[gender.val()],[schoolName.val()],[bir.val()],[addr.val()]);
for (var value of newArr) {
	if(value!=""){
		// 执行查询操作
	}else {
		// 此处没有任何操作
	}
}

功能点5：乱码处理，针对条件查询发送请求参数到后台，也就是servlet

这里写成了公用的方法，经常用，肯定不能一直重复写

// 解决乱码，页面用 encodeURIComponent(name.val()) 进行参数编码，后台解码数据
private static String decodeStrUTF8(String str) {
	String encodeStr = null;
	try {
		encodeStr = URLDecoder.decode(str, "UTF-8");
	} catch (Exception e) {
		e.printStackTrace();
	}
	return encodeStr;
}

jsp页面条件查询的代码，对于用户输入的中文进行编码，可以参考js函数encodeURI()
https://www.w3school.com.cn/js/jsref_encodeuri.asp

整体效果

• 默认显示
  
• 条件查询
  

代码下载：
https://download.csdn.net/download/qq_29001539/12340097