获课：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

IDNameEmailActions <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应用打下了坚实的基础。