Since I played Douyin a few months ago, I would open it when I was bored and at leisure, because opening it felt like inexplicably opening the whole world.

Came across this little video: Random roll call

So I wrote a class roll call project, which can be regarded as a simple understanding of Electron.

The project address

Github.com/alex1504/el…

Project screenshots

Electron is introduced

Build cross Platform Desktop apps with JavaScript, HTML, and CSS

Demand analysis:

  1. No network environment: Most departments of the university may have no network, so all resources of the project are local resources and data files are stored locally.
  2. Excel entry: generally each class has a list, Excel import saves time.
  3. Multi-class list management: a teacher may schedule classes of students at the same time.
  4. Data statistics: statistics of students’ answers to facilitate the final evaluation.

Function Points

  • [x] Excel import student roster
  • [x] Manual entry into the roster
  • [x] Roster list management
  • [] Data statistics

Pre-development understanding

  • For rapid development, use the UI library PhotonKit
  • Write front-end logic using VUE as lib
  • Excel data entry is based on XLSX
  • Time generation uses moment

Initialize the

This project is based on the official electron-quick-start scaffolding to establish and initialize the project.

# 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
Copy the code

Project core structure

To make the code more readable, the scaffolding is structurally modified using es6 syntax

. | -- -- SRC / / source directory | | - assets / / resource file | | - config / / project configuration | | the json data - data / / register | | - vendors / / third party scripts | | - window / / window | | - controllers / / window generates | | - page views / / | | - main. Js / / program entry documents. | - gitignore / / Git commits | - LICENSE / / ignore file rules Licensing | -- README. Md / / project that | -- package. Json / / configure project related information.Copy the code

Main process:

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();
Copy the code

Interface switch hidden

Define the main navigation interface as state ‘1’, the roll Call interface as state ‘2’, and other functional interfaces as capital letters through a step field.

<div id="app">
    <div class="window">
        <div class="window-content">
            <div class="pane-group"> <! -- START Maincontent --> <div class="pane"> <! Initial navigation --> <section class="guide-box" v-if="step==='1'"> </section> <! --> <section class="select-box" v-if="step==='A'"> </section> <! --> <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>Copy the code

Js – XLXS use

With this library, you can convert Excel data into JSON data and then format it yourself.

Some concepts:

  • The workbook object is the entire Excel document. We get the Workbook object after we read the Excel document using JS-XLSx.
  • The Worksheet object is a table in an Excel document. We know that an Excel document can contain many tables, and each table corresponds to a Worksheet object.
  • A cell object is a cell object in a worksheet.

Relationship:

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

Basic usage

  • Open the Excel file with xlsx. readFile and return to the workbook
  • Get the table name with workbook.sheetNames
  • Use workbook.sheets [XXX] to retrieve the table name
  • Process the form as you see fit
  • Generate a new Excel file

In this project, the file object is obtained through input, and the workbook object is read through XLSXJS, where the worksheet! Margins and! Ref is a property that we don’t care about, exclude. Then we loop through the data from the second line, set the default avatar, concatenate it into our JSON data, and then write it to the data folder through the Node file system API.

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('Import failed, please check excel format is correct')}}Copy the code

Like this project can be star or fork, thanks for your support.