前端Vue自定义顶部搜索框:实现热门搜索与历史搜索功能

news/2024/7/22 13:53:28/文章来源:https://blog.csdn.net/chenchuang0128/article/details/139235042

前端Vue自定义顶部搜索框:实现热门搜索与历史搜索功能

摘要:
随着前端开发复杂性的增加,组件化开发成为了提高效率和降低维护成本的有效手段。本文介绍了一个基于Vue的前端自定义顶部搜索框组件,该组件不仅具备基本的搜索功能,还集成了热门搜索和历史搜索特性,为开发者提供了一个高效、可复用的解决方案。

一、背景与意义

在前端开发中,搜索框是许多应用中不可或缺的一部分。传统上,搜索框的实现往往与整个应用紧密耦合,导致开发和维护的复杂性较高。通过组件化的方式,我们可以将搜索框作为一个独立的组件进行开发,使其更加灵活、可复用。此外,集成热门搜索和历史搜索功能可以为用户提供更加便捷、个性化的搜索体验。

二、Vue组件化开发的优势

Vue作为一款流行的前端框架,其组件化开发的特点使得开发者能够更加高效地进行前端开发。通过Vue的组件化开发,我们可以将搜索框拆分为一个独立的组件,实现单独开发、单独维护,并且可以与其他组件进行灵活的组合,从而提高开发效率和降低维护成本。

三、自定义顶部搜索框的设计与实现

1. 组件结构

自定义顶部搜索框组件主要包括搜索框、热门搜索列表和历史搜索列表三部分。搜索框用于用户输入搜索关键词,热门搜索列表显示用户搜索频率较高的关键词,历史搜索列表则记录用户的搜索历史。

2. 数据处理

组件通过props接收一个名为skipUrl的属性,该属性指定了搜索跳转的目标URL。当用户在搜索框中输入关键词并点击搜索按钮时,组件会构造一个带有搜索关键词的URL,并通过router.push方法跳转到目标页面。同时,组件还会将用户输入的关键词保存到本地存储中,以便实现热门搜索和历史搜索功能。

3. 热门搜索与历史搜索的实现

热门搜索功能通过统计用户搜索关键词的频率来实现。每当用户进行一次搜索时,组件都会更新热门搜索列表。历史搜索功能则通过记录用户搜索历史来实现。用户可以通过点击历史搜索列表中的关键词快速进行搜索。

效果图如下:

图片

图片

四、组件代码实现

组件使用方法
<!-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 --><cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>
HTML代码实现部分
<template><view class="content"><!-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 --><cc-headSearch skipUrl="/pages/index/search"></cc-headSearch><!-- 1.推荐流贷产品”“推荐固贷产品”“推荐供应链产品”“推荐综合服务” --><div class="mui-content-padded"><!-- 列表组件 --><CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList></div></view>
</template><script>import CCBProjectList from '../../components/CCProjectList.vue';export default {components: {CCBProjectList},data() {return {skipUrl: '',// 列表数组projectList: []}},mounted() {this.requestData();},methods: {requestData() {// 模拟请求参数设置let reqData = {'area': '',"pageSize": 10,"pageNo": this.curPageNum}// 模拟请求接口this.totalNum = 39;this.projectList = [];for (let i = 0; i < 10; i++) {this.projectList.push({'proName': '商品名称' + i,'proUnit': '商品详情' + i,'area': '商品介绍','proType': '优质','stage': '七天无理由退货','id': i + ''});}}}}
</script><style>page {background-color: #f7f7f7;}.content {display: flex;flex-direction: column;}.mui-content-padded {margin: 0px 14px;/* background-color: #ffffff; */}
</style>

五、总结与展望

本文介绍了一个基于Vue的前端自定义顶部搜索框组件,该组件不仅具备基本的搜索功能,还集成了热门搜索和历史搜索特性。通过组件化的开发方式,我们实现了单独开发、单独维护,并且可以与其他组件进行灵活的组合,大大提高了开发效率和降低了维护成本。未来,我们可以进一步优化该组件的性能和用户体验,例如增加搜索建议、搜索结果高亮等功能。

项目下载地址:

https://ext.dcloud.net.cn/plugin?id=13128

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

记录一次内存取证

1.情景复现 我姐姐的电脑坏了。我们非常幸运地恢复了这个内存转储。你的工作是从系统中获取她所有的重要文件。根据我们的记忆&#xff0c;我们突然看到一个黑色的窗口弹出&#xff0c;上面有一些正在执行的东西。崩溃发生时&#xff0c;她正试图画一些东西。这就是我们从崩溃…

SQL——SELECT相关的题目(力扣难度等级:简单)

目录 197、上升的温度 577、员工奖金 586、订单最多的客户 596、超过5名学生的课 610、判断三角形 620、有趣的电影 181、超过经理收入的员工 1179、重新格式化部门表&#xff08;行转列&#xff09; 1280、学生参加各科测试的次数 1965、丢失信息的雇员 1068、产品销售分…

微信小程序基础 -- 小程序UI组件(5)

小程序UI组件 1.小程序UI组件概述 开发文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html 什么是组件&#xff1a; 组件是视图层的基本组成单元。 组件自带一些功能与微信风格一致的样式。 一个组件通常包括 开始标签 和 结…

SEO优化,小白程序员如何做SEO优化流量从0到1

原文链接&#xff1a;SEO优化&#xff0c;小白程序员如何做SEO优化流量从0到1 1、SEO是什么&#xff1f; SEO即&#xff1a;搜索引擎优化(Search Engine Optimization)&#xff0c;是一种通过优化网站结构、内容和外部链接等因素&#xff0c;提高网站在搜索引擎中的自然排名&…

防止特权升级攻击的有效策略

防止特权升级攻击的有效策略 特权升级攻击是一种通过利用操作系统或应用程序中的编程错误、漏洞、设计缺陷、配置错误或访问控制缺陷&#xff0c;获得对原本应该被限制访问的资源进行未授权访问的行为。这种攻击方式可能导致攻击者获取敏感数据、安装恶意软件并发动其他网络攻…

51单片机-实机演示(单多个数码管)

仿真链接&#xff1a; http://t.csdnimg.cn/QAPhx 目录 一.引脚位置 二.多个显示 三 扩展 一.引脚位置 注意P00 - >A ; 这个多个的在左边,右边的A到B是控制最右边那个单个的. 接下来上显示单个的代码 #include <reg52.h> #include <intrins.h> #define u…

vscode中使用conda虚拟环境

每一次配置环境&#xff0c;真的巨烦&#xff0c;网上的资料一堆还得一个个尝试&#xff0c;遂进行整理 1.准备安装好Anaconda 附带一篇测试教程&#xff0c;安装anaconda 2.准备安装vscode 安装地址&#xff1a;Visual Studio Code 3.创建Conda环境 搜索框搜索Anaconda…

单点登录(JWT实现)

单点登陆的英文名是&#xff1a;Single Sign On&#xff08;简称SSO&#xff09;&#xff0c;只需要登陆一次&#xff0c;就可以访问所有信任的应用系统。 在单体项目中&#xff0c;我们登陆之后可以把验证用户信息的值放入session中&#xff0c;单个tomcat中的session是可以共…

一、Nginx详解和安装

目录 一、简介 1、什么是Nginx 2、Nginx的优点 二、四大应用场景 1、HTTP服务器 2、反向代理 3、负载均衡 4、动静分离 三、Nginx 源码安装 1、安装相关依赖 2、启动nginx 3、安装成系统服务 一、简介 1、什么是Nginx Nginx是一款轻量级的Web服务器&#xff0c;反向…

基于51单片机的智能灯光控制系统

一.硬件方案 智能灯光控制系统由单片机最小系统、人体感应模块、关照强度模块、灯光控制模块、电源模块和灯泡组成。本文以STC89C52单片机为核心&#xff0c;通过利用光照度和红外人体感应相结合主动与被动的探测方法&#xff0c;现了室内无人或者关照充足时灯光自动光灯&…

操作系统4_存储器管理

操作系统4_存储器管理 文章目录 操作系统4_存储器管理1. 存储器的管理功能1.1 地址映射/地址重定位1.2 主存分配与回收1.3 存储保护1.4 主存扩充/虚拟内存2. 存储器的层次结构3. 程序的接入与链接3.1 程序的链接3.2 程序的装入4. 分区存储管理4.1 单一连续分配4.2 固定分区分配…

Mac软件打开时提示:已损坏,无法打开。你应该将它移到废纸娄。怎么解决?

Mac软件打开时提示&#xff1a;已损坏&#xff0c;无法打开。你应该将它移到废纸娄。怎么解决? 原文地址&#xff1a;https://blog.csdn.net/weixin_48311847/article/details/138325009

【Mongo】索引结构

结论 Mongo3.2版本开始&#xff0c;索引的结构默认是B树。 起因 面试的时候&#xff0c;面试官问为什么Mongo DB底层使用B树而不是B树&#xff1f; 面试完赶紧恶补&#xff0c;结果发现面试官好像给我埋了个坑。。。 MongoDB官方描述&#xff1a; 翻译一下就是&#xff1…

多线程JUC 第2季 BlockingQueue 阻塞队列

一 阻塞队列 1.1 阻塞队列介绍 阻塞队列&#xff08;BlockingQueue&#xff09;是一个在队列基础上又支持了两个附加操作的队列&#xff1a; put方法&#xff1a;当队列装满时&#xff0c;添加的线程则被阻塞&#xff0c;直到队列不满&#xff0c;则可用。 take方法&#x…

数据库查询——kettle开发20

一、数据库查询 数据库查询就是数据库里面的左连接&#xff0c;左连接就是两张表执行左关联查询&#xff0c;把左边的表数据全部查询出来。 如图所示我们在进行数据库查询操作时&#xff0c;我们首先需建立数据库连接&#xff0c;输入表名和查询需要的关键字&#xff0c;最后…

解析边缘计算网关的优势-天拓四方

随着信息化、智能化浪潮的持续推进&#xff0c;计算技术正以前所未有的速度发展&#xff0c;而边缘计算网关作为其中的重要一环&#xff0c;以其独特的优势正在逐步改变我们的生活方式和工作模式。本文将详细解析边缘计算网关的优势。 首先&#xff0c;边缘计算网关具有显著的…

Linux shell编程学习笔记50:who命令

0 前言 2024年的网络安全检查又开始了&#xff0c;对于使用基于Linux的国产电脑&#xff0c;我们可以编写一个脚本来收集系统的有关信息。比如&#xff0c;我们可以使用who命令来收集当前已登陆系统的用户信息&#xff0c;当前运行级别等信息。 1. who命令 的功能、格式和选项…

产品推荐-光学镜片镀膜自动上下料设备

随着现代化工业生产的浪潮&#xff0c;智能化和自动化已成为工业发展的必然趋势。在精密制造领域&#xff0c;高精度和高效率更是工艺流程中不可或缺的要素。为满足这一需求&#xff0c;富唯推出了引领行业潮流的智能设备——富唯智能镀膜上下料设备。 一、多功能操作&#xff…

mysql5.7允许root远程访问

mysql客户端工具配置完成后&#xff0c;测试联通失败&#xff0c;客户端真正连接mysql时&#xff0c;也报错不允许rootip连接。 这是由于mysql的root用户默认禁止远程访问&#xff0c;可以通过两种方式改表或者授权的方式开启远程访问。本文中使用改表的方法。按照如下操作即可…

【leetcode 141】环形链表——快慢指针(龟兔赛跑)

给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&#xff08;…