从前慢现在也慢

这个屌丝很懒，什么也没留下！

热门标签

【java】springboot前后端分离简单案例

作者：从前慢现在也慢 | 2024-06-03 10:18:29

踩

springboot前后端

以下是一个简单的示例，展示了如何使用Spring Boot实现前后端分离项目，包含代码讲解和详细注释。

1. 创建项目：

创建一个空的Spring Boot项目。

2. 设置依赖：

使用你喜欢的构建工具（例如Maven）将以下依赖添加到项目的pom.xml文件中：

```xml

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-jpa</artifactId>

</dependency>

<groupId>com.h2database</groupId>

<scope>runtime</scope>

</dependency>

```

这些依赖包含了Spring Boot、Spring MVC和Spring Data JPA相关的库。

3. 创建数据库表：

使用数据库管理工具创建一个名为"student"的表，包含id、name、age和score字段。

4. 创建实体类：

创建一个名为Student的实体类，添加相应的注解，使其能够与数据库表进行映射。

```java

@Entity

@Table(name = "student")

public class Student {

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

private Long id;

private String name;

private int age;

private double score;

// 省略getter和setter方法

}

```

5. 创建数据访问层（Repository）：

创建一个名为StudentRepository的接口，继承自JpaRepository，用于对数据库表进行增删改查操作。

```java

public interface StudentRepository extends JpaRepository<Student, Long> {

}

```

6. 创建业务逻辑层（Service）：

创建一个名为StudentService的接口，定义一些学生信息相关的业务逻辑方法，如添加学生、删除学生、修改学生信息等。

```java

public interface StudentService {

Student addStudent(Student student);

void deleteStudent(Long id);

Student updateStudent(Student student);

List<Student> getAllStudents();

}

```

7. 实现业务逻辑层（Service）：

创建一个名为StudentServiceImpl的类，实现StudentService接口，并注入StudentRepository，用于对数据库进行操作。

```java

@Service

public class StudentServiceImpl implements StudentService {

private final StudentRepository studentRepository;

public StudentServiceImpl(StudentRepository studentRepository) {

this.studentRepository = studentRepository;

}

@Override

public Student addStudent(Student student) {

return studentRepository.save(student);

}

@Override

public void deleteStudent(Long id) {

studentRepository.deleteById(id);

}

@Override

public Student updateStudent(Student student) {

return studentRepository.save(student);

}

@Override

public List<Student> getAllStudents() {

return studentRepository.findAll();

}

```

8. 创建控制器层（Controller）：

创建一个名为StudentController的类，添加@RestController注解，并注入StudentService，用于处理前端的请求。

```java

@RestController

@RequestMapping("/api/students")

public class StudentController {

private final StudentService studentService;

public StudentController(StudentService studentService) {

this.studentService = studentService;

}

@PostMapping

public ResponseEntity<Student> addStudent(@RequestBody Student student) {

Student newStudent = studentService.addStudent(student);

return ResponseEntity.ok(newStudent);

}

@DeleteMapping("/{id}")

public ResponseEntity<Void> deleteStudent(@PathVariable Long id) {

studentService.deleteStudent(id);

return ResponseEntity.noContent().build();

}

@PutMapping("/{id}")

public ResponseEntity<Student> updateStudent(@PathVariable Long id, @RequestBody Student student) {

student.setId(id);

Student updatedStudent = studentService.updateStudent(student);

return ResponseEntity.ok(updatedStudent);

}

@GetMapping

public ResponseEntity<List<Student>> getAllStudents() {

List<Student> students = studentService.getAllStudents();

return ResponseEntity.ok(students);

}

```

9. 前端实现：

在resources/static目录下创建一个index.html文件，编写HTML页面的结构和样式，并使用JavaScript发起与后端的接口交互。

```html

<!DOCTYPE html>

<html>

<head>

<title>Student Management System</title>

</head>

<body>

<h1>Students</h1>

<div>

<table>

<thead>

<tr>

<th>Score</th>

</tr>

</thead>

</tbody>

</table>

</div>

<h2>Add Student</h2>

<div>

</div>

<div>

</div>

<div>

<label for="score">Score:</label>

</div>

<div>

</div>

</form>

document.addEventListener('DOMContentLoaded', function() {

// 在页面加载完毕后获取学生数据并渲染到表格中

fetchStudents();

// 处理添加学生表单的提交事件

document.getElementById('addStudentForm').addEventListener('submit', function(event) {

event.preventDefault(); // 阻止表单提交的默认行为

// 从表单中获取输入数据

const name = document.getElementById('name').value;

const age = document.getElementById('age').value;

const score = document.getElementById('score').value;

// 创建一个新的学生对象

const newStudent = {

name: name,

age: age,

score: score

};

// 发起POST请求，将新学生添加到后端数据库

addStudent(newStudent);

// 清空表单

document.getElementById('name').value = '';

document.getElementById('age').value = '';

document.getElementById('score').value = '';

});

function fetchStudents() {

fetch('/api/students')

.then(response => response.json())

.then(students => renderStudentsTable(students));

}

function renderStudentsTable(students) {

const tableBody = document.getElementById('studentsTableBody');

tableBody.innerHTML = ''; // 清空表格

students.forEach(student => {

const tr = document.createElement('tr');

const idTd = document.createElement('td');

idTd.textContent = student.id;

tr.appendChild(idTd);

const nameTd = document.createElement('td');

nameTd.textContent = student.name;

tr.appendChild(nameTd);

const ageTd = document.createElement('td');

ageTd.textContent = student.age;

tr.appendChild(ageTd);

const scoreTd = document.createElement('td');

scoreTd.textContent = student.score;

tr.appendChild(scoreTd);

tableBody.appendChild(tr);

});

}

function addStudent(student) {

fetch('/api/students', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(student)

})

.then(response => response.json())

.then(student => {

// 添加成功后重新获取学生数据并渲染表格

fetchStudents();

});

}

</script>

</body>

</html>

```

11. 启动项目：

运行项目，启动Spring Boot应用程序。

12. 前后端交互：

使用浏览器访问前端页面，触发相应的请求，后端会根据URL和请求方式调用相应的方法，完成相应的业务逻辑，并将结果返回给前端。

在本例中，访问http://localhost:8080，即可看到学生信息的表格。可以通过表单添加学生，添加成功后表格会刷新显示最新的学生信息。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/666784