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越多,对代码的敏感度就会变高,对自己也会更加严格。

 

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

上一篇:blazor 中没有 blazor WebAssembly App 模板


下一篇:opencv —— approxPolyDP 生成逼近曲线