程序员视角谈一谈国服AS预约活动网站 - 数独篇
LLAS国服终于要来啦，这不官方为了庆祝好不容易拿到的版号开服还组织了一场盛大的预约活动。只要每天签到，做一道LL数独，然后看看视频，都可以得到分数。积攒完足够多的分数就可以获得游戏内的道具，满200分就可以获得UR一张。（羡慕.jpg）
正式开始本文前先自我介绍一下好了。笔者现在在做前端程序员。大概来说，每个网站大致可以分成前端和后端两部分：前端是你能看到的东西，后端是你看不到但是拥有最复杂的逻辑和保存你所有数据的部分。所以我就是那个负责网站上你看到的样子的人。
为了让这篇文章对任何人都通俗易懂，我会尽量去解释每个专业术语，比如用比喻的方式。在比喻的时候难免有些小的细节会丢失，还请各位大佬多多包涵。
起因
笔者是国际服玩家，本来实在是肝不动了不打算开国服坑了，每天都围观群友分享当天的数独题然后大家一起讨论解题的过程，不过直到有一天我看到了这么一张截图：
嘶...这个提示框看着怎么这么复古...要知道大部分时间你看到的提示框都不长这样。而是像下面这样经过设计的：
这里要提到三个概念，HTML，CSS和JavaScript。
HTML说白了就是一个网页最基本的框架，就好比一个带家具的毛坯房。每个房间都有了，但是那个整体设计嘛...只能说勉强能住人。
CSS是对网页的装饰，相当于给毛胚房刷了漆上了色，还挂了画，于是就好看很多。
大概来说没有JavaScript的网站就是没走水电的房子。天花板上装的有灯，墙上也有开关，可是你按一下，灯也不亮。而有了JS以后你的网站才能做到，点击按钮，显示一个东西在页面上，就像房间的灯亮了一样。
也就是说你看到的那些华丽的提示框，其实都是这三样东西加成的结果，往往有着很多行的代码。而至于AS网站的这个提示框，它就是Javascript里面简单的一句：alert("这里是文字")
所以一般来说帮你看到一个网站用上这样的提示框，那么大概就表明这个网站比较赶工...这也是为什么它成功引起了我的注意。
顺便一提，每个网站你都是可以看到它的HTML，CSS和JavaScript的。方法很简单，在页面上右键 -> 审查元素（或者直接F12），一个小窗口会弹出来。大概长这个样子（抱歉笔者用的是英文系统）
最上面的Elements会显示上图的东西。它右边的Console可以允许你在这个页面上自由执行JavaScript。再右边的Sources可以让你看到这个页面的源代码。
代码剖析
那么下面我们就看一下这个数独部分的代码吧。
看到这个缩进和空格笔者血压已经升高了......
首先映入眼帘的是一个叫dic的东西，里面是数字对应一个answer（答案），有意思。这里面的代码不重要，感兴趣的可以自己去看看。
不过有意思的是页面上加载的另一段代码：
笔者的血压再次升高了...... 这空格，这函数名，这变量名，这谜一样的缩写。anseNum是啥？叫answerNum不好么（你缩写也没缩对啊喂！）为什么你下面就不缩写改叫answerSwitch了（就不吐槽这命名了...）还有这四处充斥的注释掉的代码...
重点在第238-254行。这里面的逻辑我给大家解读一下。每道数独有个题目编号，刚刚你看到的那个dic里面就装了答案（草）。这里就是在检查二者是否一致。如果一致，那么给那位偶像的图片上加个小勾勾，否则加个小叉叉。然后把答题结果发送给后端保存，答对就是addStore(1)，答错就是addStore(0)
问题来了，你答案怎么放在前端了？这我不直接就知道你答案是啥了？
（ps. 如果我校的在线测验系统是这样的，我早就乐开花了）
首先，做网站最重要的一点就是，永远不要相信前端发给你的数据，因为它可以通过任何方式被篡改。总的来说：假设你在前端检查今天是否三遍已经答满，那任何人就有能力绕过这个检查。假设你在前端检查是否回答正确，那任何人都可以篡改这个验证结果。至于后端，有现如今相对安全的服务器，所以没点工夫是没法去修改数据的（要是能的话问题就大了）。
那么这里网站的流程是什么样的呢，请看这个图：
研究发现回答三遍的限制似乎在后端也有验证（太好了），这里的流程图为了简略忽略了。
注意这里所有的前端逻辑（左侧灰框）都是可以跳过的，也就是说我可以直接跳过这些复杂的判断逻辑，而直接自主选择是让后端知道自己答对还是答错。可以看出，这是非常危险的。
笔者斗胆试想了一下一个正确的逻辑是什么样的。我觉得是这样的：
回答正确与否的验证，以及已经尝试过几次，都应该是由坚不可摧的后端负责的。前端应该只负责记录用户的回答，以及把回答发送到后端，然后展示后端的回复。
现在再看看，左边的前端部分你能控制的只有你的回答了。这样来看你不知道答案是什么了，也没法破解了，乖乖做题吧。
不过，要说有什么可圈可点的地方，就是一天能做几道题是后端控制的，不然......
结语
总结来说，可以看出这次凛时工再次发威了。说实话我看到这样制作的网站，作为一名前端（以前也做过全栈）实在是收不住自己的血压... 网站整体美工做的很不错，很好看，小游戏很好玩也很有创意，但是在一些细节上还是有些不尽如人意。总之可以看出赶工了。
顺便一提，笔者其实视频部分也好好研究了下。本来打算一篇文章都写完的，没想到写完数独就已经这么多字了。本来就一堆复杂的东西，再长不拉唧的估计就更没人看了。要是能有人感兴趣的话我会抽空更一下视频部分，相似的逻辑。
声明
数独游戏超好玩的，笔者写这篇文章只是从技术层面探讨一下这个网站的设计，以及指出一些在开发上存在的漏洞以及代码习惯问题，其目的不是为了鼓励大家去做不好的事情。本文纯粹就事实存在的事物进行剖析，因此笔者对一切因本文产生的后果不负任何责任。
嘛就这样，阳光小透明走了，拜拜～
