1. 程式人生 > >restful的認識和使用(包括controller、service、前端ajax的整個用法)

restful的認識和使用(包括controller、service、前端ajax的整個用法)

一、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) {

				}
			});
		});