Spring Boot学习(7)：Spring Boot Web开发

最新推荐文章于 2025-03-03 15:50:23 发布

兄弟涛哥哥

最新推荐文章于 2025-03-03 15:50:23 发布

阅读量294

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Spring Boot 文章标签： Spring Boot Web开发

本文链接：https://blog.youkuaiyun.com/qq_17450057/article/details/81233894

Spring Boot 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用 SpringBoot 进行 Web 开发，包括添加依赖、页面配置、控制器编写等步骤，并展示了 Thymeleaf 模板引擎的应用实例。

引言

Spring Boot提供了 spring-boot-starter-web 为web开发予以支持，spring-boot-starter-web为我们提供了嵌入的 Tomcat 和 Spring MVC的依赖。Spring Boot提供了大量的模板引擎，包括FreeMark、Groovy、Thymeleaf、Velocity和Mustache，Spring Boot推荐使用Thymeleaf，因为Thymeleaf提供了完美的Spring MVC支持。

本文示例源码：https://github.com/lizitaowork/SpringBoot-demo

Spring Boot Web

一、添加依赖

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-web</artifactId>
</dependency>

二、添加页面

Spring Boot 设置 Thymeleaf 的模板页面放置在 “ classpath:/templates/ ” 下，默认文件后缀为 “ .html ”，我们可以在类ThymeleafProperties中查看详情。看到下面代码，相信各位博友都明白这些配置都可以在application.properties中自定义。

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";
    private boolean checkTemplate = true;
    private boolean checkTemplateLocation = true;
    //设置前缀，默认放在classpath:/templates/下
    private String prefix = "classpath:/templates/";
    //后缀设置，默认为.html
    private String suffix = ".html";
    private String mode = "HTML";
    private Charset encoding;
    private boolean cache;
    private Integer templateResolverOrder;
    private String[] viewNames;
    private String[] excludedViewNames;
    private boolean enableSpringElCompiler;
    private boolean enabled;
    private final ThymeleafProperties.Servlet servlet;
    private final ThymeleafProperties.Reactive reactive;
    
    //...
}

看一下项目的目录结构，正式开始Spring Boot Web开发：

index.html详情如下：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta content="text/html;charset=UTF-8"/>
    <link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap-theme.css}" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="panel panel-default">
        <div class="panel-body text-right">
            访问：<span th:text="${singleUser.name}"></span>
        </div>
    </div>

    <div th:if="${not #lists.isEmpty(users)}">
        <div class="panel panel-default">
            <div class="panel-body">
                <table class="table">
                    <thead>
                        <td>ID</td>
                        <td>姓名</td>
                        <td>年龄</td>
                        <td>操作</td>
                    </thead>
                    <tbody>
                        <tr th:each="user:${users}">
                            <td th:text="${user.id}"></td>
                            <td th:text="${user.name}"></td>
                            <td th:text="${user.age}"></td>
                            <td>
                                <button class="btn btn-default" th:onclick="'getName(\''+${user.name} +'\');'">打印名字</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div>
        <img th:src="@{/img/test.jpeg}">
    </div>
    
    <script th:src="@{/js/jquery-3.3.1.js}" type="text/javascript"></script>
    <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}" type="text/javascript"></script>

    <script th:inline="javascript">
        var single = [[${singleUser}]]
        console.log(single.name+"/"+single.age);

        function getName(name) {
            alert(name)
        }
    </script>
</body>
<html>

三、添加Controller

TestController.java详情如下：

@Controller
@RequestMapping("/test")
public class TestController {
    @Resource
    private UserMapper userMapper;
    @RequestMapping("/{id}")
    public String index(@PathVariable(value = "id") int id, Model model){
        User user = userMapper.selectByPrimaryKey(id);
        List<User> userList = userMapper.selectAll();

        model.addAttribute("singleUser", user);
        model.addAttribute("users", userList);

        return "index";
    }
}