vue 请求后台数据的实例代码

今天，长沙网络推广带来了一份特别的分享。你是否曾对Vue请求后台数据的实例代码感到困惑？别担心，这里有一个详细的教程，让你轻松掌握。

我们需要引入vue-resource插件。别担心，安装过程非常简单，只需参考官方文档进行操作即可。

在入口文件中，我们需要加入以下代码：

```javascript

import VueResource from 'vue-resource'

Vue.use(VueResource);

```

接下来，在package.json文件中添加相应的依赖项：

```json

"dependencies": {

"vue": "^2.2.6",

"vue-resource": "^1.2.1"

}

```

现在，让我们来看看如何进行请求操作。在Vue组件的mounted函数中，我们可以使用以下代码发起GET请求：

```javascript

mounted: function () {

// GET /someUrl

this.$http.get(' => {

console.log(response.data);

// 获取响应体数据

// this.someData = response.body;

}, response => {

console.log("出现错误");

});

}

```

在进行接口请求时，可能会遇到跨域问题。如果出现以下错误：

```javascript

XMLHttpRequest cannot load ... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' is therefore not allowed access.

```

解决办法是在接口中设置响应头：

```javascript

response.setHeader("Access-Control-Allow-Origin", "");

```

除了跨域问题，有时我们可能会遇到使用jsonp请求时的错误，如“Uncaught SyntaxError: Unexpected token”。当遇到这种情况时，可以尝试查看请求的数据是否已返回，并检查其他可能的错误原因。

在提交表单时，我们可以使用Vue的语法来简化操作。例如，以下是一个简单的表单提交示例：

```html

```

在Vue组件的methods中，我们可以定义submit函数来提交表单数据：

```javascript

methods: {

submit: function() {

var formData = JSON.stringify(this.user); // 这里是你的表单数据

this.$http.post(' formData).then((response) => {

// 成功回调

console.log(response.data);

}, (response) => {

console.log("出现错误");

// 错误回调

});

}

}

```

当提交restful接口时，也可能遇到跨域问题。当contentType设置为非默认格式（如“application/json”）时，服务器可能会先接收到一个OPTIONS类型的试探请求。解决这个问题的方法与上述跨域问题的解决办法相同。

解决跨域问题，单纯在业务接口response添加Aess-Control-Allow-Origin是不够滴

有一种更高效的解决方案：在服务端增设一个。这个能够处理所有请求，并添加允许跨域的头信息。

让我们来看一下这个名为CommonInterceptor的类，它实现了HandlerInterceptor接口。这个类具有一些关键功能，帮助我们处理跨域问题。

它有一个excludedUrls列表，用于存放不需要拦截的URL。你可以根据实际情况对这个列表进行配置。

接下来，我们重点关注的preHandle方法在业务处理器处理请求之前被调用。在这个方法中，我们设置了几个关键的响应头信息，包括Aess-Control-Allow-Origin等，来允许跨域请求。这样设置后，会在处理请求之前加上这些允许跨域的头信息。

除了处理跨域问题，这个类还有其他两个重要的方法：postHandle和afterCompletion。这两个方法分别在业务处理器处理请求执行完成后生成视图之前，以及DispatcherServlet完理完请求后被调用。在这里我们主要关注的是跨域问题的解决，所以关于这两个方法的具体实现就暂时不深入了。

对于spring resultful无法像在jsp提交表单一样处理数据的问题，我们可以采用@RequestBody注解来直接将json转换为object。对于那些没有bean的表单数据，建议将其转换为map对象，类似@RequestBody Map的方式进行处理。