课堂点名神器

前端

2024-02-29 07:06:23

巧用 Electron：打造无网络环境下的课堂随机点名神器

厌倦了传统点名方式的单调乏味？不如来试试用 Electron 打造一个无网络环境下也能随机点名的趣味小项目！本文将循序渐进地带你领略 Electron 的魅力，一步步构建这款点名神器，让课堂互动不再沉闷。

前言

在缺乏网络连接的大学科室中，传统点名方式往往捉襟见肘。于是，一款无网络环境下也能随机点名的工具便应运而生。本文将以 Electron 为开发框架，结合本地资源，打造一款功能实用、趣味无穷的课堂点名神器。

技术准备

在开始之前，你需要准备以下技术栈：

Node.js 16+
Electron 19+
Visual Studio Code 或类似 IDE

功能模块

我们的点名神器将包含以下主要功能：

从本地加载学生名单
随机点名并显示学生信息
导出点名结果（可选）

开发步骤

1. 创建 Electron 项目

打开你的 IDE，并创建一个新的 Electron 项目。你可以使用 electron-quick-start 包来简化这一过程。

2. 设置本地数据

在项目中新建一个 data.json 文件，并添加以下内容：

[
  {
    "name": "张三",
    "id": "123456"
  },
  {
    "name": "李四",
    "id": "654321"
  }
  // ...
]

这个 JSON 文件将存储学生名单及其学号。

3. 创建主进程文件

在项目中创建 main.js 文件，并在其中编写以下代码：

const { app, BrowserWindow, ipcMain } = require('electron');
const fs = require('fs');

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

ipcMain.handle('getStudents', async (event) => {
  const data = await fs.promises.readFile('data.json', 'utf-8');
  return JSON.parse(data);
});

app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
});

这部分代码负责创建 Electron 窗口并加载 index.html 文件。它还处理了从主进程向渲染进程发送学生名单的请求。

4. 创建渲染进程文件

在项目中创建 index.html 文件，并在其中编写以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
</head>
<body>
  <button id="btn-random" onclick="getRandomStudent()">随机点名</button>
  <div id="result"></div>

  <script>
    const { ipcRenderer } = require('electron');

    function getRandomStudent() {
      ipcRenderer.send('getStudents').then((students) => {
        const randomIndex = Math.floor(Math.random() * students.length);
        const student = students[randomIndex];
        document.getElementById('result').innerHTML = `已点名：${student.name}（学号：${student.id}）`;
      });
    }
  </script>
</body>
</html>