vue+json-server+axios 模拟后台数据请求

vue+json-server+axios 模拟后台数据请求

参考资料：https://github.com/typicode/json-server

安装 json-server

npm install -g json-server

在 vue 根目录下创建 db.json 文件

严格按照 json 格式写入数据（不然会报错！！！），如

{
  "logins": [
    {
      "account": "张三",
      "password": "123"
    },
    {
      "account": "李四",
      "password": "456"
    }
  ]
}

在命令行运行 json-server --watch db.json，打开http://localhost:3000，便可以看到以下界面

点击 logins，或者打开http://localhost:3000/logins，便可以看到输入的数据。

接下来便可以开始请求数据啦 ?，这里我使用 axios 发送 AJAX 请求

首先当然还是安装

npm install --save axios

在 main.js 文件中输入

import axios from 'axios'
Vue.prototype.$ajax = axios;

这样就可以在 App.vue 文件中使用 ajax 请求啦，如下

mounted() {
      this.$ajax.get('http://localhost:3000/logins').then((response)=>{
        console.log(response.data);
      })
    }

npm run dev 运行一下项目，打开 console 控制台，便可以看的请求到的数据啦。?

以上只是个人对模拟后端请求的一点小小的见解，具体用法可以参考 json-server github 上的文档。