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

news2024/12/25 1:09:45

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;
} 

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

项目地址:地址

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

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

相关文章

react-native从入门到实战系列教程-React Native Elements

react-native的ui框架内网真的是屈指可数&#xff0c;能用的成熟的几乎找不到。不像web端的繁荣景象&#xff0c;可以用荒凉来形容不为过。 京东的nutui说也支持react-native,官网及其简陋。尝试了未成功运行&#xff0c;可能是项目类型不同&#xff0c;对比其他类型的ui库都分…

centos安装es、kibana、ik

这里es使用的是7.10.2版本的es&#xff0c;物料包下载地址如下 #注意安装的插件需和es版本保持一致 #es https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.10.2-linux-x86_64.tar.gz #kibana https://artifacts.elastic.co/downloads/kibana/kibana-7.10…

phpMyAdmin之CMS靶场

方法一&#xff1a;通过日志文件拿webshell 常用的语句如下&#xff1a; show global variables like %general%; set global general_logon; set global general_log_file D:/phpStudy_pro/WWW/muma.php; show global variables like %general%; select <?php eval($_…

广西南宁高校大学智能制造实验室数字孪生可视化系统平台建设项目验收

南宁高校大学智能制造实验室&#xff0c;作为该地区乃至全国智能制造领域的重要研究和教学基地&#xff0c;一直致力于探索和创新智能制造技术。近日&#xff0c;该实验室的数字孪生可视化系统平台建设项目成功通过了验收&#xff0c;标志着其在数字孪生技术领域取得了重大突破…

c语言排序(2)

前言 在上一篇文章&#xff0c;我们学习了插入排序&#xff0c;选择排序以及交换排序中的冒泡排序&#xff0c;接下来我们继续学习交换排序、归并排序以及非比较排序。 1. 快速排序 快速排序是交换排序的一种&#xff0c;它的基本思想&#xff1a;任取待排序序列中的某元素作…

z3基础学习

z3基础学习 ​ z3是一个微软出品的开源约束求解器&#xff0c;能够解决很多种情况下的给定部分约束条件寻求一组满足条件的解的问题。 安装&#xff1a;pip install z3-solver 1. 简单使用 from z3 import * x Int(x) #创建名为x的int类型变量 y Int(y) solve(x y10,2*x…

【Verilog-CBB】开发与验证(1)——开个头

在Verilog代码设计的过程中&#xff0c;经常会涉及到一些常用组件的应用&#xff0c;比如仲裁器、打拍器、RS双向打拍器等。这些组件如果重复开发就会降低效率。这些常用的组件业内称为CBB&#xff08;Common Building Block&#xff09;。本专栏旨在开发一些好用易用的CBB&…

前端拥抱AI:LangChain.js 入门遇山开路之PromptTemplate

PromptTemplate是什么 PromptTemplate是一个可重复使用的模板&#xff0c;用于生成引导模型生成特定输出的文本。与Prompt的区别: PromptTemplate相对于普通Prompt的优势&#xff0c;即其灵活性和可定制性。 简单了解PromptTemplate后&#xff0c;咱们就来聊聊LangChain里的P…

Linux配置FTP服务

一、FTP服务基本信息 FTP服务器&#xff1a;一种应用广泛且古老的互联网文件传输协议&#xff0c;主要用于文件的双向传输。 默认端口号&#xff1a;21 全称&#xff1a;vsftpd 二、搭建FTP服务 1.关闭防火墙和selinux&#xff08;若linux系统没有这两种功能&#xff0c;跳…

最大化性能:VPS 主机优化技巧

如何让您的VPS更高效。VPS(虚拟专用服务器)是扩展网站具备成本效益的托管选项之一&#xff0c;虽然整体性能不错&#xff0c;但大多数用户并不知道&#xff0c;一些基本的优化&#xff0c;例如更改默认设置和降低负载&#xff0c;可能会大大提高其网站的速度。本文将为您介绍一…

阿里云ossbrowser安装及使用

ossbrowser是阿里云官方提供的OSS图形化管理工具&#xff0c;提供类似Windows资源管理器的功能。 阿里云对象存储OSS&#xff08;Object Storage Service&#xff09;是一款海量、安全、低成本、高可靠的云存储服务&#xff0c;可提供99.9999999999%&#xff08;12个9&#xf…

运放开环增益,闭环增益,增益带宽积与频率的关系。压摆率对输出信号影响,TINA仿真验证

开环增益 运放开环增益AOL&#xff0c;运放负反馈形成固定放大倍数的闭环增益&#xff0c;形成的条件是建立在AOL无穷大”的基础之上&#xff0c;实际运放的AOL并不是无穷大&#xff0c;是和频率有关系的。 当AOL不是无穷大时候&#xff0c;虚短是不成立的。并且当AOL比较小的时…

算法日记day 27(回溯之N皇后|解数独)

一、N皇后 题目&#xff1a; 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n…

【C++】map|set|原理使用|multiset|multimap|operator[]|

目录 一&#xff0c;关联式容器 二&#xff0c;键值对 2.1为什么使用键值对 2.2make_pair() 三&#xff0c;STl关联容器 四&#xff0c;set 4.1模板参数 4.2默认构造 4.3使用 去重功能和自动排序 4.4增删查 insert find erase 五&#xff0c;multiset count e…

面试官:使用 xxl-job 怎样解决任务重叠问题?

大家好&#xff0c;我是君哥。今天分享批量任务的重叠问题。 面试官&#xff1a;聊聊你用过的任务调度框架&#xff1f; 我&#xff1a;目前任务调度框架的选择有很多&#xff0c;比如业内熟悉的 QuartZ&#xff0c;Spring Batch&#xff0c;xxl-job&#xff0c;以及新一代的…

从零到一:同城代驾系统源码开发全流程详解

本篇文章&#xff0c;小编将详细解析同城代驾系统源码开发的全流程&#xff0c;从需求分析到最终上线&#xff0c;帮助你从零到一构建完整的系统。 一、需求分析与市场调研 对于同城代驾系统&#xff0c;首先要明确的是目标用户群体&#xff0c;如城市白领、商务人士或家庭用…

文件操作与IO(上)

✨个人主页&#xff1a; 不漫游-CSDN博客 目录 一、认识文件 文件存储 文件路径 绝对路径 相对路径 文件种类 二进制文件 文本文件 文件系统操作 经典面试题 一、认识文件 想必文件大家都不陌生&#xff0c;文件是存储在计算机系统中的数据集合&#xff0c;它可以包…

JavaScript基础——JavaScript运算符

赋值运算符 算术运算符 一元运算符 三元/三目运算符 比较运算符 逻辑运算符 运算符优先级 在JavaScript中&#xff0c;常见的运算符可以包括赋值运算符、一元运算符、算术运算符&#xff08;二元运算符&#xff09;、三元/三目运算符、比较运算符、逻辑运算符等&#xff0…

centos7安装zabbix

可以联网的centos7系统 关闭防火墙 selinux也关了 1、配置镜像源 wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo wget -O /etc/yum.repos.d/epel.repo https://mirrors.aliyun.com/repo/epel-7.repo2、安装nginx并配置 yum ins…

uniapp全局分享功能实现方法(依赖小程序右上角的分享按钮)

1、uniapp开发小程序时默认是关闭分享功能的。点击右上角三个点可查看&#xff0c;效果图如下&#xff1a; 2、在utils文件夹下新建share.js文件&#xff0c;名字任起。&#xff08;使用的是全局分享&#xff0c;因为一个一个页面的去分享太麻烦且没必要。&#xff09; export…