<think>我们正在讨论如何使用
SpringBoot创建RESTfulAPI，并从
前端页面调用和显示
数据。根据引用内容，我们可以总结出以下步骤：1.创建
SpringBoot项目，并添加必要的依赖（如SpringWeb）。2.定义
数据模型（实体类）和
数据库访问层（如果需要从
数据库获取
数据）。3.创建控制器（Controller）类，定义API端点（路由）。4.在控制器方法中处理请求，
返回数据（通常以JSON格式）。5.配置
SpringBoot应用（如
数据库连接等，如果需要）。6.在
前端页面中使用JavaScript（如fetch或axios）调用API，并将
数据显示在页面上。下面我将详细说明每一步，并给出代码示例。###1.创建
SpringBoot项目使用SpringInitializr（https://start.spring.io/）创建一个新项目，选择以下依赖：-SpringWeb:用于构建Web应用，包括RESTfulAPI。-如果使用
数据库，可以选择SpringDataJPA和相应的
数据库驱动（如MySQLDriver）。###2.定义
数据模型和
数据库访问层（可选）假设我们有一个简单的实体类`User`，我们将从
数据库中获取用户列表。####实体类（User.java）```java@EntitypublicclassUser{@Id@GeneratedValue(strategy=GenerationType.IDENTITY)privateLongid;privateStringname;privateStringemail;//省略构造方法、getter和setter}```####
数据库访问层（UserRepository.java）```javapublicinterfaceUserRepositoryextendsJpaRepository<User,Long>{}```###3.创建控制器类创建一个控制器类，定义API端点。例如，我们创建一个
返回用户列表的API。####UserController.java```java@RestController@RequestMapping("/api/users")publicclassUserController{privatefinalUserRepositoryuserRepository;publicUserController(UserRepositoryuserRepository){this.userRepository=userRepository;}@GetMappingpublicList<User>getAllUsers(){returnuserRepository.findAll();}}```###4.配置
SpringBoot应用在`application.properties`或`application.yml`中配置
数据库连接等。例如：####application.properties```propertiesspring.datasource.url=jdbc:mysql://localhost:3306/mydb?serverTimezone=UTCspring.datasource.username=rootspring.datasource.password=passwordspring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.jpa.hibernate.ddl-auto=update```###5.
前端页面调用API并显示
数据创建一个简单的
HTML页面，使用JavaScript调用API并动态显示
数据。####index.
html```
html<!DOCTYPE
html><
htmllang="en"><head><metacharset="UTF-8"><title>UserList</title></head><body><h1>UserList</h1><ulid="userList"></ul><script>//调用API获取用户列表fetch('http://localhost:8080/api/users').then(response=>response.json()).then(users=>{constuserListElement=document.getElementById('userList');users.forEach(user=>{constli=document.createElement('li');li.textContent=`${user.name}(${user.email})`;userListElement.appendChild(li);});}).catch(error=>console.error('Error:',error));</script></body></
html>```###说明-上述示例中，我们创建了一个简单的RESTfulAPI，
返回用户列表。-
前端页面通过fetchAPI调用这个
接口，并将用户
数据以列表形式展示。-注意：
前端页面需要部署在Web服务器上（或者使用
SpringBoot的静态资源服务），并且要注意跨域问题（CORS）。如果
前端页面与API不在同一个域，需要在
SpringBoot中配置CORS。###解决跨域问题在控制器类上添加`@CrossOrigin`注解，或者全局配置CORS。####在控制器上添加注解```java@CrossOrigin(origins="http://localhost:3000")//允许来自这个域的请求@RestController@RequestMapping("/api/users")publicclassUserController{//...}```####全局配置（推荐）```java@ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping("/**").allowedOrigins("http://localhost:3000")//允许的源.allowedMethods("GET","
POST","PUT","DELETE")//允许的方法.allowedHeaders("*");}}```###总结通过以上步骤，我们实现了：1.使用
SpringBoot创建RESTfulAPI。2.从
数据库获取
数据（通过SpringDataJPA）。3.
前端页面调用API并展示
数据。注意：在实际项目中，可能还需要考虑错误处理、安全性（如JWT认证）、分页等，但以上示例提
供了基本框架。###相关问题1.如何在
SpringBoot中处理RESTfulAPI的异常？2.
SpringBoot如何实现分页查询？3.如何保护
SpringBootAPI（使用SpringSecurity）？4.
前端框架（如React、Vue）如何与
SpringBootAPI交互？</think>### 使用Spring Boot创建RESTful API并
前端调用展示
数据
以下是完整的实现步骤，包含代码示例和关键配置：
#### 1. 创建Spring Boot项目
使用[Spring Initializr](https://start.spring.io/)创建项目，添加依赖：
- **Spring Web** (构建RESTful API)
- **Spring Data JPA** (
数据库操作)
- **MySQL Driver** (
数据库连接)
- **Lombok** (简化代码)
```properties
# application.properties 配置示例
spring.datasource.url=jdbc:mysql://localhost:3306/mydb?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.jpa.hibernate.ddl-auto=update
server.port=8080
```
#### 2. 创建实体类和Repository
```java
// 实体类
@Entity
@Data
@NoArgsConstructor
public class Product {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private Double price;
}
//
数据访问层
public interface ProductRepository extends JpaRepository<Product, Long> {}
```
#### 3. 创建REST控制器
```java
@RestController
@RequestMapping("/api/products")
public class ProductController {
@Autowired
private ProductRepository productRepository;
// 获取所有产品
@GetMapping
public ResponseEntity<List<Product>> getAllProducts() {
return ResponseEntity.ok(productRepository.findAll());
}
// 创建新产品
@
PostMapping
public ResponseEntity<Product> createProduct(@RequestBody Product product) {
return ResponseEntity.status(HttpStatus.CREATED)
.body(productRepository.save(product));
}
}
```
#### 4.
前端页面调用API
```
html
<!DOCTYPE
html>
<
html>
<head>
<title>产品列表</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>产品列表</h1>
<ul id="productList"></ul>
<script>
// 调用API获取
数据
axios.get('http://localhost:8080/api/products')
.then(response => {
const products = response.data;
const listElement = document.getElementById('productList');
products.forEach(product => {
const li = document.createElement('li');
li.textContent = `${product.name} - $${product.price}`;
listElement.appendChild(li);
});
})
.catch(error => {
console.error('获取
数据失败:', error);
});
</script>
</body>
</
html>
```
#### 5. 解决跨域问题
在Spring Boot中添加配置类：
```java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000") //
前端地址
.allowedMethods("GET", "
POST", "PUT", "DELETE");
}
}
```
#### 6. 统一响应格式
```java
// 统一响应体
@Data
@AllArgsConstructor
public class ApiResponse<T> {
private int status;
private String message;
private T data;
}
// 控制器修改示例
@GetMapping
public ApiResponse<List<Product>> getAllProducts() {
return new ApiResponse<>(200, "成功", productRepository.findAll());
}
```
### 关键要点说明
1. **RESTful设计原则**：
- 使用HTTP方法对应操作类型（GET获取/
POST创建）
- 资源导向的URL设计（`/api/products`）
-
返回JSON格式
数据
2. **前后端交互流程**：
```mermaid
sequenceDiagram
前端页面->>Spring Boot API: GET /api/products
Spring Boot API->>
数据库: 查询
数据
数据库-->>Spring Boot API:
返回结果集
Spring Boot API-->>
前端页面: JSON格式
数据
前端页面->>DOM: 动态渲染列表
```
3. **调试技巧**：
- 使用
Postman测试API
接口
- 浏览器开发者工具查看网络请求
- Spring Boot控制台查看SQL日志
### 常见问题解决
- **跨域错误**：确保CORS配置正确，
前端地址在允许列表中
- **404错误**：检查控制器@RequestMapping路径和
前端请求URL
- **
数据库连接失败**：验证application.properties中的
数据库配置
- **空
数据返回**：检查JPA方法命名是否符合规范
###
博客围绕浏览器访问接口显示登录界面并可post数据的需求展开。介绍了在Spring Boot中使用ModelAndView的方法，包括在配置文件中定位页面目录，返回HTML和JSON数据的代码示例，还提到controller注解的使用注意事项。
扫一扫
921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
