文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

SpringBoot整合Freemarker的基本步骤

2024-04-02 19:55

关注

添加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
@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;

@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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯