一个网站建设需要什么,云趣在线企业网站建设,编程需要下载什么软件,网站搭建和网站开发Electron是一个开源的桌面应用程序开发框架#xff0c;它允许开发者使用Web技术#xff08;如 HTML、CSS 和 JavaScript#xff09;构建跨平台的桌面应用程序#xff0c;它的出现极大地简化了桌面应用程序的开发流程#xff0c;让更多的开发者能够利用已有的 Web 开发技能… Electron是一个开源的桌面应用程序开发框架它允许开发者使用Web技术如 HTML、CSS 和 JavaScript构建跨平台的桌面应用程序它的出现极大地简化了桌面应用程序的开发流程让更多的开发者能够利用已有的 Web 开发技能来构建功能强大且跨平台的应用程序这对于提升开发效率和应用程序的快速交付具有重要意义。 今天借助electron实现添加网址的应用功能这里我们通过electron-vite框架搭建项目详细的配置请参考我之前的文章地址 这里不再赘述接下来开始项目的正式讲解
这里我们在头部添加一个添加按钮和搜索框用于对数据进行处理如下所示
templatediv classhomediv classheaderel-input v-modelkeyword stylewidth: 100% placeholder请输入关键字 /el-button typeprimary :iconSearch clickhandleSearch搜索/el-button/div/div
/template
然后这里我们调用axios发送get请求获取书籍相关信息为了避免跨域和安全策略限制问题我们可以在主进程和index.html处设置相关配置如下 接下来我们开始编写相应的接口函数获取书籍书籍代码如下所示
script setup langts
import { ref } from vue
import { Search } from element-plus/icons
import axios from axiosconst keyword ref()// 获取接口函数
const getBooksData async () {let res await axios.get(https://weread.qq.com/web/search/global?keyword${keyword.value}maxIdx0fragmentSize120count20)console.log(res)
}
// 搜索事件
const handleSearch () {getBooksData()
}
/script
搜索到的数据如下所示 获取到数据之后接下来开始对页面内容进行一个页面的搭建
templatediv classhomediv classheaderel-input v-modelkeyword stylewidth: 100% placeholder请输入关键字 /el-button typeprimary :iconSearch clickhandleSearch搜索/el-button/divdiv classbook-contentdiv classbook-item v-foritem in bookList :keyitem.searchIdxdiv classimgimg :srcitem.bookInfo.cover alt图片/divdiv classtitle{{ item.bookInfo.title }}/divdiv classauthor作者 —— span{{ item.bookInfo.author }}/span/divdiv classdesc{{ 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;
}
最终呈现的效果如下所示 项目地址地址
