发表于: 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 | ICP130058880</p>
</footer>



返回列表 返回列表
评论

    分享到