vue+Nodejs+mongodb——王者荣耀手机端官网个人总结一

最近花时间写了王者荣耀手机端官网，这个项目主要包括官网主页及部分内容展示和后台数据管理，使用vue前端框架来写前端的内容，服务端采用nodejs/express框架，数据库使用mongodb，这也是我第一次使用mongodb这种分布式文件存储数据库。下面我将简单总结一下在这次项目吸取的经验。

数据库

之前我写过的demo中使用过几次mysql，作为前端开发，个人感觉mysql的优点在于方便，可以手动创建表，修改数据，可视化体验很棒。这次使用mongodb，主要想尝试一下新的内容，其次，听说mogodb和nodejs关系很紧密，所以我就开始动手尝试了。

遇到第一个坑就是下载！从mongodb官网上下载速度极其缓慢，而且如果网不好非常容易自动中断，网上的加速网站下载也是几十K每秒...看到这篇随笔的朋友，如有需要可以留言，无偿分享。

nodejs中，需要使用插件mongoose来引用。因为要先存储王者荣耀官网上的数据，所以先写每一块的数据模型，写好模型后，mongodb会自动创建对应模型的文档。后面只需要按照定义的模型录入数据，值得一提的是，它的语法跟js语法很像，而且它的各种方法语句相对于mysql十分简洁。个人感觉整个使用过程十分舒服，特别是在写完基本的几个模型后，后面添加的数据模型如出一辙。

服务端

在写完基本的数据模型后，就开始写对应的数据接口了，与此同时在前端使用element-ui框架搭建数据管理后台，连接服务器接口进行调试，前端录入数据并成功渲染到前端界面后，再接着写其他的数据接口。

王者荣耀官网上的数据还是比较多的，比方说一个英雄模型，对应的内容就有技能，推荐装备，使用技巧，背景图等等，在构建模型时就需要作出比较准确的判断，数据结构应该怎样排布，因为后面再加字段进去不是特别方便。

在差不多写完大部分数据接口后，会发现此时代码冗余度比较高了，因为所有的接口都是增删改查，这么多模型，如果直接一个一个写会很麻烦，解决方案就是写一个中间件，加入动态路由参数，这个中间件的作用是通过获取动态路由参数分配对应的接口。

同理，在写登录权限验证的时候，也可以写一个权限验证中间件，在服务端收到请求后拦截，判断是否有token和验证token，然后再交给下一个中间件处理。

因为所有的数据都是在王者荣耀官网，为了方便录入数据，也可以在官网爬取数据，再写接口直接录入数据库中，这个操作很考验对dom结构转化能力。

跨域解决方案：前端在开发时可采用webpack搭建的虚拟服务器实现反向代理，生产环境则需在服务端配置CORS 或者 nginx。

结语：后端部分总结差不多了，一些细节我没有贴出来因为个人觉得bug还是你们自己体会比较好，解决的bug越多，对代码的敏感度就会变高，对自己也会更加严格。