【springboot+vue前后端分离】之后台接收不到前台的数据

第一次做前后端分离的项目,最后前后端合并的时候,发现前端数据发送不到后台上去,已排除前后端的连接问题

前端发送数据

后端接收方法

一直无法接收前端发送的消息,反复校验之后,发现问题所在:

前端发送的数据一直是json格式的,除非是放在路径上的?后面发送过来的,只要是发送的json数据,就只能用@RequestBody接收,我这里是这样改的:

将@RequestParam改为@RequestBody接收,即可,更多的数据就用相对应的实体类接收即可。

Spring BootVue.js项目中实现前后端分离的CRUD操作,通常会涉及以下几个步骤: 1. **设置前端项目**: - 使用Vue CLI创建一个新的Vue项目,安装axios库用于发送HTTP请求。 ```bash npm install create-vue-app axios ``` 创建组件如`list.vue`, `detail.vue`, `create.vue`, `edit.vue`等。 2. **配置后端API**: - 在Spring Boot应用中创建RESTful API,使用Spring Data JPA处理数据库交互。例如,对于用户管理,可以有`UserController`,包含`@GetMapping("/users")`获取所有用户的列表,`@PostMapping("/users")`创建用户等方法。 ```java @RestController @RequestMapping("/api/users") public class UserController { @Autowired private UserService userService; // 获取所有用户 @GetMapping public List<User> getAllUsers() { return userService.findAll(); } // 新增用户 @PostMapping public ResponseEntity<?> createUser(@RequestBody User user) { User savedUser = userService.save(user); return new ResponseEntity<>(savedUser, HttpStatus.CREATED); } } ``` 3. **编写前端路由和请求**: - 在Vue中,通过`axios`向后端API发起GET、POST、PUT和DELETE请求,比如在`list.vue`中展示数据,`create.vue`中处理表单提交。 ```javascript // list.vue axios.get('/api/users') .then(response => (this.users = response.data)) .catch(error => console.error(error)); // create.vue methods: { createUser() { axios.post('/api/users', this.newUser) .then(response => { // 更新状态或重定向到列表页面 }) .catch(error => console.error(error)); } } ``` 4. **处理错误**: - 在前后端都要处理可能出现的网络错误,例如使用try-catch块或设置axios的全局拦截器。 5. **部署**: - 配置前端静态资源的托管,比如使用Nginx反向代理,以及部署Spring Boot应用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值