SpringBoot前端模板

article/2025/8/17 0:51:54

Springboot支持thymeleaf、freemarker、JSP,但是官方不建议使用JSP,因为有些功能会受限制,这里介绍thymeleaf和freemarker。
这里写图片描述

一、thymeleaf模板

thymeleaf模板的前端界面为.html格式的文件,可以直接使用浏览器进行查看,方便进行样式等方面的调试。

1、pom依赖添加

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency>

通过mvn dependency:tree查看maven关联树,发现thymeleaf自动依赖导入web包,因此,无需再导入web包。

2、application属性配置

查看官方文档的默认配置介绍如下:
这里写图片描述
这里必须要注意的是,开发的时候要关闭模板缓存,不然修改界面文件后无法实时显示。在application.properties文件中关闭模板缓存:

spring.thymeleaf.cache=false

关闭缓存后,修改html文件,可以直接Ctrl+F9编译后,显示最新的修改内容。

3、编写界面

我的界面hello.html路径为:templates/template/hello.html,代码:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Title</title>
</head>
<body><!--/*@thymesVar id="name" type="java.lang.String"*/--><p th:text="'Hello, ' + ${name}" ></p>
</body>
</html>

4、编写controller

package com.example.demo.template;import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
@RequestMapping("/html")
public class HtmlController {@RequestMapping("/hello")public String hello(Model model) {model.addAttribute("name", "world");return "template/hello";}
}

运行访问,如下:
这里写图片描述

thymeleaf具体使用参考

http://blog.csdn.net/z719725611/article/details/53908294

二、freemarker模板

1、pom依赖添加

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency>

注意:允许thymeleaf和freemarker同时存在

2、application属性配置

查看官方文档的默认配置介绍如下:
这里写图片描述
application.properties文件无需配置,使用默认配置即可

3、编写界面

我的界面hello.ftl路径为:templates/ftl/hello.ftl,代码:

<!DOCTYPE html>
<html>
<head><title>Title</title>
</head>
<body>message:${message}
</body>
</html>

4、编写controller

package com.example.demo.template;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.Map;@Controller
@RequestMapping("/ftl")
public class FreemarkerController {@RequestMapping("/hello")public String hello(Map<String,Object> map) {map.put("message", "hello,world");return "ftl/hello";}
}

接下来启动运行即可。
freemarker具体使用参考
http://blog.csdn.net/fhx007/article/details/7902040/
http://blog.csdn.net/tang9140/article/details/39695653


http://chatgpt.dhexx.cn/article/wXPDnxwj.shtml

相关文章

后台管理系统前端模板(html + CSS + JavaScript)

这是为大家准备的资源链接&#x1f910;&#x1f910;&#x1f910;&#xff1a; 提取码&#xff1a;0000 bootstrap_htmb.zip_免费高速下载|百度网盘-分享无限制百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#…

39个精美前端模板

为了方便广大程序员开发&#xff0c;整理了网上常见的免费的后台模板给大家。 1.Ace_admin Ace_admin 下载地址&#xff1a;http://pan.baidu.com/s/1dFaRCCL 2.AdminEx AdminEx 下载地址&#xff1a;http://pan.baidu.com/s/1gfxOkpl 3.AdminLTE AdminLTE 下载地址&a…

django 使用网上下载的前端模板

记录一下django使用前端模板的过 新手&#xff0c;没写过前端&#xff0c;不对的地方欢迎大神指教&#xff01;&#xff01;&#xff01;谢谢。 环境 windows7 django3.X pycharm 1使用pycharm 创建django项目 2创建app&#xff0c;python manage.py startapp app名称 3把下载好…

基于html+css+js线上订餐系统前端模板

h180效果图 部分源码 html <!doctype html> <html> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"><title>Cooker</title><meta name"descriptio…

使用Vue+Element-UI从0搭建一个常见的前端模板

首先&#xff0c;创建一个vue项目&#xff0c;这里不做过多阐述&#xff0c;直接写模板 简单的介绍一下一般的页面布局包括顶部导航栏&#xff0c;左侧菜单栏&#xff0c;和主要的信息展示页面 我们直接勾勒出一个这样的架子,这里使用了element-UI&#xff0c;记得用npm下载一…

免费html模板bootstrap,20 款超棒免费的 Bootstrap 管理和前端模板

1. SB Admin 2 2. Admin Lite 3. Director Responsive Admin Template Free 4. Free Bootstrap Admin Template Dream 5. Dashgum – Free Dashboard 6. Free Responsive Admin Template – Zontal Admin 7. Free Download Bootstrap Admin Template 8. Janux – Free Responsi…

【精美前端模板】你还不心动吗?

文章目录 &#x1f449;引言&#x1f48e;&#x1f31f;久等了&#xff01;&#x1f449;一、UniDark&#x1f449;二、My hat&#x1f449;三、ELYSIUM 魔兽世界&#x1f449;四、Sea Food美食&#x1f449;五、 Raduate&#x1f449;六、Goaway&#x1f449;七、CLEAN FRESH …

小区管理系统之后台管理前端模板

&#x1f525;作者主页&#xff1a;疯狂行者&#x1f525; &#x1f496;简介&#xff1a;Java领域新星创作者&#x1f3c6;、【计算机源码之家】公号作者✌ 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】&#x1f496; &#x1f496;文末获取源码联系&#x1f…

前端模板引擎 -- Freemarker

一、Freemarker介绍 FreeMarker是一个模板引擎&#xff0c;一个基于模板生成文本输出的通用工具&#xff0c;使用纯Java编写。 FreeMarker被设计用来生成HTML Web页面&#xff0c;特别是基于MVC模式的应用程序。 虽然FreeMarker具有一些编程的能力&#xff0c;但通常由Java程序…

前端模板

总述 “模板”这个词&#xff0c;可能很多人第一印象是后端的技术&#xff08;Smarty&#xff0c;Velocity等&#xff09;&#xff0c;但本文要讲的却不是后端的概念&#xff0c;而是前端开发中所使用到的一种技术&#xff0c;也就是“前端模板”技术。 模板的工作原理可以简单…

前端模板template

一、背景 前端小白的成长历程&#xff0c;一般都会经历html模板的一些问题,jquery template/artTemplate/yayaTemplate等常见的模板使用&#xff0c;这里就不作介绍了。 先谈谈我们为什么要使用模板&#xff1f; 当一个html页面有许多重复功能、累赘功能、有逻辑功能&#xf…

后台管理系统纯前端模板

分享一个个人学习前端写过的模板&#xff0c;简单、高效、好用。 下载链接&#xff1a; https://download.csdn.net/download/qq_51701007/87109342https://download.csdn.net/download/qq_51701007/87109342 相关技术&#xff1a;HTML、CSS、JavaScript、Vue2.0&#xff08…

各种前端模板

标准色板 扩展色板 图表配色模板 字体大小模板 状态提示配色模板 品牌配色模板 字体颜色模板 分类色板 状态提示配色模板 分割线配色模板

快速搭建一个前端模板

之前写过好几个前端页面&#xff0c;都是从网上copy下来别人的模板&#xff0c;总是因为本案或者其他环境问题弄个半天&#xff0c;主要是影响心态&#xff0c;所以这次专门记录一下怎么快速生成一个前端模板&#xff1b; 1.下载并且安装打开 HBuilder X 这个软件 2.新建 3.然…

前端模板引擎使用

用来代替模板字符串&#xff0c; 在JS字符串中写模板问题? 1.维护不方便&#xff0c;不能换行&#xff0c;没有着色 常用模板引擎&#xff1a; 1. Art-template 2. DOT 3. JavaScript-Templates 4. Template.js 5. Tempo 6. ECT 7. Dot Dom 8. Template7 9. Bunny …

推荐几个前端模板下载站

相信大家自己做web项目的时候会为找不到好看的前端模板而发愁&#xff0c;有时候在网上找到了自己喜欢的模板&#xff0c;但是下载又需要积分或者是vip&#xff0c;最近我就整理了几个前端模板很多的网站&#xff0c;部分网站完全免费&#xff0c;不需要VIP或积分 top1 推荐指…

前端模板引擎

一. 为什么要使用模板引擎 关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照我老师的一句话表达:不用重复制造轮子. 对于为什么要使用模板引擎的解释,我看过最好的回答来自知乎上…

后台系统前端模板

后台系统前端模板——WeAdmin Layui作为后台开发的前端框架&#xff0c;一直以来深受后端开发人员的喜爱。今天这篇文章展示WeAdmin设计巧妙之处&#xff0c;如果需要自定义菜单结构、理解其中的代码和运作原理&#xff0c;这里会给大家演示其修改过程&#xff01; 下面我给大…

初识前端模板

作者&#xff1a;yaya(http://weibo.com/zinkey) 王集鹄(http://weibo.com/zswang) 总述 “模板”这个词&#xff0c;可能很多人第一印象是后端的技术&#xff08;Smarty&#xff0c;Velocity等&#xff09;&#xff0c;但本文要讲的却不是后端的概念&#xff0c;而是前端开发…

前端html-部件模板收集(附源码)

目录 1.下拉列表 1.1 简单下拉菜单 1.2 输入框的下拉列表 1.2 响应式 JavaScript 侧边栏下拉菜单 可折叠隐藏 2.定位导航 3.选项卡切换 3.1 简单选项卡切换-自动 3.2 简单选项卡切换延时 4.轮播图 4.1 渐变轮播 4.2 滚动轮播&#xff08;走马&#xff09; 4.2.3 简单…