SpringBoot自定義排序

項目需求： 在文本框中填寫序號，讓顯示的順序根據序號的變換而更改。
效果圖（用的blur觸發事件，看起來不太舒服）：

圖片中可以看到，當我刪除序號後，會自動填充0.（在添加內容的時候沒有序號這一項，添加完成後默認爲空，爲空後會在第一個顯示）。當我把4改1後自動向上移動。
不足： 更改後是通過刷新頁面來展示效果的，不圓潤。觸發方式不太合適。
代碼介紹： 首先數據庫中要有相應的字段來存儲用來排序的字段。兩種解決方案，一種是根據id進行單個字段的更改，更改後並按照該字段進行排序顯示。另一種是使用全局的修改，先根據id查詢出全部內容，在將更改後的序號替換原來的序號，其他字段使用查詢出內容。第一種方法好理解，但是代碼多。第二種理解起來想對第一種難一點，但是代碼可以重複使用。裏面因爲需求原因，包含一些分頁代碼，但是不全面。需要的話我的其它文章中有詳細介紹分頁的（代碼全面）

前端代碼

<tr v-for="(ne,key) in news"><!-- news 是我查出全部數據後保存數據的數組（key是關鍵字，可以理解爲數組的下標） -->
<td>
 	<input type="text"  
 	v-model="ne.px" v-on:blur="findSort(ne.nid,ne.px)" 
 	style="width: 25px; line-height: 17px; display: inline-block" />
 	<!-- 這裏調用方法傳的兩個參數，第一個是內容的id；另一個是序號 -->
</td>
</tr>

這就是那個要輸入序號的文本框,沒什麼需要注意的，就那個v-model的值px是數據庫中的字段名

data:{
	news:[],
},
methods:{
	//排序	點擊排序觸發方法
		//方法需要獲取id、更新後的序號	控制層：根據id修改要更改的字段，改且只改一個字段，其他字段禁止更改
	findSort:function(id,px){
		if(px==null || px==""){//如果px沒有值，就給他賦值爲0，避免保存
			px=0;
		}
		$.post("/news/sorts",{nid:id,px:px},function(data){
			//alert(data);
			window.location.href="/admin/news";//news方法是寫在controller中查詢全部數據的方法
		});
	},
}

controller代碼

//排序，這裏我用的是第一個方法，第二個沒有測試，但是代碼是那樣寫的
	@RequestMapping("sorts")
	@ResponseBody
	public String sorts(HttpServletRequest req) {
		String nid = req.getParameter("nid");
		String px = req.getParameter("px");
		if(px==null||px=="") {//在這裏判斷意義不大，但是還是加上好
			px="0";
		}
		newsServicel.sorts(nid, px);//service層代碼下面有
		return "success";//返回值隨意寫，唯一的用處就是可以在js中判斷一下是否執行了，意義不大
	}
	//排序方法二
	public String sort2(HttpServletRequest req) {
		String nid = req.getParameter("nid");
		String px = req.getParameter("px");
		if(px==null||px=="") {
			px="0";
		}
		News news = newsServicel.findId(nid);//findId是通過id查詢所有的方法，代碼就不單獨貼出來了
		news.setNid(nid);
		news.setPx(px);
		newsServicel.save(news);//save是添加的方法
		return "succell";
	}
//排序完成後就是要顯示了，下面代碼就是根據px字段進行排序顯示的
//這是分頁的代碼，如果不使用分頁的話可以在sql語句中添加order by px ASC
@RequestMapping("findLikeTitle")
@ResponseBody
public Page<List<Map>> findLikeTitle(HttpServletRequest req) {
	//接收當前頁
	Integer page = Integer.parseInt(req.getParameter("page"));
	//需要根據title、id進行迷糊查詢
	String title = req.getParameter("title");
	String id = req.getParameter("id");
	Sort sort = null;
	//括號中出來“px”，其他都是關鍵字
	sort = new Sort(Sort.Direction.ASC, "px");
	//爲了前端效果，頁面顯示是從1開始，但是分頁默認是從0開始，所有這裏page要-1.4是沒頁顯示的條數，sort關鍵字
	Pageable pageable = PageRequest.of(page - 1, 4, sort);
	Page<List<Map>> data = newsServicel.findeLikeTitle(pageable, title, id);
	return data;
	}

service代碼

//排序
@Transactional//別問爲什麼寫這個註解，我只知道不寫不對
public void sorts(String nid,String px){
	 newsDAO.sorts(nid,px);
}

//模糊查詢、分頁。
	public Page<List<Map>> findeLikeTitle(Pageable page,String title,String id){
		return newsDAO.findBytitleLike(page,"%"+title+"%","%"+id+"%");
	}

DAO層代碼

//排序
@Query(value="update news set px = :px where nid=:nid",nativeQuery = true)//不使用分頁查詢可以在value中追加order by px ASC實現根據px排序
@Modifying//單個修改必須寫的註解
void sorts(String nid,String px);


//分頁模糊查詢表連接
@Query(value="select * from news n join type t on n.t_id=t.tid where title like concat('%',:title,'%') and t_id like concat('%',:id,'%')",nativeQuery = true)
Page<List<Map>> findBytitleLike(Pageable page,String title,String id);

到這裏排序就完成了。不足之處就是需要刷新以下頁面才能查看到效果，不太圓潤。還有什麼不足之處，歡迎指正。