获课:789it.top/5044/
获取ZY↑↑方打开链接↑↑
Spring Boot 2 前端 + 后端开发指南
1. 项目概述
本文将介绍如何使用Spring Boot 2构建一个简单的前后端分离的应用。前端使用HTML/CSS/JavaScript,后端使用Spring Boot提供RESTful API。通过这个项目,你将学习如何搭建一个基本的Web应用,并理解前后端交互的基本原理。
2. 环境准备
- Java Development Kit (JDK):确保安装JDK 8或更高版本。
- Maven:用于项目依赖管理和构建。
- IDE:推荐使用IntelliJ IDEA或Eclipse。
- Node.js(可选):用于前端开发工具(如Webpack、Babel等)。
3. 创建Spring Boot项目
3.1 使用Spring Initializr创建项目
- 访问Spring Initializr。
- 选择项目类型为Maven Project,语言为Java,Spring Boot版本选择2.x。
- 添加依赖:Spring Web(用于构建Web应用)、Spring Data JPA(用于数据库操作)、H2 Database(内存数据库,用于开发测试)。
- 生成项目并下载。
3.2 导入项目
- 解压下载的项目文件,并使用IDE导入Maven项目。
4. 后端开发
4.1 创建实体类
- 定义一个简单的实体类,例如User。
java
复制
package com.example.demo.entity;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;@Entitypublic class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private String email; // Getters and Setters public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; }}
4.2 创建Repository接口
- 创建一个继承JpaRepository的接口,用于数据库操作。
java
复制
package com.example.demo.repository;import com.example.demo.entity.User;import org.springframework.data.jpa.repository.JpaRepository;public interface UserRepository extends JpaRepository {}
4.3 创建Service层
- 创建一个Service类,处理业务逻辑。
java
复制
package com.example.demo.service;import com.example.demo.entity.User;import com.example.demo.repository.UserRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.util.List;@Servicepublic class UserService { @Autowired private UserRepository userRepository; public List getAllUsers() { return userRepository.findAll(); } public User getUserById(Long id) { return userRepository.findById(id).orElse(null); } public User createUser(User user) { return userRepository.save(user); } public User updateUser(Long id, User userDetails) { User user = userRepository.findById(id).orElse(null); if (user != null) { user.setName(userDetails.getName()); user.setEmail(userDetails.getEmail()); return userRepository.save(user); } return null; } public void deleteUser(Long id) { userRepository.deleteById(id); }}
4.4 创建Controller层
- 创建一个Controller类,提供RESTful API。
java
复制
package com.example.demo.controller;import com.example.demo.entity.User;import com.example.demo.service.UserService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.*;import java.util.List;@RestController@RequestMapping("/api/users")public class UserController { @Autowired private UserService userService; @GetMapping public List getAllUsers() { return userService.getAllUsers(); } @GetMapping("/{id}") public User getUserById(@PathVariable Long id) { return userService.getUserById(id); } @PostMapping public User createUser(@RequestBody User user) { return userService.createUser(user); } @PutMapping("/{id}") public User updateUser(@PathVariable Long id, @RequestBody User userDetails) { return userService.updateUser(id, userDetails); } @DeleteMapping("/{id}") public void deleteUser(@PathVariable Long id) { userService.deleteUser(id); }}
4.5 配置H2数据库
- 在application.properties中配置H2数据库。
properties
复制
spring.datasource.url=jdbc:h2:mem:testdbspring.datasource.driverClassName=org.h2.Driverspring.datasource.username=saspring.datasource.password=passwordspring.jpa.database-platform=org.hibernate.dialect.H2Dialectspring.h2.console.enabled=true
5. 前端开发
5.1 创建HTML文件
- 在src/main/resources/static目录下创建index.html文件。
html
复制
User Management
Name: Email: Save
ID
Name
Email
Actions
<script> document.getElementById('userForm').addEventListener('submit', function(event) { event.preventDefault(); const userId = document.getElementById('userId').value; const name = document.getElementById('name').value; const email = document.getElementById('email').value; const user = { name, email }; if (userId) { updateUser(userId, user); } else { createUser(user); } }); function fetchUsers() { fetch('/api/users') .then(response => response.json()) .then(users => { const tbody = document.querySelector('#userTable tbody'); tbody.innerHTML = ''; users.forEach(user => { const row = document.createElement('tr'); row.innerHTML = ` ${user.id} ${user.name} ${user.email} Edit Delete `; tbody.appendChild(row); }); }); } function createUser(user) { fetch('/api/users', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user) }).then(() => { fetchUsers(); document.getElementById('userForm').reset(); }); } function updateUser(id, user) { fetch(`/api/users/${id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user) }).then(() => { fetchUsers(); document.getElementById('userForm').reset(); document.getElementById('userId').value = ''; }); } function deleteUser(id) { fetch(`/api/users/${id}`, { method: 'DELETE' }).then(() => { fetchUsers(); }); } function editUser(id) { fetch(`/api/users/${id}`) .then(response => response.json()) .then(user => { document.getElementById('userId').value = user.id; document.getElementById('name').value = user.name; document.getElementById('email').value = user.email; }); } fetchUsers(); </script>
运行 HTML
6. 运行项目
- 启动Spring Boot应用:在IDE中运行DemoApplication类,或使用命令行mvn spring-boot:run。
- 访问前端页面:打开浏览器,访问http://localhost:8080,即可看到用户管理页面。
7. 总结
通过本文,你学习了如何使用Spring Boot 2构建一个简单的前后端分离的应用。后端使用Spring Boot提供RESTful API,前端使用HTML/CSS/JavaScript进行页面展示和交互。这个项目为你进一步学习和开发更复杂的Web应用打下了坚实的基础。