Spring Boot基础学习笔记09

最新推荐文章于 2024-02-05 02:38:00 发布
最新推荐文章于 2024-02-05 02:38:00 发布
阅读量211 收藏
点赞数
分类专栏： Spring Boot框架笔记 文章标签： spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_1725046289/article/details/117029233
版权

一、Spring Boot支持的视图技术

Spring Boot框架为简化项目的整体开发，对一些常用的视图技术实现了整合支持，并主要推荐整合模板引擎技术来实现前端页面的动态化内容。
Spring Boot可整合的模板引擎技术

FreeMarker
Groory
Thymeleaf
Mustache

二、Thymeleaf基本语法

相关语法 ，请学习《thymeleaf_3.0.5_中文参考手册.pdf》 提取码：fqpu

1、Thymeleaf常用标签

2、Thymeleaf主要语法

3、Thymeleaf内置对象

4、Thymeleaf模板基本配置

三、Spring Boot整合Thymeleaf

1、创建Spring Boot项目ThymeleafDemo

设置项目元数据
在这里插入图片描述
添加项目依赖
在这里插入图片描述
在这里插入图片描述
查看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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>net.wz.lesson09</groupId>
    <artifactId>thymeleafdemo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>ThymeleafDemo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

2、在全局配置文件里配置Thymeleaf属性

在这里插入图片描述

#缓存配置，默认即是true，开发阶段设置为false
spring.thymeleaf.cache = false
#设置模板使用的编码为utf-8
spring.thymeleaf.encoding = UTF-8
#指定为模板使用的模式为html5，默认html
spring.thymeleaf.mode = HTML5
#指定前缀，默认位置为/templates/，可以修改成其它位置
spring.thymeleaf.prefix = classpath:/templates/
#指定模板文件后缀，默认值为.html，可以修改成其它值
spring.thymeleaf.suffix = .html

Thymeleaf页面缓存设置，默认为true，开发中方便调试应设置为false，上线稳定后应保持默认true。

3、创建登录控制器LoginController

在net.wz.lesson09包里创建controller子包
在controller子包里创建LoginController控制器
用于前端模板页面动态数据替换效果的测试
在这里插入图片描述

package net.wz.lesson09.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Calendar;

/**
 * 功能：登录控制器
 * 作者：吴钊
 * 日期：2021年05月24日
 */
@Controller
public class LoginController {
    /**
     * 通过请求“toLoginPage”跳转到templates目录下的
     * login页面，并把当前年份数据保存到模型对象中
     */
    @GetMapping("toLoginPage")
    public String toLoginPage(Model model){
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login"; // 返回逻辑页面视图名称
    }
}

4、创建模板文件，获取控制器传来的动态数据

在templates目录下创建模板文件login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<span th:text="${currentYear}">今年</span> -
<span th:text="${currentYear} + 1">明年</span>
</body>
</html>

在h3标签中通过th:text引入了后台动态传递过来的当前年份currentYear。

静态访问模板文件，将显示默认值，而不会显示后台传来的动态数据
在这里插入图片描述

5、启动项目，访问http://localhost:8080/toLoginPage

启动项目
在这里插入图片描述

在浏览器里访问http://localhost:8080/toLoginPage
在这里插入图片描述

四、Spring Boot集成Bootstrap

Bootstrap4教程：https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html

（一）集成Bootstrap

1、引用在线文档的方式

在模板文件中直接引用以下文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<span th:text="${currentYear}">今年</span> -
<span th:text="${currentYear} + 1">明年</span>
</body>
</html>

2、下载Bootstrap并引用的方式

Bootstrap压缩包下载链接：https://pan.baidu.com/s/1gWca14KH2OnLjoVzp7BirQ 提取码：li4b

将bootstrap-4.0.0目录拷贝项目的static目录
在这里插入图片描述

（二）编写登录页面login.html

1、集成Bootstrap

在这里插入图片描述

2、编写登录页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="text-center">
        <span th:text="${currentYear}">今年</span> -
        <span th:text="${currentYear} + 1">明年</span>
    </div>
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" placeholder="输入用户名" autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control" placeholder="输入密码">
            </div>
            <div class="checkbox text-center">
                <label>
                    <input class="form-check-input text-center" type="checkbox">记住我
                </label>
            </div>
            <div>
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit">登录</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>

<div class="col-6 m-auto" style="margin-top:30px!important;"> 分区占窗口一半宽度（水平方向按12个单位平分）、水平居中、顶边距30个像素
<div class="border border-info bg-light p-2" style="border-radius: 5px"> 设置边框（边框色、背景、内边距、圆角）
<div class="mt-1"> 设置上外边距为1个单位
<h3 class="text-center">用户登录 设置文本居中显示

3、启动项目，访问http://localhost:8080/toLoginPage

在这里插入图片描述

（三）控制器编写登录验证方法

在这里插入图片描述
在这里插入图片描述

 @PostMapping("login")
    public String login(HttpServletRequest request, Model model) {
        // 获取表单提交的用户名与密码                                                           
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 判断用户是否登录成功（假设合法用户名为howard，密码为903213）                                    
        if (username.equals("howard") && password.equals("903213")) {
            model.addAttribute("loginMsg", "恭喜，用户登录成功~");
            return "success";
        } else {
            model.addAttribute("loginMsg", "遗憾，用户登录失败~");
            return "failure";
        }
    }

（四）编写登录成功与失败的模板页面

1、编写登录成功页面success.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-info border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-success"></p>
</div>
</body>
</html>

2、编写登录失败页面failure.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>登录失败</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-warning border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-danger"></p>
</div>
</body>
</html>

（五）启动项目，测试效果

启动项目后，在浏览器里访问http://localhost:8080/toLoginPage
在这里插入图片描述

五、Thymeleaf访问模型里的数据

（一）页面访问Model里的实体数据

1、创建个人实体类 - Person

在这里插入图片描述

package net.wz.lesson09.bean;

/**
 * 功能：个人实体类
 * 作者：吴钊
 * 日期：2021年05月24日
 */
public class Person {
    private int id;
    private String name;
    private String gender;
    private int age;
    private String telephone;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }

    @Override
    public String toString() {
        return "Person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age=" + age +
                ", telephone='" + telephone + '\'' +
                '}';
    }
}

2、在登录控制器里添加获取个人信息方法

在这里插入图片描述

3、创建显示个人信息的模板页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">显示个人信息</h3>
    </div>
    <div class="panel-body">
        编号：<span th:text="${person.id}">1</span><br/>
        姓名：<span th:text="${person.name}">娃哈哈</span><br/>
        性别：<span th:text="${person.gender}">男</span><br/>
        年龄：<span th:text="${person.age}">20</span><br/>
        电话：<span th:text="${person.telephone}">15878789056</span><br/>
    </div>
</div>
</body>
</html>

3、启动应用，测试效果

启动应用
在这里插入图片描述
访问http://localhost:8080/getPerson
在这里插入图片描述
修改person.html，采用card组件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="card">
    <div class="card-header" style="background-color:royalblue">
        <h4 class="card-title" style="color:white">显示个人信息</h4>
    </div>
    <div class="card-body">
        编号：<span th:text="${person.id}">1</span><br/>
        姓名：<span th:text="${person.name}">娃哈哈</span><br/>
        性别：<span th:text="${person.gender}">男</span><br/>
        年龄：<span th:text="${person.age}">20</span><br/>
        电话：<span th:text="${person.telephone}">15878789056</span><br/>
    </div>
    <div class="card-footer">
        信工院2021.05.24
    </div>
</div>
</body>
</html>

启动应用，查看效果
在这里插入图片描述

（二）页面访问Model里的列表数据

1、创建商品实体类 - Product

在这里插入图片描述

package net.wz.lesson09.bean;

/**
 * 功能：商品实体类
 * 作者：吴钊
 * 日期：2021年05月24日
 */
public class Product {
    private int id;
    private String name;
    private double price;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", price=" + price +
                '}';
    }
}

2、创建商品控制器 - ProductController

在这里插入图片描述

package net.wz.lesson09.controller;

import net.wz.lesson09.bean.Product;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.ArrayList;
import java.util.List;

/**
 * 功能：商品控制器
 * 作者：吴钊
 * 日期：2021年05月24日
 */
@Controller
public class ProductController {
    @GetMapping("/getProducts")
    public String getProducts(Model model) {
        // 创建商品列表
        List<Product> products = new ArrayList<>();

        Product product = new Product();
        product.setId(1);
        product.setName("海尔电视机");
        product.setPrice(2500);
        products.add(product);

        product = new Product();
        product.setId(2);
        product.setName("小米手机");
        product.setPrice(2000);
        products.add(product);

        product = new Product();
        product.setId(3);
        product.setName("华为电脑");
        product.setPrice(5000);
        products.add(product);

        // 将商品列表写入模型
        model.addAttribute("products", products);
        // 返回逻辑视图名
        return "products";
    }
}

3、创建显示商品信息页面 - products.html

在这里插入图片描述

<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>商品信息</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="card">
    <div class="card-header" style="background-color:royalblue">
        <h4 class="card-title" style="color:white">显示商品信息</h4>
    </div>
    <div class="card-body">
        <ul class="list-group">
            <li class="list-group-item" th:each="product:${products}">
                编号：<span th:text="${product.id}">1</span><br/>
                名称：<span th:text="${product.name}">洗衣机</span><br/>
                单价：<span th:text="${product.price}">1000</span><br/>
            </li>
        </ul>
    </div>
    <div class="card-footer">
        信工院2021.05.24
    </div>
</div>
</body>
</html>

4、启动应用，查看效果

启动应用
在这里插入图片描述
访问http://localhost:8080/getProducts
在这里插入图片描述

5、对模型里的数据进行判断

通过${not #lists.isEmpty(products)}表达式判断products是否为空。Thymeleaf支持>、<、>=、<=、==、!=作为比较条件，同时也支持SpringEL表达式语言用于条件中。

修改显示商品信息页面

在这里插入图片描述
修改商品控制器
在这里插入图片描述
启动应用，查看效果
在这里插入图片描述

（三）页面里JavaScript访问模型里的数据

1、显示个人信息页面

添加脚本，修改代码
在这里插入图片描述
启动应用，查看效果

在这里插入图片描述

2、显示商品列表信息

添加脚本，修改代码
在这里插入图片描述
修改商品控制器
在这里插入图片描述
启动应用，查看效果
在这里插入图片描述

小钊钊丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
bootstrap.bundle.min.js.map
04-12
浏览器报错找不到这个的可以下载这个
Bootstrap的初入门
gx01013的博客
08-19 1383
Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。
BootStrap4-1
weixin_59938047的博客
08-24 1524
1.BootStrap简介 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。 Sass--CSS扩展语言 Mixin--包含一段合法Sass代码，类似于C语言
django bootstrap4,bootstrap.bundle.min.js经常访问失败，解决方案
weixin_46774426的博客
04-04 473
下载bootstrap.bundle.min.js文件，放到项目static文件夹修改bootstrap4.py 对应的bootstrap.bundle.min.js的地址为，http://项目域名/static/bootstrap.bundle.min.js。找到bootstrap4安装路径，lib/python3.9/site-packages/bootstrap4、
bootstrap和bootstrap.bundle区别
qq_40308101的博客
07-04 4197
bootstrap.bundle.js包含了popper.js这个框架，当我们在项目中引入bootstrap.bundle.min.js而不是bootstrap.min.js时，就不需要在前面引入popper.js。只在前面引入jquery.min.js就行popper.min.js 用于设置弹窗、提示、下拉菜单，是第三方插件 等于...
Spring Boot学习笔记
03-21
Thymeleaf 国际化 整合MyBatis，JDBC
spring boot 学习笔记（入门篇）
08-28
ing Boot是由Pivotal团队提供的全新框架，其设计目的是用来简化新Spring应用的初始搭建以及开发过程。这篇文章给大家带来了spring boot 入门学习笔记，需要的朋友参考下
Spring Boot 学习笔记完整教程.pdf
01-30
Spring Boot 学习笔记完整教程
Spring boot学习笔记
10-12
Spring Boot使得创建独立的，基于生产级别的基于Spring的应用程序变得容易，您可以“运行”它们。 大多数Spring Boot应用程序需要最少的Spring配置。 SpringBoot其实就是构建Spring应用程序的“脚手架”，能够帮助...
Spring Boot学习笔记(一)入门简介
01-21
Spring Boot通过整合Spring整个技术栈，来简化企业级应用的开发。 Spring Boot自动配置。 优点： 1.2 微服务 微服务：架构风格 一个应用应该是一组小型服务；可以通过HTTP的方式进行互通； 单体应用：ALL IN ONE ...
bootstrap.bundle.min.js
04-04
bootstrap.bundle.min.js,python django-bootstrap-4.6.2 版本的JS文件
bootstrap.min.js+bootstrap.css
12-27
bootstrap的js文件与bootstrap的css，下载即可上手，新手我推荐你们一个网址去学习，拿去不谢：https://v3.bootcss.com/getting-started/
Bootstrap(包含boostrap.min.js以及bootstrap.min.css)
09-27
bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
bootstrap.min.js
05-07
一个很不错的前段开发框架.使用的前提是熟练掌握javascript和jquery
bootstrap4-部分总结
m0_63300737的博客
11-21 550
轮播 <!--指示符--> <div id=“” class=”carousel slide” data-ride=”carousel” > <ul class=”carousel-indicators”> <li data-target=”” data-slide-to=”” class=”active”></li> </ul> <!--图片--> <div class=”carousel-inner”&g
bootstrap.min.css和bootstrap.min.js以及bootstrap.bundle.min.js下载，jquery各版本下载
热门推荐
# 的博客
03-16 2万+
网上查了下这三个没法直接找到（同理jquery等，都可以去引用地址直接全选复制过来） bootstrap.min.css bootstrap.min.js bootstrap.bundle.min.js 其实直接访问 https://www.bootstrapcdn.com/ ,复制网站，新建一个同名css/js文件（比如利用pycharm新建javascript文件），在ctrl+a全选中网页内...
对于bootstrap4.0 以上 使用bootstrap.bundle.min.js
ChunKitAu的博客
09-23 8937
对于引导程序4和更高版本，请使用以下文件 /lib/bootstrap/dist/js/bootstrap.bundle.min.js 代替 /lib/bootstrap/dist/js/bootstrap.min.js
BootStrap学习笔记JS插件（一）--模态弹出框
最新发布
男神的专栏
02-05 656
2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。，一般使用“modal-header”表示，主要包括标题和关闭按钮。，一般使用“modal-footer”表示，主要放置操作按钮。.modal-lg 为大弹出框；试验在触发按钮或弹出modal上设置，发现都可以使用。，一般使用“modal-body”表示，弹出框的主要内容。
spring boot 2 学习笔记
06-28
以下是一些学习Spring Boot 2的笔记： 1. Spring Boot 2的新特性：Spring Boot 2相对于Spring Boot 1.x版本来说，有许多新的特性和改进。例如，它支持Java 9和10，提供了更好的响应式编程支持，以及更好的安全性和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值