vue數據模擬json-server的服務器開啟安裝和使用

作為一個前端開發工程師，在后端還沒有ready的時候，不可避免的要使用mock的數據。很多時候，我們並不想使用簡單的靜態數據，而是希望自己起一個本地的mock-server來完全模擬請求以及請求回來的過程。

json-server就是一個很好的可以替代工作的工具

1.json-server是一個包插件庫 能夠在腳手架開啟服務器來模擬后端使用（還可以對請求頭，體進行參數配置）

全局安裝：npm/cnpm install json-server -g

2.在項目根目錄進行新建一個data文件夾，下或者直接創建db.json

 

 

3.在package.json文件里進行添加一行代碼來做服務器開啟

 

 4.啟動項目服務命令: npm run json

或者使用data監聽命令時， json-server data.json

新建data文件夾 里創建的data.json文件

{
   "data":[]
}

5.控制台就會打印輸出成功

 

 6.這樣在代碼引用axios來進行數據請求

 

 7.最后數據請求成功

 

 二、增刪該查

可以在axios的請求上來進行數據接口的調用和判斷

1.增加數據

import axios from 'axios'

created(){
//post 提交 get獲取 del刪除
axios({
   method:"post",
   url:"http://localhost:3003/data",
   data:{
    username:'jack',
    age:18
}
}).then((data)=>{
  console.log(data)
})
}

2.刪除某一條數據 用id去刪除

axios({
   method:'delete',
   url:'http://localhost:3003/data/1' //直接使用id刪除
}).then((data)=>{
  console.log(data)
})

//可以看看動態路由

3.修改數據

axios({
  method:"patch",
  url:"http://localhost:3003/data/3",  //id
  data:{
  username:'rose' //修改內容
}
}).then((data)=>{
 console.log(data)
})

4.查找所有數據

axios({
  method:"get",
  url:"http://localhost:3003/data",
}).then((data)=>{
  console.log(data)
})

5.查找指定某一條

axios({
 method:"get",
  url:"http://localhost:3003/data/3",
}).then((data))=>{
  console.log(data)
}

6.根據給定的name查找

axios({
  method:"get",
  url:"http://localhost:3003/data?username=rose",
}).then((data)=>{
 console.log(data)
})

7.模糊查詢

axios({
  method:"get",
  url:"http://localhost:3003/data?q=r",
}).then((data)=>{
  console.log(data)
})