尚品汇-前端面包屑平台属性、排序处理(三十三)

news2024/9/21 4:34:57

目录:

(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/2051837.html

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

相关文章

el-table表格可编辑

需求&#xff1a;使用elementui的表格组件&#xff0c;实现某些列可以输入或者下拉选择修改行数据 //tabClickLabel 只是作为区分是否可以修改列的条件 <el-tableref"table":data"tableData":header-cell-style"{ background: #F5F7FA, height: 3…

理解Java中的for-each循环:为什么有时候不能修改数组元素?

前言&#xff1a; 刚开始学习编程的时候&#xff0c;我们都会老老实实用 for-i循环&#xff0c;后面接触到for-each的时候&#xff0c;发现竟然还可以再省一点代码&#xff0c;慢慢也会开始学会用for-each。但其实&#xff0c;在有些即使是需要从头遍历的场景&#xff0c;for-e…

uva455 输入格式说的不明白多加空格

提要&#xff1a;题目你看原题有输出格式的坑&#xff0c;本来已经写好代码 结果被这**格式整半天才好&#xff01;&#xff01; 那个xuhanx是我错了那么多次主打一个锲而不舍笑死我了。简单讲一下核心代码就一行 x[j] ! pattern[j % i] 这个是原理比较好理解吧。 建议就是…

SpringBoot和Redis的交互数据操作 以及 Redis的持久化/删除策略和缓存问题

一、SpringBoot和Redis/MySQL的数据交互 说明&#xff1a; 在 SpringBoot2.x 之后&#xff0c;原来使用的jedis 被替换为了 lettuce SpringBoot/Spring和Redis之间的交互简称为Spring-data-redis,有两种方式提供选择&#xff1a; jedis &#xff1a;采用的直连&#xff0c;多个…

一个专门用于Java服务端图片合成的工具,支持图片、文本、矩形等多种素材的合成,功能丰富强大(附源码)

前言 在数字化营销的当下&#xff0c;企业对于图片处理的需求日益增长。然而&#xff0c;传统的图片处理方式往往需要复杂的操作和专业的技术&#xff0c;这不仅增加了工作量&#xff0c;也提高了时间成本。 为了处理这一问题&#xff0c;一款能够简化图片合成流程的软件应运…

《书生大模型实战营第3期》进阶岛 第4关: InternVL 多模态模型部署微调实践

文章大纲 写在前面&#xff08;什么是InternVL&#xff09;InternVL 模型总览Dynamic High ResolutionPixel ShuffleInternVL 部署微调实践准备InternVL模型准备环境准备微调数据集InternVL 推理部署攻略使用pipeline进行推理推理后 InternVL 微调攻略准备数据集配置微调参数开…

中年程序员从西安出发到日照、青岛低成本吃喝万里行,暑假遛娃自由行:连云港-日照-青岛 6天5 晚自由行

文章大纲 暑假出行总体方案Day1 西安-连云港&#xff1a;连岛Day2 连云港-日照&#xff1a;海鲜蒸汽锅Day3 日照 &#xff1a;海洋馆Day4 日照-青岛&#xff1a;再游金沙滩Day5 青岛&#xff1a;山涧溪谷Day6 青岛-连云港-西安 暑假出行总体方案 今年出去玩的地方不算少&#…

Java中VM options与Program arguments区别与作用

Java中VM options与Program arguments区别与作用 VM options 我们在程序中需要的运行时环境变量&#xff0c;它需要以-D或-X或-XX开头&#xff0c;每个参数使用空格分隔 使用最多的就是-Dkeyvalue设定系统属性值&#xff0c;比如-Dserver.port8088 application.yml server:…

深度优先搜索:如何在二叉树中找出“好节点”【迭代法、状态管理技巧、DFS】

一、题目分析 题目要求&#xff1a; 给定一棵二叉树&#xff0c;定义一个“好节点”为&#xff1a;从根节点到该节点路径上&#xff0c;没有任何节点的值比该节点的值大。要求我们返回二叉树中好节点的数量。 示例&#xff1a; 示例 1: 输入: [3,1,4,3,null,1,5] 输出: 4解…

Open3D 遍历八叉树

目录 一、概述 1.1原理 1.2实现步骤 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2数据显示 Open3D点云算法汇总及实战案例汇总的目录地址&#xff1a; Open3D点云算法与点云深度学习案例汇总&#xff08;长期更新&#xff09;-CSDN博客 一、概…

Git安装包及怎么再windows上运行

第一步&#xff1a;下载git。 国内 Git for Windows. 国内镜像 感谢GitHub - waylau/git-for-win: Git for Windows. 国内直接从官网下载比较困难&#xff0c;需要翻墙。这里提供一个国内的下载站&#xff0c;方便网友下载 安装步骤&#xff1a; Git for Windows安装和基本…

VTK—vtkCutter截取平面数据

&#xff0c; 本例 vtkCutter可以配合隐式函数截取数据使用vtkPlane隐式函数配合vtkWidget截取任意平面。 1.读入数据 Create(vtkMultiBlockPLOT3DReader, reader);reader->SetXYZFileName("G:/Temp/vtkTest/combxyz.bin");reader->SetQFileName("G:/Tem…

Linux系统之部署轻量级Markdown文本编辑器

Linux系统之部署轻量级Markdown文本编辑器 一、项目介绍1.1 项目简介1.2 使用方法 二、本次实践介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查系统版本3.2 检查系统内核版本3.3 检查软件源 四、安装Apache24.1 安装Apache2软件4.2 启动apache2服务4.3 查看ap…

【题目/训练】:双指针

引言 我们已经在这篇博客【算法/学习】双指针-CSDN博客里面讲了双指针、二分等的相关知识。 现在我们来做一些训练吧 经典例题 1. 移动零 思路&#xff1a; 使用 0 当做这个中间点&#xff0c;把不等于 0(注意题目没说不能有负数)的放到中间点的左边&#xff0c;等于 0 的…

微服务设计原则——高性能:存储设计

文章目录 1.读写分离2.分库分表3.动静分离4.冷热分离5.重写轻读6.数据异构参考文献 任何一个系统&#xff0c;从单机到分布式&#xff0c;从前端到后台&#xff0c;功能和逻辑各不相同&#xff0c;但干的只有两件事&#xff1a;读和写。而每个系统的业务特性可能都不一样&#…

STM32CubeMX生成stm32MP135中断优先级配置错误修正方法

0 修改方法 使用STM32CubeMX生成stm32MP135代码的中断优先级配置错误&#xff0c;将导致所有中断优先级设置不对。 如果设置EXTI0中断优先级为10&#xff0c;在STM32CubeMX中配置如下&#xff1a; 生成的中断优先级配置代码为&#xff1a; 正确写法应该将中断优先级左移3位&…

python人工智能001:NumPy科学计算库说明与安装

1. NumPy说明 NumPy&#xff08;Numerical Python&#xff09;是Python的一个开源数值计算扩展库。它提供了一个强大的N维数组对象ndarray&#xff0c;以及用于对这些数组进行操作的函数。NumPy的数组和数组操作是Python数据分析、机器学习、科学计算等领域的基础。 NumPy的主…

web开发环境搭配与创建javaee项目

一.web开发 (1)web开发指的是前端,后端,以及数据库进行交互&#xff0c;前端发送请求到后端&#xff0c;后端经过程序处理后到达数据库&#xff0c;最后在进行后端处理响应回前端。 (2)一次三端交互的doget或者dopost简单请求流程 (3)web开发除了需要前端,后端,数据库开发工具…

Java之线程篇一

目录 如何理解进程&#xff1f; 进程和线程的区别 线程的优点 线程的缺点 线程异常 线程用途 创建线程 方法一&#xff1a;继承Thread类&#xff0c;重写run() 观察线程 小结 方法二&#xff1a; 实现Runnable接口&#xff0c;重写run() 方法三&#xff1a;继承Threa…

超越AnimateAnyone!Meta提出全身 3D虚拟人技术ExAvatar,可通过简短视频克隆人像并转化为3D数字形象

ExAvatar是由DGIST和Meta公司的Codec Avatars Lab联合研发的一项技术,能够通过捕捉视频中的动作和表情,转化为栩栩如生的3D数字形象。这项技术解决了以往技术中的难题,提高了动画的自然度和渲染效果。 什么是 ExAvatar? ExAvatar 是全新富有表现力的全身 3D 高斯化身。 结…