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

最新推荐文章于 2024-04-23 18:52:22 发布
最新推荐文章于 2024-04-23 18:52:22 发布
阅读量976 收藏 3
点赞数
文章标签： java spring boot spring 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68856746/article/details/131364988
版权

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

 

1. 创建项目：

创建一个空的Spring Boot项目。

 

2. 设置依赖：

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

```xml

<dependency>

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

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

</dependency>

 

<!-- Spring Data JPA 依赖 -->

<dependency>

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

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

</dependency>

 

<!-- H2 内存数据库依赖 -->

<dependency>

    <groupId>com.h2database</groupId>

    <artifactId>h2</artifactId>

    <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>

    <meta charset="UTF-8">

    <title>Student Management System</title>

</head>

<body>

    <h1>Students</h1>

    

    <div>

        <table>

            <thead>

                <tr>

                    <th>ID</th>

                    <th>Name</th>

                    <th>Age</th>

                    <th>Score</th>

                </tr>

            </thead>

            <tbody id="studentsTableBody">

                <!-- 学生信息将会通过JavaScript动态添加到这里 -->

            </tbody>

        </table>

    </div>

    

    <form id="addStudentForm">

        <h2>Add Student</h2>

        <div>

            <label for="name">Name:</label>

            <input type="text" id="name" name="name" required>

        </div>

        <div>

            <label for="age">Age:</label>

            <input type="number" id="age" name="age" required>

        </div>

        <div>

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

            <input type="number" id="score" name="score" required>

        </div>

        <div>

            <button type="submit">Add</button>

        </div>

    </form>

    

    <script>

        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，即可看到学生信息的表格。可以通过表单添加学生，添加成功后表格会刷新显示最新的学生信息。

KingDol_MIni
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
springboot实现mysql的读写分离的案例源码
07-11
读写分离就是对于一条SQL该选择哪一个数据库去执行，至于谁来做选择数据库这件事，有两个，要么使用中间件帮我们做，要么程序自己做。一般来说，读写分离有两种实现方式。第一种是依靠中间件MyCat，也就是说应用程序连接到中间件，中间件帮我们做SQL分离，去选择指定的数据源；第二种是应用程序自己去做分离。这里我用程序自己来做，主要是利用Spring提供的路由数据源，以及Aop
SpringBoot前后端分离项目，打包、部署到服务器详细图文流程
zwb的博客
07-08 1万+
前端和后端的项目打包都可以在本地完成，上传服务器可以最小化上传jar包和dist文件夹，这种方式最节省服务器空间资源。修改Nginx的配置文件（修改conf文件夹下的nginx.conf文件）将location位置的root后面跟的路径修改为前端项目打包后的文件地址。修改Redis地址，修改需要部署的Redis密码（如果需要的话）防止出现权限相关的问题，将文件开头的user修改为root。将修改后的两个文件上传到服务器（上传对应文件并替换即可）修改MySQL地址，修改需要部署的数据名，账号和密码。
（十三）springboot实战——springboot前后端分离方式项目集成spring securtity安全框架
厉害哥哥的博客
02-06 1431
Spring Security 是一款强大且高度可定制的认证和访问控制框架，它是为了保护基于Spring的应用程序提供安全性支持。Spring Security 提供了全面的安全服务，主要针对企业级应用程序的需求。其核心组件主要包含：Authentication（认证）、Authorization（授权）、Principal（主体）、Granted Authority（授予的权限）、Security Context（安全上下文），可提供方法级别的权限认证。其底层主要通过Filter拦截器实现，关于其实现原理
Java前后端分离的毕业论文/毕业设计管理系统.zip
05-03
Java前后端分离的毕业论文/毕业设计管理系统源码 基于：SpringBoot、MySQL、Redis、SSM Java前后端分离的毕业论文/毕业设计管理系统源码 基于：SpringBoot、MySQL、Redis、SSM Java前后端分离的毕业论文/毕业设计管理系统源码 基于：SpringBoot、MySQL、Redis、SSM Java前后端分离的毕业论文/毕业设计管理系统源码 基于：SpringBoot、MySQL、Redis、SSM Java前后端分离的毕业论文/毕业设计管理系统源码 基于：SpringBoot、MySQL、Redis、SSM Java前后端分离的毕业论文/毕业设计管理系统源码 基于：SpringBoot、MySQL、Redis、SSM Java前后端分离的毕业论文/毕业设计管理系统源码 基于：SpringBoot、MySQL、Redis、SSM Java前后端分离的毕业论文/毕业设计管理系统源码 基于：SpringBoot、MySQL、Redis、SSM Java前后端分离的毕业论文/毕业设计管理系统源码 基于：SpringB
在线云盘系统源码，基于SpringBoot+Vue的前后端分离项目.zip
06-27
在线云盘系统源码 技术栈： SpringBoot+Vue+HDFS
SpringBoot实现前后端数据交互、json数据交互、Controller接收参数的几种常用方式
热门推荐
拾一二的博客
04-12 5万+
现在大多数互联网项目都是采用前后端分离的方式开发，前端人员负责页面展示和数据获取，后端负责业务逻辑处理和接口封装。当与前端交互的过程当中，常用json数据与前端进行交互，这样想取出前端传送过来的json数据的时候，就需要用到@RequestBody这个注解。@RequestBody注解用于读取http请求的内容(字符串)，通过springmvc提供的HttpMessageConverter接口将读...
前后端分离之Springboot
qq_42873640的博客
04-29 2530
springboot后台搭建 本次搭建使用多模块的方式，建立一个父项目netseal，父项目下建立webserver、common、appserver等项目。 父项目——netseal，maven项目即可 子项目——webserver，springboot项目 子项目——common，springboot项目 idea进行项目的创建可参考使用idea搭建springboot项目 1. 创...
SpringBoot + Vue前后端分离项目实战 || 三：Spring Boot后端与Vue前端连接
qq1803291168
06-25 9782
Spring Boot + Vue 管理系统，新手小白入门教程三，配套视频及代码
前后端分离项目-Springboot 【后端框架搭建，SSM】
qq_22841387的博客
12-12 4234
1.创建新项目填写信息选择依赖 2.创建文件目录 修改application为后缀为yml文件3.导入项目依赖 4.配置mybatis配置数据源配置类型映射5.创建service接口创建实体类 6.创建Dao接口7.创建controller 8.测试整体系统（(测试登录接)创建DO实体类 实现UserDao添加SQL语句 添加UserService接口实现Userlmpl接口实现UserController逻辑
SpringBoot前后端分离项目搭建
weixin_52368011的博客
05-01 503
springboot前后端分离项目搭建
springboot项目：前后端搭建
weixin_62735525的博客
11-06 4425
快速了解springboot项目之前后端搭建
基于SpringBoot +Vue Element UI 实现前后端分离系统源码+数据库.zip
12-05
基于SpringBoot +Vue Element UI 实现前后端分离源码+数据库这个小项目是一个 springboot 和 vue 的案例，服务器管理信息，由用户申请服务器和释放服务器，查看消息。 当时需求很简单，一个服务器信息的管理，一个...
基于Vue+ElementUI+Springboot前后端分离网约车预约系统设计毕业源码案例设计.zip
01-02
毕业设计系统项目源码，可用于毕业设计，课程设计，参考学习等
mybatisPlus使用MetaObjectHandler对字段进行更新
最新发布
m0_56356631的博客
04-23 315
都是符合我们的预期的。
string模拟实现
m0_73969414的博客
04-23 1430
c++中string的模拟实现，面试必会知识点
实现自定义注解、实现自定义幂等性注解
qq_44721738的博客
04-23 587
添加 Spring AOP 依赖。创建自定义注解。创建一个新的 Java 注解类，通过@interface关键字来定义，并可以添加元注解以及属性。@Target(ElementType.METHOD) //表示作用于方法上@Retention(RetentionPolicy.RUNTIME) // 表示这个注解在运行时是可见的，这样 AOP 代理才能在运行时读取到这个注解编写 AOP 拦截（自定义注解）的逻辑代码。@Aspect@Component// 方法执行前的处理。
javaweb-SpringBoot基础
kussm_的博客
04-20 1328
Spring的官网(Spring的简介：Spring makes Java simple。Spring Boot 可以帮助我们非常快速的构建应用程序、简化开发、提高效率。创建一个子包controller。
第5 章 Consul服务注册与发现
a13763926743的博客
04-22 754
consul官网地址。
spring-boot-starter-actuator 前后端分离 使用
07-14
在前后端分离的架构中，前端和后端是独立部署和运行的，因此需要在后端项目中使用spring-boot-starter-actuator来对后端应用进行监控和管理。前端项目可以通过HTTP接口调用actuator的端点来获取应用程序的信息。 首先，你需要在后端的Spring Boot项目中添加spring-boot-starter-actuator的依赖。在你的pom.xml文件中，添加以下依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-actuator</artifactId> </dependency> ``` 然后，你需要在应用程序的配置文件（例如application.properties或application.yml）中配置actuator的相关属性。例如，你可以设置管理端点的访问路径和权限： ```properties # 设置管理端点的访问路径 management.endpoints.web.base-path=/actuator # 开启所有的管理端点，默认只开启了/health和/info management.endpoints.web.exposure.include=* ``` 配置完成后，你可以启动后端应用程序，并通过HTTP请求访问actuator提供的各种端点来获取应用程序的信息。例如： - `/actuator/health`：应用程序的健康状况 - `/actuator/info`：应用程序的信息 - `/actuator/metrics`：度量指标信息 - `/actuator/env`：运行时环境信息 你可以根据具体需求，选择性地暴露和配置这些端点。同时，你还可以自定义自己的管理端点，以满足特定的监控和管理需求。 在前端项目中，你可以通过发送HTTP请求来调用这些管理端点，获取后端应用程序的信息，从而实现前端对后端应用程序的监控和管理功能。 希望这些信息对你有帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值