微服务 教程
1085个小节阅读:195.5k
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
修改route_list.html
xxxxxxxxxx
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>旅游产品列表</title>
<link rel="stylesheet" type="text/css" href="/frontdesk/css/common.css">
<link rel="stylesheet" href="/frontdesk/css/search.css">
<script src="/frontdesk/js/jquery-3.3.1.js"></script>
<script src="/frontdesk/js/bootstrap-paginator.js"></script>
</head>
<body>
<!--引入头部-->
<header th:replace="~{/frontdesk/header::header}"></header>
<div class="page_one">
<div class="contant">
<div class="left">
<ul>
<li th:each="product : ${productPage.records}">
<img th:src="${product.pImage}" width="320">
<div class="content">
<p class="title" th:text="${product.productName}"></p>
<div>
<p class="price_num">
<span>¥</span>
<span th:text="${product.price}">299</span>
<span>起</span>
</p>
<p class="details">
<a th:href="@{/frontdesk/product/routeDetail(pid=${product.pid})}">查看详情</a>
</p>
</div>
</p>
</div>
</li>
</ul>
<div class="pageNum">
<ul class="pagination"></ul>
</div>
<script>
$(function () {
var currentPage = [[${productPage.current}]];// 当前页
var pages = [[${productPage.pages}]];// 当前页
var cid = '[[${cid}]]';
var productName = '[[${productName}]]';
// 分页插件
$(".pagination").bootstrapPaginator({
bootstrapMajorVersion: 3, // bootstrap版本
currentPage: currentPage, // 当前页
totalPages: pages, // 总页数
numberOfPages: 10, // 最多显示多少页
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "<<";
case "next":
return ">>";
case "last":
return "末页";
case "page":
return page;
}
},
onPageClicked: function (event, originalEvent, type, page) { // 点击页码执行的方法
location.href = "/frontdesk/product/routeList?cid=" + cid
+"&productName="+productName
+"&page="+page;
}
})
})
</script>
</div>
<div class="right">
<ul class="tops_list">
<li class="header">热门推荐</li>
<li class="item">
<span class="badge">1</span>
<img src="/frontdesk/images/top1.jpg" width="80px" height="80px"/>
<div class="contents">
<span>喀纳斯8日游</span>
<p>
<span class="price">¥6980</span>
|
<span class="score">5.0分</span>
</p>
</div>
</li>
<li class="item">
<span class="badge" style="background:#FF8B26">2</span>
<img src="/frontdesk/images/top2.jpg" width="70px" height="70px"/>
<div class="content">
<span>黄果树梵净山11日游</span><br/>
<span class="price">¥3280</span>
|
<span class="score">5.0分</span>
</div>
</li>
<li class="item">
<span class="badge" style="background:#FFB63E">3</span>
<img src="/frontdesk/images/top3.jpeg" width="80px" height="80px"/>
<div class="content">
<span>庐山3日游</span><br/>
<span class="price">¥1817</span>
|
<span class="score">5.0分</span>
</div>
</li>
<li class="item">
<span class="badge" style="background:#99AECA ;">4</span>
<img src="/frontdesk/images/top4.jpg" width="80px" height="80px"/>
<div class="content">
<span>张家界+黄龙洞+天门山+凤凰4日游</span><br/>
<span class="price">¥2780</span>
|
<span class="score">5.0分</span>
</div>
</li>
<li class="item">
<span class="badge" style="background:#99AECA ;">5</span>
<img src="/frontdesk/images/top5.jpg" width="80px" height="80px"/>
<div class="content">
<span>拉萨布宫-巴松错-羊湖卧飞9日游</span><br/>
<span class="price">¥7780</span>
|
<span class="score">5.0分</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 引入底部 -->
<footer th:replace="~{/frontdesk/footer::footer}"></footer>
</body>
</html>
修改header.html
中的搜索框
xxxxxxxxxx
<div class="search">
<form action="/frontdesk/product/routeList">
<input name="productName" th:value="${productName}" type="text" placeholder="" class="search_input" autocomplete="off">
<button type="submit" class="search-button">搜索</button>
</form>
</div>