初識NodeJS服務端開發（Express+MySQL），nodejsmysql

初識NodeJS服務端開發（Express+MySQL），nodejsmysql

NodeJS對前端來說無疑具有裡程碑意義，在其越來越流行的今天，掌握NodeJS已經不再是加分項，而是前端攻城師們必須要掌握的技能。本文將與同志們一起完成一個基於Express+MySQL的入門級服務端應用，即可以對資料庫中的一張表進行簡單的CRUD操作。但本人還是鬥膽認為，通過這個應用，可以讓沒怎麼接觸後端開發的同志對使用Node進行後端開發有一個大致瞭解。

Express工程環境準備

1. 安裝express，和express項目種子產生器（什嗎？你問第1步為什麼不是安裝NodeJS，我也只能呵呵..）

安裝express

npm install express -g

安裝express

npm install express-generator -g

1. 建立工程。進入工程目錄，運行命令

   express projectName

expresst項目種子產生器會幫我們產生express相應的工程結構，如下

• /bin: 用於應用啟動
• /public: 靜態資源目錄
• /routes：可以認為是controller（控制器）目錄
• /views: jade模板目錄，可以認為是view(視圖)目錄
• app.js 程式main檔案

1. 進入工程，安裝依賴，然後啟動應用

在工程根目錄，使用npm install安裝依賴，使用npm start啟動應用。完成後，你在命令列工具裡會看出如下介面，在瀏覽器中訪問會得到我們應用的預設頁面

 

MySQL環境準備

1. 當然，首先你要準備好MySQL環境。可以參看http://supportopensource.iteye.com/blog/1415527進行安裝，同時也建議安裝一個資料庫管理工具，如navicat for mysql,方便操作

2. 建立表

MySQL安裝好了後，進入到資料庫，建立要用到的表(如user), 結構如下

1. 安裝Node的MySQL驅動（請允許裝X一下…）

在package.json的dependencies中新增, “mysql” : “latest”， 並執行npm install安裝依賴

編寫相關代碼，整合Express+MySQL

1. 首先，我們先建幾個目錄，簡單分下層（看出我還是很用心木有？）

在工程根目錄新增三個目錄：

util – 工具方法

conf – 配置

dao – 與資料庫互動

完成後的工程結構

2.在conf目錄中，編寫mySQL資料庫連接配置

// conf/db.js// MySQL資料庫聯結配置module.exports = {    mysql: {        host: '127.0.0.1',         user: 'root',        password: '',        database:'test', // 前面建的user表位於這個資料庫中        port: 3306    }};

1. 編寫CRUD SQL語句

   // dao/userSqlMapping.js
   // CRUD SQL語句
   var user = {
   insert:'INSERT INTO user(id, name, age) VALUES(0,?,?)',
   update:'update user set name=?, age=? where id=?',
   delete: 'delete from user where id=?',
   queryById: 'select * from user where id=?',
   queryAll: 'select * from user'
   };

   module.exports = user;

2. 增加路由及實現資料庫的CRUD

以C（新增）的具體實現舉例，在/routes/users.js 中增加一個路由

// 增加使用者router.get('/addUser', function(req, res, next) {    userDao.add(req, res, next);});

在userDao中實現add方法

// dao/userDao.js// 實現與MySQL互動var mysql = require('mysql');var $conf = require('../conf/conf');var $util = require('../util/util');var $sql = require('./userSqlMapping');// 使用串連池，提升效能var pool  = mysql.createPool($util.extend({}, $conf.mysql));// 向前台返回JSON方法的簡單封裝var jsonWrite = function (res, ret) {    if(typeof ret === 'undefined') {        res.json({            code:'1',            msg: '操作失敗'        });    } else {        res.json(ret);    }};module.exports = {    add: function (req, res, next) {        pool.getConnection(function(err, connection) {            // 擷取前台頁面傳過來的參數            var param = req.query || req.params;            // 建立串連，向表中插入值            // 'INSERT INTO user(id, name, age) VALUES(0,?,?)',            connection.query($sql.insert, [param.name, param.age], function(err, result) {                if(result) {                    result = {                        code: 200,                        msg:'增加成功'                    };                    }                // 以json形式，把操作結果返回給前台頁面                jsonWrite(res, result);                // 釋放串連                 connection.release();            });        });    }};

1. 測試整合是否成功

因為前面實現的是一個get請求的add方法， 所以可以在瀏覽器中直接使用地址訪問，進入路由, http://localhost:3000/users/addUser?name=xyz&age=18.如果你得到如下JSON返回或看到資料表中有上面的資料插入，表示整合成功了

1. 同理，實現CRUD其它的方法，最終完整的的routes/user.js為：

   var express = require('express');
   var router = express.Router();

   var userDao = require('../dao/userDao');

   /* GET users listing. */
   router.get('/', function(req, res, next) {
   res.send('respond with a resource');
   });

   // 增加使用者
   //TODO 同時支援get,post
   router.get('/addUser', function(req, res, next) {
   userDao.add(req, res, next);
   });

   router.get('/queryAll', function(req, res, next) {
   userDao.queryAll(req, res, next);
   });

   router.get('/query', function(req, res, next) {
   userDao.queryById(req, res, next);
   });

   router.get('/deleteUser', function(req, res, next) {
   userDao.delete(req, res, next);
   });

   router.post('/updateUser', function(req, res, next) {
   userDao.update(req, res, next);
   });

   module.exports = router;

完整的userDao.js為

// dao/userDao.js// 實現與MySQL互動var mysql = require('mysql');var $conf = require('../conf/db');var $util = require('../util/util');var $sql = require('./userSqlMapping');// 使用串連池，提升效能var pool  = mysql.createPool($util.extend({}, $conf.mysql));// 向前台返回JSON方法的簡單封裝var jsonWrite = function (res, ret) {    if(typeof ret === 'undefined') {        res.json({            code:'1',            msg: '操作失敗'        });    } else {        res.json(ret);    }};module.exports = {    add: function (req, res, next) {        pool.getConnection(function(err, connection) {            // 擷取前台頁面傳過來的參數            var param = req.query || req.params;            // 建立串連，向表中插入值            // 'INSERT INTO user(id, name, age) VALUES(0,?,?)',            connection.query($sql.insert, [param.name, param.age], function(err, result) {                if(result) {                    result = {                        code: 200,                        msg:'增加成功'                    };                    }                // 以json形式，把操作結果返回給前台頁面                jsonWrite(res, result);                // 釋放串連                 connection.release();            });        });    },    delete: function (req, res, next) {        // delete by Id        pool.getConnection(function(err, connection) {            var id = +req.query.id;            connection.query($sql.delete, id, function(err, result) {                if(result.affectedRows > 0) {                    result = {                        code: 200,                        msg:'刪除成功'                    };                } else {                    result = void 0;                }                jsonWrite(res, result);                connection.release();            });        });    },    update: function (req, res, next) {        // update by id        // 為了簡單，要求同時傳name和age兩個參數        var param = req.body;        if(param.name == null || param.age == null || param.id == null) {            jsonWrite(res, undefined);            return;        }        pool.getConnection(function(err, connection) {            connection.query($sql.update, [param.name, param.age, +param.id], function(err, result) {                // 使用頁面進行跳轉提示                if(result.affectedRows > 0) {                    res.render('suc', {                        result: result                    }); // 第二個參數可以直接在jade中使用                } else {                    res.render('fail',  {                        result: result                    });                }                connection.release();            });        });    },    queryById: function (req, res, next) {        var id = +req.query.id; // 為了拼湊正確的sql語句，這裡要轉下整數        pool.getConnection(function(err, connection) {            connection.query($sql.queryById, id, function(err, result) {                jsonWrite(res, result);                connection.release();            });        });    },    queryAll: function (req, res, next) {        pool.getConnection(function(err, connection) {            connection.query($sql.queryAll, function(err, result) {                jsonWrite(res, result);                connection.release();            });        });    }};

除了update測試外，其它get請求都可以直接在瀏覽器中使用地址+參數完成測試。為了類比post請求，同時簡單使用下jade模板（Express支援的一種模板引擎），

我們在/views目錄建立三個jade檔案

updateUser.jadeextends layoutblock content    h1 更新使用者資料    form(method='post', action='/p/users/updateUser')        div.form-row            label                span ID:                input(type='text',name='id')        div.form-row            label                span name:                input(type='text',name='name')        div.form-row            label                span age:                input(type='text',name='age')        div.form-row            input(type='submit')

suc.jade

block content  h1 操作成功！  pre #{JSON.stringify(result)}

fail.jade

block content  h1 操作失敗！  pre #{JSON.stringify(result)}

以下是更新測試結果

 

 

最後，如果你使用的是idea或webStrom這樣的IDE，你就不需要安裝express和express項目種子產生器了。這兩個IDE是可以直接建立NodeJS項目

小結：

一個Express的helloWorld就差不多完成了, 可以通過這個連結下載此例子原始碼http://pan.baidu.com/s/1jGvd4Bc。更多Express的功能（如日誌，自動化測試等），等待大家去解鎖，願玩得愉快！