使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵呵
前篇
使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(一)
使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(二)
原文第十三步,Express API路由
第一个路由是用来创建角色的
app.post('/api/characters',(req,res,next) => {
let gender = req.body.gender;
let characterName = req.body.name;
let characterIdLookupUrl = 'https://api.eveonline.com/eve/CharacterId.xml.aspx?names=' + characterName;
const parser = new xml2js.Parser();
async.waterfall([
function(callback) {
request.get(characterIdLookupUrl,(err,request,xml) => {
if(err) return next(err);
parser.parseString(xml,(err,parsedXml) => {
try {
let characterId = parsedXml.eveapi.result[0].rowset[0].row[0].$.characterID;
app.models.character.findOne({ characterId: characterId},(err,model) => {
if(err) return next(err);
if(model) {
return res.status(400).send({ message: model.name + ' is alread in the database'});
}
callback(err,characterId);
});
} catch(e) {
return res.status(400).send({ message: ' xml Parse Error'});
}
});
});
},
function(characterId) {
let characterInfoUrl = 'https://api.eveonline.com/eve/CharacterInfo.xml.aspx?characterID=' + characterId;
console.log(characterInfoUrl);
request.get({ url: characterInfoUrl },(err,request,xml) => {
if(err) return next(err);
parser.parseString(xml, (err,parsedXml) => {
if (err) return res.send(err);
try{
let name = parsedXml.eveapi.result[0].characterName[0];
let race = parsedXml.eveapi.result[0].race[0];
let bloodline = parsedXml.eveapi.result[0].bloodline[0];
app.models.character.create({
characterId: characterId,
name: name,
race: race,
bloodline: bloodline,
gender: gender
},(err,model) => {
if(err) return next(err);
res.send({ message: characterName + ' has been added successfully!'});
});
} catch (e) {
res.status(404).send({ message: characterName + ' is not a registered citizen of New Eden',error: e.message });
}
});
});
}
]);
});
是不是看起来和原文的基本一模一样,只不过把var 变成了let 匿名函数变成了ES6的'=>'箭头函数,虽然我用的是warterline而原文中用的是mongoose但是包括方法名基本都一样,所以我感觉waterline是在API上最接近mongoose
顺便说一下,我为什么不喜欢mongodb,仅仅是因为有一次我安装了,只往里面写了几条测试数据,按文本算最多几kb,但第二天重启机器的时候,系统提示我,我的/home分区空间不足了(双系统分区分给linux分小了本来就不大),结果一查mongodb 的data文件 有2G多,我不知道什么原因,可能是配置不对还是别的什么原因,反正,当天我就把它删除了,
完成了这个API我们就可以往数据库里添加东西了,不知道哪些用户名可以用?相当简单,反正我用的全是一名人的名字(英文名),外国人也喜欢抢注名字,嘿嘿嘿
原文第十三步,Home组件
基本保持和原文一样,只是用lodash 替换了 underscore
一开始我看到网上介绍lodash是可以无缝替换underscore,中要修改引用就可以,但是我用的版本是4.11.2已经有很多方法不一样了,还去掉了不少方法(没有去关注underscore是不是也在最新版本中有同样的改动)
原文中:
......
import {first, without, findWhere} from 'underscore';
......
var loser = first(without(this.state.characters, findWhere(this.state.characters, { characterId: winner }))).characterId;
......
修改为:
......
import {first, filter} from 'lodash';
......
let loser = first(filter(this.state.characters,item => item.characterId != winner )).characterId;
findWhere 在最新版本的lodash中已经不存正,我用了filter来实现相同功能。
第十四步:Express API 路由(2/2)
GET /api/characters
原文的实现方法
/**
* GET /api/characters
* Returns 2 random characters of the same gender that have not been voted yet.
*/
app.get('/api/characters', function(req, res, next) {
var choices = ['Female', 'Male'];
var randomGender = _.sample(choices);
Character.find({ random: { $near: [Math.random(), 0] } })
.where('voted', false)
.where('gender', randomGender)
.limit(2)
.exec(function(err, characters) {
if (err) return next(err);
if (characters.length === 2) {
return res.send(characters);
}
var oppositeGender = _.first(_.without(choices, randomGender));
Character
.find({ random: { $near: [Math.random(), 0] } })
.where('voted', false)
.where('gender', oppositeGender)
.limit(2)
.exec(function(err, characters) {
if (err) return next(err);
if (characters.length === 2) {
return res.send(characters);
}
Character.update({}, { $set: { voted: false } }, { multi: true }, function(err) {
if (err) return next(err);
res.send([]);
});
});
});
});
可以看到原文中用{ random: { $near: [Math.random(), 0] } }做为查询条件从而在数据库里取出两条随机的记录返回给页面进行PK,前文说过random的类型在mysql没有类似的,所以我把这个字段删除了。本来mysql,可以用order by rand() 之类的方法但是,waterline的sort(order by rand())不被支持,所以我是把所有符合条件的记录取出来,能过lodash的sampleSize方法从所有记录中获取两天随机记录。
app.get('/api/characters', (req,res,next) => {
let choice = ['Female', 'Male'];
let randomGender = _.sample(choice);
//原文中是通过nearby字段来实现随机取值,waterline没有实现mysql order by rand()返回随机记录,所以返回所有结果,用lodash来处理
app.models.character.find()
.where({'voted': false})
.exec((err,characters) => {
if(err) return next(err);
//用lodash来取两个随机值
let randomCharacters = _.sampleSize(_.filter(characters,{'gender': randomGender}),2);
if(randomCharacters.length === 2){
//console.log(randomCharacters);
return res.send(randomCharacters);
}
//换个性别再试试
let oppsiteGender = _.first(_.without(choice, randomGender));
let oppsiteCharacters = _.sampleSize(_.filter(characters,{'gender': oppsiteGender}),2);
if(oppsiteCharacters === 2) {
return res.send(oppsiteCharacters);
}
//没有符合条件的character,就更新voted字段,开始新一轮PK
app.models.character.update({},{'voted': false}).exec((err,characters) => {
if(err) return next(err);
return res.send([]);
});
});
});
在数据量大的情况下,这个的方法性能上肯定会有问题,好在我们只是学习过程,数据量也不大。将就用一下,能实现相同的功能就可以了。
GET /api/characters/search
这个API之前还有两个API,和原文基本一样,所做的修改只是用了ES6的语法,就不浪费篇幅了,可以去我的github看
这一个也只是一点mongoose和waterline的一点点小区别
原文中mongoose的模糊查找是用正则来做的,mysql好像也可以,但是warterline中没有找到相关方法(它的文档太简陋了)
所以原文中
app.get('/api/characters/search', function(req, res, next) {
var characterName = new RegExp(req.query.name, 'i');
Character.findOne({ name: characterName }, function(err, character) {
......
我改成了
app.get('/api/characters/search', (req,res,next) => {
app.models.character.findOne({name:{'contains':req.query.name}}, (err,character) => {
.....
通过contains来查找,其实就是like %sometext%的方法来实现
下面还有两个方法修改的地方也大同小异,就不仔细讲了,看代码吧
GET /api/stats
这个是原文最后一个路由了,
原文中用了一串的函数来获取各种统计信息,原作者也讲了可以优化,哪我们就把它优化一下吧
app.get('/api/stats', (req,res,next) => {
let asyncTask = [];
let countColumn = [
{},
{race: 'Amarr'},
{race: 'Caldari'},
{race: 'Gallente'},
{race: 'Minmatar'},
{gender: 'Male'},
{gender: 'Female'}
];
countColumn.forEach(column => {
asyncTask.push( callback => {
app.models.character.count(column,(err,count) => {
callback(err,count);
});
})
});
asyncTask.push(callback =>{
app.models.character.find()
.sum('wins')
.then(results => {
callback(null,results[0].wins);
});
} );
asyncTask.push(callback => {
app.models.character.find()
.sort('wins desc')
.limit(100)
.select('race')
.exec((err,characters) => {
if(err) return next(err);
let raceCount = _.countBy(characters,character => character.race);
console.log(raceCount);
let max = _.max(_.values(raceCount));
console.log(max);
let inverted = _.invert(raceCount);
let topRace = inverted[max];
let topCount = raceCount[topRace];
callback(err,{race: topRace, count: topCount});
});
});
asyncTask.push(callback => {
app.models.character.find()
.sort('wins desc')
.limit(100)
.select('bloodline')
.exec((err,characters) => {
if(err) return next(err);
let bloodlineCount = _.countBy(characters,character => character.bloodline);
let max = _.max(_.values(bloodlineCount));
let inverted = _.invert(bloodlineCount);
let topBloodline = inverted[max];
let topCount = bloodlineCount[topBloodline];
callback(err,{bloodline: topBloodline, count: topCount});
});
});
async.parallel(asyncTask,(err,results) => {
if(err) return next(err);
res.send({
totalCount: results[0],
amarrCount: results[1],
caldariCount: results[2],
gallenteCount: results[3],
minmatarCount: results[4],
maleCount: results[5],
femaleCount: results[6],
totalVotes: results[7],
leadingRace: results[8],
leadingBloodline:results[9]
});
})
});
我把要统计数据的字段放入一个数组countColumn通过forEach把push到asyncTask,最后两个统计方法不一样的函数,单独push,最后用async.parallel方法执行并获得结果。
underscore的max方法可以从{a:1,b:6,d:2,e:3}返回最大值,但是lodash新版中的不行,只能通过_.max(_.values(bloodlineCount))这样的方式返回最大值。
使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)的更多相关文章
- Node+Express+MongoDB + Socket.io搭建实时聊天应用
Node+Express+MongoDB + Socket.io搭建实时聊天应用 前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战 ...
- Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(二)--node解析与环境搭建
前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战.写教程一方面在自己写的过程中需要考虑更多的东西,另一方面希望能对node入门者有 ...
- Node+Express+MongoDB+Socket.io搭建实时聊天应用实战教程(一)--MongoDB入门
前言 本文并不是网上流传的多少天学会MongoDB那种全面的教程,而意在总结这几天使用MongoDB的心得,给出一个完整的Node+Express+MongoDB+Socket.io搭建实时聊天应用实 ...
- 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
- Node.js 和Socket.IO 实现chat WEBIM
socket官方: http://socket.io/ 需求:实现WEB IM功能,数据从服务器PUSH 不是PULL websocket是基于HTML5的新特性,不兼容IE6,7,8 .. ...
- 使用Node.js的socket.io模块开发实时web程序
首发:个人博客,更新&纠错&回复 今天的思维漫游如下:从.net的windows程序开发,摸到nodejs的桌面程序开发,又熟悉了一下nodejs,对“异步”的理解有了上上周对操作系统 ...
- node.js和socket.io纯js实现的即时通讯实例分享
在这个例子中,其实node.js并没有真正起到服务器的作用,因为我们这里可以直接运行client.html文件,而不用输入url请求,当 然,要想输入url请求页面内容还需要加入请求静态文件的代码.这 ...
- node.js和socket.io实现im
im——Instant Messaging 即时通讯 基本技术原理 (1)通过IM服务器登陆或注销 (2)用户A通过列表找到B,用户B获得消息并与之交谈 (3)通过IM服务器指引建立与B单独的通讯通道 ...
- [Node.js] 基于Socket.IO 的私聊
原文地址:http://www.moye.me/2015/01/02/node_socket-io/ 引子 最近听到这么一个问题:Socket.IO 怎么实现私聊?换个提法:怎么定位到人(端),或者说 ...
随机推荐
- java开发中的一些工具软件
1. XJad, 反编译工具,类似于.Net中的Refractor.可以反编译单个jar文件或一个文件夹下的class文件,效果还不错. 2. dirtyJOE, class文件直接修改工具.有时想修 ...
- vim/vi 复制,删除,粘贴,查找,替换
1.删除行 光标所在单行,dd 光标所在行以下的5行,5dd 全部删除:dG 2.复制 复制光标所在单行:yy 复制光标以下4行:4yy 3.粘贴 粘贴vi里复制的内容:p 粘贴外部复制过来的内容: ...
- java中两个值互换
两个值互换有以下三种方式: 使用临时变量(此种方法便于理解) x = 10; y = 20; //begin int temp = x; x = y; y = temp; //end; //此时x = ...
- java线程详解(三)
java线程间通信 首先看一段代码 class Res { String name; String sex; } class Input implements Runnable { private R ...
- NX 8.5 License Server Firewall Setting
Reference: http://eng-tips.com/viewthread.cfm?qid=284511 The FLEXNet Server(lmgrd) listens to 28000 ...
- day4----json的简单实用
json官方说明参见:http://json.org/ Python操作json的标准api库参考:http://docs.python.org/library/json.html 重要函数 编码:把 ...
- bootstrap中实现外层DIV自适应,内层DIV宽度固定且居中的布局
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="css/bo ...
- 个性二维码开源专题<后背景>
//设置图片资源 private Image img1; public override void SetParam() { base.SetParam(); //读取图片 string _image ...
- 转载:开发者眼中最好的 22 款 GUI 测试工具
对于很多同学来说gui程序的测试是一个难点,所以我从网上转载了一篇关于gui测试的一篇文章,里面罗列的很多工具,大家可以尝试一下学习学习. 英文原文:22 best GUI testing tools ...
- [游戏模版9] Win32 半透明 图像处理
>_<:Previous part we talk about how to map a transparent picture, and this time we will solve ...