Spring Boot整合thymeleaf笔记二

Thymeleaf前端模板是Spring Boot提供的模板。通俗的说，Thymeleaf完全可以替代JSP。Thymeleaf 是现代服务端的模板引擎，与传统的 JSP 不同，Thymeleaf 可以使用浏览器直接打开，因为它可以忽略掉拓展属性，相当于打开原生页面，给前端人员也带来了一定的便利。

thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。

Spring Boot整合thymeleaf步骤：
1、pom.xml 引入依赖

		<dependency> 
     		<groupId>org.springframework.boot</groupId> 
    		 <artifactId>spring-boot-starter-thymeleaf</artifactId>
	    </dependency>

2、配置application.yml配置文件

 thymeleaf:
    cache: false   # 开发时禁用缓存
    prefix: classpath:/templates/
    suffix: .html
    encoding: UTF-8
    content-type: text/html
    mode: HTML5

3、在src/main/resources下新建文件夹templates，并建立login.html
在这里插入图片描述
4、编写login.html页面

<!DOCTYPE html>
<html>
  <head>
    <title>login1.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3"/>
    <meta name="description" content="this is my page"/>
    <meta name="content-type" content="text/html; charset=UTF-8"/>
    <head th:insert="templates/head.html"></head>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link href="/css/style.css" rel="stylesheet" type="text/css"/>
  </head>
  
  <body>
    <div class="container">
        <div class="form row">
            <div class="form-horizontal col-md-offset-3" id="login_form">
                <h3 class="form-title">Movie System</h3>
                <div class="col-md-9">
                    <div class="form-group">
                        <i class="fa fa-user fa-lg"></i>
                        <input class="form-control required" type="text" placeholder="Username" id="username" name="userid" autofocus="autofocus" maxlength="20" />
                    </div>
                    <div class="form-group">
                        <i class="fa fa-lock fa-lg"></i>
                        <input class="form-control required" type="password" placeholder="Password" id="password" name="pwd" maxlength="8" />
                    </div>
                    <div class="form-group">
                        <label class="checkbox">
                            
                        </label>
                    </div>
                    <div class="form-group col-md-offset-9">
                        <button type="submit" class="btn btn-success pull-right" name="submit" id="login_submit">登录</button>
                        <button type="submit" class="btn btn-success pull-right" name="submit" id="login_submit">注册</button>
                    </div>
                    
                </div>
            
        </div>
    </div>
    </div>
  </body>
  <script src="/script/login.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        login.init();
    });
</script>
</html>

5、在src/main/resources下新建文件夹static，该文件夹下存放css，js等文件。
在这里插入图片描述
6、编写业务控制层Controller

@Controller  //处理请求
@RequestMapping("/movie")
public class MovieController { 
@RequestMapping("/Login") 
    public String Login() { 
        return "Login"; 
    } 
}

7、结果展示
在这里插入图片描述 ----------------------------------------------------------------------------------------------------------------
优化Spring Boot操作：

开启Spring Boot项目后，如若修改代码，无需重启项目，配置以下信息，即可无需重启Tomcat，项目会自动开启（即热部署操作）：
1、在pom.xml中注入依赖：

<!-- 无需重启Tomcat -->
	    <dependency>
    		<groupId>org.springframework.boot</groupId>
    		<artifactId>spring-boot-devtools</artifactId>
    		<optional>true</optional> <!-- 这个需要为 true 热部署才有效 -->
		</dependency>
		<dependency>
    		<groupId>org.springframework</groupId>
    		<artifactId>springloaded</artifactId>
    		<version>1.2.6.RELEASE</version>
		</dependency>

2、配置application.yml文件

devtools:
  livereload:
    enabled: true #是否支持livereload
    port: 35729
  restart:
    enabled: true #是否支持热部署

3、在Myeclipse中选择project->Build Automatically，打上对勾。
在这里插入图片描述

Spring Boot整合thymeleaf笔记二

猜你喜欢