SpringBoot项目(五)业务组件
5.1 Java从HTML抽取文本
需要从文章HTML内容提取文本字符串,作为文章的摘要保存起来,在文章列表页面使用。
public String extractText(){
String result = strHtml;
String regEx_comment = "<!--[^-]*-->";
String regEx_script="<script[^>]*?>[\\s\\S]*?<\\/script>"; //定义script的正则表达式
String regEx_style="<style[^>]*?>[\\s\\S]*?<\\/style>"; //定义style的正则表达式
String regEx_html="<[^>]+>"; //定义HTML标签的正则表达式
Pattern p_comment=Pattern.compile(regEx_comment,Pattern.CASE_INSENSITIVE);
Matcher m_comment=p_comment.matcher(result);
result= m_comment.replaceAll(""); //过滤注释
Pattern p_script=Pattern.compile(regEx_script,Pattern.CASE_INSENSITIVE);
Matcher m_script=p_script.matcher(result);
result= m_script.replaceAll(""); //过滤script标签
Pattern p_style=Pattern.compile(regEx_style,Pattern.CASE_INSENSITIVE);
Matcher m_style=p_style.matcher(result);
result=m_style.replaceAll(""); //过滤style标签
Pattern p_html=Pattern.compile(regEx_html,Pattern.CASE_INSENSITIVE);
Matcher m_html=p_html.matcher(result);
result=m_html.replaceAll(""); //过滤html标签
return result.trim(); //返回文本字符串
}
5.2 集成sb-admin 样式
5.2.1 引入css和js文件
<link href="/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="css/sb-admin.css" rel="stylesheet" />
<script src="/webjars/jquery/3.3.1/jquery.js"></script>
<!--遇到菜单dropdown时报错Unexpected token export:
要引用umd目录下的popper-utils.js和/popper.js(否则不支持export语法导致报错),其中popper-utils.js在popper.js之前引用
以上两个js都要在bootstrap.bundle.js之前引用
-->
<script src="/plugins/bootstrap/js/popper-utils.js"></script>
<script src="/plugins/bootstrap/js/popper.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.js"></script>
<script src="/plugins/bootstrap/js/bootstrap.bundle.js"></script>
<!-- Custom scripts for all pages-->
<script src="/plugins/sb-admin.min.js"></script>
5.2.2 页面结构
<body id="page-top">
<!--1.顶部导航条 top bar -->
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
<!-- 1.1 Logo -->
<a class="navbar-brand mr-1" href="index.html">i编程网</a>
<!-- 1.2 SidebarToggle:切换按钮,控制左侧菜单的显示和隐藏 -->
<button class="btn btn-link btn-sm text-white order-1 order-sm-0"
id="sidebarToggle" >
<i class="fas fa-bars"></i>
</button>
<!-- 1.3 Navbar Search -->
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<!--此处省略:搜索按钮-->
</form>
<!-- 1.4 Navbar Right Menu:导航栏右侧按钮-->
<ul class="navbar-nav ml-auto ml-md-0">
<li class="nav-item "><a class="nav-link" href="/login">登录</a></li>
<li class="nav-item dropdown no-arrow mx-1"><a
class="nav-link dropdown-toggle" href="#" id="alertsDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"><span class="badge badge-danger">9+</span><i class="fas fa-bell fa-fw"></i>
</a>
<!--下拉子菜单 -->
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div></li>
</ul>
</nav>
<div id="wrapper">
<!-- 2.侧边栏(可切换隐藏、显示菜单区) Sidebar -->
<ul class="sidebar navbar-nav">
<#list categories as cat>
<li class="nav-item dropdown">
<!--一级菜单-->
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false"> <i class="fas fa-fw fa-tachometer-alt"></i><span>${cat.name}</span>
</a>
<!--下拉子菜单-->
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
<#list cat.sublist as subcat> <a
class="${(subcat.id==categoryId!)?string('dropdown-item menu-selected','dropdown-item')}" href="./index.html? category=${subcat.id}">${subcat.name}</a> </#list>
</div>
</li>
</#list>
</ul>
<!-- 3.内容区 content-wrapper -->
<div id="content-wrapper" >
<div>内容......</div>
<footer>
<!-- 版权信息区域 -->
<div>Copyright ©2014-${.now?string["yyyy"]},
i编程网-iprogram.com.cn, All Rights Reserved</div>
</footer>
</div> <!-- /.content-wrapper -->
</div>
<!-- /#wrapper -->
</body>
5.3 集成fontawesome字体图标
5.3.1 页面引用css
注意不能使用sb-admin代码中的fontawesome资源文件(被修改过),应使用从官fontawesome网上提取出来的css和webfonts两个目录的文件。
<link href="/plugins/fontawesome/css/all.min.css" rel="stylesheet" />
5.3.2 在pom.xml配置
pom.xml文件中添加以下代码(nonFilteredFileExtensions部分),让静态资源支持字体图标文件。
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<configuration>
<delimiters>
<delimit>$</delimit>
</delimiters>
<nonFilteredFileExtensions>
<nonFilteredFileExtension>woff</nonFilteredFileExtension>
<nonFilteredFileExtension>woff2</nonFilteredFileExtension>
<nonFilteredFileExtension>eot</nonFilteredFileExtension>
<nonFilteredFileExtension>ttf</nonFilteredFileExtension>
<nonFilteredFileExtension>svg</nonFilteredFileExtension>
</nonFilteredFileExtensions>
</configuration>
</plugin>
5.3.3 通过i标签和类样式使用
<i class="fas fa-bars"></i>