页面拆分，以及登陆的实现(8月3号)-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

一页面拆分

1 将页面的顶部，头部，菜单栏和页面底部拆分出来，以便更多页面使用，减少代码量

将主页的顶部，头部，菜单栏和页面底部拆分出来变成独立的页面，将下面的代码引入到主页

<body>
	<div class="top">
	        <div th:replace="shop/topBar :: page-top-bar"></div>
	</div>
     <div class="header">
	        <div th:replace="shop/header :: page-header"></div>
	</div>
	<!-- header over -->
	<div class="menubar">
	        <div th:replace="shop/menuBar :: page-menu-bar"></div>
	</div>
	<!-- nav over -->
	<div class="banner">
	    <ul>
	        <li><a href="##"><img src="images/001.jpg" alt=""/></a></li>
	        <li><a href="##"><img src="images/002.jpg" alt=""/></a></li>
	        <li><a href="##"><img src="images/003.jpg" alt=""/></a></li>
	        <li><a href="##"><img src="images/004.jpg" alt=""/></a></li>
	    </ul>
	</div>
<div class="footer">
	        <div th:replace="shop/footer :: page-footer"></div>
	</div>

注意：拆分时注意头文件的写法和文件名的使用，以及标记对的使用

在topBar.html页面中的class文件换成:<div th:fragment="page-top-bar">

其他几个页面也照例修改

登陆和注册添加链接，链接到登陆和注册页面，在topBar.html文件中：您好，请 <a th:href="@{initGuestLogin}" class="link">登录</a>|<a th:href="@{initGuestRegister}" class="link">注册</a>|<a href="#" class="link">分销商入口</a>

注意：login页面的头文件，和代码中的标记对和文件名的修改

转载于:https://my.oschina.net/u/2411770/blog/488136