[Electron]仿写一个课堂随机点名小项目

自从前几个月下了抖音，无聊闲暇时就打会打开抖音，因为打开它有种莫名其妙打开了全世界的感觉...

无意中看到这个小视频：随机点名

于是仿写了一个课堂点名小项目，算是对Electron的一个简单的认识，有时间再深入。

项目地址

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

项目截图

Electron介绍

引用官网的一句话：

Build cross platform desktop apps with JavaScript, HTML, and CSS（通过HTML CSS JS技术做跨平台的桌面应用）

需求分析：

无网络环境使用：大学大部分科室可能无网络，本项目所有资源使用本地资源，数据文件存放在本地。
Excel录入：一般每个班级都有一份名单，excel导入节省时间。
多班级列表管理：一个老师可能同时排多个班级学生的课程。
数据统计：统计学生回答情况，方便期末考评。

功能点介绍

Excel导入学生名册
手动录入名册
名册列表管理
数据统计

开发前了解

为快速开发，使用UI库photonkit
使用vue作为lib进行前端逻辑的编写
Excel数据录入基于xlsx
时间生成使用moment

初始化

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

代码语言：txt复制

# 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语法对脚手架进行结构修改

代码语言：txt复制

.
|-- src                              // 源码目录
|   |-- assets					     // 资源文件
|   |-- config					     // 项目配置
|   |-- data					     // 名册json数据
|   |-- vendors						 // 第三方脚本
|   |-- window					     // 窗口目录
|       |-- controllers  			 // 窗口生成
|       |-- views   				 // 页面
|   |-- main.js                      // 程序入口文件
|-- .gitignore                       // Git提交忽略文件规则
|-- LICENSE                          // 授权协议
|-- README.md                        // 项目说明
|-- package.json                     // 配置项目相关信息
.

主进程：

代码语言：txt复制

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'，其他的功能界面定义为大写字母。

代码语言：txt复制

<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 对象。

关系：

代码语言：txt复制

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

基本用法

用 XLSX.readFile 打开 Excel 文件，返回 workbook
用 workbook.SheetNames 获取表名
用 workbook.Sheetsxxx 通过表名获取表格
按自己的需求去处理表格
生成新的 Excel 文件

本项目中，通过input获得file对象，然后通过xlsxjs读取workbook对象，其中worksheet的!margins和!ref属于我们不关心的属性，排除。然后通过循环获取从第二行开始的数据，设置默认头像，拼接成我们的json数据，再下一步通过Node文件系统API写入data文件夹下。

代码语言：txt复制

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 vue.js

0 人点赞