json-server 模拟接口数据

周家大小姐.2024-01-21 13:51

json-server - npm> [!IMPORTANT] > Viewing alpha v1 documentation -- usable but expect breaking changes. For stable version, see [here](https://github.com/typicode/json-server/tree/v0). Latest version: 1.0.0-alpha.21, last published: 6 days ago. Start using json-server in your project by running `npm i json-server`. There are 347 other projects in the npm registry using json-server.https://www.npmjs.com/package/json-server?activeTab=readme局部安装:

bash 复制代码

npm i json-server

全局安装

bash 复制代码

npm install -g json-server

在文件根路径创建文件夹 data/db.json

定义你想要的json内容

javascript 复制代码

{
    "posts":[
        {
            "title":"json-server 安装方法",
            "body":" npm i json-server",
            "id":1,
            "tags":[
                "vue3",
                "compostionApi",
                "blog"
            ]
        },
        {
            "title":"json-server 监听方法",
            "body":"json-server --watch data/db.json",
            "id":1,
            "tags":[
                "vue3",
                "compostionApi",
                "blog"
            ]
        },
        {
            "title":"json-server 解决端口冲突",
            "body":"json-server --watch data/db.json --port=3003",
            "id":1,
            "tags":[
                "vue3",
                "compostionApi",
                "blog"
            ]
        }
    ]
}

启动监听

bash 复制代码

json-server --watch data/db.json

终端查看监听的json

页面使用:

javascript 复制代码

// 请求模拟数据
const load=async()=>{
    try{
let data=await axios.get('http://localhost:3000/posts')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
    }catch (err){

    }

}
load()