下面我来给你详细讲解一下“springboot前后台数据交互的示例代码”的完整攻略。
前后台数据交互的概述
在使用SpringBoot开发Web应用时，我们需要前后台交互数据。为了实现这个目的，我们需要使用一些常见的技术框架： SpringMVC用于处理前台请求，MyBatis用于处理数据库操作，以及HTML、CSS、JavaScript等前端技术。
前后台数据交互的方式很多，常用的有Form表单、Ajax、WebSocket等。Form表单是很早期也是最简单的数据交互方式，但是它有很明显的局限性，比如无法实现异步更新等需求。Ajax技术可以实现异步交互，它不需要刷新整个页面，只需要更新部分页面内容，但是它比较复杂。WebSocket是一种实时通信协议，它可以实现双向数据传输。在这里，我将以Ajax技术为例，讲解SpringBoot中前后台数据交互的实现。
示例1：实现查询用户数据功能
1.创建一个SpringBoot项目，并引入Maven的依赖。
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.10</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.46</version>
</dependency>
</dependencies>
2.配置数据源和MyBatis。
spring.datasource.url=jdbc:mysql://localhost:3306/test
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driverClassName=com.mysql.jdbc.Driver
mybatis.type-aliases-package=com.example.springboot.model
# 指定mapper.xml路径
mybatis.mapper-locations=classpath:mapper/*.xml
3.编写实体类。
public class User {
private Integer id;
private String name;
private Integer age;
// 省略getter和setter
}
4.编写Mapper接口。
@Mapper
public interface UserMapper {
List<User> getUsers();
}
5.编写Mapper.xml文件。
<mapper namespace="com.example.springboot.mapper.UserMapper">
<resultMap id="userMap" type="com.example.springboot.model.User">
<id property="id" column="id" />
<result property="name" column="name" />
<result property="age" column="age" />
</resultMap>
<select id="getUsers" resultMap="userMap">
select * from user
</select>
</mapper>
6.编写Controller类。
@RestController
public class UserController {
@Autowired
private UserMapper userMapper;
@RequestMapping("/users")
public List<User> getUsers() {
return userMapper.getUsers();
}
}
7.编写前端页面。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax示例1</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<table id="userTable">
<thead>
<tr>
<th>ID</th>
<th>名字</th>
<th>年龄</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$(document).ready(function() {
$.ajax({
url: "/users",
success: function(users) {
var tbody = $("#userTable tbody");
$.each(users, function(i, user) {
$("<tr></tr>")
.append($("<td></td>").text(user.id))
.append($("<td></td>").text(user.name))
.append($("<td></td>").text(user.age))
.appendTo(tbody);
});
}
});
});
</script>
</body>
</html>
8.启动应用，打开浏览器访问"http://localhost:8080"，即可看到用户数据列表。
示例2：实现添加用户数据功能
1.添加一个Mapper方法。
@Mapper
public interface UserMapper {
List<User> getUsers();
void addUser(User user);
}
2.修改Mapper.xml文件。
<mapper namespace="com.example.springboot.mapper.UserMapper">
<resultMap id="userMap" type="com.example.springboot.model.User">
<id property="id" column="id" />
<result property="name" column="name" />
<result property="age" column="age" />
</resultMap>
<select id="getUsers" resultMap="userMap">
select * from user
</select>
<insert id="addUser">
insert into user(name, age) values (#{name}, #{age})
</insert>
</mapper>
3.编写Controller类。
@RestController
public class UserController {
@Autowired
private UserMapper userMapper;
@RequestMapping("/users")
public List<User> getUsers() {
return userMapper.getUsers();
}
@PostMapping("/users")
public String addUser(User user) {
userMapper.addUser(user);
return "success";
}
}
4.编写前端页面。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax示例2</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form>
<label>名字:</label>
<input type="text" name="name" required>
<label>年龄:</label>
<input type="number" name="age" required>
<button type="button" id="btnAdd">添加用户</button>
</form>
<table id="userTable">
<thead>
<tr>
<th>ID</th>
<th>名字</th>
<th>年龄</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$(document).ready(function() {
$("#btnAdd").click(function() {
$.ajax({
url: "/users",
type: "POST",
data: $("form").serialize(),
success: function(result) {
console.log(result);
if (result === "success") {
loadUsers();
$("form")[0].reset();
}
}
});
});
loadUsers();
});
function loadUsers() {
$.ajax({
url: "/users",
success: function(users) {
var tbody = $("#userTable tbody");
tbody.empty();
$.each(users, function(i, user) {
$("<tr></tr>")
.append($("<td></td>").text(user.id))
.append($("<td></td>").text(user.name))
.append($("<td></td>").text(user.age))
.appendTo(tbody);
});
}
});
}
</script>
</body>
</html>
5.启动应用，打开浏览器访问"http://localhost:8080"，即可看到用户数据列表和添加用户表单。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：springboot前后台数据交互的示例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 