上篇博文中，我介绍了网站项目需要的IDE：Intellij，需要的后端框架：Spring，Spring MVC及Mybatis，前端框架：Boostrap及vue.js。并且实现了基础的自动生成小学生四则运算的java程序，搭建了基本的前台页面（至少不算太丑的页面）。
这次博文，我将介绍目前用到的技术点，项目进度成果，并制定下一步的开发进度及时间规划。
一、项目技术点
1. 难度级别的控制参数
项目中自动出题的Java程序具有6个生成题目的参数：
1. 参数mode为符号模式，0是加减、1是乘除、2是加减乘除； 2. 参数hasFraction为控制分数个数； 3. 参数numOfCharacter为符号数量； 4. 参数minOfNumber为式子中出现的最小数值； 5. 参数maxOfNumber为式子中出现的最大数值；
6. 参数hasBrackets为式子中出现的括号个数。
通过这6个参数，也就制定出了题目难度的层次关系。难度等级目前我没有开放，首先大体设置了3个难度等级：
- 简单模式：5个数字，200以内整数加减法，该级别为算术小童；
- 较难模式：7个数字，20以内加减乘除整数四则运算，该级别为算术神童；
- 困难模式：7个数字，20以内分数整数混合四则运算，该级别为算术天才。。。额。。。该级别做完的小学生，绝对牛得不行了。
俗话说得好，没图还说啥？请看下图对比三种模式：
当然，这样的困难度在后面需要设计成循序渐进递进式的，如果一上来就搞太难，小学生一反感，这个产品就失败了。
2. 包含数学符号的运算式如何显示？
2.1 介绍MathJax
首先，+—*/这样的东西显示在页面中，估计小学生是懵逼的，你这是啥啥啥？！
所以，有了众多的html公式渲染组件，由于之前我做过类似的事情，对比多主流的公式渲染组件，因此直接使用爆款MathJax。其中，它支持三种模式的公式排版，我最喜欢LaTEX风格的。谜一样的LaTEX公式字符圆润饱满，赏心悦目，这个组件，别说给小学生出题，就是出高考题，出微积分线性代数那也是不在话下。
来随意感受一下：
额。。。当然了，这只是开个玩笑，我们需要的只是+-*/以及分式和括号的美观表达。
2.2 安装及使用
使用MathJax当然是先安装，非常简单，如果你用的是Tex格式的公式排版，那么直接在HTML文件head里面加入CDN引入，并且做些必要的行内配置，参考如下：
1 <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script> 2 <script type="text/x-mathjax-config"> 3 MathJax.Hub.Config({ 4 tex2jax: { 5 inlineMath: [['$','$'], ['\\(','\\)']], 6 processEscapes: true 7 } 8 }); 9 </script>
是不是很简单？
举个例子：
- 加减和括号都还是+、-、()；
- *号使用\times代替，/号使用\div代替；
- 分号使用\frac{x}{y}代替，x位置是分子，y位置是分母；
- 公式环境单独成行使用$$ $$包裹起来；
- 公式环境嵌在文字中使用$ $包裹起来。
因此，下图公式就可以这样表达： $$1 + 2 - (3 \times 4) \div 5 = \frac{3}{5}$$
3. Spring MVC
根据1中的6个参数，Spring MVC用于控制前台与后台的逻辑交互，关键代码如下：
1 @SuppressWarnings("static-access")
2 @RequestMapping(value="generate_easy")
3 public ModelAndView EasyMode(Model map){
4 AutoFormula autoFormula = new AutoFormula();
5 autoFormula.generate(0, 0, 4, 0, 200);
6 String formular = autoFormula.formular;
7 String result = autoFormula.result;
8
9 map.addAttribute("formular", formular);
10 map.addAttribute("result", result);
11 return new ModelAndView("learn");
12 }
13
14 @SuppressWarnings("static-access")
15 @RequestMapping(value="generate_middle")
16 public ModelAndView MiddleMode(Model map){
17 AutoFormula autoFormula = new AutoFormula();
18 autoFormula.generate(2, 0, 6, 0, 20);
19 String formular = autoFormula.formular;
20 String result = autoFormula.result;
21 formular = formular.replace("*", " \\times ");
22 formular = formular.replace("/", " \\div ");
23
24 map.addAttribute("formular", formular);
25 map.addAttribute("result", result);
26 return new ModelAndView("middle");
27 }
28
29 @SuppressWarnings("static-access")
30 @RequestMapping(value="generate_hard")
31 public ModelAndView HardMode(Model map){
32 AutoFormula autoFormula = new AutoFormula();
33 autoFormula.generate(2, 1, 6, 0, 20);
34 String mathTex = autoFormula.mathTex;
35 String result = autoFormula.result;
36 mathTex = mathTex.replace("*", " \\times ");
37 mathTex = mathTex.replace("/", " \\div ");
38
39 map.addAttribute("formular", mathTex);
40 map.addAttribute("result", result);
41 return new ModelAndView("hard");
42 }
代码中包含了3种级别不同的生成公式的方法。@RequestMapping用于接收URL GET请求，经过处理后生成公式字符串及其结果同时返回到相应前台页面。
生成公式的代码的调用是简单的。new一个AutoFormula类，调用它的generate函数，同时赋予上述的参数即可生成公式及结果。由于页面前台使用的MathJax公式渲染组件，因此要对公式字符串里的/替换成\div，*替换成\time，再输出到前台即可直接通过MathJax渲染出结果。
截图如下：
欢迎大家体验哦：http://server.malab.cn/PupilLearn/learn.jsp
二、项目进度成果
9月6号~9月20号：
制定出了初步的需求文档和开发进度安排，人员分工；
完成前台基本UI及交互逻辑设计；
完成后台关键四则运算代码的开发；
完成前台、后台开发框架的搭建；
完成Github Flow项目管理规范。
三、下一步的开发进度及时间规划
9月20号~9月27号：完成前台出题参数的详细设置项；完成数据库设计，对接家长与老师登录注册功能；
9月27号~10月11号：完成家长与老师监督孩子学习功能，完成实时算术排名功能，加入小游戏寓教于乐。
10月11号~10月18号：bug修复，交付项目。
最后，很开心微信推出了“小程序”，即使以前创业运营过四五个公众账号还是没有收到内测邀请，，，那就再等等吧。。。
对安卓IOS类，我一直提不起兴趣，因为我认为操作系统都只是某个时代的主流，也不愿意为了某种特定平台做开发，例如.NET和微软的SQL Server我比较排斥。希望自己做的工作能有所积淀，能够尽可能对社会有更多贡献，而不愿意在历史的潮流中不停地拆房子盖房子。
-------------------------------------------
作者：万世想
来自：天津大学计算机科学技术学院
主页：http://lab.malab.cn/~shixiang/
Github：https://github.com/ShixiangWan
