沃梦达 / 编程技术 / 编程语言 / Java开发 / 正文

Spring Boot(二)之web综合开发

Java开发
2024-01-11

在本篇文章中，我们将介绍如何使用Spring Boot进行Web开发的综合性攻略。具体来说，将包含以下内容：

Spring Boot(二)之web综合开发

在本篇文章中，我们将介绍如何使用Spring Boot进行Web开发的综合性攻略。具体来说，将包含以下内容：

  1. Spring Boot中MVC的概念以及使用方法；
  2. 整合Thymeleaf和Bootstrap实现前端页面渲染；
  3. 利用Spring Boot提供的数据持久化机制与数据库进行交互；

Spring Boot中MVC的概念以及使用方法

Spring Boot中提供了基于MVC的Web开发框架。MVC的全称是Model-View-Controller，是一种常见的Web应用程序架构。在该架构中，模型（Model）表示应用程序的数据和业务逻辑，视图（View）负责渲染模型数据并显示给用户，控制器（Controller）负责处理用户请求，调用适当的模型和视图组件来完成请求处理。

在Spring Boot中，MVC与它的兄弟Spring MVC使用方法基本相同。MVC中最重要的概念是控制器（Controller），它负责接收请求并返回适当的响应。以下是一个简单的Controller示例：

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello, Spring Boot!";
    }
}

在这个示例中，顶部的注解@RestController表示这是一个Controller类。该类中使用了@GetMapping注解，表示它将处理HTTP GET请求，而/hello指定了请求的URL路径。在方法体中，返回了一个String，表示响应内容。

在Spring Boot中提供了多个和控制器相关的注解，比如@PostMapping、@PutMapping和@DeleteMapping，分别表示处理HTTP POST、PUT和DELETE请求。控制器中也可以使用其他注解，比如@RequestParam和@PathVariable，来获取请求中的参数。

整合Thymeleaf和Bootstrap实现前端页面渲染

Thymeleaf是一种流行的Java服务器端模板引擎，可以完成多种场景下的模板渲染。Bootstrap是一个广泛使用的前端UI框架，包含了多种UI组件和工具，可以轻松地快速构建美观、响应式的Web界面。

在Spring Boot中，Thymeleaf的使用非常简单。在pom.xml中添加Thymeleaf和Spring Boot自动配置的依赖后，就可以在Controller中使用Thymeleaf作为视图层模板引擎。以下是一个示例Controller：

@Controller
public class UserController {

    @Autowired
    UserService userService;

    @GetMapping("/users")
    public String userList(Model model) {
        model.addAttribute("users", userService.getAllUsers());
        return "user/list";
    }
}

在这个示例中，使用了@Controller注解表示这是一个Controller类。在userList方法中，将查询所有用户的结果添加到Model对象中，并返回了一个字符串user/list，表示使用名为list的模板进行渲染。在模板中，可以利用Thymeleaf的表达式语言和Bootstrap的CSS和JS组件进行界面渲染。

利用Spring Boot提供的数据持久化机制与数据库进行交互

Spring Boot中的数据持久层主要由两个部分组成：JPA和Spring Data。JPA是Java Persistence API的缩写，是Java EE5规范中的一部分。它为Java提供了一种标准化的对象-关系映射（ORM）技术，使得数据层的访问更加便捷、高效。而Spring Data则是Spring提供的基于JPA的数据持久层框架，可以帮助开发者快速构建数据访问层。

以下是一个使用Spring Data JPA进行用户数据持久化的示例：

@Repository
public interface UserRepository extends JpaRepository<User, Long> {

}

在这个示例中，使用了@Repository注解表示该类是一个数据访问层的接口，而继承自JpaRepository的接口则提供了几种基本的数据持久操作方法，比如findAll和save。

在使用Spring Data时，我们通常还需要配置数据源和JPA实体管理器。在Spring Boot中，可以在application.properties中添加以下配置项：

# 数据源配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mydb?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456

# JPA配置
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect

以上配置项可以指定数据源的相关信息，以及JPA的相关配置，比如生成数据表时是否自动更新，以及数据库方言等。

示例1：实现一个简单的TODO列表

针对前面章节的内容，我们可以实现一个简单的TODO列表。首先定义一个待办事项的实体类：

@Entity
@Table(name = "todo_item")
public class TodoItem {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String content;
    private boolean finished;
}

在这个实体类中，使用了@Entity和@Table注解表示它是一个JPA实体类，并指定表名为todo_item。其中@Id注解表示它是主键，@GeneratedValue指定主键生成策略为自增长。

接着定义一个对待办事项进行CRUD操作的数据访问层接口：

@Repository
public interface TodoItemRepository extends JpaRepository<TodoItem, Long>{

}

在定义了数据访问层后，我们可以编写一个TODO列表的Controller，用于处理增删改查等操作。以下是一个示例：

@Controller
public class TodoController {

    @Autowired
    TodoItemRepository todoItemRepository;

    @GetMapping("/todo")
    public String todoList(Model model) {
        model.addAttribute("items", todoItemRepository.findAll());
        return "todo/list";
    }

    @GetMapping("/todo/new")
    public String todoForm(Model model) {
        model.addAttribute("item", new TodoItem());
        return "todo/form";
    }

    @PostMapping("/todo/new")
    public String todoFormSubmit(@Valid TodoItem todoItem, BindingResult result) {
        if (result.hasErrors()) {
            return "todo/form";
        }
        todoItemRepository.save(todoItem);
        return "redirect:/todo";
    }

    @GetMapping("/todo/{id}/edit")
    public String todoEditForm(@PathVariable Long id, Model model) {
        TodoItem todoItem = todoItemRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("Invalid todo item id:" + id));
        model.addAttribute("item", todoItem);
        return "todo/form";
    }

    @PostMapping("/todo/{id}/edit")
    public String todoEditSubmit(@PathVariable Long id, @Valid TodoItem todoItem, BindingResult result) {
        if (result.hasErrors()) {
            return "todo/form";
        }
        todoItem.setId(id);
        todoItemRepository.save(todoItem);
        return "redirect:/todo";
    }

    @GetMapping("/todo/{id}/delete")
    public String todoDelete(@PathVariable Long id) {
        todoItemRepository.deleteById(id);
        return "redirect:/todo";
    }
}

在这个示例中，我们使用了@GetMapping和@PostMapping注解分别处理HTTP GET和POST请求。在todoList方法中，查询了所有待办事项的数据，并将其添加到Model对象中传递到视图层。在todoForm和todoEditForm方法中，创建了新的待办事项并传递到视图层，供用户输入和编辑。而在todoFormSubmit和todoEditSubmit方法中，则分别处理了新增和编辑待办事项的逻辑，保存到数据库中。另外还提供了一个用于删除待办事项的方法。

在视图层中，我们创建了一个表格，用于展示待办事项，同时提供了添加、编辑和删除操作的入口。以下是一个示例模板：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>TODO List</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.0/css/bootstrap.min.css}">
</head>
<body>

<div class="container">
    <div class="row my-3">
        <h1>TODO List</h1>
    </div>
    <div class="row">
        <button type="button" class="btn btn-primary"
                onclick="window.location.href='/todo/new';">Add New</button>
    </div>
    <div class="row my-3">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>Content</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item : ${items}">
                <td th:text="${item.id}"></td>
                <td th:text="${item.content}"></td>
                <td>
                    <span th:if="${item.finished}" class="badge bg-success">Finished</span>
                    <span th:unless="${item.finished}" class="badge bg-danger">Pending</span>
                </td>
                <td>
                    <a th:href="@{/todo/{id}/edit(id=${item.id})}" class="btn btn-secondary btn-sm">Edit</a>
                    <a th:href="@{/todo/{id}/delete(id=${item.id})}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure to delete?');">Delete</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>
</html>

在这个模板中，我们使用了Bootstrap提供的CSS样式和组件，使得页面看起来更加美观和易用。其中用到了Thymeleaf的表达式语言，比如${items}、${item.id}、${item.content}等，用于显示数据。同时也使用了Thymeleaf提供的渲染指令，如th:if和th:unless，用于根据运行时的数据决定要渲染的内容。

示例2：实现一个简单的RESTful风格的API

在Spring Boot中，使用MVC框架来开发RESTful风格的API也非常简单。只需要定义一些标准的HTTP方法，然后按照约定提供接口即可。以下是一个示例：

@RestController
@RequestMapping("/api/todo")
public class TodoRestController {

    @Autowired
    TodoItemRepository todoItemRepository;

    @GetMapping("")
    public List<TodoItem> getTodoItems() {
        return todoItemRepository.findAll();
    }

    @PostMapping("")
    public TodoItem addTodoItem(@RequestBody TodoItem todoItem) {
        todoItem.setId(null);
        return todoItemRepository.save(todoItem);
    }

    @PutMapping("/{id}")
    public TodoItem updateTodoItem(@PathVariable Long id, @RequestBody TodoItem todoItem) {
        if (todoItemRepository.existsById(id)) {
            todoItem.setId(id);
            return todoItemRepository.save(todoItem);
        }
        throw new IllegalArgumentException("Invalid todo item id:" + id);
    }

    @DeleteMapping("/{id}")
    public void deleteTodoItem(@PathVariable Long id) {
        todoItemRepository.deleteById(id);
    }
}

在这个示例中，我们使用了@RestController注解表示这是一个Controller类，用于处理RESTful请求。通过@RequestMapping注解，指定了请求路径为/api/todo。然后分别使用了@GetMapping、@PostMapping、@PutMapping和@DeleteMapping注解分别表示HTTP GET、POST、PUT和DELETE请求，以及传递数据的方式@RequestBody。

在视图层中，我们可以使用jQuery、Vue.js等JavaScript框架进行前端的渲染，也可以直接使用浏览器进行测试。以下是一个简单的测试例子：

  1. 查询所有待办事项：

发送HTTP GET请求，请求路径为：/api/todo

响应示例：

[
    {
        "id": 1,
        "content": "Learn Spring",
        "finished": false
    },
    {
        "id": 2,
        "content": "Learn Spring Boot",
        "finished": true
    }
]
  1. 添加一个待办事项：

发送HTTP POST请求，请求路径为：/api/todo，请求体为：

{
    "content": "Learn Hibernate",
    "finished": false
}

响应示例：

{
    "id": 3,
    "content": "Learn Hibernate",
    "finished": false
}
  1. 修改一个待办事项：

发送HTTP PUT请求，请求路径为：/api/todo/3，请求体为：

{
    "id": 3,
    "content": "Learn JPA",
    "finished": true
}

响应示例：

{
    "id": 3,
    "content": "Learn JPA",
    "finished": true
}
  1. 删除一个待办事项：

发送HTTP DELETE请求，请求路径为：/api/todo/3

响应示例：

HTTP状态码为204 No Content。

综上所述，Spring Boot提供了非常便捷的Web开发框架，可以轻松构建各种类型的Web应用程序，尤其是RESTful API和前端单页应用（SPA）。当然，这只是冰山一角，更多的特性和细节还需要在实践中去掌握。

本文标题为：Spring Boot(二)之web综合开发

上一篇： 超漂亮的Bootstrap 富文本编辑器summernote
下一篇： javabean servlet jsp实现分页功能代码解析

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2