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

原文地址:https://www.cnblogs.com/feng-fengfeng/p/12347988.html

时间: 2024-09-30 05:42:12

vue+Nodejs+mongodb——王者荣耀手机端官网个人总结一的相关文章

今天产品提了一个需求,要求用户上传图片进行剪切,上网搜了一下 cropperjs 挺不错,官网api不怎么看得懂,记录一下使用方法

我使用的是vue,移动端的项目. 官网地址:cropperjs GitHub地址:https://github.com/fengyuanchen/cropperjs/blob/master/README.md 先看效果图,不然没有吸引力啊!!哈哈 这里只记录使用方法,至于怎么实现和要修改一些参数,大家前往官网api了解. 首先我们先安装 npm install cropperjs exif-js 新建一个文件 存放cropperjs 处理图片的方法(我放到了 static 文件下的 clippe

《王者荣耀》手游产品分析报告:崛起的王者荣耀,胜负就是这么简单!

在保证了游戏本身质量过关的前提之下,只要你能够深刻的洞察到手游用户最根本的特点,同时结合自身无论是技术还是平台的优势,你就能够生产出一款受欢迎的游戏. 一.文档概览和分析目的 体验机型:小米MIX 系统版本:6.0.1MXB48T App版本:1.17.1.23 体验时间:2017.3.25 分析目的: 了解<王者荣耀>的产品战略.产品功能和产品表现等产品特性: 了解手游市场内的竞争态势和发展方向: 分析<王者荣耀>成功的原因及其对应的策略. 二.产品简介 产品名称:王者荣耀 产品

腾讯对战手游《王者荣耀》日用户数突破450万

11月13日,腾讯最新手游大作.首款5V5英雄公平对战手游<王者荣耀>于2015年腾讯游戏嘉年华(后简称“TGC2015”)惊艳亮相.此前不久,<王者荣耀>开启了不限号测试,iOS与安卓平台都已上线,值得一提的是,不限号当天便牢牢占据iOS免费排行榜第一的位置,畅销榜也很快晋升前五,可见游戏得到了很多玩家的认可. 不限号首日登顶iOS免费榜榜首 日活跃用户数突破450万 <王者荣耀>在10月26日正式登陆APP STORE,还原端游MOBA游戏体验,带来指尖上的多人团战

编写爬虫自动下载王者荣耀官网上好看的壁纸

前言 偶然间发现王者荣耀的官网上发布了这么多好看的壁纸. 地址:http://pvp.qq.com/web201605/wallpaper.shtml 看了一下,每一张都挺喜欢的,而且还有十多页,一张一张去慢慢下载肯定不是作为一个Geeker的正确姿势. 由于最近python用得比较多,所以看到什么好玩的就想爬虫下载下来,所以看到这么多好看图片,我又"熟练"地掏出了python. 分析 这个网站长这样. 首先对腾讯这个网站进行分析. 这个每一个小图对应的div <ul>标签

Python爬取王者荣耀官网,实现一对一下载软件!

效果: 我没有弄文件夹保存,因为皮肤与英雄都是一一对应,这样子更加方便操作. 点击下载皮肤后,会自动从官网下载一个json文件,所以出了新英雄.新皮肤软件会自动更新.高清图: 但是有个别新皮肤官网也没有提供数据,找不到新皮肤下载的选择项时,点击影藏皮肤获取按钮输入英雄名字,再点击隐藏皮肤下载即可. 环境: 系统:Windows 模块:requests. json.os.time.tkinter 编辑器:sublime(获取视频教程) tkinter部分代码 界面还算比较简单的,就那么几个组件.

浅谈canvas绘画王者荣耀--雷达图

背景: 一日晚上下班的我静静的靠在角落上听着歌,这时"滴!滴!"手机上传来一阵qq消息.原来我人在问王者荣耀的雷达图在页面上如何做出来的,有人回答用canvas绘画.那么问题来了,已经好久没有使用canvas绘画了东西. SO,就想自己画一个canvas雷达图,顺便重新回顾一下canvas的知识点. 王者荣耀雷达图的基本构成. 聊天记录当中的雷达图不是特别清楚,所以我这边截图了自己的一个战绩雷达图. 是不是有被我的战绩吓到了,害不害怕! 好了扯远了,让我们回到正题上来. 通过截图上面的

16行python代码 爬取王者荣耀全皮肤

此处感谢CSDN博主yaoyefengchen 小白练手 相信现在很多人都喜欢玩王者荣耀这款手游,里面好看的皮肤令人爱不释手.那么你有没有想过把王者荣耀高清皮肤设置为壁纸,像下面这样 今天就来教大家如何利用python16行代码,实现王者荣耀全部高清皮肤的下载. 具体的操作分为两步: 1. 找到皮肤图片的地址 2. 下载图片 1. 寻找皮肤图片的地址 1. 找到英雄列表 百度"王者荣耀"进入官网 https://pvp.qq.com/.这里以Goole Chrome浏览器为例,在更多工

h5实现手机端等级进度条

h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: var Config = { // 等级大图片url地址 courierRankBigUrl: 'images/grade2-icon.png', // 配送员等级名称 courierRankName: '3级鲜锋官', // 同时可接单数 courierCanPackgeCountDoing:

社交因素是《王者荣耀》成功的最大助推力:3星|《三联生活周刊》2017年33期

本期主题是王者荣耀,有一些相对有深度的分析.一个重要的观点是:<王者荣耀>的流行基于熟人社交. 总体评价3星. 以下是本期一些内容的摘抄: 1:也许有人会问:难道不是有万能的谷歌翻译吗?这就涉及“游客不了解的英国”的一部分:直至三年前,牛津市中心的手机信号还差得要命,在人来人往的大街上打不出电话是常事,更不用说用手机查地图了.两年前升级到4G网络,情况才稍有改善.#245 2:极光大数据在6月份公布的<王者荣耀研究报告>印证了田丰的推论,<王者荣耀>用户机型价格占比最高