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/> 
</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>


<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>

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

SpringBoot --thymeleaf（资源文件css、js的引入）

猜你喜欢