当前位置：首页 > news >正文

08前端项目----升序/降序

news 来源：原创 2025/7/21 3:46:10

升序/降序

- vue实现升序/降序
- 服务器处理

vue实现升序/降序

用vue实现升序/降序，以及css绘制三角形

<div class="sui-navbar"><div class="navbar-inner filter"><ul class="sui-nav"><li class="active"><a href="#">综合</a></li><li><a href="#" @click="sortByPrice">价格<i class="angle_top" :class="{active: priceSort === true}"></i><i class="angle_bottom" :class="{active: priceSort === false}"></i></a></li></ul></div>
</div>

<style>
.angle_top {width: 0;height: 0;display: block;border-style: solid;border-width: 0 6px 6px;border-color: transparent transparent #5e5e5e;position: absolute;top: 10px;right: 17px;
}.angle_bottom {width: 0;height: 0;display: block;border-style: solid;border-width: 6px 6px 0;border-color: #5e5e5e transparent transparent;position: absolute;bottom: 14px;right: 17px;
}
.angle_top.active, .angle_bottom.active {color: red; /* 高亮显示当前排序方向的箭头 */
}
</style>

searchList的goodsList里面有price，根据价格排序；初次点击是升序，再次点击就是降序

data(){return{priceSort:null, //null:默认排序，true：升序；false:降序}
},
computed:{sortedGoodsList(){if(priceSort === null){return this.goodsList;}//在副本上修改数组，避免修改原始数据const sorted = [...this.goodsList];sorted.sort((a,b)=>{return this.priceSort?a.price-b.price:b.price-a.price;});return sorted;}
},
//点击价格按钮
merhods:{sortByPrice(){if(this.priceSort===null){this.priceSort = true;}else{this.priceSort = !this.priceSort;}}
}

<li class="yui3-u-1-5" v-for="good in sortedGoodsList" :key="good.id"><div class="list-wrap"><div class="p-img"><a href="item.html" target="_blank"><img :src="good.defaultImg" /></a></div><div class="price"><strong><em>¥</em><i>{{good.price}}.00</i></strong></div></div>
</li>

服务器处理

实际开发当中有大量的数据，通过上面的方法消耗性能。而且通常情况下需要分页和全局排序，前端无法实现全局价格排序，应该后端处理然后向后端请求数据

数据实时性和准确性：后端实时动态变化数据和处理，可返回前端最新数据
性能优化：后端排序+分页返回，避免浏览器内存溢出与卡顿
确保数据安全性

这里我用的是阿里巴巴的图标，不是手写的
可以在阿里巴巴选择图标然后复制图标的代码
在public/index里面引入图标css样式即可
<link rel="stylesheet" href="https:这里就是图标的代码">
如下在项目中使用（图标的名字分别是icon-up和icon-down）

  <li><a href="#" @click="sortByPrice">价格<span class="iconfont" :class="{'icon-up':isAsc,'icon-down':isDesc}"></span></a></li>

计算属性：
后端请求回来的数据searchParams里面有order字段，order属性值为字符串例如’asc’、‘desc’。只需要修改就行

data(){return{order : null//刚开始为默认}
},computed:{isAsc(){return this.searchParams.order.indexOf('asc')!==-1;},isDesc(){return this.searchParams.order.indexOf('desc')!==-1;},
}

点击价格触发函数

methods:{sortByPrice(){if( this.searchParams.order === 'desc'){this.searchParams.order = 'asc'}else{this.searchParams.order = 'desc'}//再次发送请求}
}

08前端项目----升序/降序

升序/降序 vue实现升序/降序服务器处理 vue实现升序/降序用vue实现升序/降序，以及css绘制三角形 <div class"sui-navbar"><div class"navbar-inner filter"><ul class"sui-nav"><li class"active"&g…...

编程日记 2025/7/21 3:46:10

Dataway在Spring Boot中的引入以及使用教程

Dataway是Hasor生态中的接口配置工具，能帮助开发者快速配置数据接口。它支持DataQL和SQL两种语言模式，可将SQL转换为DataQL执行，简化数据查询与交互，无需编写大量代码。接口配置完成后，可进行自测、冒烟测试&#xff0…...

编程日记 2025/6/29 9:41:39

百度搜索 API 相比于爬虫的效率提升、价格及如何注册使用

使用百度搜索 API 进行数据查询，相比于爬虫（selenium）速度提升的幅度取决于几个因素： 1. 摆脱页面渲染（Selenium） Selenium 通过控制浏览器来模拟用户行为，加载网页并渲染页面。每次请求都需要…...

编程日记 2025/6/29 10:27:33

Docker 中运行 JAR 文件

文章目录步骤 1：准备文件结构步骤 2：编写 Dockerfile步骤 3：构建 Docker 镜像步骤 4：运行容器常见问题解决Q1：容器启动后立即退出Q2：时区不一致Q3：依赖外部服务（如MySQL&#xff09…...

编程日记 2025/7/21 3:24:10

MacOS 10.15上能跑大语言模型吗？

MacOS 10.15上能跑大语言模型吗？ 下载安装Ollama运行大语言模型引申出的问题 MacOS 10.15.7（发布于2020年9月）作为已经发布了将近5年的系统版本能够运行当今流行的大语言模型吗？这篇文章简要介绍了在MacOS 10.15上通过Ollama运行d…...

编程日记 2025/7/21 3:33:23

分布式之易混淆概念

昨天写UE写的破防了，忘了写文章，今天补一下分布式的一些概念。😚 在软件架构领域，微服务、领域驱动设计（DDD）和分布式系统是三个高频且容易被混淆的概念。许多开发者误以为它们是“同一件事的不同说法”&a…...

编程日记 2025/7/21 3:41:06

DeepSeek开源引爆AI Agent革命：应用生态迎来“安卓时刻”

开源低成本：AI应用开发进入“全民时代” 2025年初，中国AI领域迎来里程碑事件——DeepSeek开源模型的横空出世，迅速在全球开发者社区掀起热潮。其R1和V3模型以超低API成本（仅为GPT-4o的2%-10%）和本地化部署能力&#x…...

编程日记 2025/7/21 3:33:23

Anaconda 与 Miniconda 的差异详解

Anaconda 与 Miniconda 的差异详解 Anaconda 和 Miniconda 都是 Python 数据科学领域常用的发行版管理工具，它们都基于 conda 包管理系统，但在设计定位和功能组成上有显著区别。核心差异对比特性AnacondaMiniconda安装包大小较大 (3GB)较小 (100MB左…...

编程日记 2025/7/21 3:38:16

STM32 中断系统深度剖析

在嵌入式系统开发领域，STM32 系列微控制器凭借其强大的性能和丰富的资源被广泛应用。中断系统作为 STM32 的关键特性之一，能够极大地提升系统的实时响应能力和多任务处理效率。本文将基于 STM32F4 系列芯片，深入剖析中断与外设中断的原理、配…...

编程日记 2025/7/21 3:31:55

List findIntersection getUnion

List findIntersection & getUnion 求两个列表的交集和并集 package zwf;import java.util.ArrayList; import java.util.LinkedHashSet; import java.util.List;/*** 列表工具类* * author ZengWenFeng* date 2025.04.22* mobile 13805029595* email 117791303qq.com*/ p…...

编程日记 2025/6/29 9:38:56

【微服务】SpringBoot制作Docker镜像接入SkyWalking详解

目录一、前言二、SkyWalking介绍 2.1 SkyWalking是什么 2.2 SkyWalking核心功能 2.3 SkyWalking整体架构 2.4 SkyWalking主要工作流程三、前置准备 3.1 搭建SkyWalking服务 3.1.1 下载安装包 3.1.2 上传服务器目录 2.1.3 数据库持久化配置说明 3.1.4 启动skywalk…...

编程日记 2025/6/29 9:38:58

豪越科技消防公车管理系统：智能化保障应急救援效率

近期消防车辆管理暴露出的问题，凸显了传统管理模式的不足。在应急救援任务日益繁重的背景下，消防部门对公车管理提出了更高要求。豪越科技针对消防行业特殊需求，研发了专业的消防公车管理系统，通过"线上提交申请-线上审批-线…...

编程日记 2025/6/29 10:33:09

vscode本地docker gdb调试python

背景最近在部署测试一个工程，不想配环境，拉官方镜像下来跑的，不幸地是，程序运行有点问题。想要debug一下，又不想在终端gdb，想要在vscode中点点点，所以有了下面的一顿配置。 vscode python常用…...

编程日记 2025/7/8 9:17:02

Electron使用WebAssembly实现CRC-32 原理校验

Electron使用WebAssembly实现CRC-32 原理校验将C/C语言代码，经由WebAssembly编译为库函数，可以在JS语言环境进行调用。这里介绍在Electron工具环境使用WebAssembly调用CRC-32 原理格式校验的方式。 CRC-32 原理校验函数WebAssembly源文件 C语言实现C…...

编程日记 2025/6/29 9:40:36

Java求职面试：从Spring Boot到微服务的全面考核

面试场景： 在某互联网大厂的面试室内，面试官严肃地坐在桌子后面，面前是几本厚厚的技术书籍。而我们的主人公，搞笑的水货程序员赵大宝，则带着他标志性的微笑走进了房间。第一轮提问： 面试官：…...

编程日记 2025/6/29 12:24:26

Electron主进程渲染进程间通信的方式

在 Electron 中，主进程和渲染进程之间的通信主要通过 IPC（进程间通信）机制实现。以下是几种常见的通信方式： 1. 渲染进程向主进程发送消息（单向） 渲染进程可以通过 ipcRenderer.send 向主进程发送消息&am…...

编程日记 2025/6/29 11:43:49

Spring Boot 主模块 spring-boot 核心技术解析：从启动类到内嵌容器的无缝支持

在现代企业级应用的开发中，构建高效、简洁的应用框架是至关重要的。Spring Boot 作为 Spring 生态系统的重要一员，凭借其“约定优于配置”的理念，极大简化了传统 Spring 应用的开发过程。通过内嵌的容器支持、自动配置功能以及灵活的外部化配…...

编程日记 2025/6/29 11:09:29

盈达科技GEO解决方案：破解AI时代品牌增长困局

盈达科技GEO解决方案：破解AI时代品牌增长困局 ——全域优化策略助力企业抢占生成式AI流量高地一、客户痛点：AI重构规则下的三大生存危机 1. 信任危机：AI放大负面杀伤力财务隐患：上市公司因财报误读导致股价波动产品质量&…...

编程日记 2025/6/29 12:19:34

安宝特科技 | AR眼镜在安保与安防领域的创新应用及前景

随着科技的不断进步，增强现实（AR）技术逐渐在多个领域展现出其独特的优势，尤其是在安保和安防方面。AR眼镜凭借其先进的功能，在机场、车站、海关、港口、工厂、园区、消防局和警察局等行业中为安保人员提供了更为高效、…...

编程日记 2025/7/19 17:25:29

蓝牙 6.0 发布，解锁无线科技新可能

在5G和Wi-Fi 7高速发展的时代，蓝牙技术始终以独特优势深度融入日常生活。从无线耳机到智能家居，它凭借低功耗、高兼容的特性，悄然连接各类智能设备，打造无缝的数字生活体验。无论是聆听音乐、智能门禁还是健康监测，蓝牙…...

编程日记 2025/6/29 10:01:17

redis数据类型-地理空间GEO

redis数据类型-地理空间GEO 文档 redis单机安装redis常用的五种数据类型redis数据类型-位图bitmapredis数据类型-基数统计HyperLogLog 说明官网操作命令指南页面：https://redis.io/docs/latest/commands/?nameget&groupstring 地理空间：GEO …...

编程日记 2025/6/29 12:05:02

2023蓝帽杯初赛内存取证-5

直接查找关键词”xlsx“，但是使用filescna失败了，换成mftparser倒是成功： vol.py -f memdump.mem --profile Win7SP1x64 filescan | grep -E "xlsx" vol.py -f memdump.mem --profile Win7SP1x64 mftparser | grep -E "xlsx&…...

编程日记 2025/6/29 10:50:02

安宝特方案 | 医疗AR眼镜，重新定义远程会诊体验

【AR眼镜：重新定义远程会诊体验】在快速发展的医疗领域，安宝特医疗AR眼镜以其尖端技术和创新功能，引领远程会诊的未来，致力于为为医生和患者带来更高效、精准和无缝的医疗体验。探索安宝特医疗AR眼镜如何在医疗行业中引领新风潮…...

编程日记 2025/6/29 11:53:16

RT-Thread学习笔记（三）

RT-Thread学习笔记时钟管理时钟节拍获取系统节拍定时器系统定时器初始化定时器工作机制动态创建定时器静态创建定时器定时器控制高精度延时函数时钟管理操作系统需要通过时间来规范其任务时钟节拍任何操作系统都需要提供一个时钟节拍，以供系统处理所有和时间…...

编程日记 2025/6/29 11:29:00

【HTTPS协议原理】数据加密、如何防止中间人攻击、证书和签名、HTTPS完整工作流程

⭐️个人主页：小羊 ⭐️所属专栏：Linux网络很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录数据加密常见的加密方式数据摘要方案一：仅使用对称加密方案二：仅使用非对称加密方案三：双…...

编程日记 2025/6/29 9:53:56

Springboot 集成 RBAC 模型实战指南

RBAC 模型核心原理详情可参考之前的笔记：https://blog.csdn.net/qq_35201802/article/details/146036789?spm1011.2415.3001.5331 RBAC 定义与优势 RBAC（Role-Based Access Control，基于角色的访问控制）** 是一种通过角色关联…...

编程日记 2025/6/29 9:52:01

C++继承（最详细）

目录 1.继承的概念以及定义 1.1 继承的概念 1.2 继承的定义编辑 2.继承中的作用域 3.基类和派生类间的转换 4.派生类的默认成员函数 5.实现不被继承的类 6.継承与友元编辑 7.继承与静态成员 8.多继承及其菱形继承问题 8.2 虚继承 8.3 来看一个小题 9.继承…...

编程日记 2025/6/29 12:31:13

【使用Plink检测ROH问题查找】为什么检测ROH参数不一样，FROH近交系数结果差异很大？

为什么检测ROH参数不一样，结果差异很大？ 结果基于ROH检测的结果与参数设置密切相关。参数的改变（对应近交系数改变）可能会对结果产生很大影响。原因 ROH分析缺乏共识标准，这种缺乏共识将导致结果偏倚&#xff0c…...

编程日记 2025/6/29 19:34:39

mybatis mapper.xml中使用枚举

重点：application.propertis配置类 #TypeEnumHandler 这个类的包名，不是全路径 mybatis.type-handlers-packagecom.fan.test.handler两个枚举类： public enum StatusEnum {DELETED(0),ACTIVE(1);private final int code;StatusEnum(int cod…...

编程日记 2025/6/29 11:30:45

探索科技的边界：代理IP与汽车产业链的创新之旅

目录一、代理IP：汽车产业的"数字放大镜" 二、创新应用场景：从实验室到量产线三、技术挑战与进化方向四、未来图景：车联网时代的"数字血管" 结语：重构产业认知的"数字齿轮" 在数字化浪潮席卷…...

编程日记 2025/6/29 10:34:26

单个或批量实现-提取PDF文档中的合同号和姓名并按“合同号_姓名”格式重命名文件。

第一、单个PDF文件命名格式： 提取PDF文档中的合同号和姓名并按“合同号_姓名”格式重命名文件 import pdfplumber import re import osdef extract_contract_info(pdf_path):with pdfplumber.open(pdf_path) as pdf:for page in pdf.pages:text page.extract_tex…...

编程日记 2025/6/29 10:41:27

虚拟机的网络配置

第一章配置网络（注意NAT类型） 1. 在VMware中配置虚拟网络编译器 1） 点击编辑就会出现虚拟网络编译器并点击（要再虚拟机关机的情况下进行） 2）点击右下角的更改设置再点击 VMnet 红色框里192.168.x…...

编程日记 2025/6/29 10:35:31

JAVA设计模式——（二）组合模式

JAVA设计模式——（二）组合模式原理解释实现定义规范接口定义主干定义分支定义叶子测试代码优势原理组合模式用于描述对象在“整体-部分”中的关系，用户对单个对象和组合对象的使用具有一致性。组合模式中由于单个对象和组合对象的使用…...

编程日记 2025/6/29 9:39:04

【数据结构和算法】5. 堆栈和队列

本文根据数据结构和算法入门视频记录文章目录 1. 堆栈（Stack）1.1 概念1.2 数组栈实现1.3 链式栈实现 2. 队列（Queue）2.1 概念2.2 数组队列实现2.3 链式队列实现在这一章我们来了解两个很特殊的数据结构：堆栈 (Stac…...

编程日记 2025/6/29 9:39:00

万字长文 | Apache SeaTunnel 分离集群模式部署 K8s 集群实践

文章作者：雷宝鑫整理排版：白鲸开源曾辉 Apache SeaTunnel官网链接: https://seatunnel.apache.org/ Apache SeaTunnel(以下简称SeaTunnel）是一款新一代高性能、分布式的数据集成同步工具，正受到业界广泛关注和应用。SeaTunnel支…...

编程日记 2025/6/29 9:40:04

逻辑回归：使用 S 型函数进行概率预测

逻辑回归：使用 S 型函数进行概率预测摘要本文章深入探讨了逻辑回归模型如何利用 S 型函数将线性回归的输出转换为概率值。文章详细阐述了 S 型函数的数学原理、在逻辑回归中的应用以及其在机器学习中的重要性。通过具体示例和练习，帮助读者理解如何使…...

编程日记 2025/7/9 22:21:59

马浩棋：产通链CT-Chain 破局不动产 RWA，引领数智金融新变革

全球不动产 RWA 数智金融高峰论坛上马浩棋先生致辞在全球不动产 RWA 数智金融高峰论坛暨产通链 CT-Chain 上链首发会的现场，犀牛世纪集团（香港）有限公司董事会主席马浩棋成为众人瞩目的焦点。此次盛会汇聚了全球金融、区块链及不动产领域的…...

编程日记 2025/7/20 21:02:09

iscsi服务端安装及配置

1. 安装targetcli软件包 yum install -y targetcli 2. 启动target服务 systemctl start target systemctl enable target 3. 配置防火墙 firewall-cmd --add-port"3260/tcp" 3. 准备一个物理分区（或者逻辑分区）…...

编程日记 2025/7/15 4:07:25

常见的神经网络权重文件格式及其详细说明

常见的神经网络权重文件格式及其详细说明的表格： 扩展名所属框架/工具如何生成表示内容使用方法注意事项.pt, .pthPyTorchtorch.save(model.state_dict(), "model.pt")PyTorch模型的状态字典（权重和参数）或整个模型加载方式&#…...

编程日记 2025/6/29 9:39:02

帕金森发病类型和阶段

文章目录直观认识帕金森综合症的类型一、原发性帕金森综合征二、继发性（获得性）帕金森综合征三、帕金森叠加综合征（Atypical Parkinsonism）四、遗传性帕金森综合征五、其他罕见类型推荐文献与资源 PD的病理分期理论（B…...

编程日记 2025/6/29 9:39:10

基于ssm的“安家”儿童福利院管理系统（源码+文档）

项目简介 “安家”儿童福利院实现了以下功能： “安家”儿童福利院管理系统的主要使用者分为管理员：儿童管理、申请领养管理、捐赠管理、楼栋管理、宿舍管理、分配信息管理、宿舍物品管理、报修管理、维修工管理、报修状态管理、留言管理、系统管理。用…...

编程日记 2025/7/17 4:16:10

闲聊人工智能对媒体的影响

技术总是不断地改变信息的传播方式。互联网促进了社交媒体的蓬勃发展。网络媒体成为主流。大语言模型为代表的人工智能的出现，又会对媒体传播带来怎样的改变呢？媒体的演变反映了社会和技术的演变。人工智能(AI) 将继续对整个媒体行业产生变革性的影响。…...

编程日记 2025/6/29 12:11:36

健身房管理系统(springboot+ssm+vue+mysql)含运行文档

健身房管理系统(springbootssmvuemysql)含运行文档健身房管理系统是一个全面的解决方案，旨在帮助健身房高效管理其运营。系统提供多种功能模块，包括会员管理、员工管理、会员卡管理、教练信息管理、解聘管理、健身项目管理、指导项目管理、健身器材管理…...

编程日记 2025/7/17 11:24:38

离散化区间和 java c++

文章目录题面解题思路javacpp 题面题目链接：点击传送假定有一个无限长的数轴，数轴上每个坐标上的数都是 0。现在，我们首先进行 n 次操作，每次操作将某一位置 x 上的数加 c。接下来，进行 m 次询问，每…...

编程日记 2025/6/30 16:39:07

「数据可视化 D3系列」入门第十二章：树状图详解与实践

树状图深度解析与实现一、核心API解析1. d3.hierarchy2. d3.tree3. 节点操作方法二、完整实现解析三、高级技巧与优化四、常见问题解决小结下章预告：地图可视化树状图是一种常见的层次结构可视化方式，它能够清晰地展示数据之间的父子关系。本文将详细…...

编程日记 2025/6/29 9:39:08

IDEA 创建Maven 工程（图文）

设置Maven 仓库打开IDEA 开发工具，我的版本是2024.3.1（每个版本的位置不一样）。在【Customize】选项中，可以直接设置【语言】，在最下面选择【All setting】。进入到熟悉的配置界面，选择配置的【setting…...

编程日记 2025/6/29 9:40:29

机器学习06-RNN

RNN（循环神经网络）学习笔记一、RNN 概述循环神经网络（Recurrent Neural Network，RNN）是一类以序列数据为输入，在序列的演进方向进行递归且所有节点（循环单元）按链式连接的递归神…...

编程日记 2025/6/29 11:38:00

Java常用正则表达式及使用方法

在 Java 中，Pattern 和 Matcher 类是 java.util.regex 包的核心，用于处理正则表达式。 Pattern 类 Pattern 类表示编译后的正则表达式，它提供了一种将正则表达式字符串编译成可执行对象的方式，以便后续用于匹配操作。常用方法…...

编程日记 2025/6/29 11:20:58

新零售行业时代：如何用科技驱动传统零售的转型升级

新零售行业时代：如何用科技驱动传统零售的转型升级 “在变化的世界中，唯一不变的是变化本身。” 一、传统零售的困局：当“生存”成为一场鏖战街角的便利店老板老王，每天凌晨4点起床进货，却在月…...

编程日记 2025/6/29 9:39:09

DeepSeek和Excel结合生成动态图表

文章目录一、前言二、3D柱状图案例2.1、pyecharts可视化官网2.2、Bar3d-Bar3d_puch_card2.3、Deepseek2.4、WPS2.5、动态调整数据一、前言最近在找一些比较炫酷的动态图表，用于日常汇报，于是找到了 DeepseekExcel王牌组合，其等同于动态图…...

编程日记 2025/6/29 10:06:05

升序/降序

vue实现升序/降序

服务器处理

相关文章：