当前位置: 首页 > 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;
} 

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

项目地址:地址

http://www.lryc.cn/news/414148.html

相关文章:

  • tomato靶场
  • 【Vue】computed计算对象不生效问题?
  • 算法小白的进阶之路(力扣9~12)
  • DOCKER容器中安装JDK1. 8 详细步骤
  • 计算机毕业设计Python+Tensorflow股票推荐系统 股票预测系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI
  • 深度学习常见的卷积和注意力机制文章集锦(持续更新)
  • 如何在立创EDA的PCB电路板导入logo图案
  • springboot集成canal
  • leetcode数论(2447. 最大公因数等于 K 的子数组数目)
  • 实现数组扁平化的几种方式
  • 3D打印技术正悄然重塑模具工业格局
  • 深入解析 KMZ 文件的处理与可视化:从数据提取到地图展示项目实战
  • YOLOv5轻量化改进 | backbone | 结合MobileNetV4(包含多个结构和使用方式)
  • 学习安卓开发遇到的问题
  • 数学建模--禁忌搜索
  • LeetCode 第136场双周赛个人题解
  • The operation was rejected by your operating system. code CERT_HAS_EXPIRED报错解决
  • [Git][基本操作]详细讲解
  • springMVC中从Excel文件中导入导出数据
  • C++的STL简介(三)
  • BERT模型
  • 举例说明计算机视觉(CV)技术的优势和挑战
  • Animate软件基础:关于补间动画中的图层
  • mac|安装hashcat(压缩包密码p解)
  • 【保姆级系列:锐捷模拟器的下载安装使用全套教程】
  • virtualbox7安装centos7.9配置静态ip
  • 结构型设计模式:桥接/组合/装饰/外观/享元
  • vLLM初识(一)
  • 【Apache Doris】周FAQ集锦:第 18 期
  • docker部署可执行的jar