vue最简单的前后端交互示例详解

下面是“vue最简单的前后端交互示例详解”的完整攻略。

总览

前后端交互是Web开发中的重要环节，Vue作为现代化的前端框架，提供了多种方式来与后端服务交互。本文将会介绍Vue前端框架如何处理前后端交互，包括如何发送Ajax请求、获取/提交数据等。

准备工作

在开始前，我们需要先了解以下基础知识：

Vue.js基础语法
前端模块化开发

发送Ajax请求

我们先来介绍如何使用Vue发送Ajax请求。

Vue提供了一个全局对象Vue.http（在Vue.js 2.x中废弃，使用axios代替），我们可以使用它来发送Ajax请求。例如以下代码：

this.$http.get("/api/user").then(response => {
    console.log(response.data);
});

代码中，我们使用get方法发送Ajax请求，请求URL为/api/user。当请求成功后，会输出响应的数据，也就是后端返回的数据。

获取数据

下面我们将介绍如何从后端服务器获取数据。

客户端代码：

<!-- index.html -->
<div id="app">
  <div v-for="person in persons">
    <p>{{person.name}}</p>
    <p>{{person.age}}</p>
  </div>
</div>
<script>
  var app = new Vue({
      el: "#app",
      data: {
          persons: []
      },
      mounted: function () {
          this.$http.get("/api/users")
              .then(response => {
                  this.persons = response.body.users;
              })
      }
  })
</script>

服务器端代码：

var express = require('express');
var router = express.Router();

router.get('/api/users', function(req, res, next) {
  var users = [{name: 'Tom', age: 36}, {name: 'Jerry', age: 27}];
  res.json({users: users})
});

module.exports = router;

代码中，我们定义了一个/api/users的路由，在路由处理函数中，生成一个包含两个用户的列表，返回给客户端。

客户端发送Ajax请求后，在回调函数中，我们将返回结果中的users属性取出，并赋给Vue实例的persons属性。最后，我们使用v-for指令渲染出数据。

提交数据

接下来，我们将介绍如何向后端服务器提交数据。

客户端代码：

<!-- index.html -->
<div id="app">
  <form>
    <div>
      <label>姓名:</label>
      <input v-model="name" />
    </div>
    <div>
      <label>年龄:</label>
      <input v-model="age" />
    </div>
    <button @click="submitForm">提交</button>
  </form>
</div>
<script>
  var app = new Vue({
      el: "#app",
      data: {
          name: '',
          age: ''
      },
      methods: {
          submitForm: function () {
              var data = {
                  name: this.name,
                  age: this.age
              };
              this.$http.post("/api/users", data)
                  .then(response => {
                      console.log('success');
                  }, response => {
                      console.log('error');
                  });
          }
      }
  })
</script>

服务器端代码：

var express = require('express');
var router = express.Router();

router.post('/api/users', function(req, res, next) {
  console.log(req.body);
  res.end('success');
});

module.exports = router;

在上面的客户端代码中，我们定义了一个表单，当用户点击提交按钮时，会调用Vue实例的submitForm方法，该方法将表单中的数据封装成一个对象，并提交到后端服务器。

服务器端代码接收到请求后，将请求体打印到控制台，并返回success。