springboot--01(新建springboot web專案,使用模板thymeleaf返回檢視)
阿新 • • 發佈：2018-12-07
1.建立springboot web專案
使用thymeleaf模板引擎
自動生成的pom檔案：
<?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> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.1.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.wx</groupId> <artifactId>thymeleaf</artifactId> <version>0.0.1-SNAPSHOT</version> <packaging>war</packaging> <name>thymeleaf</name> <description>Demo project for Spring Boot</description> <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-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-starter-tomcat</artifactId> <scope>provided</scope> </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>
新增配置檔案返回檢視解析器：
server.port=8090
#spring.jackson.serialization.fail-on-empty-beans=false
#thymeleaf模版字首
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.cache=false
spring.thymeleaf.suffix=.html建立一個index頁面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="hemi/js/funnelView.js"></script> <h3 class="page-title"> Echarts 展示 <small>視覺化圖表</small> </h3> <script src="../static/js/echarts.common.min.js"></script> <script src="../static/js/showChart.js"></script> </head> <body> <div class="row"> <div class="col-lg-6 col-sm-12 col-xs-12 col-sm-12"> <div id="showChart" style="width:100%;height:600px;margin-left:0px;margin-right:6px;margin-bottom:8px;float:left;overflow:hidden;"></div> </div> <div class="col-lg-6 col-sm-12 col-xs-12 col-sm-12"> <div id="showFunnelChart" style="width:100%;height:600px;margin-left:0px;margin-right:6px;margin-bottom:8px;float:left;overflow:hidden;"></div> </div> </div> </body> </html>
建立一個Controller:這裡需要注意，如果返回檢視解析器就需要@Controller 而不是使用合成註解@RestController
因為他包含了ResponseBody註解表示返回json字串
@Controller
public class IndexController {
@RequestMapping("/index")
public String index()
{
return "index";
}
}結果：
如果想要返回String:
結果：
