目录
思路和背景
实际操作
1. 背景
2. 基本处理
3. 所见即所得的方式
4. include头部引用
5. static下面css文件可能不一致的问题
注意点
首页 web前端 html教程 SpringBoot+Thymeleaf实现html文件引入(类似include功能)_html/css_WEB-ITnose

SpringBoot+Thymeleaf实现html文件引入(类似include功能)_html/css_WEB-ITnose

May 21, 2018 am 10:23 AM


由于对高大上的前端处理不太熟悉,想直接通过MVC的方式进行内容传递,因此选用了Thymeleaf模版处理向前端传值的问题。但是觉得很多PHP框架所实现的include模版的方式很不错,能够很好的实现头文件、导航、页尾等和主要内容的解耦,因此想通过使用Thymeleaf模版的同时,也能实现类似于include的功能。


思路和背景

觉得如果有精力,最好还是RESTFul的结构,然后前端采用angularjs之类的方式来处理可能更合理,由于不太懂前端,所以只是自己yy一下

言归正传,环境主要是采用了spring boot框架,外加Thymeleaf进行构建的。主要的思路就是通过使用Thymeleaf的"th:untext()"方式,在后端处理中,将预留的头文件、导航等通过ModelMap映射到实际的网页中。


实际操作

1. 背景

首先配置一个可以运行的Spring boot+Thymeleaf项目,具体教程很多,就不啰嗦了。

然后采用了默认的目录配置,大致如下:resource  static ——(默认的静态文件目录)  templates ——(默认的Thymeleaf模版目录)  application.properties

2. 基本处理

之后的在模版文件中需要include到其它内容的部分采用th:untext()函数把相关部分标注出来,并且在controller中把相关内容加载到ModelMap中,大概是这个样子的模版文件部分:

<header class="am-topbar admin-header" th:utext="${headerContent}">  
<p class="am-topbar-brand">    
<strong>创澳商务</strong> <small>交易者系统</small>  </p>  </header>
登录后复制

后台处理部分:

@RequestMapping("/background")    
private String backgroud(ModelMap map){        
map.addAttribute("headerContent", "hello word!");        
return "background";    
}
登录后复制

3. 所见即所得的方式

因为经常可能需要修改模版文件(html)使得达到预期的效果,而Thymeleaf等框架最大的一个特典就是前端的设计和后端的实现可以得以分离 (因为直接使用的是html的文件,即使不需要服务器也能通过浏览器直接浏览设计好的模版文件),所以我们就希望能够引入的也是html文件,这也符合include功能的基本构思。所以在项目中引入了Jsoup包来解决遍历dom文件的问题。当然这个完全过程完全可以略过,直接用个txt或者json啥的

当然也可以选择其它广泛使用的dom遍历工具,只是在这里想安利一下这个jsoup这个包。jsoup的选择器语法和JQuery等前端工具的语法基本一致,对于习惯了JQuery的人真是一个福音……具体配置如下:加入maven依赖

<dependency>          
<groupId>org.jsoup</groupId>          
<artifactId>jsoup</artifactId>          
<version>1.9.2</version>     
</dependency>
登录后复制

采用selector获取element,得到内容

map.addAttribute("headerContent", doc.select("header").toString());
map.addAttribute("sideBarContent", doc.select("#admin-offcanvas").first().toString());
登录后复制

通过这么操作之后,就实现了可以通过html直接设计页面,之后通过后台程序include到前端页面了。

4. include头部引用

对于一般的导航部分(如p)等,只要进行进行了以上处理就ok了,但是既然是想实现include类似的功能,分离head中的各种引用就自然是必须的了。不然每次如果改了需要引用的css或者js都要重新每个文件都要修改,想想都头疼。

但是问题在于,在通过使用ModelMap引用头部link的时候,下面这种处理是得不到解析的。那么我们的css和js的引用自然就乱套了。

th:href="@{/css/main.css}"
登录后复制

解决的方案应该很多,我在处理的时候,主要是通过利用框架自身的特点,将所有的css文件都放在了static文件夹里面(spring boot默认存放的静态资源的地方),然后直接通过写死href值的方式来解决这一问题的(href="css/main.css?7.1.34")。

当然我觉得应该可能还有更好的方案,也请大家指教一下~

5. static下面css文件可能不一致的问题

虽然我们解决了link和script等引入文件路径的问题,但是将href写死又引入了新一个问题,我们没有办法直接使用static下面的css文件,因为html文件都处于templates下面,而且如果我们想在templates下面新建跟多文件夹,虽然通过服务器能够正常引入到正确的css文件,但是不能直接通过浏览器进行页面的设计和编辑,也就是违反了我们之前提到的前端的设计和后端的实现分离的特点。

为了进一步解决这个问题,虽然可以简单的就在templates文件夹下面拷贝一份css文件(如果想新建更多子文件夹的,那每个文件夹下面都需要拷贝一份css文件),但是显然这个方案一点都不够优雅,而且可能会由于忘记同步css文件造成服务器显示和设计显示不一致的问题。

那么为了要优雅,不要污,我采用了一种新的方案,就是html文件中直接写入到static文件夹下css的href,而再服务器引入的时候,通过将static等前缀进行删除,来得到新的href的方式,保证了使用同一份css的同时,也可以分离前端的设计和后端的实现。而且由于路径中都含有static这个特征,直接使用substring功能真是爽翻了。具体实现如下:

    public void getNavigation(Integer naviType,ModelMap map){                        
    String fileUrl = templateUrl;        
    switch(naviType){            
    case 1:                //admin navigatioin                
    fileUrl = fileUrl + "header_admin.html";                
    break;            
    case 2:                //user navigation                
    fileUrl = fileUrl + "header_trader.html";                
    break;            
    default:                
    fileUrl = fileUrl + "header_trader.html";                
    break;        
    }                
    try {            
    InputStream input = this.getClass().getResourceAsStream(fileUrl);            
    Document doc = Jsoup.parse(input,"UTF-8","http://www.mychuangao.com/");            
    map.addAttribute("headerContent", doc.select("header").toString());            
    map.addAttribute("sideBarContent", doc.select("#admin-offcanvas").first().toString());            
    map.addAttribute("footerContent", changeAttrAddress(doc.select("footer"),"script","src"));            
    map.addAttribute("headContent", changeAttrAddress(doc.select("head"),"link","href"));        
    } catch (IOException e) {            
    logger.error("error when using jsoup");            
    logger.error(e.getMessage());           
     map.addAttribute("headContent", "");            
    map.addAttribute("headerContent", "");            
    map.addAttribute("sideBarContent", "");            
    map.addAttribute("footerContent", "");        
    }    
    }    
    private String changeAttrAddress(Elements parentNode,String dealingNodeName,String attrName){        
    Elements elements = parentNode.select(dealingNodeName);        
    for(Element elment : elements){            
    String orignalAddress = elment.attr(attrName);            
    if(orignalAddress.isEmpty())
    {                
    continue;            
    }            
    orignalAddress = delInnerPath(orignalAddress);            
    elment.attr(attrName,orignalAddress);        
    }        
    return parentNode.toString();    
    }    
    private String delInnerPath(String address){        
    String keyWord = "static";        
    if(address.contains(keyWord)==false)
    {            
    return address;        
    }        
    int position = address.indexOf(keyWord) + keyWord.length() + 1;        
    return address.substring(position);    
    }
登录后复制

注意点

  1. 注意要使用th:untext()函数,而非th:text()函数,原因你懂的~

  2. 处理路径时,如果使用了获取绝对路径的方式,可能会造成访问权限问题,在web项目中要慎重

  3. 大家可以根据自己的需求更改spring boot和Thymeleaf的文件目录,具体可以参考修改spring boot默认目录

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1657
14
CakePHP 教程
1415
52
Laravel 教程
1309
25
PHP教程
1257
29
C# 教程
1229
24
HTML容易为初学者学习吗? HTML容易为初学者学习吗? Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML中起始标签的示例是什么? HTML中起始标签的示例是什么? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? 如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? Apr 05, 2025 am 06:15 AM

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

HTML,CSS和JavaScript:Web开发人员的基本工具 HTML,CSS和JavaScript:Web开发人员的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

HTML:结构,CSS:样式,JavaScript:行为 HTML:结构,CSS:样式,JavaScript:行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势 HTML的未来:网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

See all articles