在開發過程中，前後端不論是否分離，接口多半是滯後於頁面開發的。所以建立一個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);
   })

   　　　　

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