【工具】---- json-server基本使用

一、概念

　　在開發過程中，前端通常需要等待后端開發完接口后，再調用接口渲染相應的數據，這會影響開發效率。而json-server的作用就是為了解決前后端並行開發的痛點，在本地模擬后端接口用來測試前端效果，這種做法稱之為構建前端Mock。

二、基本使用

  1.全局安裝：cnpm install json-server -g

  2.在任意文件夾下創建一個json文件，如：data.json

  3.在文件夾中執行此文件：json-server data.json

    執行后會顯示以下執行結果： 

   

  4.根據執行代碼結果的提示，我們可以訪問 http://localhost:3000/,能夠看到如下頁面：

   

 

三、數據操作 

　本文使用axios對json數據進行操作。

  1.增（post）

　  進行增操作后，data.json文件中會自動出現相應的數據，並且數據中會自動生成ID值：

export default {
    created(){
        // 增數據
        axios({
            method:"post",
            url:"http://localhost:3000/data",
            data:{
                title:"全新機 魅族X8",
                price:"1147",
                img:"images/high3.png"
            }
        }).then((data)=>{
            console.log(data);
        })
    }
}

  2.刪（delete）　

　　可通過在接口后添加需要刪除的數據的ID值刪除相應數據，同時data.json便會自動刪除此項數據：

export default {
    created(){
        // 刪數據
        axios({
            method:"delete",
            url:"http://localhost:3000/data/1"
        }).then((data)=>{
            console.log(data);
        })
    }
}

  3.改（put/patch）

　　put:會將修改的數據全部替換； patch:只會修改數據的某一部分；

　  可通過在接口后添加需要修改的數據的ID值修改相應數據，同時data.json便會自動修改此項數據：

export default {
    created(){
        // 改數據
        axios({
            method:"put",
            url:"http://localhost:3000/data/1",
            data:{
                price:"1200"
            }
        }).then((data)=>{
            console.log(data);
        })
    }
}

  4.查（get）

• 查找所有數據：http://localhost:3000/data
• 查找指定ID數據：http://localhost:3000/data/1
• 查找指定字段數據：http://localhost:3000/data？title=全新機 魅族X8
• 模糊查詢：http://localhost:3000/data？q=需要查詢的內容

export default {
    created(){
        // 查數據
        axios({
            method:"get",
            url:"http://localhost:3000/data?title=全新機 魅族X8"
        }).then((data)=>{
            console.log(data);
        })
    }
}