springboot前后端交互demo

时间: 2023-04-24 21:02:46 浏览: 149

springboot前后台数据交互的示例代码

SpringBoot 是一个基于 Spring 框架的快速开发工具，它简化了配置并集成了大量常用的第三方库，如数据访问、安全、缓存等。在前后端数据交互中，SpringBoot 提供了多种方式来处理数据传递，包括通过路径变量、查询字符串、JSON 对象以及 FormData。下面将详细介绍这些方法的使用。 1. **路径变量**：路径变量是在 URL 路径中嵌入的动态数据，通常用于表示资源的唯一标识。例如，如果要获取 id 为 123 的用户信息，URL 可能是 `/users/123`。在 SpringBoot 的 Controller 中，可以使用 `@PathVariable` 注解来接收路径变量。假设有一个 `getUser` 方法： ```java @GetMapping("/users/{id}") public User getUser(@PathVariable Long id) { // 通过 id 查询用户，并返回 } ``` 前端发送请求时，URL 类似于 `http://localhost:8080/users/123`，SpringBoot 将自动将路径中的 `id` 值绑定到 `getUser` 方法的 `id` 参数。 2. **查询字符串**：查询字符串是 URL 后面的 `?key=value` 形式的参数，多个参数之间用 `&` 分隔。前端可以使用 AJAX 或 Fetch API 发送这种类型的请求。例如： ```javascript const url = 'http://localhost:8080/users?name=John&age=30'; fetch(url) .then(response => response.json()) .then(data => console.log(data)); ``` 在 SpringBoot 控制器中，使用 `@RequestParam` 注解接收查询字符串： ```java @GetMapping("/users") public List<User> getUsers(@RequestParam(name = "name", required = false) String name, @RequestParam("age") int age) { // 根据 name 和 age 查询用户列表 } ``` `@RequestParam` 注解的 `required` 参数表示是否必须提供该参数，如果不设置或设为 `false`，当前端未提供该参数时，值默认为 `null`。 3. **发送 JSON 数据**：当需要传输复杂的数据结构时，JSON 格式是常用的选择。前端可以通过 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串，然后通过 AJAX 或 Fetch 发送到服务器。例如： ```javascript const user = { name: 'John', age: 30 }; fetch('http://localhost:8080/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user), }) .then(response => response.json()) .then(data => console.log(data)); ``` 后台使用 `@RequestBody` 注解接收 JSON 数据，SpringBoot 自动将其反序列化为 Java 对象： ```java @PostMapping("/users") public ResponseEntity<?> createUser(@RequestBody User user) { // 创建用户并返回响应 } ``` 这里的 `User` 是一个 Java 类，其属性与 JSON 对象的键对应。 4. **发送 FormData 数据**：当需要上传文件或发送表单数据时，可以使用 FormData。前端创建一个 FormData 对象，然后通过 append 方法添加键值对： ```javascript const formData = new FormData(); formData.append('name', 'John'); formData.append('age', '30'); fetch('http://localhost:8080/users', { method: 'POST', headers: { 'Content-Type': 'multipart/form-data' }, body: formData, }) .then(response => response.json()) .then(data => console.log(data)); ``` 后端同样使用 `@RequestParam` 接收 FormData 数据，但需要注意，FormData 内部的键值对会被解析成查询字符串形式： ```java @PostMapping("/users") public ResponseEntity<?> createUser(@RequestParam("name") String name, @RequestParam("age") int age) { // 创建用户并返回响应 } ``` 以上就是 SpringBoot 前后端数据交互的四种常见方式。在实际应用中，根据需求选择合适的数据传输方式，确保数据安全、高效地传递。在开发过程中，还需要注意处理异常、验证数据、设置合适的响应状态码以及返回友好的错误信息，以提供良好的用户体验。同时，使用 SpringBoot 的 RESTful 风格设计接口，可以使接口更具有可读性和可维护性。

您好，以下是一个简单的Spring Boot前后端交互的示例： 1. 后端代码（使用Spring Boot和Spring MVC）： ```java @RestController public class UserController { @GetMapping("/users") public List<User> getUsers() { // 从数据库或其他数据源获取用户列表 List<User> users = new ArrayList<>(); users.add(new User("Alice", 20)); users.add(new User("Bob", 25)); return users; } @PostMapping("/users") public User addUser(@RequestBody User user) { // 将用户保存到数据库或其他数据源 return user; } } public class User { private String name; private int age; // 省略getter和setter方法 } ``` 2. 前端代码（使用Vue.js和axios）： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Spring Boot前后端交互示例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h1>用户列表</h1> <ul> <li v-for="user in users">{{ user.name }} ({{ user.age }})</li> </ul> <h1>添加用户</h1> <form @submit.prevent="addUser"> <label>姓名：</label> <input type="text" v-model="newUser.name"><br> <label>年龄：</label> <input type="number" v-model="newUser.age"><br> <button type="submit">提交</button> </form> </div> <script> new Vue({ el: '#app', data: { users: [], newUser: { name: '', age: } }, mounted() { axios.get('/users').then(response => { this.users = response.data; }); }, methods: { addUser() { axios.post('/users', this.newUser).then(response => { this.users.push(response.data); this.newUser = { name: '', age: }; }); } } }); </script> </body> </html> ``` 这个示例演示了如何使用Spring Boot和Vue.js构建一个简单的前后端交互应用。在后端，我们使用Spring MVC来处理HTTP请求和响应。在前端，我们使用Vue.js来构建用户界面，并使用axios来发送HTTP请求。在这个示例中，我们可以查看用户列表并添加新用户。

阅读全文

springboot前后端交互demo

相关推荐

springboot项目前后端完整demo

springboot项目demo

vue.js+springboot前后端分离demo.zip

SpringBoot前后端分离demo,后台工程+前台页面

帮我写一个springboot前后端交互的demo

帮我编写一个用springboot的前后端交互的demo

Auth-demo:基于Springboot前后端分离式，利用拦截器完成登录拦截的demo

vue+springboot前后端项目.rar

springboot+vue前后端完整demo.zip

前后端分离springboot-vue-demo-master.zip

springboot+vue的前后端分离demo,实现CRUD

springboot整合mybatis的demo

SpringBoot CRUD + 事务 DEMO

springboot整合ueditor的demo

springboot-bootstrap组合demo

springboot集成swagger的demo

springboot_vuejs_demo:预订springboot + vuejs演示

springboot-crud-demo.zip

springboot-websocket-demo--.zip

最新推荐

Python Flask前后端Ajax交互的方法示例

UnityWebRequest前后端交互实现过程解析

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

k8s部署前后端分离项目.doc

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包