1、下載htmleditor插件:eclipse-->help-->Eclipse MarketPlace-->HtmlEditor,下載完成后重啟eclipse。
2、添加依賴及配置文件:
①熱部署依賴:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<!--devtools熱部署 -->
<configuration>
<fork>true</fork>
<addResources>true</addResources>
</configuration>
</plugin>
</plugins>
</build>
②熱部署配置(.properties文件):
spring.devtools.restart.enabled=true
③采用Thymeleaf模板引擎,因此需要添加Thymeleaf依賴:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
④配置Thymeleaf要加載的文件(.properties文件):
spring.thymeleaf.prefix=classpath:/templates/
3、編寫@Controller,以訪問html文件:
package com.zr.ams.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class LoginController {
@GetMapping("login")
public String login12() {
return "index";
}
}
4、編寫html文件(建議把腳本放在 <body> 元素的底部。這會提高網頁加載速度,因為 HTML 加載不受制於腳本加載。):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/js/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
5、springboot項目默認是不允許直接訪問template下的文件的,是受保護的。若想直接訪問html文件,而不通過Controller層,則可通過以下配置完成(.properties文件):
spring.resources.static-locations=classpath:/templates/
6、templates下的html若無法訪問static下的css,js類似,需做如下配置(.properties文件):
spring.resources.static-locations=classpath:/templates/,classpath:/static/