electron新窗口读取本地数据库并展示在html静态页面

最新推荐文章于 2025-05-24 22:59:53 发布
最新推荐文章于 2025-05-24 22:59:53 发布
阅读量5.7k 收藏 4
点赞数 2
分类专栏： 前端 electron 文章标签： electron sqlite
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lbn2676043895/article/details/103619284
版权

首先参考electron官方文档 https://electronjs.org/docs/api/browser-window

设置新窗口页面集成node环境，设置成功后即可以在html页面中js里调用electron模块方法

后面是根据业务进行操作，读取数据库的操作我放在了主进程中，示例：

静态js环境中向主进程发送连接数据库请求,接下来是主进程的操作

数据库的业务处理统一写在了渲染进程中，通过callback回调完成数据的获取，最终数据流向静态html页面中

 

 

 

vue+ts+electron从客户端跳转网页，public文件中的图片不显示如何解决以及动态环境配置中数据获取不到
Missxu1895的博客
05-25 252
首先要明确因为本地和打包后安装的不是同一路径，本地是不需要拼接资源路径的，只有打包安装的时候才是需要的，所以在页面上进行拼接的时候要注意这一点，不能因为要为了解决部署安装以后的问题而影响到本地调试运行。我们之前经常在环境配置中设置的信息（比如下面代码中设置的），但是在客户端的时候因为会涉及到选环境 所以环境配置中的某些数据就没用了，但是有的页面上还是会用到所以就要改到store中获取。所以为了解决这个问题首先第一步要找到安装路径拼接到此路径前面，第二步就是修改页面上的路径，在页面上引用。
使用Electron+Vue开发跨平台桌面应用
编程宝库
08-31 660
虽然B/S是目前开发的主流，但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制，网页应用无法满足某些场景下的使用需求，而桌面应用可以读写本地文件、调用更多系统资源，再加上Web开发的低成本、高效率的优势，这种跨平台方式越来越受到开发者的喜爱。 Electron是一个基于Chromium和 Node.js，使用 HTML、CSS和JavaScript来构建跨平台应用的跨平台开发框架，兼容 Mac、Windows 和 Linux。目前，Electron已经创建了包括VScode和Atom在内的大量应用。 环
sqlite数据库electron应用
05-04
nodejs框架electron应用 基于nodejs的框架,实现electron应用 数据库使用sqlite3 页面布局使用angularjs
electron 中使用本地数据库
weixin_50307964的博客
03-27 4115
众所周知，electron是可以开发桌面端的框架；既然如此那我们有一些数据不想让别人看到，只能在自己的电脑上展示时怎么办呢？这个时候就可以用到本地数据库；数据库有很多的，今天我给大家介绍的是；大家可以一起来学习学习，卷起来，卷起来…
Electron读取本地文件
2501_91537388的博客
04-29 959
通过上述步骤，你可以在 Electron 应用中使用 Node.js 的fs模块来读取本地文件，并利用 IPC 在主进程和渲染进程之间传递数据。这种方式可以确保应用的安全性和稳定性。
应用Electron开发数据分析展示系统
myfutureslive的博客
07-05 709
项目初期实验性开发： wpf版本（完整），外观最好，代码开发、程序结构、快捷方式都很好，性能是个问题； web版本（完整），性能、移动性非常好、但功能差一些； qt版本（实验性开发），性能、功能性非常好、代码开发难易度、程序结构、扩展性一般； 决定用Electron开发一版。 以下为wpf版 ...
给我一段java代码，在mysql数据库中读取数据展示到html网页上
weixin_42613018的博客
02-15 1197
以下是一个简单的 Java 程序，它从 MySQL 数据库中读取数据，并将其显示在 HTML 网页上。 请注意，此代码使用 JDBC 驱动程序连接到 MySQL 数据库，并使用 JSP 技术构建 HTML 页面。确保已经正确安装和配置了 MySQL JDBC 驱动程序，并且具有正确的数据库访问权限。 import java.sql.*; public class ReadFromMySQL { ...
使用Web前端技术开发桌面应用---Electron读取文件内容并展示
CreatorRay的博客
02-18 1632
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 Electron的运行流程 读取package.json的中的入口文件,这里我们是main.js main.js 主进程中创建渲染进程 读取应用页面的布局和样式 使用IPC在主进程执行任务并获取信息 也许你现在还不能理解这个流程,但是你需要记住这个流程,只有我们记住这个流程后,在以后程序出现问题时,才可以很快的定位问题. Electron的主进程和渲染进程 我们可以理解package.json中定义的入口.
2025 最新最全 Vite5+Electron+SQLite3+Vue3 工程搭建指南
最新发布
u010554324的博客
05-24 1105
本文介绍如何搭建一个基于 Vite 5、Electron、SQLite3 和 Vue 3 的桌面应用项目。使用的组件包括但不限于 Vite、Electron、Vue 3、TypeScript、Element Plus、Pinia 状态管理、Tailwind CSS 样式框架、Axios HTTP 客户端以及 JWT 认证等。
使用Electron.js运行JavaScript图应用程序
RoffeyYang的博客
01-04 527
MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购，Standard Single Developer版本原价2848现在年终钜惠抢购立享优惠只需
【Electron应用分发新策略】：创建属于你的应用分发平台
[【Electron应用分发新策略】：创建属于你的应用分发平台](https://opengraph.githubassets.com/dd59536c0a361a6d79d51627dfa6e6720254e51f585cc15d7c448d993d56bd3d/electron/update-electron-app) # 摘要 本文...
关于 HTML的标签内容从数据库读取后如何在前台展示含有标签样式的问题讨论
GinChou的萌新博客
02-24 1756
不是专门做前端的，因为项目需求需要把简单的富文本内容从后台传递到前台，但是后台的到有标签的内容在前台也是直接显示。需要进行处理。 比如后台那道的数据如下： <p>asda</p><br><br> 传递到前台的 content 中，预想是这样的 var content= '<p>asda</p><br><br>'; 但是出现了相关的转义，实际拿到的数据却变成了类似于: &lt;p&a...
如何将数据库中带有样式的数据在html页面生效
qq_40286424的博客
02-16 1185
例子： &lt;c:forEach items="${ar}" var="ar"&gt; &lt;c:out value="${ar.content}" escapeXml="false"&gt;&lt;/c:out&gt; &lt;/c:forEach&gt; 在&lt;c:out&gt;标签中有一个escapeXml属性,其默认值为true
探索 `electron-serve`：优雅地构建Electron应用的静态资源服务器
gitblog_00046的博客
04-20 1327
探索 electron-serve：优雅地构建Electron应用的静态资源服务器 项目地址:https://gitcode.com/gh_mirrors/el/electron-serve 在开发基于Electron的应用时，快速迭代和实时预览是必不可少的需求。 是一个简洁而强大的库，它为Electron应用提供了本地HTTP服务器功能，使得动态加载和更新文件变得极其简便。本文将深入探讨这个项目...
使用electron仿网易云PC端界面遇到的困难（静态页面）
qq_17434759的博客
09-01 391
这是我前端的第一个项目，还有许多欠缺，比如底部的音量修改，歌词文件的读取和点击图片后的页面跳转 搜索的接口等都没有完善，路还很长，砥砺前行。
electron踩坑之dialog中的callback
认定的总要想办法去完成。
10-06 2446
踩坑分析  之前版本使用dialog时选择文件时，可以加入callback，来获取被选择文件的路径，而electron10更新后发生了改动，采用了Promise对象来获取结果。  electron 10之前我们获取文件路径，只需加入callback即可，也就是下述写法，且之前返回的data结果直接是文件的路径。 openDialogDom.onclick = function(){ remote.dialog.showOpenDialog({ properties:['openFi
使用Electron读取本地文件
水寿十八公专栏
06-13 3931
Electron原来叫Atom Shell ,可以用Web技术搭建桌面端程序，以Electron为基础，可以用HTML，CSS和javascriptpt实现程序逻辑和用户桌面，Electron程序一般有主进程和渲染进程，主进程是启动程序的Node脚本，提供对原生的node模块访问。渲染进程是由chromium管理的Web界面。以下的内容介绍从零开始搭建一个读取本地文件的Electron项目。
electron选择加载本地资源【图片、视频、音频】
weixin_42429220的博客
05-25 1753
electron要成功预览本地文件主要还是利用对文件做处理，拿到二进制数据，通过主进程与渲染进程通信，把文件的二进制传输给渲染进程，经过Blob转换得到URL, 就ok了。
electron-vue结合highcharts实现数据可视化
认定的总要想办法去完成。
10-20 3695
electron实现数据可视化  这里我们主要介绍elctron-vue结合highcharts实现数据可视化，在这里给贴出传送门highcharts在github中的地址 npm下载 在这里插入代码片
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值