2014年10月20日 星期一

『Node.js』連接 MySQL 並實現 CRUD 操作 - 建立 (Create)

延續上一篇的連接 mysql  實現 crud 的操作,本篇將介紹新增資料的操作。之後的兩篇文,將會介紹更新、刪除的操作。首先我們在上一篇已經有將資料列出來,在此做一些畫面的調整,使用 bootstrap 的前端框架套件去使用。

本章節主要使用的套件有:

> express web framework
> mysql
> jade

先看一下首頁的佈局,在表格的上面有一個新增使用者的按鈕,預備進到新增的頁面去建立資料,其下方一點的表格,則是列出使用者的列表,預定先寫好每一筆資料的功能,包含更新、刪除,而這兩個功能將在後續的兩章節分別實作



建立資料庫連線的方式,也務必要建立如下:

var mysql = require('mysql');
var pool = mysql.createPool({
    host : 'localhost',
    user : 'nodejs',
    password : 'nodejs',
    database : 'demo_nodejs'
});

我們在本篇只專注於『新增使用者』這個按鈕,而這點選之後會引導到新增的頁面。因此在 app.js 的部分加入:

app.get('/create', function(req, res){
    res.render('create', {
        title: '建立新的使用者'
    });
});
app.post('/create', function(req, res){
    pool.getConnection(function(err, connection){
        connection.query('insert into users set ?', {
            id: req.body.user.id,
            name: req.body.user.name,
            description: req.body.user.description
        }, function(err, fields){
            if (err)
                throw err;
        });

        //新增完成後,查詢目前所有使用者
        connection.query('select * from users', function(err, rows, field){
            if (err)
                throw err;

            //將資料傳送到首頁的使用者列表
            res.render('user', {
                title: '使用者列表',
                user: rows
            });
        });
        connection.release();
    });
});

在這邊建立兩個 get, post 的方法,我們預計點選按鈕的時候網址指定為 /create ,因此在 『新增使用者』的這個按鈕語法為:

a(href='/create', class='btn btn-primary') 新增使用者

而 app.post 方法的那部分則需要在表單送出的時候 直接將表單提交出去,做 insert 的動作,insert 的參數在第一個參數位置就寫問號,第二參數則使用json 格式的方式做 key/value 的資料,也就是這部分,主要表單傳送出來的資料,用  req.body.user.[欄位],如下:

connection.query('insert into users set ?', {
            id: req.body.user.id,
            name: req.body.user.name,
            description: req.body.user.description
 }, function(err, fields){
     if (err)
        throw err;
}); 
接著建立 view 的部分,在 /views 建立 create.jade 



顯示的部分



就以新增資料之後,再退回到前面列表的頁面,程式的部分將會在 insert 完成後,再執行:

//新增完成後,查詢目前所有使用者
        connection.query('select * from users', function(err, rows, field){
            if (err)
                throw err;

            //將資料傳送到首頁的使用者列表
            res.render('user', {
                title: '使用者列表',
                user: rows
            });
        }); 

這樣將會引導使用者到前頁顯示使用者列表,結果如下,紅色框則是新增的資料


沒有留言:

張貼留言