添加一个查看所有用户的功能前后端代码Java语言html
时间: 2024-03-03 12:49:53 浏览: 50
开源博客Java项目,前后端不分离
以下是一个简单的查看所有用户的功能的后端代码,使用Java语言和Spring框架:
UserController.java
```
@RestController
@RequestMapping("/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/")
public List<User> getAllUsers() {
return userService.getAllUsers();
}
}
```
UserService.java
```
@Service
public class UserService {
@Autowired
private UserRepository userRepository;
public List<User> getAllUsers() {
return userRepository.findAll();
}
}
```
UserRepository.java
```
@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}
```
以上代码使用了Spring Data JPA来从数据库中获取所有用户数据。
下面是一个简单的前端代码,使用HTML和JavaScript来显示所有用户列表:
index.html
```
<!DOCTYPE html>
<html>
<head>
<title>Users</title>
</head>
<body>
<h1>Users</h1>
<ul id="user-list"></ul>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
```
script.js
```
$(function() {
$.get("/users/", function(users) {
var userList = $("#user-list");
users.forEach(function(user) {
userList.append("<li>" + user.name + "</li>");
});
});
});
```
以上代码使用了jQuery库来从后端API获取用户数据,并将其显示在页面上。
阅读全文