json-server模擬後端接口處理數據

在開發過程當中，先後端不管是否分離，接口多半是滯後於頁面開發的。因此創建一個REST風格的API接口，給前端頁面提供虛擬的數據，是很是有必要的。

對比過多種mock工具後，我最終選擇了使用 json server 做爲工具，由於它足夠簡單，寫少許數據，便可使用。
也由於它足夠強大，支持CORS和JSONP跨域請求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查詢方法，如limit，order等。下面我將詳細介紹 json server 的使用。

 

 

json-server須要電腦安裝nodeJs。

 

1. 全局安裝json-server

2. cnpm install json-server -g

   在項目文件夾下創建一個存放測試數據的文件夾，在建立一個名爲list的json文件，在啓動這個測試接口，在文件夾下輸入命令
   會自動生成一個接口  " http://localhost:3000/list"

   json-server list.json

 

在一切都搭建好以後，就能夠根據生成的接口對數據進行操做了，主要的操做包括對數據的：增長、刪除、修改、查找

　　　　對數據進行操做（本文主要用axios訪問接口，對數據進行操做）：

1. 增

   //增數據的時候用post           每一個新增的數據都會有一個ID
   axios({
      method:"post",
      url:"http://localhost:3000/list",
      data:{
          "username": "張三",
          "age": 24,
          "sex": "女",
   }
   }).then((data)=>{
      console.log(data);
   })

    

2. 改

   //改數據  put會將當前數據裏面全部的東西都被覆蓋  patch ：只會修改數據中的某一個
   axios({
       method : "put",
       url : "http://localhost:3000/list/2",        //根據數據中指定的ID進行修改  
       data:{
           "name" : "小來"
       }
   }).then((data)=>{
       console.log(data);
   })

    

3. 查（查找數據的方式有不少種，下面主要根據字段的信息、數據的ID、模糊查詢）

   //根據數據中字段的信息進行查詢
   axios({
       method : "get",
       url : "http://localhost:3000/list?username=孔義&&username=哈哈"            //指定字段查詢
   }).then((data)=>{
       console.log(data);
   })
   
   //根據ID進行查找
   axios({
       method : "get",
       url : "http://localhost:3000/list/1"            //指定ID查詢
   }).then((data)=>{
       console.log(data);
   })
   
   //模糊查詢
   axios({
       method : "get",
       url : "http://localhost:3000/list?q=小"            //模糊查詢        字段中有「小」的
   }).then((data)=>{
       console.log(data);
   })

    

4. 刪除

   axios({
       method : "delete",
       url : "http://localhost:3000/list/2"            //根據ID刪除
   }).then((data)=>{
       console.log(data);
   })