当前位置:Gxlcms > JavaScript > vue 请求后台数据的实例代码

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

时间:2021-07-01 10:21:17 帮助过:3人阅读

需要引用vue-resource

安装请参考https://github.com/pagekit/vue-resource官方文档

在入口函数中加入

  1. import VueResource from 'vue-resource'
  2. Vue.use(VueResource);

在package.json文件中加入

  1. "dependencies": {
  2. "vue": "^2.2.6",
  3. "vue-resource":"^1.2.1"
  4. },

请求如下

  1. mounted: function () {
  2. // GET /someUrl
  3. this.$http.get('http://localhost:8088/test').then(response => {
  4. console.log(response.data);
  5. // get body data
  6. // this.someData = response.body;
  7. }, response => {
  8. console.log("error");
  9. });
  10. },

注意

1.在请求接口数据时,涉及到跨域请求

出现下面错误:

代码如下:
XMLHttpRequest cannot load http://localhost:8088/test. No ‘Access-Control-Allow-Origin' header is present on the requested resource. Origin ‘http://localhost:8080' is therefore not allowed access.

解决办法:在接口中设置

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

2.使用jsonp请求

但是出现如下错误

Uncaught SyntaxError: Unexpected token

查看请求,数据已返回,未解决.

提交表单

  1. <div id="app-7">
  2. <form @submit.prevent="submit">
  3. <div class="field">
  4. 姓名:
  5. <input type="text"
  6. v-model="user.username">
  7. </div>
  8. <div class="field">
  9. 密码:
  10. <input type="text"
  11. v-model="user.password">
  12. </div>
  13. <input type="submit"
  14. value="提交">
  15. </form>
  16. </div>
  17. methods: {
  18. submit: function() {
  19. var formData = JSON.stringify(this.user); // 这里才是你的表单数据
  20. this.$http.post('http://localhost:8088/post', formData).then((response) => {
  21. // success callback
  22. console.log(response.data);
  23. }, (response) => {
  24. console.log("error");
  25. // error callback
  26. });
  27. }
  28. },

提交restful接口出现跨域请求的问题

查阅资料得知,

当contentType设置为三个常用的格式以外的格式,如“application/json”时,会先发送一个试探的OPTIONS类型的请求给服务端。在这时,单纯的在业务接口response添加Access-Control-Allow-Origin 由于还没有走到所以不会起作用。

解决方案:

在服务端增加一个拦截器

用于处理所有请求并加上允许跨域的头

  1. public class CommonInterceptor implements HandlerInterceptor {
  2. private List<String> excludedUrls;
  3. public List<String> getExcludedUrls() {
  4. return excludedUrls;
  5. }
  6. public void setExcludedUrls(List<String> excludedUrls) {
  7. this.excludedUrls = excludedUrls;
  8. }
  9. /**
  10. *
  11. * 在业务处理器处理请求之前被调用 如果返回false
  12. * 从当前的拦截器往回执行所有拦截器的afterCompletion(),
  13. * 再退出拦截器链, 如果返回true 执行下一个拦截器,
  14. * 直到所有的拦截器都执行完毕 再执行被拦截的Controller
  15. * 然后进入拦截器链,
  16. * 从最后一个拦截器往回执行所有的postHandle()
  17. * 接着再从最后一个拦截器往回执行所有的afterCompletion()
  18. *
  19. * @param request
  20. *
  21. * @param response
  22. */
  23. public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
  24. Object handler) throws Exception {
  25. response.setHeader("Access-Control-Allow-Origin", "*");
  26. response.setHeader("Access-Control-Allow-Methods", "*");
  27. response.setHeader("Access-Control-Max-Age", "3600");
  28. response.setHeader("Access-Control-Allow-Headers",
  29. "Origin, X-Requested-With, Content-Type, Accept");
  30. return true;
  31. }
  32. // 在业务处理器处理请求执行完成后,生成视图之前执行的动作
  33. public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
  34. ModelAndView modelAndView) throws Exception {
  35. }
  36. /**
  37. *
  38. * 在DispatcherServlet完全处理完请求后被调用
  39. * 当有拦截器抛出异常时,
  40. * 会从当前拦截器往回执行所有的拦截器的afterCompletion()
  41. *
  42. * @param request
  43. *
  44. * @param response
  45. *
  46. * @param handler
  47. *
  48. */
  49. public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
  50. Object handler, Exception ex) throws Exception {
  51. }
  52. }

spring resultful无法像在jsp提交表单一样处理数据必须加上@RequestBody,可以直接json转换object,但是对与没有bean的表单数据,建议转换为map对象,类似@RequestBody Map、

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行