使用React、Node.js、MongoDB、Socket.IO開發一個角色投票應用的學習過程（二）

這幾篇都是我原來首發在 segmentfault 上的地址：http://www.javashuo.com/article/p-bwegrihr-z.html 忽然想起來我這個博客冷落了好多年了，也該更新一下，呵呵

前篇

使用React、Node.js、MongoDB、Socket.IO開發一個角色投票應用的學習過程（一）

這篇主要講一下waterline的初始化，原文用的是mongoose

原文第十二步

一會兒就到十二步了，由於原文件中react部分的代碼原本就是用ES6寫的，沒什麼好改的，惟一遇到的坑仍是拼寫

import NavbarActions from '../actions/NavbarActions'';

抄成

import NavbarActions from '../Actions/NavbarActions';

眼睛不尖的小夥伴這兩句的代碼差異能夠也要找很久，我整整一天沒有找出來，

socket.on('onlineUsers', (data) => {
        NavbarActions.updateOnlineUsers(data);
      });

按道理應該會觸發
NavbarStore中的 onUpdateOlineUsers 這個事件的，但是就由於我把actions敲成了Actions,頁面執行沒有任何錯誤提示，可是就是不執行onUpdateOlineUsers這個事件，經過chrome調試發現，我調用的是updateOnlineUsers1,這個玩意兒怎麼來的，我把原文中的代碼複製過來，運行就正常，用本身的怎麼能不行，後來我把原文的代碼另存一個文件經過diff兩個文件的不一樣才發現這個錯誤的，還好在第二行，diff 很快發現了。

吐完槽，仍是開始第十二部分的改動吧，這是開始涉及到數據庫了，原文用mongodb,我用mysql,改動就比較大了。
原文中的models是這樣的

var mongoose = require('mongoose');

var characterSchema = new mongoose.Schema({
  characterId: { type: String, unique: true, index: true },
  name: String,
  race: String,
  gender: String,
  bloodline: String,
  wins: { type: Number, default: 0 },
  losses: { type: Number, default: 0 },
  reports: { type: Number, default: 0 },
  random: { type: [Number], index: '2d' },
  voted: { type: Boolean, default: false }
});

module.exports = mongoose.model('Character', characterSchema);

改用waterline並用es6規範後

import Waterline from 'waterline';

export default Waterline.Collection.extend({
  identity: 'character',
  connection: 'myLocalMysql',
  schema: true,
  attributes: {
    characterId: {type:'string',primaryKey: true, unique: true,index: true},
    name: 'string',
    race: 'string',
    gender: 'string',
    bloodline: 'string',
    wins: {type: 'integer', defaultsTo: 0 },
    losses: {type: 'integer', defaultsTo: 0 },
    reports: {type: 'integer', defaultsTo: 0 },
    voted: {type: 'boolean', defaultsTo: false}
  }
});

注意:我這裏去掉了random這個字段，原文中這個random字段就是用來隨機獲取數據庫中的數據的，但一樣的方法沒法在mysql中用，因此我就去掉了，實現方法後文裏會講

waterline 的一些基礎用法能夠參見個人《使用 Express 和 waterline 建立簡單 Restful API》這篇小文，或自行查看官方文檔

在根目錄下建立 config.js 針對waterline的配置文件，以便鏈接mysql

import mysqlAdapter from 'sails-mysql';

const wlconfig = {
  adapters: {
    'default':mysqlAdapter,
    mysql: mysqlAdapter
  },

  connections: {
    myLocalMysql: {
      adapter : 'mysql',
      host : 'localhost',
      port : 3306,
      user : 'root',
      password : '',
      database : 'test'
    }
  },

  defaults: {
    migrate: 'safe'
  }
};

export default wlconfig;

而後回到server.js中啓用

...
//首先在頭部引入相關庫和配置文件
import Waterline from 'waterline';
...

import Config from './config';
....

let app = express();
//原來上面這一句後面加上這兩行
let orm = new Waterline();
orm.loadCollection(Character);


//在最後面把
/**
  *原來的啓動代碼
  *
  *server.listen(app.get('port'),() => {
  *    console.log('Express server listening on port ' + app.get('port'));
  *  });
  */
//改爲

orm.initialize(Config, (err,models) => {
  if(err) throw err;
  app.models = models.collections;
  //app.set('models',models.collections);
  app.connections = models.connections;

  server.listen(app.get('port'),() => {
    console.log('Express server listening on port ' + app.get('port'));
  });
});

注意：config.js中的 migrate 屬性 一開始的時候能夠把它設爲 'alter' 這樣能夠省了你本身建立數據庫的過程，但寫入數據之後必定要改成'safe' 否則重啓服務會清空清數據的。

後篇

使用React、Node.js、MongoDB、Socket.IO開發一個角色投票應用的學習過程（三）