标题:使用Springboot引入css和js 之前一直使用springboot+mvc+jsp 实现简单的增删改查. 使用jsp 引入bootstrap样式没有什么大的问题
<link href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script href="${pageContext.request.contextPath}/bootstrap/js/bootstrap.js"></script>
源样式存放在resource下的static文件下可正常使用
这几天使用新的框架去写的时候就出了新的bug
使用Springboot+thymeleaf+bootstarp写的时候一直在导入css上面出了bug.
找不到css 和js习惯下的查看下配置文件
第一个bug 是没有加上配置文件的约束
'''
server:
port: 8080
spring:
mvc:
static-path-pattern: /static/**
thymeleaf:
#缓冲的配置
cache: false
datasource:
name:
url: jdbc:mysql://127.0.0.1:3306/bank_project?useUnicode=true&characterEncoding=UTF-8&allowMultiQueries=true&serverTimezone=UTC
username: root
password: root
web:
resources:
static-locations: classpath:/static/
mybatis:
mapper-locations: classpath:mapper/*.xml
'''
Springboot2.0+需要配置下静态资源,如果不在需要修改
之后再修改导入的设置
更改为
'''
<!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
<!-- <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
'''
直接使用cdn来写就不会找不到,如果配置在本地的话就需要
'''
<link rel="stylesheet" type="text/css" media="all" href="/static/css/bootstrap.css"
th:href="@{/static/css/bootstrap.css}"/>
<script type="text/javascript" src="/static/js/bootstrap.js" th:src="@{/static/js/thymeleaf.js}"></script>
'''
将配置文件都放在static下面.然后使用相对路径来查找
以下是HTML引入方法,如果springboot使用thymeleaf模板,下面写法无法正常引入资源文件,需改为thymeleaf引入方法
HTML引入方法:
'''
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery.js"></script>
'''
至此bug结束.
语法规则
th:text;改变当前元素里面的文本内容
th:任意html属性;来替换原生属性的值
th:include:加载模板的内容: 读取加载节点的内容(不含节点名称),替换div内容
th:replace:替换当前标签为模板中的标签,加载的节点会整个替换掉加载他的div
th:attr 来设置任意属性
th:attrprepend 来追加(不是替换)属性值
th:classappend
th:each每次遍历都会生成当前这个标签
th:href="@{...}" 替换url
th:text="${...}" 转译特殊字符,特殊符号原方不动输出
th:utext="${...} 会转译字符,特殊符号被转译后输出结果