利用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 {
		// 此處沒有任何操作
	}
}

整體效果

• 默認顯示
  
• 條件查詢
  

代碼下載：
https://download.csdn.net/download/qq_29001539/12340097