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)

相关推荐

  • springboot整合freemarker代码自动生成器

    手撸一个代码自动生成器!! 实现功能:MyBatis 逆向工程 技术架构 页面是用 Vue ,element-ui开发:网络请求是 Axios. 服务端是 Spring Boot 页面模版是 Freemarker: 开发步骤: 一.创建工程 二.数据库连接操作 1.所需包结构 2.在model包中创建Db类 作用:用于接受前端传来数据库连接相关的值(username,password,url) package com.example.generate_code.model; /** * @aut

  • Springboot整合FreeMarker的实现示例

    目录 一.项目搭建 1.新建模块 2.导入依赖 :将不相关的依赖删掉 3.新建软件包,放入student实体类 4.新建StudentMapper接口 5.Springboot04Application内引用mapper 6.application.yml文件配置 7.测试 8.将切面.util包.启动器导入 9.新建service层 10.新建controller层 11.运行启动类Springboot04Application,访问localhost:8080网址 二.freemarker介

  • Springboot整合Freemarker的实现详细过程

    基本配置.测试 1.导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> 2.准备一个Freemarker模板(.ftl) 3.注入Configuration对象(freemarker.template包下) 4.生成商品详情模

  • springboot 整合 freemarker代码实例

    这篇文章主要介绍了springboot 整合 freemarker代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.6.RELEASE&l

  • Springboot整合freemarker和相应的语法详解

    FreeMarker 是⼀款 模板引擎: 即⼀种基于模板和要改变的数据, 并⽤来⽣成输出⽂本(HTML⽹⻚,⼦邮件,配置⽂件,源代码等)的通⽤⼯具. 是⼀个Java类库. FreeMarker 被设计⽤来⽣成 HTML Web ⻚⾯,特别是基于 MVC 模式的应⽤程序,将视图从业务逻辑抽离处理,业务中不再包括视图的展示,⽽是将视图交给 FreeMarker 来输出.虽然 FreeMarker 具有些编程的能⼒,但通常由 Java 程序准备要显示的数据,由 FreeMarker ⽣成⻚⾯,通过模板

  • SpringBoot整合Freemarker的基本步骤

    添加pom依赖 <!-- springboot整合freemarker --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> 在application.yml中添加相关配置 # 配置freemarker spring:

  • SpringBoot整合Freemarker实现页面静态化的详细步骤

    第一步:创建项目添加依赖: <!--web和actuator(图形监控用)基本上都是一起出现的--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.spri

  • SpringBoot整合freemarker的讲解

    freemarker和thymeleaf是模板引擎.在早前我们使用Struts或者SpringMVC等框架的时候,使用的都是jsp,jsp的本质其实就是一个Servlet,其中的数据需要在后端进行渲染,然后再在客户端显示,效率比较低下.而模板引擎恰恰相反,其中的数据渲染是在客户端,效率方面比较理想一点.前后端不分离的话用模板引擎比较好,前后端分离的话其实用处并不大很大.Spring官方比较推荐的是thymeleaf,其文件后缀是html.本篇文章我们主要来看看SpringBoot整合freema

  • 使用sts工具、SpringBoot整合mybatis的详细步骤

    SpringBoot 集成 Mybatis 框架 一.1.SpringBoot 集成 Mybatis 的基本步骤 第一步:添加依赖: 第二步:配置数据源: 第三步:扫描接口包. 二.详细的集成步骤如下: 1.第一步:添加依赖: 添加依赖:除了常规依赖外,需要加入 Mybatis 代码如下(示例): <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XM

  • SpringBoot整合Drools的实现步骤

    Drools有什么用 从我个人所待过的公司,其中做智能酒店这个项目时就用到规则引擎Drools,将它用于处理优惠劵规则. SpringBoot整合Drools初步实战 1.导入Maven依赖 <properties> <drools.version>7.14.0.Final</drools.version> </properties> <!-- drools --> <dependency> <groupId>org.dr

  • SpringBoot整合MongoDB的实现步骤

    目录 一.技术介绍 1.MongoDB是什么? 二.使用步骤 1.引入maven库 2.具体使用示例 3.配置文件 4.单元测试 总结 一.技术介绍 1.MongoDB是什么? MongoDB(来自于英文单词"Humongous",中文含义为"庞大")是可以应用于各种规模的企业.各个行业以及各类应用程序的开源数据库.作为一个适用于敏捷开发的数据库,MongoDB的数据模式可以随着应用程序的发展而灵活地更新.与此同时,它也为开发人员 提供了传统数据库的功能:二级索引,

  • SpringBoot整合之SpringBoot整合MongoDB的详细步骤

    目录 一.创建项目,选择依赖 二.引入相关依赖(非必要) 三.如果是第一次使用MongoDB,首先先创建用户 四.定义核心配置文件 六.创建dao层,这里的dao层有两种写法 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.本文介绍SpringBoot整合之SpringBoot整合MongoDB的步骤. 一

随机推荐