vue发送异步请求spring mvc获取参数失败

本文详细记录了在使用Vue+Axios进行前后端交互时,遇到的SpringMVC控制器参数获取失败的问题及解决方案。通过正确组装参数并设置请求头,实现了从前端向后端有效传递数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   最近在改造一个旧系统的时候,前端换成了vue+axios,遇到一个坑,axios发送的请求,Spring MVC的controller里面获取参数失败.

经过查看官方文档后,解决了问题,记录一下:

前端代码(axios):


          fetchJobs: function() {
            //这种赋值操作不可少!
            var _this = this;
            /*原因:
                在请求执行成功后执行回调函数中的内容,
                回调函数处于其它函数的内部this不会与任何对象绑定,为undefined
            */
            var startIndex = (_this.currentPage - 1) * this.pageSize;
            //参数必须这样组装一下 要不然传入的是一个map
            const params = new URLSearchParams();
            params.append("start", startIndex);
            params.append("limit", _this.pageSize);

            instance
              .post("/job/list", params)
              .then(function(response) {
                _this.jobList = response.data.result;
                _this.totalCount = response.data.totalCount;
                console.log(_this.jobList);
              })
              .catch(function(error) {
                console.log(error);
              });
          }

前端代码(vue-resource):

 this.$http.post('http://localhost:8080/job/list', {
                        start: startIndex,
                        limit: this.pageSize
                    },
             {
                 //这句是关键 不可缺少
                 emulateJSON: true
             }
             )
             .then(function (response) {
                        this.jobList = response.data.result;
                        this.totalCount = response.data.totalCount;
                        console.log(this.jobList);
                    })
             .catch(function (error) {
                        console.log(error);
                    });
             }

 

后端代码: 

	String pageNo =request.getParameter("start");
	String pageSize =request.getParameter("limit");

	logger.info("参数获取===============>pageNo:" +pageNo);
	logger.info("参数获取===============>pageSize:" +pageSize);

 

### Spring Boot、VueSpring MVC 的集成与使用 #### 技术选型概述 在现代Web应用开发中,采用前后端分离架构是一种常见做法。对于基于Java的企业级应用程序来说,Spring Boot作为后端服务提供者,Vue.js负责前端展示逻辑,而Spring MVC用于处理HTTP请求并返回数据给前端。 核心框架选择了 **Spring Boot 1.5** ,它简化了基于Spring的应用程序配置过程;安全方面采用了 **Apache Shiro 1.3** 来保护API接口的安全性;视图渲染则依赖于 **Spring MVC 4.3** 实现RESTful Web Services API的设计[^1]。 #### 前后台通信机制 为了实现前后台之间的高效通讯,在此项目中定义了一套完整的JSON格式的数据交换协议。通过AJAX异步调用来完成页面加载时不刷新整个网页的功能需求。具体而言: - 后端利用 `@RestController` 注解创建控制器类来接收来自客户端发出的各种类型的HTTP请求; - 使用Jackson库自动序列化/反序列化实体对象到JSON字符串之间转换; - 客户端发送带有特定URL路径参数以及body体内的POST请求至服务器端口监听处等待响应结果。 ```java @RestController @RequestMapping("/api") public class UserController { @Autowired private UserService userService; @PostMapping(value="/login", produces="application/json;charset=UTF-8") public ResponseEntity<LoginResponse> login(@RequestBody LoginRequest request){ try { String token = userService.login(request.getUsername(),request.getPassword()); return new ResponseEntity<>(new LoginResponse(token),HttpStatus.OK); } catch (Exception e) { logger.error(e.getMessage()); throw new RuntimeException("登录失败"); } } } ``` #### Vue CLI 构建工具链设置 为了让开发者能够更方便快捷地搭建起一个现代化单页应用(SPA),官方推荐使用CLI(Command Line Interface)命令行界面来进行初始化操作。安装完成后执行如下指令即可生成基础模板文件夹结构: ```bash npm install -g @vue/cli vue create my-project-name cd my-project-name/ npm run serve ``` 接着按照提示选择合适的预设选项(如Babel、Router插件等),最后启动本地开发环境测试效果如何。 #### Element UI 组件注册方式 考虑到UI组件库的选择上,Element UI因其简洁美观且易于使用的特性被广泛应用于各类企业内部管理系统当中。下面给出一段简单的代码片段展示了怎样引入Button按钮和Select下拉框两个常用控件实例[^3]: ```javascript import Vue from 'vue' import { Button, Select } from 'element-ui' // 方法一:单独注册 Vue.component(Button.name, Button) Vue.component(Select.name, Select) /* 或写为 */ // 方法二:全局注入 Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App), }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值