RESTful風格 以及small case !
2020-09-28 11:02:05
一. RESTful概念:
官方解釋:
RESTFUL是一種網路應用程式的設計風格和開發方式，基於HTTP，可以使用XML格式定義或JSON格式定義。RESTFUL適用於行動網際網路廠商作為業務使能介面的場景，實現第三方OTT呼叫行動網路資源的功能，動作型別 為 新增、變更、刪除所呼叫資源.
場景：
不同顯示端 以及不同的平臺系統
要求我們開發的軟體需要多套前端資源對應一個後臺程式
前後端分離開發
所有前端資源都是html 都是通過ajax來發出請求 通過json來封裝資料
RestFul為前後端分離開發時 為前端請求和後臺action的url定義統一的url規範
所有的功能：增刪改查操作
二. RESTful的url規範:
這裡以對Exam類的操作 統一的虛擬目錄為 /exams 如：
@Controller
@RequestMapping("/exams")
public class ExamAction {
}
新增一個
請求方式：POST
請求引數： json物件
請求url: /exams
刪除一個
請求方式：DELETE
請求引數： 無
請求url: /exams/{id}
修改一個
請求方式：PUT
請求引數： json物件
請求url: /exams
獲取一個
請求方式：GET
請求引數：無
請求url: /exams/{id}
獲取所有
請求方式：GET
請求引數：無
請求url: /exams
條件查詢
請求方式：GET
請求引數：無
請求url: /exams/{xxx}/{xxx}
三. RESTful的初次體驗(小案例):
先來做一下準備工作:
準備工作1：建立實體類：ResponseEntity:封裝響應狀態碼+響應提示資訊+響應資料
實現序列化介面Serializable
public class ResponseEntity<T> implements Serializable{
private Integer status;/*響應狀態碼*/
private String message;/*狀態描述資訊*/
private T obj;/*響應的j物件 需要轉換為json串*/
}
準備工作2： 建立Dao層實現類ExamDaoImpl實現ExamDao介面 對增刪改新增事務提交
@Repository//加上註解(好像加不加無所謂)
public class ExamDaoImp implements ExamDao{
public List<Exam> getAllByEnameOrEtime(String ename, Date etime){
return getSession().createQuery("from com.zhiyou100.entity.Exam where ename=:en or etime=:et")
.setString("en",ename).setDate("et",etime).list();
}
//分頁查詢
public List<Exam> getAllFenYe(int startIndex,int pageSize){
Query query=getSession().createQuery("from com.zhiyou100.entity.Exam order by etime desc");
query.setMaxResults(pageSize);
query.setFirstResult(startIndex);
return query.list();
}
@Autowired
private SessionFactory factory;
private Session getSession(){
return factory.openSession();
}
@Override
public void addOne(Exam o) {//加上事務
Session session=getSession();
session.beginTransaction();
session.save(o); System.out.println("新增"+o);
session.getTransaction().commit();;
}
@Override
public void deleteOne(Integer integer) {//加上事務
Session session=getSession();
session.beginTransaction();
Exam e=session.get(Exam.class,integer);
session.delete(e);System.out.println("刪除"+e);
session.getTransaction().commit();
}
@Override
public void updateOne(Exam e) {//加上事務
Session session=getSession();
session.beginTransaction();
session.update(e); System.out.println("修改"+e);
session.getTransaction().commit();
}
}
準備工作3： 給exam提供一個etimeStr是etime的字串形式 並且保證永遠同步.
public class Exam implements Serializable{
private static SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
private Integer eid;
private String ename;
private Date etime;//Date型別
private String etimeStr;//字串型別
public Date getEtime() {
if(etime==null){
try {
etime=sdf.parse(etimeStr);
}catch (Exception e){
throw new RuntimeException(e);
}
}
return etime;
}
public void setEtime(Date etime) {
this.etime = etime;
etimeStr=sdf.format(etime);
}
public String getEtimeStr() {
if(etimeStr==null&&etimeStr.trim().length()==0){
etimeStr=sdf.format(etime);
}
return etimeStr;
}
public void setEtimeStr(String etimeStr) {
this.etimeStr = etimeStr;
try {
etime=sdf.parse(etimeStr);
}catch (Exception e){
throw new RuntimeException(e);
}
}
}
準備工作4：為了實現檔案上傳：給exam再新增一個屬性url 記錄本次考試的題目文字.
private String url;//考試的題目文字
獲取一個:
controller層
//獲取一個
@RequestMapping(value ="/restful_exams/{id}",method ={RequestMethod.GET})
public @ResponseBody ResponseEntity<Exam> getOne(@PathVariable("id") int eid){
System.out.println("getOne");
Exam e=examService.getOn (eid);
return new ResponseEntity<Exam>(200,null,e);
}
jsp頁面
<h1>獲取一個</h1>
<input type="button" value="測試restful獲取一個" onclick="getOne(3)"/><br/>
<script type="text/javascript">
function getOne(id){
$.ajax({
type:"GET",
data:null,
url:"<c:url value='/'/>restful_exams/"+id+".action",
dataType:"json",
async:true,
success:function(data){
alert(data);
alert(data.obj.ename+"::"+data.obj.eid+":"+data.obj.etimeStr);
}
});
}
</script>
獲取所有
controller層
@RequestMapping(value ="/restful_exams",method ={RequestMethod.GET})
public @ResponseBody ResponseEntity<List<Exam>> getAll(){
System.out.println("getAll");
List<Exam> list=examService.getAll();
return new ResponseEntity<List<Exam>>(200,null,list);
}
jsp頁面
<h1>獲取所有</h1>
<input type="button" value="測試restful獲取所有" onclick="getAll()"/><br/>
<script type="text/javascript">
function getAll(){
$.ajax({
type:"GET",
data:null,
url:path+"restful_exams.action",
dataType:"json",
async:true,
success:function(data){
for(var i=0;i<data.obj.length;i++){
alert(data.obj[i].ename+"::"+data.obj[i].eid);
}
}
});
}
</script>
按條件獲取:分頁查詢
controller層
//分頁查詢
@RequestMapping(value ="/restful_exams/{startIndex}/{pageSize}",method ={RequestMethod.GET})
public @ResponseBody ResponseEntity<List<Exam>> getAllFenYe(@PathVariable("startIndex")Integer startIndex, @PathVariable("pageSize")Integer pageSize)throws Exception{
System.out.println("getAllFenYe");
List<Exam> list=examService.getAllFenYe(startIndex,pageSize);
return new ResponseEntity<List<Exam>>(200,null,list);
}
jsp頁面
<h1>按條件查詢：分頁查詢</h1>
<form id="form_getAllFenYe">
起始索引：<input type="text" name="startIndex"/><br/>
每頁記錄數：<input type="text" name="pageSize"/><br/>
<input type="button" value="分頁查詢" onclick="getAllFenYe()"/>
</form>
<script type="text/javascript">
function getAllFenYe(){
//獲取ename和etime
var startIndex=$("input[name='startIndex']").val();
var pageSize=$("input[name='pageSize']").val();
//通過ajax請求action
$.ajax({
data:null, //
type:"GET",
dataType:"json",
url:path+"restful_exams/"+startIndex+"/"+pageSize+".action",
success:function(responseEntity){
alert(responseEntity.obj.length);
}
});
}
</script>
新增一個
方式一:拼湊字串把表單轉換為json物件
controller層
//新增一個：接受json物件
@RequestMapping(value ="/restful_exams1",method ={RequestMethod.POST})
@ResponseBody
public ResponseEntity<Exam> addOne1(@RequestBody Exam exam){
System.out.println("addOne1");
examService.addOne(exam);
return new ResponseEntity<Exam>(200,"新增成功",null);
}
jsp頁面
<h1>新增一個：自己把表單 拼湊成json串</h1>
<form id="tab_add1">
考試名稱：<input type="text" name="ename"/><br/>
考試時間：<input type="text" name="etimeStr" placeholder="格式：xxxx-xx-xx"/><br/>
<input type="button" value="新增一個:拼湊json" onclick="addOne1()"/><br/>
</form>
<script type="text/javascript">
function addOne1(){
//通過ajax把form_add對應的資料封裝成json串 通過post方式 提交給action
var ename=$("#tab_add1 input[name='ename']").val();
var etimeStr=$("#tab_add1 input[name='etimeStr']").val();
var jsonData={"ename":ename,"etimeStr":etimeStr};
//通過ajax把json物件傳送給action
$.ajax({
data:JSON.stringify(jsonData), //傳遞給java的必須時json串 不是json物件
contentType:"application/json", //請求引數時json串時 新增請求頭
type:"POST",
dataType:"json",
url:path+"restful_exams1.action",
success:function(responseEntity){
alert(responseEntity.message);
}
});
}
</script>
方式二:通過FormData方法把表單中的資料轉換為formdata物件
controller層
//新增一個：接受formdata的資料 用普通引數即可
@PostMapping(value ="/restful_exams2")
@ResponseBody
public ResponseEntity<Exam> addOne2(Exam exam){
System.out.println("addOne2");
examService.addOne(exam);
return new ResponseEntity<Exam>(200,"新增成功",null);
}
jsp頁面
<h1>新增一個：fromdate方法獲取表單對應的formdata物件</h1>
<form id="form_add2">
考試名稱：<input type="text" name="ename"/><br/>
考試時間：<input type="text" name="etimeStr"/><br/>
<input type="button" value="新增一個:fromdate方法" onclick="addOne2()"/>
</form>
<script type="text/javascript">
function addOne2(){
//獲取表單對應的json物件串
var jsonData2=new FormData($("#form_add2")[0]);
// var jsonData2=new FormData();
// jsonData2.append("ename",$("#form_add2 input[name='ename']").val());
// jsonData2.append("etimeStr",$("#form_add2 input[name='etimeStr']").val());
//通過ajax把json物件傳送給action
$.ajax({
data:jsonData2, //傳遞的時formdata物件
processData: false,//formdata物件不能設定請求頭processData和contentType
contentType: false,
type:"POST",
dataType:"json",
url:path+"restful_exams2.action",
success:function(responseEntity){
alert(responseEntity.message);
}
});
}
</script>
修改一個
controller層
//修改一個
//@RequestMapping(value ="/exams",method ={RequestMethod.PUT})
@PutMapping("/restful_exams")
@ResponseBody
public ResponseEntity<String> updateOne(@RequestBody Exam exam)throws Exception{
System.out.println("updateOne");
examService.updateOne(exam);
return new ResponseEntity<String>(200,"修改成功！",null);
}
jsp頁面(寫法一:)自己拼湊json物件
<h1>修改一個</h1>
<form id="form_update">
考試編號：<input type="text" name="eid"/><br/>
考試新名稱：<input type="text" name="ename"/><br/>
考試新時間：<input type="text" name="etimeStr" placeholder="格式：xxxx-xx-xx"/><br/>
<input type="button" value="修改一個" onclick="updateOne1()"/>
</form>
<script type="text/javascript">
function updateOne1(){
//獲取json串方法1 自己拼接
var ename=$("#form_update input[name='ename']").val();
var etimeStr=$("#form_update input[name='etimeStr']").val();
var eid=$("#form_update input[name='eid']").val();
var jsonData={"ename":ename,"etimeStr":etimeStr,"eid":eid};
var jsonStr=JSON.stringify(jsonData);//把json物件轉換為json串
$.ajax({
data:jsonStr,//
contentType:"application/json", //請求引數時json串時 新增請求頭
type:"PUT",
dataType:"json",
url:path+"restful_exams.action",
success:function(responseEntity){
alert(responseEntity.message);
}
});
}
</script>
jsp頁面(寫法二:)通過jquery的jquery.serializejson.min.js實現把表單轉換為json串
//先引入jquery.serializejson.min.js
<script type="text/javascript" src="<c:url value='/js/jquery.serializejson.min.js'/>"></script>
<h1>修改一個</h1>
<form id="form_update">
考試編號：<input type="text" name="eid"/><br/>
考試新名稱：<input type="text" name="ename"/><br/>
考試新時間：<input type="text" name="etimeStr" placeholder="格式：xxxx-xx-xx"/><br/>
<input type="button" value="修改一個" onclick="updateOne1()"/>
</form>
<script type="text/javascript">
function updateOne1(){
//獲取json串方法2： 通過jquery.serializejson.min.js的serializeJSON方法
var jsonStr=JSON.stringify($('#form_update').serializeJSON());
$.ajax({
data:jsonStr,//
contentType:"application/json", //請求引數時json串時新增請求頭
type:"PUT",
dataType:"json",
url:path+"restful_exams.action",
success:function(responseEntity){
alert(responseEntity.message);
}
});
}
</script>
刪除一個
controller層
//刪除一個
@RequestMapping(value ="/restful_exams/{id}",method ={RequestMethod.DELETE})
public @ResponseBody ResponseEntity<String> deleteOne(@PathVariable("id") Integer eid){
System.out.println("deleteOne");
examService.deleteOne(eid);
return new ResponseEntity<String>(200,"刪除成功！",null);
}
jsp頁面
<h1>刪除一個</h1>
<form id="form_delete">
考試編號：<input type="text" name="eid"/><br/>
<input type="button" value="刪除一個" onclick="deleteOne()"/>
</form>
<script type="text/javascript">
function deleteOne(){
//獲取ename和etime
var eid=$("#form_delete input[name='eid']").val();
//通過ajax請求action
$.ajax({
data:null,//
type:"DELETE",
dataType:"json",
url:path+"restful_exams/"+eid+".action",
success:function(responseEntity){
alert(responseEntity.message);
}
});
}
</script>
實現檔案上傳
controller層
//檔案上傳 接受formdata的資料 用普通引數接受普通元件 用
@PostMapping(value ="/restful_exams3")
@ResponseBody
public ResponseEntity<Exam> addOne3(@RequestParam("examText") MultipartFile examText, Exam exam, HttpServletRequest req)throws Exception{
String path=req.getSession().getServletContext().getRealPath("/imgs");//webapp下的資料夾
//獲取檔案名字
String fileName=examText.getOriginalFilename();
String fileHZ=fileName.substring(fileName.lastIndexOf("."));
fileName=exam.getEname()+fileHZ;//儲存的檔案名字和考試名字一致
//獲取檔案的字尾
File muDiFile=new File(path,fileName);
examText.transferTo(muDiFile);//實現檔案的讀寫
exam.setEurl(fileName);
examService.addOne(exam);
return new ResponseEntity<Exam>(200,"新增成功",null);
}
jsp頁面
<h1>檔案上傳：fromdate方法獲取表單對應的formdata物件</h1>
<form id="form_upload">
考試名稱：<input type="text" name="ename"/><br/>
考試時間：<input type="text" name="etimeStr"/><br/>
考試檔案：<input type="file" name="examText"/><br/>
<input type="button" value="檔案上傳" onclick="uploadAdd()"/>
</form>
<script type="text/javascript">
function uploadAdd(){
//獲取表單對應的json物件串
var jsonData3=new FormData($("#form_upload")[0]);
$.ajax({
data:jsonData3, //傳遞的時formdata物件
processData: false,//formdata物件必須設定processData和contentType屬性
contentType: false,
type:"POST",
dataType:"json",
url:path+"restful_exams3.action",
success:function(responseEntity){
alert(responseEntity.message);
}
});
}
</script>
對了,可以使用postman(郵遞員)工具進行測試,可以不用寫jsp頁面 !
官方網站: https://www.postman.com/
最下面:
postman使用教學: https://blog.csdn.net/fxbin123/article/details/80428216
以上就是RESTful的小案列,感謝閱讀 Thanks ! ! !