在開發過程中，前後端不論是否分離，介面多半是滯後於頁面開發的。所以建立一個REST風格的API介面，給前端頁面提供虛擬的資料，是非常有必要的。

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

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);
   })