今天跟大家伙儿聊聊我搞的这个《魅魔》新官网的事儿，纯纯的个人实践记录，各位看个乐呵就行。
事情是这样的，我平时就喜欢瞎折腾，前阵子不是《魅魔》出了个新DLC嘛叫啥《Elysian Fields》，看网上讨论挺火的，我就寻思着，官方那网站是不是也该更新换代一下了？ 毕竟现在这年头，没个像样的官网，感觉都对不起这游戏的热度。
说干就干，我先去官方网站上溜达了一圈，嚯，这网站，有点年代感了。虽然能用，但总觉得少了点跟现在这游戏的风格不太搭。于是我就决定，自己动手，给它整个新活儿。
第一步，肯定是选技术栈。 我个人比较喜欢用Vue，上手快，生态也所以这回也不例外，前端就 Vue 全家桶伺候。 后端嘛本来想用*的，但是考虑到我对Python更熟练一些，加上Django也用过几次，所以后端就决定用 Django Rest Framework 了。数据库就用我最爱的 PostgreSQL，稳定可靠。
- 前端： Vue + Vuex + Vue Router + Element UI
- 后端： Django Rest Framework
- 数据库： PostgreSQL
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
第二步，就是设计页面。 我没啥美术功底，就想着怎么简洁怎么来，重点突出游戏的特色。我参考了几个游戏官网的设计，然后自己画了个简单的草图，确定了几个主要页面：首页、新闻中心、游戏介绍、DLC介绍、社区论坛、下载中心。
第三步，开干！ 先搭好 Django 的框架，把数据库模型建然后开始写 API 接口。 这部分还算顺利，毕竟之前也做过类似的，没啥大坑。然后就是前端，用 Vue 写页面，调接口，各种组件往上堆。Element UI 真是个好东西，省了我不少事儿。
在写的过程中，也遇到了一些问题，比如图片加载优化，响应式布局，SEO优化等等。 为了解决这些问题，我各种 Google，各种 Stack Overflow， 甚至还去B站找了几个视频学习了一下。 真是活到老学到老。
重点说说图片加载优化。 《魅魔》这游戏，画面那是相当的劲爆，图片素材都很大。 如果不优化，那网站加载速度肯定慢的要死。 我用了几个方法：
- 图片压缩： 用 TinyPNG 把所有图片都压缩了一遍，效果很明显。
- 懒加载： 用 Vue 的指令实现了图片的懒加载，只有当图片出现在可视区域内才加载。
- CDN 加速： 把图片资源放到 CDN 上，提高访问速度。
还有响应式布局， 现在手机用户越来越多，网站必须得在手机上也能 нормально использовать。 我用了 Bootstrap 的栅格系统，配合 CSS 的 media query， 让网站在各种尺寸的屏幕上都能 хорошо выглядеть。
就是 SEO 优化， 这玩意儿我也不太懂，就稍微研究了一下。主要是设置了页面的 title、description、keywords， 还有就是把一些重要的关键词放在了页面的显眼位置。
第四步，测试！ 写完之后，肯定要测试。 我自己测试了一遍，然后找了几个朋友帮忙测试，发现了不少 bug。 有的是页面显示问题，有的是接口问题，还有的是浏览器兼容性问题。 各种改改改。
第五步，部署。 我把网站部署到了我自己的服务器上，用 Nginx 做反向代理， 用 Gunicorn 跑 Django 项目。 这部分也比较顺利，之前也部署过类似的。
搞完这些，整个网站就差不多成型了。 虽然还有一些细节需要完善，但整体来说，比原来的网站好多了。至少界面更 современный了，加载速度也更快了。 我自己感觉还挺有成就感的。
这只是我个人的一个实践，肯定有很多不足之处。 如果各位有什么建议或者想法，欢迎在评论区留言，我们一起交流学习。
提醒大家一句，适度游戏，注意身体！
