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

最新推荐文章于 2025-10-31 09:46:39 发布

原创最新推荐文章于 2025-10-31 09:46:39 发布 · 5.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#electron #sqlite

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

electron

2 篇文章

订阅专栏

本文介绍如何在Electron应用中集成Node.js环境，实现HTML页面调用Electron模块。并通过主进程处理数据库请求，最终将数据传递至前端页面。详细步骤包括设置新窗口页面集成Node环境，以及在渲染进程中处理数据库业务。

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

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lbn2676043895

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue+ts+electron从客户端跳转网页，public文件中的图片不显示如何解决以及动态环境配置中数据获取不到

Missxu1895的博客

05-25

303

首先要明确因为本地和打包后安装的不是同一路径，本地是不需要拼接资源路径的，只有打包安装的时候才是需要的，所以在页面上进行拼接的时候要注意这一点，不能因为要为了解决部署安装以后的问题而影响到本地调试运行。我们之前经常在环境配置中设置的信息（比如下面代码中设置的），但是在客户端的时候因为会涉及到选环境所以环境配置中的某些数据就没用了，但是有的页面上还是会用到所以就要改到store中获取。所以为了解决这个问题首先第一步要找到安装路径拼接到此路径前面，第二步就是修改页面上的路径，在页面上引用。

使用Electron+Vue开发跨平台桌面应用

编程宝库

08-31

705

虽然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各环节下项目&构建的文件存储位置

蓝色黄梅天的博客

08-20

5166

Window/MacOS下的Electron项目路径

在 Electron 框架中实现数据库的连接、读取和写入

最新发布

只会写bug

10-31

1186

electron 桌面端通信（三）

qq_45219069的博客

03-19

1539

之前，我们知道了如何快速将一个转化为应用，同时也知道了针对某些行业如何添加副屏。不过，在有些场景下，可能需要通过获取一些桌面端（系统）信息，传递给网页，或者副屏需要需要接收主屏传过来的数据等等场景，此时，我们就需要通过解决。

electron 中使用本地数据库

weixin_50307964的博客

03-27

4411

众所周知，electron是可以开发桌面端的框架；既然如此那我们有一些数据不想让别人看到，只能在自己的电脑上展示时怎么办呢？这个时候就可以用到本地数据库；数据库有很多的，今天我给大家介绍的是；大家可以一起来学习学习，卷起来，卷起来…

应用Electron开发数据分析展示系统

myfutureslive的博客

07-05

753

项目初期实验性开发： wpf版本（完整），外观最好，代码开发、程序结构、快捷方式都很好，性能是个问题； web版本（完整），性能、移动性非常好、但功能差一些； qt版本（实验性开发），性能、功能性非常好、代码开发难易度、程序结构、扩展性一般；决定用Electron开发一版。以下为wpf版 ...

u010554324的博客

05-24

1934

本文介绍如何搭建一个基于 Vite 5、Electron、SQLite3 和 Vue 3 的桌面应用项目。使用的组件包括但不限于 Vite、Electron、Vue 3、TypeScript、Element Plus、Pinia 状态管理、Tailwind CSS 样式框架、Axios HTTP 客户端以及 JWT 认证等。

基于Electron的兴德中学电子餐食应用

Electron通过将Chromium渲染引擎与Node.js运行时集成在同一个进程中，使得开发者既能利用强大的Web前端生态进行界面设计，又能直接访问操作系统的底层功能，如文件系统读写、系统托盘图标控制、本地数据库存储、通知...

使用Electron.js运行JavaScript图应用程序

RoffeyYang的博客

01-04

547

MindFusion.Diagramming for WinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.Diagramming for WinForms现已加入在线订购，Standard Single Developer版本原价2848现在年终钜惠抢购立享优惠只需

使用electron仿网易云PC端界面遇到的困难（静态页面）

qq_17434759的博客

09-01

424

这是我前端的第一个项目，还有许多欠缺，比如底部的音量修改，歌词文件的读取和点击图片后的页面跳转搜索的接口等都没有完善，路还很长，砥砺前行。

使用electron打包静态页面

Hibiki的博客

12-19

661

就能完成打包了，打完包能看到一个demo.exe启动就ok了。到静态页面文件夹里面创建。在静态文件夹里面创建文件。先到静态页面包外面安装。然后在静态文件夹外面的。里修改如下script。

给我一段java代码，在mysql数据库中读取数据展示到html网页上

weixin_42613018的博客

02-15

1227

以下是一个简单的 Java 程序，它从 MySQL 数据库中读取数据，并将其显示在 HTML 网页上。请注意，此代码使用 JDBC 驱动程序连接到 MySQL 数据库，并使用 JSP 技术构建 HTML 页面。确保已经正确安装和配置了 MySQL JDBC 驱动程序，并且具有正确的数据库访问权限。 import java.sql.*; public class ReadFromMySQL { ...

使用Web前端技术开发桌面应用---Electron读取文件内容并展示

CreatorRay的博客

02-18

1692

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 Electron的运行流程读取package.json的中的入口文件,这里我们是main.js main.js 主进程中创建渲染进程读取应用页面的布局和样式使用IPC在主进程执行任务并获取信息也许你现在还不能理解这个流程,但是你需要记住这个流程,只有我们记住这个流程后,在以后程序出现问题时,才可以很快的定位问题. Electron的主进程和渲染进程我们可以理解package.json中定义的入口.

关于 HTML的标签内容从数据库读取后如何在前台展示含有标签样式的问题讨论

GinChou的萌新博客

02-24

1794

不是专门做前端的，因为项目需求需要把简单的富文本内容从后台传递到前台，但是后台的到有标签的内容在前台也是直接显示。需要进行处理。比如后台那道的数据如下： asda 传递到前台的 content 中，预想是这样的 var content= 'asda '; 但是出现了相关的转义，实际拿到的数据却变成了类似于: <p&a...

如何将数据库中带有样式的数据在html页面生效

qq_40286424的博客

02-16

1214

例子： <c:forEach items="${ar}" var="ar"> <c:out value="${ar.content}" escapeXml="false"></c:out> </c:forEach> 在<c:out>标签中有一个escapeXml属性,其默认值为true

【亲测免费】探索 `electron-serve`：优雅地构建Electron应用的静态资源服务器

gitblog_00046的博客

04-20

1515

探索 electron-serve：优雅地构建Electron应用的静态资源服务器在开发基于Electron的应用时，快速迭代和实时预览是必不可少的需求。是一个简洁而强大的库，它为Electron应用提供了本地HTTP服务器功能，使得动态加载和更新文件变得极其简便。本文将深入探讨这个项目的背后原理、应用场景及其独特的特性。项目简介 electron-serve 由知名开发者Sindre So...

electron踩坑之dialog中的callback

认定的总要想办法去完成。

10-06

2476

踩坑分析之前版本使用dialog时选择文件时，可以加入callback，来获取被选择文件的路径，而electron10更新后发生了改动，采用了Promise对象来获取结果。 electron 10之前我们获取文件路径，只需加入callback即可，也就是下述写法，且之前返回的data结果直接是文件的路径。 openDialogDom.onclick = function(){ remote.dialog.showOpenDialog({ properties:['openFi