软件工程这门创新课程,提倡作中学。咱们一开学便感觉到了他的威力,第一周便要求完成一个我的项目。在第二周的结对编程中,咱们互相审核搭档的代码,进行学习。前端
个人队友不单单停留在命令行上,而是搭建了图形界面,技术选型选择了Electron与React。web
Electron是GitHub开发的一个开源框架。它容许使用Node.js和Chromium完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发,著名项目包括GitHub的Atom和微软的Visual Studio Code。编程
React是一个为数据提供渲染为HTML视图的开源JavaScript 库。React视图一般采用包含以自定义HTML标记规定的其余组件的组件渲染。React数据改变时对HTML文档进行有效更新,和现代单页应用中组件之间干净的分离。json
Electron 运行package.json的main脚本的进程被称为主进程。 在主进程中运行的脚本经过建立web页面来展现用户界面。 一个 Electron 应用老是有且只有一个主进程。后端
因为 Electron 使用了 Chromium 来展现 web 页面,因此 Chromium 的多进程架构也被使用到。 每一个 Electron 中的 web 页面运行在它本身的渲染进程中。浏览器
在普通的浏览器中,web页面一般在沙盒环境中运行,而且没法访问操做系统的原生资源。 然而 Electron 的用户在 Node.js 的 API 支持下能够在页面中和操做系统进行一些底层交互。架构
1 // 在主进程中. 2 const { ipcMain } = require('electron') 3 ipcMain.on('asynchronous-message', (event, arg) => { 4 console.log(arg) // prints "ping" 5 event.reply('asynchronous-reply', 'pong') 6 }) 7 8 ipcMain.on('synchronous-message', (event, arg) => { 9 console.log(arg) // prints "ping" 10 event.returnValue = 'pong' 11 })
1 //在渲染器进程 (网页) 中。 2 const { ipcRenderer } = require('electron') 3 console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong" 4 5 ipcRenderer.on('asynchronous-reply', (event, arg) => { 6 console.log(arg) // prints "pong" 7 }) 8 ipcRenderer.send('asynchronous-message', 'ping')
实现用户的登录,而且在错误以后有无缺的提示:框架
登录以后显示主要的界面,主要显示如今的用户级别,退出按钮,题目数量,级别选择,以及生成题目与保存文件按钮,而且生成的题目也符合需求的要求:electron
点击生成保存题目以后,成功的保存文件,生成的文件符合格式,有标号、有空行:async