今天给大家伙儿唠唠我这几天捯饬的“M决斗场官网”项目，从零开始，一点点抠出来的，中间踩了不少坑，也学了不少新东西，现在热乎乎的，赶紧跟大家伙儿分享一下。
一开始接到这个活儿，说要做个决斗场官网，我心里也没底。啥是决斗场？M又是啥意思？一脸懵逼。赶紧上网搜了搜，原来是类似 DNF 手游里 PVP 的那种东西，得，有点概念了。
第一步：确定需求，搭架子
-
先跟甲方爸爸好好聊了聊，确定了官网的大概功能：
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
-
赛事信息展示
-
选手介绍
-
直播入口
-
新闻资讯
-
用户反馈
-
-
然后就开始搭架子。用的是 Vue + ElementUI，因为之前用得比较熟，上手快。脚手架直接
vue create一把梭，然后把 ElementUI 按需引入。
第二步：页面布局，填充数据
-
页面布局这块，参考了一些游戏官网的设计，整体风格要偏向电竞，酷炫一点。颜色主要用了黑、红、金，这几个颜色比较抓眼球。
-
然后就是往页面里填充数据。赛事信息、选手介绍啥的，都是从甲方爸爸那边拿的，整理成 JSON 格式，然后用
v-for循环渲染到页面上。这里要注意数据格式的统一，不然容易出幺蛾子。
第三步：直播模块，踩坑无数
-
直播模块是这回项目里最难啃的骨头。甲方爸爸要求能直接在官网里看直播，还得支持弹幕互动。这可把我难住了。
-
一开始想自己搞一套直播系统，后来发现工作量太大，时间根本来不及。只能找第三方直播平台合作，用他们的 SDK。
-
接入 SDK 的过程也是一波三折。各种文档看得我头昏脑胀，各种 API 接口调得我怀疑人生。最坑的是，有些平台的文档写得模棱两可，还得自己去摸索。
-
弹幕互动也搞了好久。一开始想用 WebSocket 自己写一个，后来发现太麻烦，还是用了第三方弹幕插件。虽然方便，但是定制性不高，只能凑合着用。
第四步：新闻资讯，后台管理
-
新闻资讯这块，比较简单，就是个列表展示。不过后台管理这块，得自己搭一个。用的是 * + Express + MongoDB，搭了个简单的 CRUD 接口，方便甲方爸爸自己发布新闻。
-
后台管理页面也用了 ElementUI，省了不少事。权限管理这块，做了个简单的用户角色验证，不同的角色有不同的权限。
第五步：优化细节，上线部署
-
代码写完之后，就开始各种优化。图片压缩、代码优化、SEO 优化，能做的都做了。
-
然后就是上线部署。用的是 Nginx + Docker，把前端代码打包成静态资源，放到 Nginx 上，后台接口用 Docker 跑起来。
-
上线之后，又发现了一些小 bug，赶紧修复。然后就是各种测试，各种调整，折腾了好几天，才算稳定下来。
总结
这回做“M决斗场官网”，虽然很累，但是也学到了很多东西。尤其是直播模块，让我对前端工程化有了更深的理解。以后再遇到类似的项目，应该能更快上手了。
这个官网还有很多不足之处，比如 UI 设计不够精美，性能优化还可以更弹幕互动体验也需要提升。以后有机会，再慢慢完善。
这回实践记录就分享到这里了，希望对大家有所帮助。如果有什么问题，欢迎在评论区留言，咱们一起交流学习。
