json-server 模拟接口数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了json-server 模拟接口数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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局部安装:

npm i json-server

全局安装

npm install -g json-server

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

定义你想要的json内容

{
    "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"
            ]
        }
    ]
}

启动监听

json-server --watch data/db.json

终端查看监听的json

json-server 模拟接口数据,json,vue

页面使用:

// 请求模拟数据
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()

json-server 模拟接口数据,json,vue 文章来源地址https://www.toymoban.com/news/detail-816766.html