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

探索 Electron:打造深度书籍挖掘机的搜索体验

Electron是一个开源的桌面应用程序开发框架,它允许开发者使用Web技术(如 HTML、CSS 和 JavaScript)构建跨平台的桌面应用程序,它的出现极大地简化了桌面应用程序的开发流程,让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序,这对于提升开发效率和应用程序的快速交付具有重要意义。

今天借助electron实现添加网址的应用功能,这里我们通过electron-vite框架搭建项目,详细的配置请参考我之前的文章:地址 这里不再赘述,接下来开始项目的正式讲解:

这里我们在头部添加一个添加按钮和搜索框,用于对数据进行处理,如下所示:

<template><div class="home"><div class="header"><el-input v-model="keyword" style="width: 100%" placeholder="请输入关键字" /><el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button></div></div>
</template>

然后这里我们调用axios发送get请求获取书籍相关信息,为了避免跨域和安全策略限制问题,我们可以在主进程和index.html处设置相关配置,如下:

接下来我们开始编写相应的接口函数获取书籍书籍,代码如下所示:

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons'
import axios from 'axios'const keyword = ref('')// 获取接口函数
const getBooksData = async () => {let res = await axios.get(`https://weread.qq.com/web/search/global?keyword=${keyword.value}&maxIdx=0&fragmentSize=120&count=20`)console.log(res)
}
// 搜索事件
const handleSearch = () => {getBooksData()
}
</script>

搜索到的数据如下所示:

获取到数据之后,接下来开始对页面内容进行一个页面的搭建:

<template><div class="home"><div class="header"><el-input v-model="keyword" style="width: 100%" placeholder="请输入关键字" /><el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button></div><div class="book-content"><div class="book-item" v-for="item in bookList" :key="item.searchIdx"><div class="img"><img :src="item.bookInfo.cover" alt="图片"></div><div class="title">{{ item.bookInfo.title }}</div><div class="author">作者 —— <span>{{ item.bookInfo.author }}</span></div><div class="desc">{{ item.bookInfo.intro.substring(0, 25) + '...' }}</div></div></div></div>
</template>

这里我们在App根组件设置一下滚动条的样式:

::-webkit-scrollbar {width: 5px; height: 10%
}::-webkit-scrollbar-track {background-color: #f1f1f1;  border-radius: 5px;} /* 滚动条的滑轨背景颜色 */::-webkit-scrollbar-thumb {background-color: #102ec2;border-radius: 10px;
} 

最终呈现的效果如下所示:

项目地址:地址

相关文章:

探索 Electron:打造深度书籍挖掘机的搜索体验

Electron是一个开源的桌面应用程序开发框架&#xff0c;它允许开发者使用Web技术&#xff08;如 HTML、CSS 和 JavaScript&#xff09;构建跨平台的桌面应用程序&#xff0c;它的出现极大地简化了桌面应用程序的开发流程&#xff0c;让更多的开发者能够利用已有的 Web 开发技能…...

tomato靶场

扫描网址端口 访问一下8888 我们用kali扫描一下目录 访问这个目录 产看iofo.php源码&#xff0c;发现里面有文件包含漏洞 访问/etc/passwd/发现确实有文件包含漏洞 远程连接2211端口 利用报错&#xff0c;向日志文件注入木马&#xff0c;利用文件包含漏洞访问日志文件 http:/…...

【Vue】computed计算对象不生效问题?

问题描述 最近使用vuex来管理全局状态&#xff0c;遇到了computed计算state中数据却不生效的问题。 原因分析&#xff1a; 先看vue官网示例&#xff1a; computed接收的是一个getter函数&#xff0c;但是这个getter函数是懒加载并且有缓存的&#xff0c;当计算属性最终计算…...

算法小白的进阶之路(力扣9~12)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…...

DOCKER容器中安装JDK1. 8 详细步骤

1.通过查找JDK8的远程镜像 docker search jdk 2.选择一个远程镜像下载到本地仓库 #拉取镜像 docker pull kdvolder/jdk8#查看镜像 docker images 可以看到REPOSITORY列下面出现了kdvolder/jdk8 3.在docker容器中运行jdk8的镜像 docker run -di --namejdk1.8 kdvolder/jdk…...

计算机毕业设计Python+Tensorflow股票推荐系统 股票预测系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

1、用pycharm打开项目&#xff0c;一定要打开包含manage.py文件所在文件夹 2、配置解释器&#xff1a;建议使用Anaconda(Python 3.8(base))&#xff0c;低于3.8版本的&#xff0c;页面会不兼容 3、安装依赖库&#xff1a;打开pycharm的终端&#xff0c;输入&#xff1a; pip in…...

深度学习常见的卷积和注意力机制文章集锦(持续更新)

卷积 友好链接1 卷积原理&#xff1a;几种常用的卷积&#xff08;标准卷积、深度卷积、组卷积、扩展卷积、反卷积&#xff09; 友好链接2 一文看尽深度学习中的20种卷积&#xff08;附源码整理和论文解读&#xff09; 友好链接3 深度学习中组卷积(Group convolution)、深度卷积…...

如何在立创EDA的PCB电路板导入logo图案

1、首先制作好logo图案&#xff0c;一般为公司logo图标&#xff0c;如下图 2、打开立创EDA的PCB文件&#xff0c;如下图 3、将PCB的图层切换到丝印层&#xff1a; 4、然后选择EDA菜单栏的放置---图片&#xff1a; 5、进入后点击选择图片&#xff0c;将logo图片导入&#xff0c;…...

springboot集成canal

目录 一、打开mysql的binlog1.1 打开 MySQL 配置文件 my.cnf&#xff08;通常位于 /etc/mysql/my.cnf 或 /etc/my.cnf&#xff09;并添加或修改以下设置&#xff1a;1.2 重启mysql服务1.3 验证是否生效 二、 部署canal 服务端&#xff08;docker&#xff09;2.1 下载启动脚本(可…...

leetcode数论(2447. 最大公因数等于 K 的子数组数目)

前言 经过前期的数据结构和算法学习&#xff0c;开始以OD机考题作为练习题&#xff0c;继续加强下熟练程度。 描述 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 nums 的子数组中元素的最大公因数等于 k 的子数组数目。 子数组 是数组中一个连续的非空序列…...

实现数组扁平化的几种方式

目标: 实现数组扁平化[1,[2,[3,4,5]]] > [1,2,3,4,5] 我们有几种方法可以实现,分别为: 1、递归 function flatten(list){return list.reduce((tar, cur) > {if(Array.isArray(cur)){tar tar.concat(flatten(cur));} else {tar.push(cur);}return tar;}, []); } flatt…...

3D打印技术正悄然重塑模具工业格局

虽被誉为“工业之母”的模具在批量生产中仍占据核心地位&#xff0c;但3D打印以其“无模”直接成型的特性&#xff0c;在小批量、非标准化及复杂结构件制造领域展现出独特优势&#xff0c;随着技术和装备的不断发展&#xff0c;目前3D打印正逐渐向批量生产渗透&#xff0c;某品…...

深入解析 KMZ 文件的处理与可视化:从数据提取到地图展示项目实战

文章目录 1. KMZ 文件与 KML 文件简介1.1 KMZ 文件1.2 KML 文件 2. Python 环境配置与依赖安装3. 代码实现详解3.1 查找 KMZ 文件3.2 解压 KMZ 文件3.3 解析 KML 文件3.4 可视化 KMZ 数据 4. 项目实战4.1. 数据采集4.2. 项目完整代码 5. 项目运行与结果展示6. 总结与展望 在处理…...

YOLOv5轻量化改进 | backbone | 结合MobileNetV4(包含多个结构和使用方式)

YOLOv5轻量化改进 | backbone | 结合MobileNetV4(包含多个结构) 本文介绍论文原理介绍网络代码多种yaml设置网络测试及实验结果<!-- 这里放入论文图片 --> &emsp;;本文介绍 本文给大家带来的改进机制是结合MobileNetV4骨干网络,其中来自2024.5月发布的MobileNetV4…...

学习安卓开发遇到的问题

问题1&#xff1a;学习禁用与恢复按钮中&#xff1a; java代码报错&#xff1a;报错代码是 R.id.btn_enable;case R.id.btn_disable;case R.id.btn_test: 代码如下&#xff1a;&#xff08;实现功能在代码后面&#xff09; package com.example.apptest;import static java.…...

数学建模--禁忌搜索

目录 算法基本原理 关键要素 应用实例 实现细节 python代码示例 总结 禁忌搜索算法在解决哪些具体类型的组合优化问题中最有效&#xff1f; 禁忌搜索算法的邻域结构设计有哪些最佳实践或案例研究&#xff1f; 如何动态更新禁忌表以提高禁忌搜索算法的效率和性能&#…...

LeetCode 第136场双周赛个人题解

Q1. 求出胜利玩家的数目 原题链接 Q1. 求出胜利玩家的数目 思路分析 直接模拟 时间复杂度&#xff1a;O(N) AC代码 class Solution { public:int winningPlayerCount(int n, vector<vector<int>>& pick) {unordered_map<int, unordered_map<int, …...

The operation was rejected by your operating system. code CERT_HAS_EXPIRED报错解决

各种报错&#xff0c;试了清缓存&#xff0c;使用管理员权限打开命令行工具&#xff0c;更新npm&#xff0c;都不好使 最终解决&#xff1a;删除 c:/user/admin/ .npmrc...

[Git][基本操作]详细讲解

目录 1.创建本地仓库2.配置 Git3.添加文件1.添加文件2.提交文件3.其他 && 说明 4.删除文件5.跟踪修改文件6.版本回退7.撤销修改0.前言1.未add2.已add&#xff0c;未commit3.已add&#xff0c;已commit 1.创建本地仓库 创建⼀个Git本地仓库&#xff1a;git init运行该命…...

springMVC中从Excel文件中导入导出数据

目录 1. 数据库展示2. 导入依赖3. 写方法3.1 导入数据3.2 导出数据 4. 效果5. 不足6. 参考链接 1. 数据库展示 2. 导入依赖 pom.xml <!--文件上传处理--><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId>&…...

C++的STL简介(三)

目录 1.vector的模拟实现 1.1begin&#xff08;&#xff09; 1.2end&#xff08;&#xff09; 1.3打印信息 1.4 reserve&#xff08;&#xff09; 1.5 size&#xff08;&#xff09; 1.6 capacity&#xff08;&#xff09; 1.7 push_back() 1.8[ ] 1.9 pop_back() 1.10 insert&…...

BERT模型

BERT模型是由谷歌团队于2019年提出的 Encoder-only 的 语言模型&#xff0c;发表于NLP顶会ACL上。原文题目为&#xff1a;《BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding》链接 在前大模型时代&#xff0c;BERT模型可以算是一个参数量比…...

举例说明计算机视觉(CV)技术的优势和挑战

计算机视觉&#xff08;CV&#xff09;技术是通过计算机模拟和处理图像与视频数据来模拟人类视觉的能力。它可以带来许多优势&#xff0c;也面临一些挑战。 优势&#xff1a; 自动化&#xff1a;CV技术可以自动处理大量的图像和视频数据&#xff0c;从而提高工作效率和准确性。…...

Animate软件基础:关于补间动画中的图层

Animate 文档中的每一个场景都可以包含任意数量的时间轴图层。使用图层和图层文件夹可组织动画序列的内容和分隔动画对象。在图层和文件夹中组织它们可防止它们在重叠时相互擦除、连接或分段。若要创建一次包含多个元件或文本字段的补间移动的动画&#xff0c;请将每个对象放置…...

mac|安装hashcat(压缩包密码p解)

一、安装Macports&#xff08;如果有brew就不用这一步&#xff09; 根据官网文档&#xff1a;The MacPorts Project -- Download & Installation&#xff0c;安装步骤如下 1、下载MacPorts&#xff0c;这里我用的是tar.gz &#xff0c;可以通过keka&#xff08;keka安装在…...

【保姆级系列:锐捷模拟器的下载安装使用全套教程】

保姆级系列&#xff1a;锐捷模拟器的下载安装使用全套教程 1.介绍2.下载3.安装4.实践教程5.验证 1.介绍 锐捷目前可以通过EVE-NG来模拟自己家的路由器&#xff0c;交换机&#xff0c;防火墙。实现方式是把自己家的镜像导入到EVE-ng里面来运行。下面主要就是介绍如何下载镜像和…...

virtualbox7安装centos7.9配置静态ip

1.背景 我大概在一年之前安装virtualbox7centos7.9的环境&#xff0c;但看视频说用vagrant启动的窗口可以不用第三方工具(比如xshell、secure等)连接centos7.9&#xff0c;于是尝鲜试了下还可以&#xff0c;导致系统文件格式是vmdk了&#xff08;网上有vmdk转vdi的方法&#xf…...

结构型设计模式:桥接/组合/装饰/外观/享元

结构型设计模式&#xff1a;适配器/代理 (qq.com)...

vLLM初识(一)

vLLM初识&#xff08;一&#xff09; 前言 在LLM推理优化——KV Cache篇&#xff08;百倍提速&#xff09;中&#xff0c;我们已经介绍了KV Cache技术的原理&#xff0c;从中我们可以知道&#xff0c;KV Cache本质是空间换时间的技术&#xff0c;对于大型模型和长序列&#xf…...

【Apache Doris】周FAQ集锦:第 18 期

【Apache Doris】周FAQ集锦&#xff1a;第 18 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目&#xff01; 在这个栏目中&#xff0c;每周将筛选社区反馈的热门问题和话题&#xff0c;重点回答并进行深入探讨。旨在为广大用户…...

北京市工程建设/专业seo培训

在网络的初期&#xff0c;网民很少&#xff0c;服务器完全无压力&#xff0c;那时的技术也没有现在先进&#xff0c;通常用一个线程来全程跟踪处理一个请求。因为这样最简单。 其实代码实现大家都知道&#xff0c;就是服务器上有个ServerSocket在某个端口监听&#xff0c;接收到…...

微格式wordpress/重庆seo排名公司

经历过很多面试大部分都会问一句&#xff1a; 你知道Java内存模型么&#xff1f; 然后我就pulapula的说一大堆什么堆呀&#xff0c;栈呀&#xff0c;GC呀什么的&#xff0c;这段时间把JVM虚拟机和多线程编程完整的学习了一遍&#xff0c;发现JMM和堆/栈这些完全不是一个概念&a…...

acca少女sdanvi/关键词优化排名的步骤

LIBS D:\Code\Opengltest\OpenGL32.Lib D:\Code\Opengltest\GlU32.Lib LIBS OpenGL32.Lib GlU32.Lib LIBS -L D:\Code\Opengltest\ -lOpenGL32 -lGlU32 LIBS -L ./ -lOpenGL32 -lGlU32 转载于:https://www.cnblogs.com/guozht/p/10756763.html...

.net网站/互联网广告优势

maven中如果在配置中加入了scope标签并且是compile范围的可能会导致jar包冲突比如servlet-api在tomcat服务器中有 配置的例子&#xff1a; <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>c…...

网站首页description标签/友链交易平台

两数之和 给定一个数组 n 以及一个目标值 t &#xff0c;从数组中找到相加等于 t 的两个数字索引 暴力法 解题思路 双层循环&#xff0c;时间复杂度 O(n^2) public int [] towSum(int [] n,int t){// 边界条件if(n.length<2){return new int[]{};}int [] resultnew int…...

浦东做网站公司/网站快速收录工具

前言 最近一个朋友去远方&#xff0c;为期较久。我于是向他借来台式想让自己爽一爽。 由于我装过十多次linux&#xff0c;所以觉得这简直是小菜一碟&#xff0c;事实证明我错了。 正文 一开始&#xff0c;我先在distrowatch的排名从头往后一个一个看以选择有趣的linux发行版。最…...