【Spring boot】 07-spring boot Web开发(1)

最新推荐文章于 2024-07-25 11:59:12 发布

_nyc

最新推荐文章于 2024-07-25 11:59:12 发布

阅读量320

点赞数 1

分类专栏： springboot 文章标签： spring spring boot java

本文链接：https://blog.csdn.net/nyc__/article/details/120754663

版权

springboot 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

6. Spring Boot Web开发

静态资源导入
首页
前端页面，模板引擎Thymeleaf
装配扩展SpringMVC
拦截器
CRUD
国际化
…

1. 新建spring boot项目

2. 静态资源导入

方式一： webjars

<!--例如导入 jQuery -->
<dependency>
  <groupId>org.webjars</groupId>
  <artifactId>jquery</artifactId>
  <version>3.6.0</version>
</dependency>

在这里插入图片描述

访问方式： http://localhost:8080/webjars/

方式二：

在resources目录下可以放静态资源

在这里插入图片描述

优先级： resources > static > public

访问方式： http://localhost:8080/**

首页：

在resources下的public、static、resources下创建index.html就是你的首页了

在templates下的页面只能通过controller控制跳转，且需要导入依赖支持（thymeleaf）

3. 模板引擎

以前，我们开发Web应用是使用的jsp，jsp可以轻松的实现数据的显示及交互等。但spring boot是默认不支持jsp的。使用html页面显示数据又比较麻烦，所以spring boot 推荐使用模板引擎。

模板引擎用很多，比如freemarker，Thymeleaf（spring boot 推荐）等，jsp也属于一种模板引擎，它们的原理和思想都是差不多的！

在这里插入图片描述

导入依赖：

<dependency>
  <groupId>org.thymeleaf</groupId>
  <artifactId>thymeleaf-spring5</artifactId>
</dependency>
<dependency>
  <groupId>org.thymeleaf.extras</groupId>
  <artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>

基本使用

Thymeleaf模板需要写在resources -> Templates下:

使用thymeleaf语法需要导入它的命名空间:

<html lang="en" xmlns:th="http://www.thymeleaf.org">

test.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
  	<h2>测试</h2>
  	<h3 th:text="${msg}"></h3>
</body>
</html>

th:text=“${msg}”，这种是不符合h5语法的，想要符合H5语法，可以使用data-th-text:${msg},但为了方便，通常还是使用th:

Controller:

@Controller
public class RouterController {

    @RequestMapping("test")
    public String test(Model model){
      	model.addAttribute("msg","Hello Thymeleaf");
        return "test";
    }

}

访问test测试：http://localhost:8080/test

Thymeleaf语法

官方文档

在这里插入图片描述

th:text :不会将html字符串转义

th:utext ：如果是html字符串，则会转义显示

代码：

test.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div th:text="${msg}"></div>
    <div th:utext="${msg}"></div>
</body>
</html>

controller:

@Controller
public class RouterController {
    @RequestMapping("test")
    public String test(Model model){
        model.addAttribute("msg","<h2>Hello Thymeleaf</h2>");
        return "test";
    }
}

结果：

在这里插入图片描述

以下HTML省略基本代码框架

th:each : 循环遍历

test.html:

<!-- 写法一 -->
<ul>
  <li th:each="item:${list}" th:text="${item}"></li>
</ul>
<hr>
<!-- 写法二 -->
<ul>
  <li th:each="item:${list}">[[${item}]]</li>
</ul>

controller:

@Controller
public class RouterController {
    @RequestMapping("test")
    public String test(Model model){
        model.addAttribute("list", Arrays.asList("张三","李四","王五"));
        return "test";
    }
}

结果：

在这里插入图片描述

其他语法在后续用到时讲解。

th:insert="~{文件路径 :: 定义的fragment}"

引入前端组件，将多个页面中相同的部分提取出来，在该组件中使用th:fragment="topbar"来定义组件名称，在使用到的地方引入即可。

示例：

比如在commons文件夹下，commons.html中定义多个组件，如侧边栏、顶部导航栏等等

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!--顶部导航栏-->
<div th:fragment="topbar">
	...
</div>

<!--侧边栏-->
<div th:fragment="sidebar">
	...
</div>

</html>

然后再需要使用该组件的页面中引入

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>

<div th:insert="~{commons/commons:: sidebar}"></div>
<div th:insert="~{commons/commons:: topbar}"></div>

</body>
</html>

th:insert是将组件插入到div里面。

th:replace的用法和th:insert一样，不过它是将div替换为要引入的组件。

4. 扩展MVC

扩展mvc，是自己制作自己的mvc规则。

需要实现WebMvcConfigurer接口

例如：

//自定义mvc配置
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    //添加视图控制
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //访问“/” 或 "/index.html" 的时候，跳转到index页
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

_nyc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Spring boot】 07-spring boot Web开发(1)

6. Spring Boot Web开发静态资源导入首页前端页面，模板引擎Thymeleaf装配扩展SpringMVC拦截器CRUD国际化…1. 新建spring boot项目2. 静态资源导入方式一： webjars<dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId&g
复制链接

扫一扫

专栏目录