SpringBoot整合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; } }
测试访问
启动项目,输入http://localhost:8080/freemarker/toDemo,看到以下界面
Freemarker获取项目根路经
application.properties
spring.freemarker.request-context-attribute=request
ftl
<#assign base=request.contextPath /> <!DOCTYPE html> <html lang="zh"> <head> <base id="base" href="${base}" rel="external nofollow" > <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="external nofollow" 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" rel="external nofollow" > <link href="/static/css/bootstrap.min.css?v=3.3.6" rel="external nofollow" rel="stylesheet" type="text/css"> <link href="/static/css/font-awesome.css?v=4.4.0" rel="external nofollow" rel="stylesheet"> <!-- Sweet Alert --> <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="external nofollow" rel="stylesheet"> <link href="/static/css/animate.css" rel="external nofollow" rel="stylesheet"> <link href="/static/css/style.css?v=4.1.0" rel="external nofollow" 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=""> <input type="password" id="userPassword" class="form-control" placeholder="密码" required=""> <button class="btn btn-primary block full-width m-b" onclick="login()">登 录</button> <p class="text-muted text-center"><a href="login.ftl#" rel="external nofollow" > <small>忘记密码了?</small> </a> | <a href="register.html" rel="external nofollow" >注册一个新账号</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 == "") { // 登录 $.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) { // 失败 title: data.msg, type: "error", } } }) } </script> </body> </html>
到此这篇关于SpringBoot整合Freemarker的基本步骤的文章就介绍到这了,更多相关SpringBoot整合Freemarker内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
赞 (0)