纯开发实现天气之子中的网站系统有多难

纯开发实现天气之子中的网站系统有多难

在电影《天气之子》中，男主角帆高为女主角阳菜制作了专门用于接收“晴女”工作的网站。根据影片剧情走向可以看出，这并不是一个简单的纯展示网页，而是一套带有后台管理功能、拥有独立域名的网站系统。那么开发这样一个看似简单的系统，都需要哪些知识储备、涉及到的技术栈有多深呢？

1. 前端

1. 布局

从剧情中可以看出整个网页的头图是由男女主角共同设计完成的。简单猜测整个网页的布局应该就是头图 + 评论区的形式。同时在头图的右下角有一个请求“晴女”工作的表单。

除此之外，在接收到工作的时候，头图正中会弹出一个旋转的硬币。

这应该是最简单的前端布局。头图上的硬币、表单可以通过绝对定位直接完成。硬币的弹出动画可以用 gif，也可以自制雪碧图并且用 css3 动画实现。

有没有使用一些 UI 框架我们无从得知。我更倾向于没有用。因为这个网页的复杂度不是很高，使用框架开发反倒会降低开发效率。

这样布局的好处是显而易见的，头图简单明了突出工作重点，评论区大大方方展示用户评价。当积累了初期的评论与口碑之后能有效提高用户下单成功率，降低用户摇摆不定时的废单风险。

2. 评论区

评论区容易被人忽视的点是使用了定制化的富文本编辑器。这在影片中没有给到明显的镜头，但是我们可以通过合理推测得到结论。这是一个展示给寻常大众的网页，是不可能使用 markdown 类型的文本编辑器的。而且这个编辑器肯定不会给用户提供修改字体字号等功能。同时应该支持图片编辑与上传，否则起不到“服务评价”的效果。电影中也给出了几个评论的镜头，似乎可以使用一些非 emoji 系列的表情元素进行评论。

考虑到以上这些，男主角很大概率是使用了第三方的富文本编辑器。据我所知有一个由日本的程序员开源的富文本库，男主极有可能用了它。

3. 多端适配

剧情中首次向我们展示这个网页的设备是 PC，但是后期我们也可以看出男主用手机查看评论区并且评论区的布局适配了手机屏幕分辨率。因此男主一定针对不同的设备不同的分辨率定制了多套适配方案。这可能是使用了 rem 布局，也可能使用了流式布局，甚至也可能根本就是写了两套 css 样式通过判断浏览器头来区分应该加载哪一份…因为实现这个功能的手段颇多所以详细的技术细节我们无从得知。

后端

1. 数据存储

整个网站涉及到了评论、订单等数据，背后一定使用了数据库系统进行数据存储。因为数据格式少且固定，因此我推测应该没有用 NoSQL 类型的数据库。最大的可能还是 MySQL 这种老牌关系型数据库吧。当然 SQL Lite 这类稍微轻量一些的数据库系统也是可能的。

2. 鉴权

之前提到，当有外部订单时，男女主可以在头图上看见一个硬币弹出的标识。因此网站系统必须有一套鉴权机制来区分当前浏览者是外部客户还是男女主角。

这在实现上不会太困难，可以设置一个用户名密码进行登录，也可以在 url 里加几个特殊参数使服务端返回一些额外的数据。

3. Websocket

和鉴权相匹配的一项功能是 Websocket。在电影中可以看出，当有订单时，页面没有经过刷新或是其他操作，直接弹出了头图上的银币。因此，网页很可能使用了 Websocket 技术和服务端进行通讯。

Websocket 是 HTML5 之后才提供的能使浏览器和服务器之间进行通讯的协议，通过 Websocket 进行连接的浏览器和服务器之间可以进行双向数据传输。男女主在通过鉴权之后浏览器即和服务器进行握手，通过之后建立 Websocket 通道。当服务器监控有新的订单时便向浏览器推送一条信息，浏览器接收到信息之后弹出硬币提示男女主角。

当然，除了 Websocket 技术之外，男主也可以使用 Ajax 轮询技术实现。轮询即设定某个时间间隔，浏览器每隔一定的时间就像服务器发请求查询订单状态。这样的缺点是浏览器需要不断的向服务器发请求，可能会造成一些服务器资源浪费。

4. 防刷

系统涉及到订单提交、评论提交，如果没有相应的防刷机制服务器资源可能很快就会被垃圾信息占满，因此防刷是必不可少的。

我所知道的实现简单防刷的方式有两种，一种是在提交时使用图形或其他各类验证码。这种方式需要在服务端实现一套验证码生成算法，并且将验证码附在前端页面提交信息处。用户每次提交时都需要识别，数据通过服务端的验证后才会被写入数据库。

还有一种识别方式是通过短信、邮箱验证。这个交互逻辑在现阶段比较常见。在提交数据之前需要使用用户的手机/邮箱接收一条带有验证信息的消息。用户在网页上填入正确的验证消息后提交。服务器验证后写入数据库。

我认为，评论区的应该使用了图形验证码，这样不会太妨碍用户的评论操作。而订单提交则应用了手机短信验证码，能在防刷的过程中同时收集用户的手机号，可谓一举两得。

5. 部署与服务器运维

电影中还有非常重要的一个细节就是男主在三年后打开网站的时候发现网站还在健康的运行中。也就是说该网站在互联网的浪潮中屹立了三年之久，既没有被黑客入侵变为矿机，也没有沦为黑产宣传网。而且男主是通过某个独立域名打开这个网站的，我们可以推测这个网站或许绑定了男主名下的某个虚拟主机。

这说明男主有很强的安全意识和丰富的服务器运维知识。男主懂得购买域名、绑定域名、购买虚拟主机、并且在虚拟机上配置服务器环境，设置安全权限…并且一定设置了某些“自净”程序，当服务器出现某些问题的时候自动重启，自动重新运行网站系统等等。

3. 总结

小小网站包含了男主无尽的心血。关键是这个网站竟然只是耗费了一个下午就制作完成了，可见男主为了能让女主开心花费了多大的心血！上文所述的任何一项稍有生疏就可能耗费一整天的时间去研究，也可看出男主的编程实力之高让人佩服不已！实乃我程序员辈之楷模！

电影中其实还有一个细节。就是男主在 K&A 打工时，如果我没有看错的话，在店长的 mac 上用的编辑器是 sublime。你能想象一个新闻行业实习生会用 sublime 去写新闻稿吗？这简直就是对编程满满的爱啊！