springboot加html5,springboot整合freemarker模板

springboot整合freemarker模板

Freemarker作用于表现层，能更好的实现mvc分离。

1、首先，在pom文件里加入freemarker依赖

org.springframework.boot

spring-boot-starter-freemarker

2、在配置文件application.properties中加入freemarker配置

# freemarker静态资源配置

# 设定ftl文件路径

spring.freemarker.tempalte-loader-path=classpath:/templates

# 关闭缓存，及时刷新，上线生产环境需要修改为true

spring.freemarker.cache=false

spring.freemarker.charset=UTF-8

spring.freemarker.check-template-location=true

spring.freemarker.content-type=text/html

spring.freemarker.expose-request-attributes=true

spring.freemarker.expose-session-attributes=true

spring.freemarker.request-context-attribute=request

spring.freemarker.suffix=.ftl

3、在public目录下建立freemarker文件夹

4、建立login.ftl文件

[#ftl]

杭州天纵智能管理平台

html,body{

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

body {

display: flex;

align-items: center; /*定义body的元素垂直居中*/

justify-content: center; /*定义body的里的元素水平居中*/

}

用户名

密码

登录

layui.use(['form'], function(){

var form = layui.form

,layer = layui.layer

form.on('submit(demo1)', function(data){

$.ajax({

url: "/manage/login",

type : "get",

data: data.field,

async: false,

success: function(data){

if(data>0){

alert("登录成功");

window.location.href="/index.html";

event.preventDefault();

}else{

alert("登录失败");

}

},

error:function(XMLHttpRequest, textStatus, errorThrown){

alert(XMLHttpRequest.status);//状态码

alert(XMLHttpRequest.readyState);//状态

alert(textStatus);//错误信息

}

})

});

});

5、写controller方法

@RequestMapping(value = "/manage")

@Controller

public class login(){

@RequestMapping(value="login")

public String loginFtl(HttpServletRequest request, HttpServletResponse response){

return "/freemarker/login";

}

}

6、访问localhost:8080/manage/login