SpringBoot學習－（二十）SpringBoot整合Freemarker
阿新 • • 發佈：2019-02-10
基本步驟
- 新增pom依賴
- 在application.yml中新增相關配置
- 建立freemarker模板
- 建立控制層
- 測試訪問
新增pom依賴
<!-- springboot整合freemarker -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>在application.yml中新增相關配置
# 配置freemarker
spring:
freemarker:
# 設定模板字尾名
suffix: .ftl
# 設定文件型別
content-type: text/html
# 設定頁面編碼格式
charset: UTF-8
# 設定頁面快取
cache: false
# 設定ftl檔案路徑
template-loader-path:
- classpath:/templates
# 設定靜態檔案路徑，js,css等
mvc:
static-path-pattern: /static 建立freemarker模板
目錄：src/main/resources 建立templates資料夾，資料夾裡新建freemarker.ftl檔案
<!DOCTYPE>
<html>
<head>
<title>freemark</title>
</head>
<body>
<h1>Hello ${name} from resource freemark!</h1>
</body>
</html 建立控制層
package com.ahut.action;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
/**
*
* @ClassName: FreemarkerAction
* @Description: freemarker控制層
* @author cheng
* @date 2018年1月22日 下午8:19:39
*/
@Controller
@RequestMapping(value = "/freemarker")
public class FreemarkerAction {
/**
* 日誌管理
*/
private static Logger log = LoggerFactory.getLogger(FreemarkerAction.class);
/**
*
* @Title: toDemo
* @Description: 跳轉freemarker頁面
* @param mv
* @return
*/
@RequestMapping(value = "/toDemo")
public ModelAndView toDemo(ModelAndView mv) {
log.info("====>>跳轉freemarker頁面");
mv.addObject("name", "jack");
mv.setViewName("freemarker");
return mv;
}
}測試訪問
Freemarker獲取專案根路經
application.properties
spring.freemarker.request-context-attribute=requestftl
<#assign base=request.contextPath />
<!DOCTYPE html>
<html lang="zh">
<head>
<base id="base" href="${base}">
<title>首頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${base}/static/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="${base}/static/bootstrap-3.3.4/js/bootstrap.min.js"></script>js
var base = document.getElementById("base").href;
// 與後臺互動
_send = function(async, url, value, success, error) {
$.ajax({
async : async,
url : base + '/' + url,
contentType : "application/x-www-form-urlencoded; charset=utf-8",
data : value,
dataType : 'json',
type : 'post',
success : function(data) {
success(data);
},
error : function(data) {
error(data);
}
});
};Springboot配置靜態資源
package com.ahut.config;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
/**
* @author cheng
* @className: WebConfig
* @description: 靜態資源配置類
* @dateTime 2018/4/19 17:59
*/
@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
/**
* 日誌管理
*/
private Logger log = LoggerFactory.getLogger(WebConfig.class);
/**
* @description:
* @author cheng
* @dateTime 2018/4/19 17:59
*/
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
log.info("配置靜態資源所在目錄");
// 和頁面有關的靜態目錄都放在專案的static目錄下
registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
}
}Freemarker頁面引用靜態資源（CSS、JS）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpringBoot - 登入</title>
<meta name="keywords" content="springboot">
<meta name="description" content="SpringBoot">
<link rel="shortcut icon" href="favicon.ico">
<link href="/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet" type="text/css">
<link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<!-- Sweet Alert -->
<link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="/static/css/animate.css" rel="stylesheet">
<link href="/static/css/style.css?v=4.1.0" rel="stylesheet">
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html"/>
<![endif]-->
<script>if (window.top !== window.self) {
window.top.location = window.location;
}</script>
</head>
<body class="gray-bg">
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div>
<h1 class="logo-name">Spring</h1>
</div>
<h3>歡迎使用 SpringBoot</h3>
<div class="form-group">
<input type="text" id="userAccount" class="form-control" placeholder="使用者名稱" required="">
</div>
<div class="form-group">
<input type="password" id="userPassword" class="form-control" placeholder="密碼" required="">
</div>
<button class="btn btn-primary block full-width m-b" onclick="login()">登 錄</button>
<p class="text-muted text-center"><a href="login.ftl#">
<small>忘記密碼了？</small>
</a> | <a href="register.html">註冊一個新賬號</a>
</p>
</div>
</div>
<!-- 全域性js -->
<script src="/static/js/jquery.min.js?v=2.1.4"></script>
<script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Sweet alert -->
<script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
<script>
// 登入
function login() {
var userAccount = $("#userAccount").val();
var userPassword = $("#userPassword").val();
if (userAccount == "") {
return false;
}
if (userPassword == "") {
return false;
}
// 登入
$.ajax({
url: "/v1/login",
type: "GET",
data: {
userAccount: userAccount,
userPassword: userPassword
},
success: function (data) {
if ("SUCCESS" == data.type) {
// 成功
swal({
title: "登入成功",
timer: 1000,
type: "success",
showConfirmButton: false
});
} else if ("FAIL" == data.type) {
// 失敗
swal({
title: data.msg,
timer: 1000,
type: "error",
showConfirmButton: false
});
}
}
})
}
</script>
</body>
</html>