springboot 实现增删改查,分页查询的mapper层,service层,serviceIpml层,controller层以及前端html和js的代码
时间: 2024-01-11 21:50:24 浏览: 76
这里提供一个简单的示例,供参考:
Mapper层代码(使用Mybatis):
```java
@Mapper
public interface UserMapper {
// 查询所有用户
List<User> findAllUsers();
// 根据用户id查询用户
User findUserById(Long id);
// 添加用户
int addUser(User user);
// 更新用户信息
int updateUser(User user);
// 根据id删除用户
int deleteUserById(Long id);
// 分页查询用户
List<User> findUsersByPage(@Param("start") int start, @Param("size") int size);
}
```
Service层接口:
```java
public interface UserService {
// 查询所有用户
List<User> findAllUsers();
// 根据用户id查询用户
User findUserById(Long id);
// 添加用户
int addUser(User user);
// 更新用户信息
int updateUser(User user);
// 根据id删除用户
int deleteUserById(Long id);
// 分页查询用户
List<User> findUsersByPage(int pageNum, int pageSize);
}
```
Service层实现:
```java
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public List<User> findAllUsers() {
return userMapper.findAllUsers();
}
@Override
public User findUserById(Long id) {
return userMapper.findUserById(id);
}
@Override
public int addUser(User user) {
return userMapper.addUser(user);
}
@Override
public int updateUser(User user) {
return userMapper.updateUser(user);
}
@Override
public int deleteUserById(Long id) {
return userMapper.deleteUserById(id);
}
@Override
public List<User> findUsersByPage(int pageNum, int pageSize) {
int start = (pageNum - 1) * pageSize;
return userMapper.findUsersByPage(start, pageSize);
}
}
```
Controller层:
```java
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
// 查询所有用户
@GetMapping("/findAll")
public List<User> findAll() {
return userService.findAllUsers();
}
// 根据用户id查询用户
@GetMapping("/{id}")
public User findById(@PathVariable("id") Long id) {
return userService.findUserById(id);
}
// 添加用户
@PostMapping("/add")
public int add(User user) {
return userService.addUser(user);
}
// 更新用户信息
@PutMapping("/update")
public int update(User user) {
return userService.updateUser(user);
}
// 根据id删除用户
@DeleteMapping("/{id}")
public int deleteById(@PathVariable("id") Long id) {
return userService.deleteUserById(id);
}
// 分页查询用户
@GetMapping("/findByPage")
public List<User> findByPage(@RequestParam("pageNum") int pageNum, @RequestParam("pageSize") int pageSize) {
return userService.findUsersByPage(pageNum, pageSize);
}
}
```
前端页面(使用Thymeleaf模板引擎):
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>User Management</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
<td th:text="${user.gender}"></td>
<td>
<button class="btn btn-primary" onclick="editUser('[[${user.id}]]')">Edit</button>
<button class="btn btn-danger" onclick="deleteUser('[[${user.id}]]')">Delete</button>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary" onclick="addUser()">Add User</button>
</div>
<div class="col-md-6">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item">
<a class="page-link" href="#" tabindex="-1">Previous</a>
</li>
<li class="page-item" th:each="i : ${#numbers.sequence(1, totalPages)}">
<a class="page-link" th:href="@{/user/findByPage(pageNum=${i}, pageSize=${pageSize})}" th:text="${i}"></a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<script>
// 添加用户
function addUser() {
window.location.href = '/user/add';
}
// 编辑用户
function editUser(id) {
window.location.href = '/user/edit/' + id;
}
// 删除用户
function deleteUser(id) {
if (confirm("Are you sure to delete this user?")) {
$.ajax({
url: '/user/delete/' + id,
type: 'DELETE',
success: function(result) {
window.location.reload();
}
});
}
}
</script>
</body>
</html>
```
以上代码仅作为参考,具体实现需根据实际情况进行调整。
阅读全文