SpringBoot --thymeleaf(资源文件css、js的引入)
目录结构:
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>com.cxb</groupId>
<artifactId>SpringBoot-Thymeleaf</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>SpringBoot-Thymeleaf</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
application.yml(添加 笑脸:) )
spring:
thymeleaf:
#缓冲的配置
cache: false
check-template: true
check-template-location: true
#开启MVC thymeleaf 视图解析
enabled: true
encoding: utf-8
mode: HTML5
prefix: classpath:/templates/
suffix: .html
#配置数据源
datasource:
url: jdbc:mysql://127.0.0.1:3306/shiro_test?useUnicode=true&characterEncoding=utf8
username: root
password: 123456
driver-class-name: com.mysql.jdbc.Driver
jpa:
hibernate:
ddl-auto: update
show-sql: true
#指定mybatis映射文件的地址
mybatis:
#配置文件的路径
#config-location: classpath:mybatis-config.xml
mapper-locations: classpath:mapper/*.xml
# mybatis自动扫描包中的实体类,自动定义别名,别名是类名(首字母大写或小写都可以,一般用小写)
type-aliases-package: com.cxb.model
#pagehelper分页插件配置
pagehelper:
helper-dialect: mysql
reasonable: true
support-methods-arguments: true
params: countSql
package com.cxb.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
//页面跳转不能使用 @RestController 而是使用@Controller
@Controller
@RequestMapping("/home")
public class HomeController {
@RequestMapping(value="/index", method=RequestMethod.GET)
//加了@ResponseBody 就是返回字符串了
public String index(ModelMap map) {
//返回值给页面
map.addAttribute("name", "小石潭记");
return "index";
}
@RequestMapping(value="/error", method=RequestMethod.GET)
@ResponseBody
public String error() {
return "sorry error";
}
}
package com.cxb;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
public class ServletInitializer extends SpringBootServletInitializer {
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(SpringBootThymeleafApplication.class);
}
}
//直接启动这个类就可以了
package com.cxb;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
@SpringBootApplication
//没有连接数据库的时候报错 需要加上这一句
@EnableAutoConfiguration(exclude={DataSourceAutoConfiguration.class})
public class SpringBootThymeleafApplication {
public static void main(String[] args) {
SpringApplication.run(SpringBootThymeleafApplication.class, args);
}
}
//很简单的css
style.css:
.login-title{
font-size: 30px;
color: red;
}
//很简单的js
home.js:
alert("1");
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index thymeleaf</title>
<link rel="stylesheet" href="/css/style.css"/>
<script src="/js/home.js"></script>
</head>
<body>
<h1>HELLO INDEX THYMELEAF</h1>
你好,<h2 th:text="${name}"></h2>
<p class="login-title">哈哈 NBA</p>
</body>
</html>
访问链接:http://localhost:8080/home/index
总结:在引入模板引擎依赖的时候,没有成功 注意一下版本
<!--thymeleaf --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
在引入thymeleaf依赖的时候,需要注意parent里面的版本号,我测试了使用新的2.0.4版本号依赖导入不成功,改为2.0.2就好了。
2.在加载资源文件的时候,如果不成功的话,就在启动类配置一下:、
这里再配置一下静态资源的路径:
页面使用:
最终结果: