尚品汇-前端(三十三)

news2024/12/27 11:28:27

目录:

(1)面包屑处理平台属性

(2)排序处理

(2)单点登录业务介绍

(1)面包屑处理平台属性

前端显示:面包屑显示效果

搜list搜索方法继续添加返回的平台属性代码: 

前台页面数据展示:
 
/**
 * 处理平台属性条件回显
 * @param props
 * @return
 */
// 处理平台属性
private List<Map<String, String>> makeProps(String[] props) {
    List<Map<String, String>> list = new ArrayList<>();
    // 2:v:n
    if (props!=null && props.length!=0){
        for (String prop : props) {
            //prop  props=23:4G:运行内存  属性id:属性值名称;属性名称   prop.split(“:”)也可以用StringUtils查分
            String[] split = StringUtils.split(prop, ":");
            if (split!=null && split.length==3){
                // 声明一个map
                HashMap<String, String> map = new HashMap<String,String>();
                    map.put("attrId",split[0]);
                    map.put("attrValue",split[1]);
                    map.put("attrName",split[2]);
                    list.add(map);
            }
        }
    }
    return list;
}
@GetMapping("list.html")
public String search(SearchParam searchParam, Model model) {
    Result<Map> result = listFeignClient.list(searchParam);
    model.addAllAttributes(result.getData());

    //拼接url
    String urlParam = makeUrlParam(searchParam);
    //处理品牌条件回显
    String trademarkParam = this.makeTrademark(searchParam.getTrademark());
    //处理平台属性条件回显
    List<Map<String, String>> propsParamList = this.makeProps(searchParam.getProps());

    model.addAttribute("searchParam",searchParam);
    model.addAttribute("urlParam",urlParam);
    model.addAttribute("trademarkParam",trademarkParam);
    model.addAttribute("propsParamList",propsParamList);
    return "list/index";
}

 

 

 

页面处理

关键字
<ul class="fl sui-breadcrumb">

    <li>

        <a href="#">全部结果</a>

    </li>

    <li  class="active">

        <span th:text="${searchParam.keyword}"></span>

    </li>

</ul>
品牌处理
<ul class="fl sui-tag">

    <li th:if="${searchParam.trademark != null}" class="with-x">

        <span th:text="${trademarkParam}"></span>

        <a th:href="@{${#strings.replace(urlParam,'trademark='+searchParam.trademark,'')}}">×</a>

    </li>

    </ul>
说明:urlParam里面已经包含品牌参数,该链接必须去除该参数,所以我们可以使用thymeleaf 字符串替换函数,把品牌参数替换了就可以了,

${#strings.replace(urlParam,'trademark='+searchParam.trademark,'')}

平台属性处理
<ul class="fl sui-tag">

        <li th:if="${searchParam.props != null}" th:each="prop : ${propsParamList}" class="with-x">

        <span th:text="${prop.attrName}+':'+${prop.attrValue}"></span>

        <a th:href="@{${#strings.replace(urlParam+'&order='+searchParam.order,'props='+prop.attrId+':'+prop.attrValue+':'+prop.attrName,'')}}">×</a>

    </li>

</ul>
说明:与品牌一样,替换掉对应的平台属性值即可
${#strings.replace(urlParam,'props='+prop.attrId+':'+prop.attrValue+':'+prop.attrName,'')}

(2)排序处理

ListController

 

 

ListController
/**
 * 处理排序
 * @param order
 * @return
 */
private Map<String, Object> dealOrder(String order) {
    Map<String,Object> orderMap = new HashMap<>();
    if(!StringUtils.isEmpty(order)) {

        //order=1:desc
        String[] split = StringUtils.split(order, ":");
        if (split != null && split.length == 2) {
            // 传递的哪个字段
            orderMap.put("type", split[0]);
            // 升序降序
            orderMap.put("sort", split[1]);
        }
    }else {
        orderMap.put("type", "1");
        orderMap.put("sort", "asc");
    }
    return orderMap;
}
@GetMapping("list.html")
public String search(SearchParam searchParam, Model model) {
    Result<Map> result = listFeignClient.list(searchParam);
    model.addAllAttributes(result.getData());

    //拼接url
    String urlParam = makeUrlParam(searchParam);
    //处理品牌条件回显
    String trademarkParam = this.makeTrademark(searchParam.getTrademark());
    //处理平台属性条件回显
    List<Map<String, String>> propsParamList = this.makeProps(searchParam.getProps());
    //处理排序
    Map<String,Object> orderMap = this.dealOrder(searchParam.getOrder());

    model.addAttribute("searchParam",searchParam);
    model.addAttribute("urlParam",urlParam);
    model.addAttribute("trademarkParam",trademarkParam);
    model.addAttribute("propsParamList",propsParamList);
    model.addAttribute("orderMap",orderMap);
    return "list/index";
}

 

页面
<ul class="sui-nav">
    <li th:class="${orderMap.type == '1' ? 'active': ''}">
        <a th:href="${urlParam}+'&order=1:'+${orderMap.sort == 'asc' ? 'desc' : 'asc'}">
            综合<span th:if="${orderMap.type == '1'}" th:text="${orderMap.sort == 'asc' ? '↑' : '↓'}"></span>
        </a>
    </li>
    <li th:class="${orderMap.type == '2' ? 'active': ''}">
        <a th:href="${urlParam}+'&order=2:'+${orderMap.sort == 'asc' ? 'desc' : 'asc'}">
            价格<span th:if="${orderMap.type == '2'}" th:text="${orderMap.sort == 'asc' ? '↑' : '↓'}"></span>
        </a>
    </li>
    <li>
        <a href="#">新品</a>
    </li>
    <li>
        <a href="#">评价</a>
    </li>
</ul>

说明:

      1,排序没有拼接到urlParam中,原因:如果拼接会重复出现

      2,为了保持排序条件,所以其他所有链接都需加上排序参数

改造其他连接

分页
	<a th:href="${urlParam}+'&pageNo='+${i}+'&order='+${searchParam.order}"><span th:text="${i}"></span></a>

1,平台属性
<a th:href="${urlParam}+'&props='+${baseAttrInfo.attrId}+':'+${attrValue}+':'+${baseAttrInfo.attrName}+'&order='+${searchParam.order}" th:text="${attrValue}" >属性值111</a>
</li>

2,品牌
<a th:href="${urlParam}+'&trademark='+${trademark.tmId}+':'+${trademark.tmName}+'&order='+${searchParam.order}" th:text="${trademark.tmName}">属性值111</a>
</li>
3,面包屑
<ul class="fl sui-tag">
    <li th:if="${searchParam.trademark != null}" class="with-x">
        <span th:text="${trademarkParam}"></span>
        <a th:href="@{${#strings.replace(urlParam+'&order='+searchParam.order,'trademark='+searchParam.trademark,'')}}">×</a>
    </li>
    <li th:if="${searchParam.props != null}" th:each="prop : ${propsParamList}" class="with-x">
        <span th:text="${prop.attrName}+':'+${prop.attrValue}"></span>
        <a th:href="@{${#strings.replace(urlParam+'&order='+searchParam.order,'props='+prop.attrId+':'+prop.attrValue+':'+prop.attrName,'')}}">×</a>
    </li>
</ul>	

分页:

 <div class="fr page">
                <div class="sui-pagination pagination-large">
                    <ul>
                        <li class="prev" th:if="${pageNo != 1}">
                            <a th:href="${urlParam}+'&pageNo='+${pageNo - 1}+'&order='+${searchParam.order}">上一页</a>
                        </li>
                        <li class="prev disabled" th:if="${pageNo == 1}">
                            <a href="javascript:">上一页</a>
                        </li>

                        <li th:each="i : ${#numbers.sequence(1,totalPages)}" th:class="${i == pageNo } ? 'active' : ''">
                            <a th:href="${urlParam}+'&pageNo='+${i}+'&order='+${searchParam.order}"><span th:text="${i}"></span></a>
                        </li>

                        <li class="next" th:if="${pageNo < totalPages}">
                            <a th:href="${urlParam}+'&pageNo='+${pageNo + 1}+'&order='+${searchParam.order}">下一页</a>
                        </li>
                        <li class="next disabled" th:if="${pageNo == totalPages}">
                            <a href="javascript:">下一页</a>
                        </li>
                    </ul>
                    <div><span>共<span th:text="${totalPages }"></span>页&nbsp;</span><span></div>
                </div>
            </div>

 

(2)单点登录业务介绍

早期单一服务器,用户认证。

缺点:单点性能压力,无法扩展

分布式,SSO(single sign on)模式

解决 : 

用户身份信息独立管理,更好的分布式管理。

      可以自己扩展安全策略

      跨域不是问题

缺点:

     认证服务器访问压力较大。

业务流程图{用户访问业务时,必须登录的流程}{单点登录的过程}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2049268.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

零基础5分钟上手亚马逊云科技核心云架构知识 - 权限管理最佳实践

简介&#xff1a; 欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列&#xff0c;适用于任何无云计算或者亚马逊云科技技术背景的开发者&#xff0c;通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。 我会每天介绍一个基于亚马逊云科技…

信息学奥赛初赛天天练-67-NOIP2018普及组-完善程序2-计数排序、排列、链表、单向链表、双向链表

PDF文档公众号回复关键字:20240817 1 完善程序 (单选题 &#xff0c;每小题3分&#xff0c;共30分) 最大公约数之和 对于一个 1到 n的排列 P&#xff08;即 1 到 n 中每一个数在 P中出现了恰好一次&#xff09;&#xff0c;令 q[i] 为第 i个位置之后第一个比 P[i] 值更大的位…

【数学建模】趣味数模问题-状态转移模型的应用

概述 状态转移模型结合图论&#xff0c;通过经典的智力问题展示了其在求解实际问题中的巧妙应用。虽然这些问题不需要复杂的数学知识&#xff0c;但通过建立数学模型&#xff0c;可以将其转化为标准的图论模型来解决。 问题1&#xff1a;人、狼、羊、菜渡河问题 问题描述&…

CUDA Out of Memory :CUDA内存不足的完美解决方法

CUDA Out of Memory &#x1f6d1;&#xff1a;CUDA内存不足的完美解决方法 CUDA Out of Memory &#x1f6d1;&#xff1a;CUDA内存不足的完美解决方法摘要 &#x1f4dd;引言 &#x1f31f; 什么是 CUDA Out of Memory 错误&#xff1f; &#x1f914;基本定义常见场景 常见的…

基于spring boot的小型诊疗预约平台的设计与开发

TOC springboot262基于spring boot的小型诊疗预约平台的设计与开发 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进…

canal数据同步工具介绍与应用

canal服务 canal介绍canal版本与环境canal 服务集canal应用场景&#xff1a; canal常见问题xml配置问题连接认证问题jar版本问题连接问题 canal介绍 ‌1、Canal是‌阿里巴巴开源的‌MySQL增量数据订阅和消费工具&#xff0c;通过模拟MySQL的‌slave与‌master交互&#xff0c;捕…

XSS- DOMclobbering与svg深度利用

目录 源码展示 解法一&#xff1a;绕过过滤-DOM clobbering 什么是DOM clobbering DOM clobbering原理 全局变量自动创建 属性名冲突 影响脚本执行 逐过程分析 源码展示 <script>const data decodeURIComponent(location.hash.substr(1));;const root documen…

深度学习------------池化层

目录 池化层二维最大池化填充、步幅和多个通道平均池化层 总结池化层的代码部分实现池化层的正向传播验证二维最大池化层的输出该部分总代码 验证平均池化层该部分总代码 填充和步幅深度学习框架中的步幅与池化窗口的大小相同该部分总代码 填充和步幅可以手动设定该部分总代码 …

adb查看当前运行的应用的包名和Activity(模拟器也可以)

adb查看当前运行的应用的包名和Activity(模拟器也可以) 在adb 中&#xff0c;输入命令&#xff1a;adb shell 进入adb模式 adb shell dumpsys window w |findstr / |findstr name 输入完成后会显示当前运行的应用的包名和Activity(模拟器也可以) 例如抖音 ** **

布隆过滤器--极致的速度

前言 上一篇博客提到了位图&#xff0c;位图是十分高效的数据结构&#xff0c;但可惜的是只支持整型&#xff0c;今天这篇博客的主角是布隆过滤器&#xff0c;他与位图有异曲同工之妙。&#xff08;不了解位图可以点击下面这篇博客快速了解&#xff09;位图&#xff08;bitse…

【初阶数据结构】链表(附题)

目录 一、顺序表的问题及思考 二、单链表 2.1链表的概念及结构 2.2.单链表的实现 2.2.1.节点的定义 2.2.2.链表的打印 2.2.3.头部插入删除/尾部插入删除 a.创建节点 b.尾插 c.头插 d.尾删 e.头删 2.2.4.查找数据 2.2.5.在指定位置之前插入数据 2.2.6删除pos节点 …

rabbitmq镜像集群搭建

用到的ip地址 ip地址端口192.168.101.65&#xff08;主&#xff09;15672192.168.101.7515672192.168.101.8515672 安装erlang和rabbitmq 安装 安装三个包 yum install esl-erlang_23.0-1_centos_7_amd64.rpm -y yum install esl-erlang-compat-18.1-1.noarch.rpm -y rpm -…

联想电脑如何查看ip地址?详细介绍几种方法

随着互联网的普及和技术的飞速发展&#xff0c;IP地址已成为我们日常网络活动中不可或缺的一部分。无论是访问网站、远程办公还是进行网络游戏&#xff0c;IP地址都扮演着重要的角色。对于联想电脑用户来说&#xff0c;了解如何查看自己的IP地址是一项基本技能。虎观代理小二将…

leetcode 2221.数组的三角和

1.题目要求: 给你一个下标从 0 开始的整数数组 nums &#xff0c;其中 nums[i] 是 0 到 9 之间&#xff08;两者都包含&#xff09;的一个数字。nums 的 三角和 是执行以下操作以后最后剩下元素的值&#xff1a;nums 初始包含 n 个元素。如果 n 1 &#xff0c;终止 操作。否则…

拯救者杯OPENAIGC开发者大赛今日迎来决赛,现场179支参赛团队角逐AI桂冠

2024拯救者杯OPENAIGC开发者大赛于今日&#xff08;8月17日&#xff09;在上海中庚聚龙酒店迎来精彩决赛&#xff01; 创未来AI应用赛 拯救姬AI创意赛 AI Agent极限挑战赛 三大赛道决战巅峰 37位行业大咖评审 企业&高校179支顶尖开发团队同台竞技 挑战赛33支团队现场…

golang(gin框架)结合前端h5用户注册(演示版)

1、在宝塔上软件商店安装&#xff1a;GO语言版本管理器&#xff1b; 2、把本地文件上传到服务器端&#xff1b; 3、 4、 Go 语言官方提供了一个适合中国大陆用户使用的模块代理 goproxy.cn。你可以配置 Go 使用这个代理&#xff0c;具体操作如下&#xff1a; 临时设置代理…

【Verilog-CBB】开发与验证(5)——RS后向打拍器

引言 接上篇&#xff0c;完成了RS前向打拍器的CBB设计。RS后向打拍器的设计则主要是为了缓解ready信号的时序问题。后向打拍器是对ready以及数据信号进行寄存。 RS后向打拍器的设计逻辑是这样的&#xff0c;复位时&#xff0c;ready缓存器&#xff08;深度为1&#xff09;对上…

栈与递归——385、341、394

385. 迷你语法分析器(中等) 给定一个字符串 s 表示一个整数嵌套列表&#xff0c;实现一个解析它的语法分析器并返回解析的结果 NestedInteger 。 列表中的每个元素只可能是整数或整数嵌套列表 示例 1&#xff1a; 输入&#xff1a;s "324", 输出&#xff1a;324 解释…

8个Python实用技巧,让你的代码效率飞起来

想要成为一名Python编程高手&#xff0c;不仅需要掌握语言的基础知识&#xff0c;还需要了解一些高效编程的技巧。 一、列表推导式 列表推导式是Python中一种快速生成列表的方法&#xff0c;相比传统的循环方式&#xff0c;代码更简洁、更高效。 # 使用列表推导式生成0到9的平…

vuex刷新数据丢失解决方式(插件)

1、下载插件 npm install vuex-persistedstate --save2、引入即可 import Vue from vue import Vuex from vuex import createPersistedState from vuex-persistedstate Vue.use(Vuex)const store new Vuex.Store({state: {login: null},mutations: {setlogin(state, login) …