算术题生成器-结对编程

前言

本版要求用户可以使用图形化界面完成所有操作，由于第一版采用 Python 实现，为了更方便地实现美观的界面，采用了网页的形式（HTML+CSS+JS）来实现，同时为了方便开发，采用了 VUE 框架以及 VUE 的 UI 库 ElementUI，项目已上传至 github：https://github.com/WilfredShen/APG。

代码复用

选用网页的形式来实现图形化界面不仅仅是因为能更方便地实现美观的界面，还有一个原因就是 JS 和 Python 都是弱类型语言，同时在很多语法上非常相近，在使用 JS 重新实现 Python 代码的功能时，基本只需要添加上括号即可。

拆分代码

我将原先生成试题的代码拆分成了两部分：“随机生成后缀表达式”和“将后缀表达式转换成前缀表达式”，功能上没有任何改变。

/**
 * 生成后缀表达式
 * @param {0, 1, 2} level 试卷难度
 * @return {Array} 后缀表达式
 */
function getSuffix(level) {/* ... */}

/**
 * 将后缀表达式转换成中缀表达式，并计算其值
 * @param {Array} expression 后缀表达式
 * @returns {[string, Number]} 中缀表达式 中缀表达式的值
 */
function suffix2infix(expression) {/* ... */}

/**
 * 生成中缀表达式及其值
 * @param {0, 1, 2} level 难度
 * @returns {[string, Number]} 中缀表达式 中缀表达式的值
 */
function getInfix(level) {/* ... */}

封装试卷生成

第一版没有对试卷的生成进行封装，在此处进行了一次封装，主要是循环调用 getInfix 生成试题，然后再随机生成错误答案。

/**
 * 生成一份试卷
 * @param {Integer, Integer, Number} paperMeta 试卷元数据：试题难度、试题数量、试卷种子
 * @returns {Array} 试卷数据，每一个元素为一个试题
 */
function getPaper(paperMeta) {/* ... */}

实现伪随机

不同浏览器对 Mtah.random 的实现不尽相同，又由于我添加了“种子”的功能，即生成试卷时如果传入相同的试题难度、试题数量、试卷种子，则会得到同一份试卷，为此我重新实现了伪随机的功能：

// 随机数种子
let $seed = 0;

/**
 * 初始化随机数种子
 * @param {Number} seed 种子
 */
function $srand(seed) {/* ... */}

/**
 * 随机生成 [0,1) 内的数
 * @return {Double} [0,1) 内的数
 */
function $rand() {/* ... */}

/**
 * 随机生成 [min,max] 内的整数
 * @param {Integer} min 下界
 * @param {Integer} max 上界
 * @return {Integer} [min,max] 内的整数
 */
function $randint(min, max) {/* ... */}

/**
 * 将传入的数组打乱
 * @param {Array} array 待打乱的数组
 */
function shuffle(array) {/* ... */}

经验及教训

该项目的难度并不大，重新使用网页实现也是处于对自己的一个锻炼，因为平常很少能够做一个需求明确的网页项目，自然不能错过这次机会。

这次项目中得到的经验比较抽象，主要是 VUE 使用中的一些技巧，对 VUE 这个框架的理解又深了一层。

相应的教训可以总结具体的两点：

1. 在实现时忽略了 JS 跨域的问题，由于助教的测试环境不一定能运行合适的代理服务器，同时不确定是否可以部署上线进行测试，导致访问第三方短信 API 的请求虽然有效，但是会被浏览器拦截，导致只有人工点击链接才能收到验证码，同时代码也无法对请求的反馈进行处理，最终弃用了发送短信的方案。
2. 在使用 VUE 这个框架时对其理解尚有欠缺，在答题界面和详情界面使用同一份数据生成了两份相同的个试卷，其实完全可以通过更高一层次的 VUE 组件传递数据，毕竟从根本上来讲 VUE 生成的是一个单页面网站，虽然可以通过不同的 URI 访问不同的页面，本质上是在同一个页面下渲染出了不同的内容。

总的来说这次的项目收获还是不少，也是一次难得的实践机会。

网站使用流程图