Electron 入門案例：讀取本地json檔案，實現使用者登入、修改內容，最小化，最大化，關閉視窗
阿新 • • 發佈：2019-02-06
進入公司實習的第一個月，導師讓學習electron技術，經過兩個星期的學習，做了一個小Demo。主要功能是使用者在訪問後臺伺服器訪問失敗時（登入時會首先訪問後臺伺服器，伺服器訪問失敗時會讀取本地檔案，本案例為json檔案，進行登入），修改使用者資訊（修改本地的json檔案內容）。
- 專案檔案路徑：userSystem路徑下為（node_modules檔案是自己生成的依賴庫不用管）：
 |
app路徑下為：
 |
scripts路徑下為：
 |
data檔案裡面存放使用者資訊：為user.json。
內容為：
 |
- 環境：安裝node.js、npm ，一個文字編輯器（WebStorm、Visual Studio Code ),安裝和配置此處就不說了。node.js安裝包直接去官網下載node下載地址。
- 建立專案：
在本地新建一個空的資料夾，此處為：userSystem，開啟命令列工具（我用的是Power Shell）,進入到該檔案下（剛新建立的資料夾）輸入命令：
| npm init. |
（注意：下面幾個命令都是在該資料夾路徑下執行命令）
依次輸入提示的內容後
npm會為你建立一個 package.json 檔案。 main 欄位為應用的啟動指令碼，會在主程序中執行。 如下是一個 package.json 的部分內容：
|
{ "name": "my-app", "version": "1.1.0", "main": "main.js", "scripts": { "start": "node ." }, "author":"lxt" } |
-
建立完成後開啟package.json檔案修改裡面的script欄位內容為：
|
|
- 安裝Electron:
輸入命令：
| npm install --save-dev electron |
- 編寫程式碼實現功能：
首先是main.js檔案，主要用於建立視窗，與其它視窗進行通訊。
'use strict'
const electron = require('electron');
const {app, BrowserWindow} = require('electron');
const url = require('url');
const path = require('path');
const remote = require('electron').remote;
const ipc = electron.ipcMain;
let mainWindow = null;
//建立登入視窗
function createWindow() {
mainWindow = new BrowserWindow({
width: 535,
height: 500,
transparent: true,
frame: false,
resizable: false,
maximizable: false,
});
const URL = url.format({
pathname: path.join(__dirname, 'app/index.html'),
protocol: 'file',
slashes: true
});
mainWindow.loadURL(URL);
//開啟開發者工具
mainWindow.webContents.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
}
let userEditorWindow = null;
//監聽是否開啟該視窗（使用者編輯視窗）
ipc.on('open-user-editor', (event,message) => {
if (mainWindow) {
mainWindow.hide();
}
if (userEditorWindow) {
return;
}
//建立使用者編輯視窗
userEditorWindow = new BrowserWindow({
frame: false,
height: 600,
//resizable:false,
width: 500,
//maximizable:true,
});
const user_edit_url = url.format({
pathname: path.join(__dirname, 'app/showUser.html'),
protocol: 'file',
slashes: true
});
userEditorWindow.loadURL(user_edit_url);
//開啟開發者工具
userEditorWindow.webContents.openDevTools();
//接收使用者登入成功之後傳過來的使用者物件，併發送到使用者編輯視窗
if(message!=undefined){
userEditorWindow.webContents.on('did-finish-load', function () {
userEditorWindow.webContents.send('loginUserData', message);
});
}
userEditorWindow.on('closed', () => {
userEditorWindow = null;
});
});
//接收視窗最小化通訊
ipc.on('mini-user-editor-window', () => {
userEditorWindow.minimize();
});
//接收視窗變小（還原到原狀態）通訊
ipc.on('turn-small-user-editor', () => {
userEditorWindow.unmaximize();
});
//接收視窗最大化通訊
ipc.on('turn-big-user-editor', () => {
userEditorWindow.maximize();
});
//使用者編輯視窗點選關閉時通訊
ipc.on('close-user-editor-window', () => {
if (userEditorWindow) {
userEditorWindow.close();
}
if (mainWindow) {
mainWindow.destroy();
app.quit();
}
});
app.on('ready', createWindow);
//所有視窗關閉時，退出程式
app.on('window-all-closed', () => {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow == null) {
createWindow();
}
});
其次是login.js檔案，實現獲取輸入框內容，使用者登入驗證，向主程序通訊，傳送開啟編輯使用者視窗的通知：
//啟用嚴格模式
'use strict'
const ipc = require('electron').ipcRenderer;
const url = require('url');
const path = require('path');
const fs = require("fs");
//點選登入按鈕時，獲取輸入框內容並提交
$(".loginForm .loginButton").click(function () {
$(".errorInformation").hide();
var username = $.trim($(".username .textInput").val());
var password = $.trim($(".password .textInput").val());
if (username == "") {
$(".errorInformation").show();
$(".errorInformation").text("請輸入賬號");
$(".username .textInput").focus();
return false;
}
if (password == "") {
$(".errorInformation").show();
$(".errorInformation").text("請輸入密碼");
$(".password .textInput").focus();
return false;
}
$.ajax({
type: "POST",
dataType: "json",
url: "http://localhost:8080/DemoWeb/user/loginss.do",
data: { username: username, password: password },
error: function () {
console.info("當前訪問的是本地檔案登入");
readFilePath(username, password);
},
success: function (forward) {
console.info("當前訪問的是伺服器登入");
if (forward.success) {
//向主程序通訊，傳送開啟編輯使用者視窗的通知
let userData = JSON.stringify(forward.data);
ipc.send('open-user-editor', userData);
}
else {
$(".errorInformation").show();
$(".errorInformation").text("使用者名稱或密碼錯誤!");
}
}
});
});
function readFilePath(username, password) {
var loginFlag = false;
//獲取本地json檔案的路徑
const newFile_path = path.join(__dirname, 'data/user.json').replace(/\\/g, "\/");
fs.exists(newFile_path, function (exists) {
console.log(exists ? "檔案存在" : "檔案不存在");
if (!exists) {
$(".errorInformation").show();
$(".errorInformation").text("查詢失敗，本地檔案不存在!");
return;
} else {
//讀取本地的json檔案
let result = JSON.parse(fs.readFileSync(newFile_path));
//遍歷讀取到的使用者物件，進行登入驗證
for (var i in result) {
if ((result[i].lid == username) && (result[i].password == password)) {
//驗證成功，向主程序通訊，傳送開啟編輯使用者視窗的通知
let data = JSON.stringify(result[i]);
ipc.send('open-user-editor', data);
loginFlag = true;
break;
}
}
if (!loginFlag) {
$(".errorInformation").show();
$(".errorInformation").text("使用者名稱或密碼錯誤!");
}
}
});
}
最後是userEditot.js檔案：
'use strict'
const ipc = require('electron').ipcRenderer;
const url = require('url');
const path = require('path');
const fs = require("fs");
//獲取本地json檔案檔案的路徑
const newFile_path = path.join(__dirname, 'data/user.json').replace(/\\/g, "\/");
//點選最小化按鈕
$(".sys-control-box .sys-btn-minis").click(function () {
ipc.send('mini-user-editor-window');
});
//預設顯示最大視窗
var isBig = false;
//點選最大化視窗按鈕
$(".sys-control-box .sys-btn-big").click(function () {
if (isBig) {
//修改背景圖示，並向主進通訊，傳送通知
$(this).css('background', 'url(' + getSmallUrl() + ')');
ipc.send('turn-small-user-editor');
} else {
$(this).css('background', 'url(' + getBigUrl() + ')');
ipc.send('turn-big-user-editor');
}
isBig = !isBig;
});
//點選關閉按鈕
$(".sys-control-box .sys-btn-closed").click(function () {
ipc.send('close-user-editor-window');
});
//接受主程序傳送過來的登入成功後的使用者資訊，並在使用者編輯視窗回顯
ipc.on('loginUserData', function (event, message) {
let user = JSON.parse(message);
console.log(user);
$("#userid input").val(user.id);
$("#userlid input").val(user.lid);
$(".username input").val(user.name);
$(".department input").val(user.department);
$(".project input").val(user.project);
$(".telephone input").val(user.telephone);
$(".email input").val(user.email);
});
//點選儲存按鈕，獲取輸入框內容，並提交
$(".saveForm .saveButton").click(function () {
$(".errorInformation").hide();
var newPassword = $(".newPassword input").val();
var isPassword = $(".isPassword input").val();
if (newPassword == isPassword) {
var userId = $("#userid input").val();
var userlId = $("#userlid input").val();
var username = $(".username input").val();
var department = $(".department input").val();
var project = $(".project input").val();
var telephone = $(".telephone input").val();
var email = $(".email input").val();
$.ajax({
type: "POST",
dataType: "json",
url: "http://localhost:8080/DemoWeb/user/update.do",
data: { userId: userId, username: username, department: department, project: project, telephone: telephone, email: email, password: newPassword, lid: userlId },
error: function () {
updateUserMessage(userlId, username, department, project, telephone, email, newPassword);
},
success: function (forward) {
if (forward.success) {
console.info(forward.data);
alert("修改成功");
}
else {
alert(forward.data);
}
}
});
} else {
$(".errorInformation").show();
$(".errorInformation").text("密碼不一致，無法提交！");
}
});
//獲取顯示最大化視窗後需要顯示的圖示的路徑
function getBigUrl() {
const img_small = url.format({
pathname: path.join(__dirname, 'imgs/turnsmall.png'),
protocol: 'file',
slashes: true
});
var newUrl = img_small.replace(/\\/g, "\/");
return newUrl;
}
//獲取顯示最大化視窗之前需要顯示的圖示的路徑
function getSmallUrl() {
const img_big = url.format({
pathname: path.join(__dirname, 'imgs/turnbig.png'),
protocol: 'file',
slashes: true
});
var newUrl = img_big.replace(/\\/g, "\/");
return newUrl;
}
//儲存使用者資訊，修改本地json檔案的內容
function updateUserMessage(userlId, username, department, project, telephone, email, newPassword) {
if (newPassword == "") {
var params = {
"name": username,
"department": department,
"project": project,
"telephone": telephone,
"email": email,
}
} else {
var params = {
"name": username,
"department": department,
"project": project,
"telephone": telephone,
"email": email,
"password": newPassword
}
}
//讀取本地json檔案
let result = JSON.parse(fs.readFileSync(newFile_path));
//修改本地json檔案的內容
for (var i in result) {
if (userlId == result[i].lid) {
for (var key in params) {
if (result[i][key]) {
result[i][key] = params[key];
}
}
}
}
//格式化輸出json檔案
let newData = JSON.stringify(result,null,4);
fs.writeFile(newFile_path, newData, (error) => {
if (error) {
console.error(error);
}
alert("儲存成功");
});
}- 剩下的就是兩個html頁面，在此就不復述了。
最終實現的效果如圖：
- 剛開始學Electron，或許寫的程式碼會有冗餘或者哪個地方寫的邏輯不是很清楚，還望體諒一個小白的技術，多多指正。或者想要專案完整原始碼，有哪些不懂的地方也可以詢問我。