首页 > Web开发 > 详细

url拼接

时间:2020-04-20 09:46:46      阅读:78      评论:0      收藏:0      [点我收藏+]

后台每次拼接组装出上次搜索的url,然后将url存入Model中,页面每次点击不同的条件的时候Model中取出上次请求的url,然后再加上新点击的条件参数实现跳转

后端

新增搜索条件

技术分享图片

移除搜索条件

前端

<div class="type-wrap logo" th:unless="${#maps.containsKey(searchMap,‘brand‘)}">
					<div class="fl key brand">品牌</div>
					<div class="value logos">
						<ul class="logo-list">
							<li th:each="brand,brandSate:${result.brandList}">
                                <a th:text="${brand}" th:href="@{${url}(brand=${brand})}"></a>
                            </li>
						</ul>
					</div>
					<div class="ext">
						<a href="javascript:void(0);" class="sui-btn">多选</a>
						<a href="javascript:void(0);">更多</a>
					</div>
				</div>
				<div class="type-wrap" th:each="spec,specStat:${result.specList}" th:unless="${#maps.containsKey(searchMap,‘spec_‘+spec.key)}">
					<div class="fl key" th:text="${spec.key}">

                    </div>
					<div class="fl value">
						<ul class="type-list">
							<li th:each="op,opstat:${spec.value}">
								<a th:text="${op}" th:href="@{${url}(‘spec_‘+${spec.key}=${op})}"></a>
							</li>
						</ul>
					</div>
					<div class="fl ext"></div>
				</div>
				<div class="type-wrap" th:unless="${#maps.containsKey(searchMap,‘price‘)}">
					<div class="fl key">价格</div>
					<div class="fl value">
						<ul class="type-list">
							<li>
								<a th:text="0-500元" th:href="@{${url}(price=‘0-500‘)}"></a>
							</li>
							<li>
								<a th:text="500-1000元" th:href="@{${url}(price=‘500-1000‘)}"></a>
							</li>
							<li>
								<a th:text="1000-1500元" th:href="@{${url}(price=‘1000-1500‘)}"></a>
							</li>
							<li>
								<a th:text="1500-2000元" th:href="@{${url}(price=‘1500-2000‘)}"></a>
							</li>
							<li>
								<a th:text="2000-3000元" th:href="@{${url}(price=‘2000-3000‘)}"></a>
							</li>
							<li>
								<a th:text="3000元以上" th:href="@{${url}(price=‘3000‘)}"></a>
							</li>
						</ul>
					</div>
					<div class="fl ext">
					</div>
				</div>

排序

				<div class="type-wrap" th:unless="${#maps.containsKey(searchMap,‘price‘)}">
					<div class="fl key">价格</div>
					<div class="fl value">
						<ul class="type-list">
							<li>
								<a th:text="0-500元" th:href="@{${url}(price=‘0-500‘)}"></a>
							</li>
							<li>
								<a th:text="500-1000元" th:href="@{${url}(price=‘500-1000‘)}"></a>
							</li>
							<li>
								<a th:text="1000-1500元" th:href="@{${url}(price=‘1000-1500‘)}"></a>
							</li>
							<li>
								<a th:text="1500-2000元" th:href="@{${url}(price=‘1500-2000‘)}"></a>
							</li>
							<li>
								<a th:text="2000-3000元" th:href="@{${url}(price=‘2000-3000‘)}"></a>
							</li>
							<li>
								<a th:text="3000元以上" th:href="@{${url}(price=‘3000‘)}"></a>
							</li>
						</ul>
					</div>
					<div class="fl ext">
					</div>
				</div>
				<div class="type-wrap">
					<div class="fl key">更多筛选项</div>
					<div class="fl value">
						<ul class="type-list">
							<li>
								<a>特点</a>
							</li>
							<li>
								<a>系统</a>
							</li>
							<li>
								<a>手机内存 </a>
							</li>
							<li>
								<a>单卡双卡</a>
							</li>
							<li>
								<a>其他</a>
							</li>
						</ul>
					</div>
					<div class="fl ext">
					</div>
				</div>

数据分页查询

技术分享图片

获取上一页,通过page对象获取当前页pageNum并取上一页【th:href="@{${url}(pageNum=${page.upper})}"】,下一页同理
选中效果,如果当前遍历到的页i与当前页currentpage相等,则激活active,否则空【th:class="${i}==${page.currentpage}?‘active‘:‘‘"】
获得总页数【${page.last}】
获得总记录数【${page.total}】

<div class="fr page">
    <div class="sui-pagination pagination-large">
        <ul>
            <li class="prev disabled">
                <a th:href="@{${url}(pageNum=${page.upper})}">?上一页</a>
            </li>
            <li th:each="i:${#numbers.sequence(page.lpage,page.rpage)}" th:class="${i}==${page.currentpage}?‘active‘:‘‘">
                <a th:href="@{${url}(pageNum=${i})}" th:text="${i}"></a>
            </li>
            <li class="next">
                <a th:href="@{${url}(pageNum=${page.next})}">下一页?</a>
            </li>
        </ul>
        <div>
            <span>共<i th:text="${page.last}"></i>页&nbsp;</span>
            <span>共<i th:text="${page.total}"></i>个商品&nbsp;</span>
        </div>
    </div>
</div>

url拼接

原文:https://www.cnblogs.com/maomaodesu/p/12735576.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!