Vue请求JSON Server服务器数据的实现方法

当你使用Vue来开发Web应用时，你需要获取外部数据并在网页应用中展示这些数据。JSON Server是一个快速的、简单的node.js库，可以模拟RESTful APIs，生成假数据，并对数据进行增删改查操作。下面是在Vue中如何实现JSON Server服务器数据请求。

1. 安装JSON Server

首先，你需要安装JSON Server。在命令行中键入以下命令：

npm install -g json-server

2. 创建数据文件

创建一个JSON格式的数据文件，例如db.json文件，来模拟外部服务器返回的数据。

{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "age": 25,
      "email": "[e-mail]"
    },
    {
      "id": 2,
      "name": "Bob",
      "age": 33,
      "email": "[e-mail]"
    }
  ]
}

3. 启动JSON Server

在命令行中执行以下命令：

json-server --watch db.json

这个命令将启动JSON Server，监听localhost:3000端口。

4. 使用Vue发起数据请求

在Vue中可以使用axios库来发起HTTP请求，获取JSON Server服务器提供的假数据。首先，需要安装axios库：

npm install axios

然后，在Vue组件中使用以下代码来获取数据：

import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    axios.get('http://localhost:3000/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};

以上代码在组件的mounted钩子中向JSON Server服务器发起GET请求，获取服务器返回的假数据，并将数据绑定到组件的users数据属性上。

示例1

假设JSON Server服务器返回的数据如下：

{
  "books": [
    {
      "id": 1,
      "title": "Vue.js实战",
      "author": "雪狼",
      "price": 55
    },
    {
      "id": 2,
      "title": "JavaScript高级程序设计",
      "author": "Nicholas C.Zakas",
      "price": 88
    }
  ]
}

现在需要在Vue应用中获取服务器返回的books数据，在页面中展示出来。

import axios from 'axios';

export default {
  data() {
    return {
      books: []
    };
  },
  mounted() {
    axios.get('http://localhost:3000/books')
      .then(response => {
        this.books = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};

示例2

假设JSON Server服务器返回的数据如下：

{
  "cars": [
    {
      "id": 1,
      "brand": "Tesla",
      "model": "Model X",
      "price": 120000
    },
    {
      "id": 2,
      "brand": "Toyota",
      "model": "Camry",
      "price": 30000
    }
  ]
}

现在需要在Vue应用中获取服务器返回的cars数据，并将数据存储到cars数组中。

import axios from 'axios';

export default {
  data() {
    return {
      cars: []
    };
  },
  mounted() {
    axios.get('http://localhost:3000/cars')
      .then(response => {
        this.cars = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};

通过上面的操作，在Vue中就可以轻松的获取JSON Server服务器提供的数据了。