文章目录
后端node调用http请求给前端显示
1 目标
后端node调用http请求给前端显示。
2 步骤
2.1 src-electron/main.js
/*
* @Author: alan.lau
* @Date: 2024-09-08 20:35:17
* @LastEditTime: 2024-09-10 22:07:04
* @LastEditors: alan.lau
* @Description:
* @FilePath: \electron-demo\src-electron\main.js
* 可以输入预定的版权声明、个性签名、空行等
*/
const { app, BrowserWindow, ipcMain,dialog } = require("electron");
const { join } = require("path");
const fs = require("fs");
const path = require("path");
const axios = require("axios");
// 屏蔽安全警告
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
// 创建浏览器窗口时,调用这个函数。
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 使渲染进程拥有node环境
//关闭web权限检查,允许跨域
webSecurity: false,
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
preload: path.join(__dirname, "preload.js"), // 这里是预加载脚本的位置
},
});
// win.loadURL('http://localhost:3000')
// development模式
if (process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL);
// 开启调试台
win.webContents.openDevTools();
} else {
win.loadFile(join(__dirname, "../dist/index.html"));
}
};
// Electron 会在初始化后并准备
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") app.quit();
});
// 监听从渲染进程发来的 'read-file' 请求,并读取文件
ipcMain.handle('read-file', async (event, filePath) => {
try {
const data = fs.readFileSync(filePath, 'utf-8');
return data; // 返回文件内容
} catch (error) {
console.error('读取文件失败:', error);
return null;
}
});
// 主进程中添加 IPC 事件处理器,打开文件对话框并返回选中文件路径
// 处理打开文件对话框
ipcMain.handle("open-file-dialog", async () => {
const { canceled, filePaths } = await dialog.showOpenDialog({
properties: ["openFile"],
});
if (canceled) {
return null;
} else {
return filePaths[0]; // 返回文件路径
}
});
// GET 请求示例
ipcMain.handle("get-data", async () => {
try {
const response = await axios.get("https://jsonplaceholder.typicode.com/posts/1");
return response.data;
} catch (error) {
console.error("GET 请求错误:", error);
return null;
}
});
// POST 请求示例
ipcMain.handle("post-data", async (event, postData) => {
try {
const response = await axios.post("https://jsonplaceholder.typicode.com/posts", postData);
return response.data;
} catch (error) {
console.error("POST 请求错误:", error);
return null;
}
});
2.2 src-electron/preload.js
const { contextBridge, ipcRenderer } = require("electron");
contextBridge.exposeInMainWorld("electronAPI", {
readFile: (filePath) => ipcRenderer.invoke("read-file", filePath),
openFileDialog: () => ipcRenderer.invoke("open-file-dialog"), // 确保暴露的方法名称与前端一致
getData: () => ipcRenderer.invoke("get-data"),
postData: (data) => ipcRenderer.invoke("post-data", data),
});
2.3 HelloWorld.vue
<!--
* @Author: alan.lau
* @Date: 2024-09-08 20:04:38
* @LastEditTime: 2024-09-10 22:05:38
* @LastEditors: alan.lau
* @Description:
* @FilePath: \electron-demo\src\components\HelloWorld.vue
* 可以输入预定的版权声明、个性签名、空行等
-->
<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as Cesium from 'cesium';
defineProps<{ msg: string }>()
const count = ref(0)
var viewer: Cesium.Viewer | null = null;
const filePath = ref<string | null>(null);
const fileContent = ref<string | null>(null);
onMounted(() => {
viewer = new Cesium.Viewer('cesiumContainer', {
terrain: Cesium.Terrain.fromWorldTerrain(), // 地形数据
});
});
const handleReadFileFromNode = async () => {
const content = await window.electronAPI.readFile('D:\\work\\111.txt'); // 读取文件内容
console.log(content)
};
const handleSelectFile = async () => {
const path = await (window as any).electronAPI.openFileDialog();
if (path) {
filePath.value = path;
// 可选:读取文件内容
const content = await (window as any).electronAPI.readFile(path);
fileContent.value = content;
}
};
const getResult = ref(null);
const postResult = ref(null);
const fetchData = async () => {
getResult.value = await window.electronAPI.getData(); // 调用后端的 GET 请求
};
const sendData = async () => {
const postData = { title: 'foo', body: 'bar', userId: 1 }; // 模拟 POST 数据
postResult.value = await window.electronAPI.postData(postData); // 调用后端的 POST 请求
};
</script>
<template>
<el-button type="primary" @click="fetchData">获取数据 (GET)</el-button>
<el-button type="primary" @click="sendData">发送数据 (POST)</el-button>
<p>GET 请求结果: {{ getResult }}</p>
<p>POST 请求结果: {{ postResult }}</p>
<el-button type="primary" @click="handleSelectFile">选择文件</el-button>
<p>选中文件路径: {{ filePath }}</p>
<p>文件内容:</p>
<pre>{{ fileContent }}</pre>
<h1>{{ msg }}</h1>
<el-button type="primary" @click="handleReadFileFromNode">我是 ElButton</el-button>
<el-container class="home-container">
<el-header>
</el-header>
<el-main>
<div id="cesiumContainer">
</div>
</el-main>
</el-container>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
2.4 运行工程
npm run dev
看到一下界面说明成功