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

無心之柳.NET發表於2016-12-08
ReactNode.jsMongoDB

這幾篇都是我原來首發在 segmentfault 上的地址：https://segmentfault.com/a/1190000005040834 突然想起來我這個部落格冷落了好多年了，也該更新一下，呵呵

前篇

使用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開發一個角色投票應用的學習過程（三）

相關文章