专栏首页前端开发打怪手册[Electron]仿写一个课堂随机点名小项目
原创

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

image.png

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

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

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

项目地址

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

项目截图

preview
preview
preview
preview

Electron介绍

引用官网的一句话:

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

需求分析:

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

功能点介绍

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

开发前了解

  • 为快速开发,使用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.Sheetsxxx 通过表名获取表格
  • 按自己的需求去处理表格
  • 生成新的 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,感谢你的支持。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 理解CSS布局和块格式化上下文

    块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与...

    D2
  • JavaScript 中数组方法 reduce 的妙用之处

    Javascript数组方法中,相比map、filter、forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战...

    D2
  • 移动端H5多页开发拍门砖经验

    2016年刚接触移动端开发,刚开始比较疑惑,每次遇到问题都是到社区里提问或者吸取前辈的经验分享,感谢热衷于分享的开发者为前端社区带来欣欣向上的生命力。本文结合先...

    D2
  • Vue.js实现咸鱼底部Tab凸起|vue自定义导航条组件

    Vue自定义Navbar+Tabbar组件 基于Vue.js构建的自定义导航栏+标签栏组件。支持自定义背景(渐变色)、颜色、图标/文字、固定导航、事件处理等功能...

    andy2018
  • (17)打鸡儿教你Vue.js

    router.start(App, '#app') 表示router会创建一个App实例

    达达前端
  • 使用django-haystack实现全文检索

    django是python语言的一个web框架,功能强大。配合一些插件可为web网站很方便地添加搜索功能。

    菲宇
  • Bootstrap-3-Typeahead

    是Bootstrap-3-Typeahead,不是Twitter open source的typeahead,两者用法有差异。外加如果配合原生的Bootstra...

    _淡定_
  • TP5.0如何实现分页功能

    分页功能在后台使用比价广泛,因为后台展示的数据比较多,所以需要分批展示,而分页就是让数据分批展示的一个功能。那么,TP5.0是如何实现分页功能的呢?以用户表的记...

    邂逅千寻
  • 人工智能-信息识别天猫工商图片

    工商图片识别(Businessinfd)基于Opencv ,tesseract4.0。JavaCpp 实现对与tmall的工商图片进行信息识别,实现数据的结构化...

    程序源代码
  • rman 还原归档日志(restore archivelog)

         听说过还原(restore)数据库,表空间及数据库文件,使用归档日志恢复(recover)数据库,表空间,数据库文件。咦,还有还原归档日志这一说法呢?...

    Leshami

扫码关注云+社区

领取腾讯云代金券