[Electron]仿寫一個課堂隨機點名小項目

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

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

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

項目地址

github.com/alex1504/el…

項目截圖

Electron介紹

引用官網的一句話： Build cross platform desktop apps with JavaScript, HTML, and CSS（經過HTML+CSS+JS技術作跨平臺的桌面應用）

需求分析：

1. 無網絡環境使用：大學大部分科室可能無網絡，本項目全部資源使用本地資源，數據文件存放在本地。
2. Excel錄入：通常每一個班級都有一份名單，excel導入節省時間。
3. 多班級列表管理：一個老師可能同時排多個班級學生的課程。
4. 數據統計：統計學生回答狀況，方便期末考評。

功能點介紹

• [x] Excel導入學生名冊
• [x] 手動錄入名冊
• [x] 名冊列表管理
• [ ] 數據統計

開發前瞭解

• 爲快速開發，使用UI庫photonkit
• 使用vue做爲lib進行前端邏輯的編寫
• Excel數據錄入基於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數據
|   |-- vendors						 // 第三方腳本
|   |-- window					     // 窗口目錄
|       |-- controllers  			 // 窗口生成
|       |-- views   				 // 頁面
|   |-- main.js                      // 程序入口文件
|-- .gitignore                       // Git提交忽略文件規則
|-- LICENSE                          // 受權協議
|-- 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字段，將主導航界面定義爲狀態'1'，將點名界面定義爲狀態'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數據轉化爲json數據，而後本身再進行格式化。

一些概念：

• 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屬於咱們不關心的屬性，排除。而後經過循環獲取從第二行開始的數據，設置默認頭像，拼接成咱們的json數據，再下一步經過Node文件系統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，感謝你的支持。