restful的認識和使用(包括controller、service、前端ajax的整個用法)
阿新 • • 發佈:2018-12-13
一、restful的認識 (1)RESTful是一種架構的規範與約束、原則,符合這種規範的架構就是RESTful架構。 (2)簡單概括 /emp/{id} GET查詢一個員工 /emp GET查詢所有員工 /emp POST儲存一個員工 /emp/{id} PUT修改一個員工 /emp/{id} DELETE刪除一個員工 二、具體使用 (1)根據id查詢一個員工 ------controller端-----
@RequestMapping("/emp/{empId}") @ResponseBody public Emp getEmpById(@PathVariable Long empId) { Emp emp= empService.getEmpById(empId); return emp; } <!--Emp就一個pojo-->
------serviceImpl端-----
@Override
public Emp getEmpById(long empId) {
Emp emp = empMapper.selectByPrimaryKey(empId);
return emp;
}
------前端的ajax-----
function getEmp(empId){ $.ajax({ url : "${Pro_Path}/emp/"+empId, type : "GET", //請求成功的回撥函式 success : function(result) { $("#一個input的id").val(result.empName); } }); }
(2)查詢所有員工 ------controller端-----
<!-- 分頁查詢的引數:page傳入頁碼,rows以及每頁的大小-->
@RequestMapping("/emp/list")
@ResponseBody
public PageInfo getEmpList(Integer page, Integer rows) {
return empService.getEmpList(page, rows);
}
------serviceImpl端-----
public PageInfo getEmpList(int page, int rows) { //設定分頁資訊 PageHelper.startPage(page, rows); //執行查詢 EmpExample example = new EmpExample(); List<Emp> list = empMapper.selectByExample(example); //取查詢結果 PageInfo<Emp> pageInfo = new PageInfo<>(list); //返回結果 return pageInfo; }
------前端的ajax-----
function to_page(page) {
$.ajax({
url : "${Pro_Path}/emp/list",
data: '{"page": page, "rows": 8}',
type : "GET",
//請求成功的回撥函式
success : function(result) {
//資料表單展示:
$.each(result.list,function(index, item) {
//將表格內容顯示出來
var checkBoxTd=$("<td><input type='checkbox'/></td>");
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
$("<tr></tr>").append(checkBoxTd).append(empIdTd).append(empNameTd).appendTo("#tbody的id");
});
頁面情況展示:
$("#div的id").append("當前第" + result.pageNum + "頁 共有" + result.pages+ "頁 總計" + result.total + "條記錄");
頁數導航:
var ul = $("<ul></ul>");
$.each(result.navigatepageNums, function(index, item) {
var eachPgaeNumLi = $("<li></li>").append(
$("<a></a>").append(item));
//新增單擊事件
eachPgaeNumLi.click(function() {
to_page(item);
});
ul.append(eachPgaeNumLi);
});
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#div的id");
}
});
}
(3)儲存一個員工 ------controller端-----
//儲存員工(一般有用到jsr303校驗)
@RequestMapping(value="/saveEmp",method=RequestMethod.POST)
@ResponseBody
public DataResult saveEmp(@Valid Employee employee,BindingResult result) {
if(result.hasErrors()) {
Map<String,Object> map=new HashMap<String,Object>();
//result校驗失敗,應該返回失敗 ,在模態框中顯示校驗失敗的錯誤資訊
List<FieldError> errors=result.getFieldErrors();
for (FieldError fieldError : errors) {
map.put(fieldError.getField(), fieldError.getDefaultMessage());
}
DataResult.build( DataResult.error ,null, map);
}else {
return employeeService.saveEmp(employee);
}
}
<!--DataResult是一個處理結果的pojo,
包含屬性 :
響應業務狀態 private Integer status;
響應訊息 private String msg;
響應中的資料 private Object data; -->
------serviceImpl端-----
public DataResult saveEmp(Employee employee) {
employeeMapper.insertSelective(employee);
return DataResult.ok();
}
------前端的ajax-----
$.ajax({
url:"${Pro_Path}/saveEmp",
type:"POST",
data:$("#form的id").serialize(),
success:function(result){
//儲存成功後:
if(result.status==100){
。。。此處省略。。。
}else{
// 儲存失敗後
//如果有郵箱的錯誤資訊
if(result.data.email!=undefined){
。。。此處省略。。。
}
//如果有使用者名稱的錯誤
if(result.data.empName!=undefined){
。。。此處省略。。。
}
}
}
});
(4)根據id修改某個實體 ------controller端-----
/*
* 根據id修改員工
* 注意傳遞的id名字要和Employee 的屬性名一樣
*/
@RequestMapping(value="/updateEmp/{empId}",method=RequestMethod.PUT)
@ResponseBody
public DataResult updateEmp(Employee employee) {
return employeeService.updateEmp(employee);
}
------serviceImpl端-----
public DataResult updateEmp(Employee employee) {
employeeMapper.updateByPrimaryKeySelective(employee);
return DataResult.ok();
}
------前端的ajax-----
var id=$(this).attr("edit-id");
$.ajax({
url : "${Pro_Path}/updateEmp/"+id,
type : "POST",
data:$("#form的id").serialize()+"&_method=PUT",
success : function(result) {
}
});
(5)刪除一個使用者 ------controller端-----
@RequestMapping(value="/deleteEmpById/{id}",method=RequestMethod.DELETE)
@ResponseBody
public DataResult deleteEmpById(@PathVariable("id")Integer id) {
return employeeService.deleteEmpById(id);
}
------serviceImpl端-----
public DataResult deleteEmpById(Integer id) {
employeeMapper.deleteByPrimaryKey(id);
return DataResult.ok();
}
------前端的ajax-----
$.ajax({
url : "${Pro_Path}/deleteEmpById/"+empId,
type : "DELETE",
success : function(result) {
}
});
(6)批量刪除多個使用者 ------controller端-----
@RequestMapping(value="/deleteEmpsById/{ids}",method=RequestMethod.DELETE)
@ResponseBody
public ProcessMsg deleteEmpsById(@PathVariable("ids")String ids) {
//如果是多個id
if(ids.contains("-")) {
String[] str_id=ids.split("-");
List<Integer> list_id=new ArrayList<Integer>();
for(String item_id:str_id) {
list_id.add(Integer.parseInt(item_id));
}
return employeeService.deleteBatch(list_id);
//如果是一個id
}else {
return employeeService.deleteEmpById(Integer.parseInt(ids));
}
}
------serviceImpl端-----
public DataResult deleteBatch(List<Integer> str_id) {
EmployeeExample employeeExample=new EmployeeExample();
Criteria criteria=employeeExample.createCriteria();
criteria.andEmpIdIn(str_id);
employeeMapper.deleteByExample(employeeExample);
return DataResult.ok();
}
public DataResult deleteEmpById(Integer id) {
employeeMapper.deleteByPrimaryKey(id);
return DataResult.ok();
}
------前端的ajax-----
$("#emp_delete_all_btn").click(function() {
var del_id_str="";
$.each($(".check_item:checked"),function(){
del_id_str+=$(this).parents("tr").find("td:eq(1)").text()+"-";
});
//去除最後一個逗號,分號
del_id_str=del_id_str.substring(0 , del_id_str.length-1);
$.ajax({
url : "${Pro_Path}/deleteEmpsById/"+del_id_str,
type : "DELETE",
success : function(result) {
}
});
});