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

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

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

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

html 复制代码
<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处设置相关配置,如下:

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

javascript 复制代码
<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>

搜索到的数据如下所示:

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

html 复制代码
<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根组件设置一下滚动条的样式:

css 复制代码
::-webkit-scrollbar {
  width: 5px; 
  height: 10%
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;  
   border-radius: 5px;

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

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

项目地址:地址

相关推荐
mCell19 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip19 小时前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript