自從前幾個月下了抖音，無聊閑暇時就打會打開抖音，因為打開它有種莫名其妙打開了全世界的感覺...

無意中看到這個小視頻：隨機點名

于是仿寫了一個課堂點名小項目，算是對Electron的一個簡單的認識，有時間再深入。

項目地址

https://github.com/alex1504/electron-roll-tool

項目截圖

Electron介紹

引用官網(wǎng)的一句話： Build cross platform desktop apps with JavaScript, HTML, and CSS（通過HTML CSS JS技術做跨平臺的桌面應用）

需求分析：

無網(wǎng)絡環(huán)境使用：大學大部分科室可能無網(wǎng)絡，本項目所有資源使用本地資源，數(shù)據(jù)文件存放在本地。

Excel錄入：一般每個班級都有一份名單，excel導入節(jié)省時間。

多班級列表管理：一個老師可能同時排多個班級學生的課程。

數(shù)據(jù)統(tǒng)計：統(tǒng)計學生回答情況，方便期末考評。

功能點介紹

• [x] Excel導入學生名冊
• [x] 手動錄入名冊
• [x] 名冊列表管理
• [ ] 數(shù)據(jù)統(tǒng)計

開發(fā)前了解

• 為快速開發(fā)，使用UI庫photonkit
• 使用vue作為lib進行前端邏輯的編寫
• Excel數(shù)據(jù)錄入基于xlsx
• 時間生成使用moment

初始化

本項目基于官方electron-quick-start 腳手架，建立并初始化項目。

# Clone this repository git clone https://github.com/electron/electron-quick-start # Go into the repository cd electron-quick-start # Install dependencies npm install # Run the app npm start

項目核心結構

為使代碼可讀性更強，重新使用es6語法對腳手架進行結構修改

. |-- src // 源碼目錄 | |-- assets // 資源文件 | |-- config // 項目配置 | |-- data // 名冊json數(shù)據(jù) | |-- vendors // 第三方腳本 | |-- window // 窗口目錄 | |-- controllers // 窗口生成 | |-- views // 頁面 | |-- main.js // 程序入口文件 |-- .gitignore // Git提交忽略文件規(guī)則 |-- LICENSE // 授權協(xié)議 |-- README.md // 項目說明 |-- package.json // 配置項目相關信息 .

主進程：

const electron = require('electron'); const app = electron.app; const IndexWindow = require('./windows/controllers/index');class RollTool {constructor() {this.indexWindow = null;}init() {this.initApp()}initApp() {app.on('ready', () => {this.indexWindow = new IndexWindow();});app.on('activate', () => { if (this.indexWindow === null) {this.indexWindow = new IndexWindow();}});app.on('window-all-closed', function () {if (process.platform !== 'darwin') {app.quit()}})} } new RollTool().init();

界面的切換隱藏

通過一個step字段，將主導航界面定義為狀態(tài)'1'，將點名界面定義為狀態(tài)'2'，其他的功能界面定義為大寫字母。

<div id="app"><div class="window"><div class="window-content"><div class="pane-group"><!-- START Maincontent --><div class="pane"><!-- 初始導航 --><section class="guide-box" v-if="step==='1'"></section><!-- 名冊列表 --><section class="select-box" v-if="step==='A'"></section><!-- excel錄入 命名名冊 --><section class="guide-box" v-if="step==='B'"></section><!-- 修改頭像 --><section class="guide-box" v-if="step==='E'"></section><!--手動錄入 --><section class="manual-box" v-if="step==='C'"></section><!-- 手動錄入 命名名冊 --><section class="guide-box" v-if="step==='C1'"></section><!-- 隨機抽取 --><section class="roll-box" v-if="step==='2'"></section></div><!--END Maincontent--><!-- START Sidebar--><div class="pane-sm sidebar"></div><!-- END Sidebar --></div></div></div> </div>

js-xlxs使用

基于該庫，可以將excel數(shù)據(jù)轉(zhuǎn)化為json數(shù)據(jù)，然后自己再進行格式化。

一些概念：

• workbook 對象，指的是整份 Excel 文檔。我們在使用 js-xlsx 讀取 Excel 文檔之后就會獲得 workbook 對象。
• worksheet 對象，指的是 Excel 文檔中的表。我們知道一份 Excel 文檔中可以包含很多張表，而每張表對應的就是 worksheet 對象。
• cell 對象，指的就是 worksheet 中的單元格，一個單元格就是一個 cell 對象。

關系：

// workbook {SheetNames: ['sheet1', 'sheet2'],Sheets: {// worksheet'sheet1': {// cell'A1': { ... },// cell'A2': { ... },...},// worksheet'sheet2': {// cell'A1': { ... },// cell'A2': { ... },...}} }

基本用法

• 用 XLSX.readFile 打開 Excel 文件，返回 workbook
• 用 workbook.SheetNames 獲取表名
• 用 workbook.Sheets[xxx] 通過表名獲取表格
• 按自己的需求去處理表格
• 生成新的 Excel 文件

本項目中，通過input獲得file對象，然后通過xlsxjs讀取workbook對象，其中worksheet的!margins和!ref屬于我們不關心的屬性，排除。然后通過循環(huán)獲取從第二行開始的數(shù)據(jù)，設置默認頭像，拼接成我們的json數(shù)據(jù)，再下一步通過Node文件系統(tǒng)API寫入data文件夾下。

readXlsxFile(file) {const filePath = file.path;const workbook = XLSX.readFile(filePath);const sheetNames = workbook.SheetNames;const worksheet = workbook.Sheets[sheetNames[0]];const fileDir = Date.now().toString();const time = moment().format('LLL');let jsonData = {};let details = [];let length = (Object.keys(worksheet).length - 2) / 2;try{for (let i = 2; i <= length; i ) {const name = worksheet[`A${i}`].h;const id = worksheet[`B${i}`].h;let student = {name,id,isExcluded: false,avatar: `../../../assets/imgs/default_avatar.jpg`};details.push(student)}jsonData.fileDir = fileDir;jsonData.createdAt = time;jsonData.updatedAt = time;jsonData.details = details;this.jsonData = jsonData;}catch (e) {console.log(e)alert('導入失敗，請檢測excel格式是否正確')} }

喜歡本項目可以star或fork，感謝你的支持。

總結

以上是生活随笔為你收集整理的[Electron]仿写一个课堂随机点名小项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。