Spring Boot学习篇(七)

news2024/11/27 6:20:07

Spring Boot学习篇(七)

1.thymeleaf模板引擎使用篇(一)

1.1 准备工作

1.1.1 在pom.xml中导入所需要的依赖

a thymeleaf模板引擎所需要的依赖
<!--thymeleaf模板引擎,前后端不分离的时候用 普通的html格式-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
b 完整版pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>boot-plus</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!--①继承springboot项目-->
    <parent>
        <artifactId>spring-boot-starter-parent</artifactId>
        <groupId>org.springframework.boot</groupId>
        <version>2.7.2</version>
    </parent>
    <!--② 导入相关依赖-->
    <dependencies>
        <!--2.1 导入springboot所需要的依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--2.2 导入mysql数据库依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <!--2.3 导入lombok依赖,便于写实体类-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!--2.4 导入mybatisPlus所需依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!--2.5 导入springboot项目中单元测试所需依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>

        <!--2.6 导入代码生成器所需要的依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.3</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.3</version>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.1</version>
        </dependency>
        <!--2.7 thymeleaf模板引擎,freemarker 前后端不分离的时候用 普通的html格式-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--2.8 导入热部署所需要的依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
    </dependencies>

</project>

1.1.2 创建com包.zlz包,其目录结构如下所示

在这里插入图片描述

1.1.3 在zlz包下创建Spring boot启动类ThymeleafStart类,内容如下所示

package com.zlz;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ThymeleafStart {
    public static void main(String[] args) {
        SpringApplication.run(ThymeleafStart.class);
    }
}

1.1.4 在zlz包下创建代码生成器类MyGenerator,其内容如下所示

package com.zlz;

import com.baomidou.mybatisplus.generator.FastAutoGenerator;
import com.baomidou.mybatisplus.generator.config.OutputFile;
import com.baomidou.mybatisplus.generator.config.rules.DateType;

import java.util.Collections;

public class MyGenerator {
    public static void main(String[] args) {
        //注意MYSQL本身默认的端口号为3306
        // 因为笔者配置了两个MYSQL版本的数据库,为了避免冲突,就改了MYSQL8版本的端口号为3306
        FastAutoGenerator.create("jdbc:mysql://127.0.0.1:3305/db0618", "root", "root")
                .globalConfig(builder -> {
                    builder.author("zlz") // 设置作者
                            .dateType(DateType.ONLY_DATE) // 时间策略,日期以什么样子的类型去生成
                            .outputDir("F:\\boot\\boot-thymeleaf\\src\\main\\java"); // 指定输出目录
                })
                .packageConfig(builder -> {
                    builder.parent("com.zlz") // 设置父包名
                            .pathInfo(Collections.singletonMap(OutputFile.xml, "F:\\boot\\boot-thymeleaf\\src\\main\\resources\\mapper")); // 设置mapperXml生成路径,
                    // 注意:这个mapper文件夹是可以不存在的,运行该main方法会自动创建的
                })
                .strategyConfig(builder -> {
                    //开启lombok
                    builder.entityBuilder().enableLombok();
                    //覆盖现有文件
//                    builder.entityBuilder().fileOverride();
                    builder.addInclude("songs"); // 设置需要生成的表名,想一次性生成多张表,就用逗号隔开,如:addInclude("songs","music")
                })
                .execute();
    }
}

1.1.5 运行代码生成器后的目录结构如下所示

在这里插入图片描述

1.1.6 在resources资源文件夹下面创建application.yml文件,其内容如下所示

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource #连接池类型
    url: jdbc:mysql://127.0.0.1:3305/db0618
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: root
  thymeleaf:
    cache: false #开发阶段关闭缓存 上线后 开启
mybatis-plus:
  type-aliases-package: com.zlz.entity #实体别名扫描
#配置日志 查看具体的sql执行语句
logging:
  level:
    com.zlz.mapper: debug

1.1.8 在zlz包下创建config包,并创建PlusConfig类

a 目录结构如下所示

在这里插入图片描述

b 在config包下创建PlusConfig类(实现接口扫描和mybatis-plus中分页插件的配置),其内容如下所示
package com.zlz.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.OptimisticLockerInnerInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
@MapperScan("com.zlz.mapper")//mapper接口扫描，@MapperScan也可以放在启动类PlusStart上面(启动类也算配置类)
public class PlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //设置分页插件,别的拦截器也是addInnerInterceptor加入进去
        PaginationInnerInterceptor pi = new PaginationInnerInterceptor();
        pi.setDbType(DbType.MYSQL);//设置数据库类型为MySQL
        pi.setOverflow(true);//溢出分页处理,默认是false不处理,需要设置成true,保证分页合理化
        interceptor.addInnerInterceptor(pi);
        return interceptor;
    }
}

1.1.9 在resources文件夹下创建templates文件夹(默认放html页面的),其目录结构如下所示

在这里插入图片描述

1.2 配置默认访问页面

1.2.1 在templates文件夹下创建homepage.html,其内容如下所示

<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <h1>默认页面的显示</h1>
</body>
</html>

1.2.2 在controller包下创建WelcomeController类

package com.zlz.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class WelcomeController {
    //@RequestMapping("/")表示访问localhost:8080地址时 默认进入homepage.html页面
    //没有在application中配置context-path,因而访问路径默认就是/,若配置了成/a,那下面的地址也应改为/a
    @RequestMapping("/")
    public String welcome(){
        //想要项目初始启动时默认显示啥页面,就写啥页面的名字(不含后缀)
        return "homepage";
    }

}

1.2.3 启动项目并访问localhost:8080的结果如下所示

在这里插入图片描述

1.2.4 我并没有配置视图解析器,为啥它可以进入homepage.html页面???

a thymeleaf默认配置的视图解析器的前缀下图所示

在这里插入图片描述

b thymeleaf默认配置的视图解析器的后缀下图所示

在这里插入图片描述

c 而自己写的html页面都放在resources文件夹下面的templates目录下,因此我们无需配置视图解析器

1.2.5 注意点

在templates文件夹下面的目录并不能直接在地址栏进行访问,只能通过控制器Controller去进行访问
若想要进行直接访问,可以通过过滤器拦截然后走视图解析器去进行访问

1.3 如何引入外部资源

1.3.1 引入css样式文件

a css文件所在目录结构

在这里插入图片描述

b css样式文件代码
b.1 first.css
body{
    background: orange;
}
b.2 second.css
body{
    background: skyblue;
}
c 引入css样式关键代码
c.1 html引入方式
<link href="/css/first.css" rel="stylesheet">
c.2 thymeleaf引入方式
<link th:href="@{/css/second.css}" rel="stylesheet">
d html引入方式测试
d.1 测试代码homepage.html
<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--html引入方式 路径中不用写static目录,直接写其子目录即可,链接不可连过去是没有关系的-->
    <link href="/css/first.css" rel="stylesheet">
</head>
<body>
     <h1>默认页面的显示</h1>
</body>
</html>
d.2 运行截图

在这里插入图片描述

e thymeleaf引入方式测试
e.1 测试代码homepage.html
<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--thymeleaf引入方式 在href前加th: 在@{}里面写引入地址-->
    <link th:href="@{/css/second.css}" rel="stylesheet" >
</head>
<body>
     <h1>默认页面的显示</h1>
</body>
</html>
e.2 运行截图

在这里插入图片描述

1.3.2 引入js脚本文件

a js文件所在目录结构

在这里插入图片描述

b js样式文件代码
b.1 first.js
$(function(){
    $("button").click(function () {
        alert("html引入js脚本文件的方式");
    })
})
b.2 second.js
$(function(){
    $("button").click(function () {
        alert("thymeleaf引入js脚本文件的方式");
    })
})
c 引入js脚本文件关键代码
c.1 html引入方式
 <script src="/js/jquery-3.6.1.js"></script>
 <script src="/js/first.js"></script>
c.2 thymeleaf引入方式
 <!--在src前加th: 在@{}里面写引入访问地址,注意:这里不用写static文件夹-->
  <script th:src="@{/js/jquery-3.6.1.js}"></script>
  <script th:src="@{/js/second.js}"></script>
d html引入方式测试
d.1 测试代码homepage.html
<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.6.1.js"></script>
    <!--html引入js文件的方式 同样不用写static目录,也可以不用写type="text/javascript"
    现代浏览器默认脚本语言就是它-->
    <script src="/js/first.js"></script>
</head>
<body>
     <h1>默认页面的显示</h1>
     <button>测试按钮</button>
</body>
</html>
d.2 运行截图

在这里插入图片描述

e thymeleaf引入方式测试
e.1 测试代码homepage.html
<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-3.6.1.js}"></script>
    <!--thymeleaf引入js文件的方式-->
    <script th:src="@{/js/second.js}"></script>
</head>
<body>
     <h1>默认页面的显示</h1>
     <button>测试按钮</button>
</body>
</html>
e.2 运行截图

在这里插入图片描述

1.3.3 引入图片资源

a 图片文件所在目录结构

在这里插入图片描述

b clean一下项目(保证下次运行时img文件夹能被顺利生成到target目录中)
b.1 点击右侧的maven

在这里插入图片描述

b.2 找到当前项目➡点击clean按钮

在这里插入图片描述

c 引入图片资源关键代码
c.1 html引入方式
<img src="/img/2.jpg">
c.2 thymeleaf引入方式
<img th:src="@{/img/2.jpg}" alt="">
d html引入方式测试
d.1 测试代码homepage.html
<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <h1>默认页面的显示</h1>
     <!--第一种:html方式引入-->
     <img src="/img/2.jpg">
</body>
</html>
d.2 运行截图

在这里插入图片描述

e thymeleaf引入方式测试
e.1 测试代码homepage.html
<!DOCTYPE html>
<!--xmlns:th="http://www.thymeleaf.org" 表示引入Thymeleaf 的命名空间 可选(但是建议加上)-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <h1>默认页面的显示</h1>
     <!--第二种:thymeleaf方式引入-->
     <img th:src="@{/img/2.jpg}" alt="">
</body>
</html>
e.2 运行截图

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/143252.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机网络实验---Wireshark 实验

计算机网络实验---Wireshark 实验

数据链路层 实作一/熟悉 Ethernet 帧结构 实作二/了解子网内/外通信时的 MAC 地址 实作三/掌握 ARP 解析过程 网络层 实作一 /熟悉 IP 包结构 实作二 IP 包的分段与重组 实作三 考察 TTL 事件 传输层 实作一 熟悉 TCP 和 UDP 段结构 实作二 分析 TCP 建立和释放连接 应用层 …
阅读更多...
数据结构基本介绍

数据结构基本介绍

1.what is Data Structure? A data structure is a memory used to store and organize dataIt is also used for processing, retrieving, and storing data 2. what is classification of Data Structure? 2.1 what is Linear data structure? Data structure in which…
阅读更多...
你还不懂递归么？不允许你不懂，进来折腾下自己吧

你还不懂递归么？不允许你不懂，进来折腾下自己吧

举例数组 const arr [ {id: "1175310929766055936", pid: "", name: "总裁办" },---返回空数组, {id: "1175311213774962688", pid: "", name: "行政部" },---返回空数组, {id: "1175311267684352000&qu…
阅读更多...
随想录一刷Day27——回溯算法

随想录一刷Day27——回溯算法

文章目录Day27_回溯算法13. 子集 II14. 491.递增子序列15. 全排列全排列 IIDay27_回溯算法 13. 子集 II 90. 子集 II class Solution { private:vector<vector<int>> result;vector<int> path;void backtracking(vector<int>& nums, int startI…
阅读更多...
[SwiftUI 开发] Widget 小组件

[SwiftUI 开发] Widget 小组件

小组件简述 小组件可以在主屏幕上实现内容展示和功能跳转。 系统会向小组件获取时间线&#xff0c;根据当前时间对时间线上的数据进行展示。点击正在展示的视觉元素可以跳转到APP内&#xff0c;实现对应的功能。 小组件是一个独立于 App 环境(即 App Extension)&#xff0c;小…
阅读更多...
谷粒学院——第二十一章、spring security详细

谷粒学院——第二十一章、spring security详细

一、Spring Security介绍 1、Spring Security简介 Spring 是非常流行和成功的 Java 应用开发框架&#xff0c;Spring Security 正是 Spring 家族中的成员。Spring Security 基于 Spring 框架&#xff0c;提供了一套 Web 应用安全性的完整解决方案。 正如你可能知道的关于安全…
阅读更多...
年度征文｜2022年「博客之星」，花落谁家？ 大家来竞猜吧

年度征文｜2022年「博客之星」，花落谁家？ 大家来竞猜吧

一年一度的「博客之星」大赛如火如荼地进行着&#xff0c;大家都忙着评分、发帖、回帖.....今天发现我在分组的排名只有40多名&#xff0c;基本上算是放弃了。但是&#xff0c;看到本文的朋友&#xff0c;还是可以帮我拉拉票的&#xff01;请点开链接给个五星评分&#xff1a; …
阅读更多...
CentOS服务器署Springboot的java项目最简单操作步骤

CentOS服务器署Springboot的java项目最简单操作步骤

CentOS服务器署Springboot的java项目最简单操作步骤 准备工作 1.首先本地有一个能跑起来正常的 java 项目的 jar 包; 2.有一个前端项目, 可以仅是一个 index.html 文件; 3.需要备案好的域名 (可选, 否则只能 ip 访问) 4.购买阿里云或者腾讯云等等任意 CentOS 服务器一个 1. 获…
阅读更多...
（机器学习深度学习常用库、框架|Pytorch篇）第（待定）节：卷积神经网络CNN中一些经典网络结构写法

（机器学习深度学习常用库、框架|Pytorch篇）第（待定）节：卷积神经网络CNN中一些经典网络结构写法

文章目录一&#xff1a;LeNet-5二&#xff1a;AlexNet三&#xff1a;VGG四&#xff1a;ResNet五&#xff1a;MobileNetV1六&#xff1a;InceptionNet一&#xff1a;LeNet-5 LeNet-5&#xff1a;LeNet-5是一个较简单的卷积神经网络。下图显示了其结构&#xff1a;输入的二维图像…
阅读更多...
ansible通过多种方法配置yum源仓库

ansible通过多种方法配置yum源仓库

目录 1.挂载本地光盘到/mnt ​2.配置yum源仓库文件通过多种方式实现 仓库1 &#xff1a;Name: RH294_BaseDescription&#xff1a; RH294 base softwareBase urt: file:///mnt/BaseOS不需要验证钦件包 GPG 签名启用此软件仓库 ​编辑仓库 2:Name: RH294_StreamDescription &…
阅读更多...
第四十二篇 nextTick

第四十二篇 nextTick

在前面封装swiper组件当中&#xff0c;通过许多种方式方法&#xff0c;其一从mounted初始化过早转到updated后出现初始化重复&#xff0c;再者通过设置key值和使用v-if控制swiper组件&#xff0c;然后通过Vue.diretive自定义指令的方式来封装swiper组件&#xff0c;那么本篇的n…
阅读更多...
排序算法之快速排序

排序算法之快速排序

目录 排序算法介绍 快速排序 算法流程 算法实现 python C 快排为什么快 算法优化 基准数优化 python C 尾递归优化 python C 排序算法介绍 《Hello算法》是GitHub上一个开源书籍&#xff0c;对新手友好&#xff0c;有大量的动态图&#xff0c;很适合算法初学者自…
阅读更多...
Struts2框架标签

Struts2框架标签

Struts2框架标签1、前言2、UI标签2.1、表单标签2.1、非表单标签3、通用标签4、例子4.1、实体类User4.2、控制器UserAction4.3、配置文件struts.xml4.4、页面users.jsp4.5、测试1、前言 Struts2有丰富的tag标签可以使用&#xff0c;即Struts2的标签库&#xff0c;如果能够灵活运…
阅读更多...
彻底理解动态规划：编辑距离

彻底理解动态规划：编辑距离

本篇的题目非常经典&#xff0c;几乎是面试必备&#xff0c;即&#xff0c;编辑距离问题&#xff0c;edit distance&#xff1b; 给定两个字符串word1以及word2&#xff0c;返回将word1转为word2需要的最少步骤&#xff0c;在每一步中你可以针对字符串word1进行以下操作&#…
阅读更多...
技术开发115

技术开发115

技术开发115 业务内容&#xff1a; 拖车用辅助脚、拖车用零件类、特殊车辆用车轴Sub。Assy产品、面向汽车产业的生产设备、面向建设机械的零部件类、面向汽车产业的检查夹具 公司简介&#xff1a; 董事长&#xff1a;佐藤安弘 资本金&#xff1a;4500万日元 员工数&#x…
阅读更多...
shell第五天练习

shell第五天练习

题目&#xff1a; 1、编写函数&#xff0c;实现打印绿色OK和红色FAILED&#xff0c;判断是否有参数&#xff0c;存在为Ok&#xff0c;不存在为FAILED 2、编写函数&#xff0c;实现判断是否无位置参数&#xff0c;如无参数&#xff0c;提示错误 3、编写函数实现两个数字做为参数…
阅读更多...
聊聊前端安全之CSRF

聊聊前端安全之CSRF

本文作者为奇舞团前端开发工程师一、什么是CSRFCSRF&#xff08;Cross Site Request Forgery&#xff0c;跨站域请求伪造&#xff09;&#xff0c;通常缩写为 CSRF。CSRF攻击是攻击者通过伪装成受信任用户向服务器发起各种请求&#xff0c;达到欺骗服务器接收并执行指令&#x…
阅读更多...
【数据结构】顺序表

【数据结构】顺序表

【本篇内容】线性表顺序表线性表线性表是n个具有相同特性的数据元素的有限序列。常见的线性表&#xff1a;顺序表、链表、栈、队列、字符串......线性表在逻辑上是线性结构&#xff0c;但是在物理结构上并一定是连续的&#xff0c;线性表在物理上存储时&#xff0c;通常是以数组…
阅读更多...
保证原子性的几种方式，你都知道吗？？？

保证原子性的几种方式，你都知道吗？？？

1. 前言 今天主要是从实战 浅谈原理的角度来说下&#xff0c;并发线程下原子性的几种处理方式&#xff0c;好了废话不多说了&#xff0c;接下来让我们看看吧 2. 开始 在开始之前需要提问下大家, 代码i ; 能保持原子性吗&#xff1f;&#xff1f;&#xff1f; 是不是一句话就执…
阅读更多...
C++——命名空间，输入输出，缺省参数

C++——命名空间，输入输出，缺省参数

✅<1>主页&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;数据结构——二叉树 &#x1f525;<3>创作者&#xff1a;我的代码爱吃辣 ☂️<4>开发环境&#xff1a;Visual Studio 2022 &#x1f4ac;<5>前言&#xff1a;补充C语言…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023