使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)

前端之家收集整理的这篇文章主要介绍了使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前篇

使用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,parsedXml) => {
          try {
            let characterId = parsedXml.eveapi.result[0].rowset[0].row[0].$.characterID;

            app.models.character.findOne({ characterId: characterId},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 },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
            },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,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() 之类的方法但是,waterlinesort(order by rand())不被支持,所以我是把所有符合条件的记录取出来,能过lodashsampleSize方法从所有记录中获取两天随机记录。

app.get('/api/characters',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

这一个也只是一点mongoosewaterline的一点点小区别
原文中mongoose的模糊查找是用正则来做的,MysqL好像也可以,但是warterline中没有找到相关方法(它的文档太简陋了)
所以原文中

app.get('/api/characters/search',next) {
  var characterName = new RegExp(req.query.name,'i');

  Character.findOne({ name: characterName },function(err,character) {
    ......

我改成了

app.get('/api/characters/search',next) => {
  app.models.character.findOne({name:{'contains':req.query.name}},character) => {
    .....

通过contains来查找,其实就是like %sometext%方法来实现
下面还有两个方法修改的地方也大同小异,就不仔细讲了,看代码

GET /api/stats

这个是原文最后一个路由了,
原文中用了一串的函数获取各种统计信息,原作者也讲了可以优化,哪我们就把它优化一下吧

app.get('/api/stats',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,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,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相关文章