vue使用ajax获取后台数据进行显示的示例

使用 Vue.js 进行前端开发时，常常需要从后端获取数据，并将其显示在页面上。其中一个常用的方式是通过 Ajax 技术向后端服务器发送 HTTP 请求，在得到响应后在前端页面上进行展示。下面是使用 Vue.js 实现向后端服务器发送 Ajax 请求并将其返回结果显示在页面上的示例攻略。

1. 在 Vue.js 中使用 Ajax

Vue.js 提供了内置的 Ajax 库，可以通过 Vue.http 对象发起 Ajax 请求。在使用之前，需要先安装 vue-resource，该库提供了一组方便的 API，方便 Vue.js 应用程序与后端服务器进行 HTTP 通信。下面是针对 vue-resource 库的安装和使用说明。

(1) 安装 vue-resource 库

可以通过以下命令安装 vue-resource：

npm install vue-resource --save

(2) 在 Vue.js 中使用 vue-resource 库

在 Vue.js 应用程序中，可以通过以下方式使用 vue-resource 库：

// 引入 vue-resource 库
import VueResource from 'vue-resource'
// 添加到 Vue.js 中
Vue.use(VueResource);

2. 示例：使用 Ajax 获取后台数据并显示

下面是一个示例，展示了如何使用 Vue.js 发起 Ajax 请求，并将返回的数据显示在页面上。

(1) 后端代码示例

在后端使用 Node.js 平台，通过 Express 框架创建一个简单的 RESTful API，提供后端数据。

const express = require('express');
const app = express();

app.get('/api/persons', (req, res) => {
  const persons = [
    {id: 1, name: 'Tom', age: 18},
    {id: 2, name: 'Jack', age: 20},
    {id: 3, name: 'Lucy', age: 22},
  ];
  res.json(persons);
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

(2) 前端代码示例

在前端使用 Vue.js 框架实现从后端获取数据，通过 Vue.js 的组件化功能将数据渲染到页面上。

<!-- App.vue 模板 -->
<template>
  <div>
    <h1>Person List</h1>
    <ul>
      <li v-for="person in persons" :key="person.id">
        <span>{{ person.name }}</span>
        <span>{{ person.age }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
// 引入 vue-resource 库
import VueResource from 'vue-resource'

export default {
  name: 'App',
  // 添加到 Vue.js 中
  mixins: [VueResource],
  data() {
    return {
      persons: []
    }
  },
  methods: {
    // 获取数据方法
    loadData() {
      // 发起 Ajax 请求
      this.$http.get('/api/persons').then((response) => {
        // 将返回的数据保存到组件的 data 中
        this.persons = response.body;
      })
    }
  },
  // 在挂载模板之前调用 loadData() 方法
  created() {
    this.loadData();
  }
}
</script>

上面的代码示例中，首先需要引入 vue-resource 库，然后将其添加到 Vue.js 中。然后在组件的 data 中声明了一个名为 persons 的数组用于保存从后端获取到的数据。在 created 的生命周期钩子函数中调用 loadData() 方法，发起 Ajax 请求。在后端数据返回后，将其保存到 persons 数据中，从而实现了在前端页面上显示后端数据的目的。

以上就是使用 Vue.js 发起 Ajax 请求并将后端数据显示在前端页面上的示例攻略。