发表于： 2020-06-22 22:06:11
2 1731
今天完成的事情：找CSS师兄要了task9的代码，分离出header和footer两个页面，学习了Tiles框架。今天头疼了一天，应该是昨晚感冒了，状态不是很好。
明天计划的事情：明天要把建表，把静态数据改成动态的。然后小课堂。
遇到的问题：暂无。
收获：
Tiles框架
Tiles是适用于现代Java应用程序的免费开源模板框架。基于Composite模式（组合模式），它可以简化用户界面的开发。从Struts中提取出来的。我理解的就是拿来组装页面的，当然可以使用 jsp 的 include 标签去组合这些页面，但是当jsp很多的时候，公共页面有修改的时候，你需要去每个jsp中改，tiles只用在配置文件中改下引用就行。
下面是理解的网页结构例子。来自http://blog.sina.com.cn/s/blog_a123d4d50101792d.html
1.引用依赖，并且搭建Spring框架，spring相关依赖就没有贴了。
<!--Tiles依赖-->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-extras</artifactId>
<version>3.0.7</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-servlet</artifactId>
<version>3.0.7</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>3.0.7</version>
</dependency>2.配置视图解析器
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<property name="definitions">
<list>
<value>/WEB-INF/tiles.xml</value>
</list>
</property>
</bean>
<bean class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass">
<value>org.springframework.web.servlet.view.tiles3.TilesView</value>
</property>
</bean>
</beans>
3.header.jsp
<body>
<header>
<p class="service">客服热线：010-594-78634</p>
<div class="icon-top">
<div class="icon-wx"></div>
<div class="icon-qq"></div>
<div class="icon-wb"></div>
</div>
</header>
<nav>
<div class="container">
<div class="navbar navbar-expand-md bg navbar-dark nav-top">
<a class="navbar-brand word-title" href="#">
<div class="pic-top-jns"></div>
</a>
<button class="navbar-toggler nav-btn" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse word-four" id="collapsibleNavbar">
<ul class="navbar-nav distance-word">
<li class="nav-item nav-4">
<a class="nav-link word-nav-1" href="mission8-1.html">首页</a>
</li>
<li class="nav-item nav-4">
<a class="nav-link word-nav-2" href="mission8-2.html">职业</a>
</li>
<li class="nav-item nav-4">
<a class="nav-link word-nav-3" href="mission8-3.html">推荐</a>
</li>
<li class="nav-item nav-4">
<a class="nav-link word-nav-4" href="#">关于</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</body>
4.footer.jsp
<footer>
<div class="container">
<div class="row footer-word">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 footer-link">
<p class="skill-tree">技能树──改变你我</p>
<div class="about-tree">
<a class="word-about-3" href="#" target="_blank">关于我们</a>
<a class="word-about-3" href="#" target="_blank">联系我们</a>
<a class="word-about" href="#" target="_blank">合作企业</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-4 footer-link">
<p class="skill-tree-2">旗下网站</p>
<div class="about-tree-2">
<a class="word-about" href="#" target="_blank">草船云孵化器</a>
<a class="word-about-2" href="#" target="_blank">最强IT训练营</a>
</div>
<div class="about-tree-3">
<a class="word-about" href="#" target="_blank">葡萄藤轻游戏</a>
<a class="word-about-2" href="#" target="_blank">桌游精灵</a>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3 col-lg-3 code-pic">
<h4 class="public-address">微信公众号</h4>
<div class="pic-qr-code"></div>
</div>
</div>
</div>
<p class="link-about">Copyright©2015技能树 www.jnshu.com All Rights Reserved | 京ICP备130058880号</p>
</footer>
返回列表
评论