RESTful風格以及small case !-有解無憂

一. 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