一份用mybatis查询数据库并通过springboot框架将查询到的数据传递到前端,前端页面获取并显示数据的示例代码
时间: 2024-02-22 14:59:58 浏览: 23
下面是一个使用MyBatis查询数据库并通过Spring Boot将查询到的数据传递到前端的示例代码:
1. 定义实体类User.java
```java
public class User {
private Long id;
private String name;
private Integer age;
// 省略getter和setter方法
}
```
2. 定义Mapper接口UserMapper.java
```java
@Mapper
public interface UserMapper {
User findById(Long id);
}
```
3. 定义Mapper XML文件UserMapper.xml
```xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.UserMapper">
<select id="findById" resultType="com.example.demo.entity.User">
SELECT id, name, age
FROM user
WHERE id = #{id}
</select>
</mapper>
```
4. 编写Controller类UserController.java
```java
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserMapper userMapper;
@GetMapping("/{id}")
public User getUserById(@PathVariable Long id) {
return userMapper.findById(id);
}
}
```
5. 编写前端页面index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Info</title>
</head>
<body>
<div id="user"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
const id = 1; // 要查询的用户ID
axios.get(`/user/${id}`).then(response => {
const user = response.data;
const userDiv = document.getElementById('user');
userDiv.innerHTML = `Name: ${user.name}, Age: ${user.age}`;
}).catch(error => {
console.error(error);
});
</script>
</body>
</html>
```
6. 运行项目并访问http://localhost:8080/index.html,即可看到查询到的用户信息。