express實現先後端通訊上傳圖片，存儲數據庫（mysql）傻瓜教程（三）完結篇

　　終於完成了全部本身想要的功能（鼓勵下本身），雖然仍是很簡陋，可是仍是挺有知足感的，哈哈。

　　附上前兩篇的連接：

　　第一篇

　　第二篇

　　進入正題，在第二篇裏面已經完成了鏈接數據庫，而且實現了對數據庫的增刪改查，下面我們來實現上傳的圖片存儲數據庫，而且在第二次訪問時返回這張上傳的圖片。

　　昨天遇到的問題是這樣的，由於進入首頁時候會讀取模板（routes/index.js），代碼以下：

router.get('/', function(req, res) {
    res.render('index', {
        title: '孟星魂',
    });
});

　　因此在此路由下沒法再獲取數據（由於第二次訪問頁面的時候要從數據庫請求圖片的路徑），我們就只能在發送一個請求來獲取數據，因此要使用中間件，路由中間件的用法http://www.expressjs.com.cn/guide/using-middleware.html#middleware.router。

　　這裏的中間件用法以下(也是問題所在，官網上並無寫清楚如何在前端發送請求的格式)

router.get('/:id', function(req, res) {
       
    if (req.params.id === "me") {
        //dosomething
    }

})

 　　前端發送請求是這樣：

$.get('/me', function(data) {
        //do something  
    });

 　　（是否是很簡單，但就是沒有文檔說明，哭哭哭），express獲取參數有三種方法：

Checks route params (req.params), ex: /user/:id
Checks query string params (req.query), ex: ?id=12
Checks urlencoded body params (req.body), ex: id=　　

　　一、例如：127.0.0.1:3000/index，這種狀況下，咱們爲了獲得index，咱們能夠經過使用req.params.index獲得(我們的例子用的就是這種方法)，經過這種方法咱們就能夠很好的處理Node中的路由處理問題，同時利用這點能夠很是方便的實現MVC模式；

　　二、例如：127.0.0.1:3000/index?id=12，這種狀況下，這種方式是獲取客戶端get方式傳遞過來的值，經過使用req.query.id就能夠得到，相似於PHP的get方法；

　　三、例如：127.0.0.1:3000/index，而後post了一個id=2的值，這種方式是獲取客戶端post過來的數據，能夠經過req.body.id獲取，相似於PHP的post方法；

---

　　接下來往get請求中添加回調，主要是訪問數據庫，查詢有沒有圖片的路徑，而後添加到頁面中，代碼以下：

　　

router.get('/:id', function(req, res) {
    //建立一個connection   
    if (req.params.id === "me") {
        var connection = mysql.createConnection({
            host: '127.0.0.1',
            user: 'root',
            password: '111',
            port: '3306',
            database: 'nodesample',
        });
        connection.connect(function(err) {
            if (err) {
                console.log('[query] - :' + err);
                return;
            }
            console.log('[connection connect]  succeed!');
        });
        //執行SQL語句
        var userGetSql = 'SELECT * FROM userinfo';
        //查
        connection.query(userGetSql, function(err, result) {
            if (err) {
                console.log('[SELECT ERROR] - ', err.message);
                return;
            }
            if (result[0] !== undefined) {
                res.send(result[0])
            }
            console.log('--------------------------SELECT----------------------------');
            console.log(result);
            console.log('-----------------------------------------------------------------\n\n');
        });
        //關閉connection
        connection.end(function(err) {
            if (err) {
                return;
            }
            console.log('[connection end] succeed!');
        });
    }

})

　　這裏我們查詢已經創建好的userinfo表，返回的result就是數據庫中的全部數據，命令行裏能夠看到打印，這裏只返回第一條數據，在實際應用中應該還會傳遞一個用戶的id過來，用來匹配數據庫中的數據，在上傳時也會匹配這個id，若是出現相同則會更新掉這條數據，

這些就須要你們本身來動手搞定了，如今保證userinfo表是空的，下次上傳的時候保證會讀到這條數據。

　　圖片上傳的代碼修改以下：

router.post('/', function(req, res) {
    // console.log(res);
    // res.send(req.body);
    var form = new formidable.IncomingForm();
    form.uploadDir = "./public/upload/temp/"; //改變臨時目錄
    form.parse(req, function(error, fields, files) {
        for (var key in files) {
            var file = files[key];
            var fName = (new Date()).getTime();
            switch (file.type) {
                case "image/jpeg":
                    fName = fName + ".jpg";
                    break;
                case "image/png":
                    fName = fName + ".png";
                    break;
                default:
                    fName = fName + ".png";
                    break;
            }
            console.log(file, file.size);
            var uploadDir = "./public/upload/" + fName;
            fs.rename(file.path, uploadDir, function(err) {
                if (err) {
                    res.write(err + "\n");
                    res.end();
                }
                var connection = mysql.createConnection({
                    host: '127.0.0.1',
                    user: 'root',
                    password: '111',
                    port: '3306',
                    database: 'nodesample',
                });

                connection.connect();

                var userAddSql = 'INSERT INTO userinfo(Id,UserName,UserPass) VALUES(0,?,?)';
                var userAddSql_Params = ['path', "/upload/" + fName];
                //增
                connection.query(userAddSql, userAddSql_Params, function(err, result) {
                    if (err) {
                        console.log('[INSERT ERROR] - ', err.message);
                        return;
                    }

                    console.log('--------------------------INSERT----------------------------');
                    //console.log('INSERT ID:',result.insertId);        
                    console.log('INSERT ID:', result);
                    console.log('-----------------------------------------------------------------\n\n');
                });

                connection.end();
                res.write("<img src='/upload/" + fName + "' />");
                res.end();


            })

        }
    });
});

　　就是在上傳圖片後，把圖片的路徑存儲到數據庫中，能夠在第二次訪問時返回。

　　前端的請求能夠這樣寫：

$.get('/me', function(data) {
        if (data !== null || data !== undefined) {
            $("body").append($("<img src=" + data.UserPass + ">"))
        }                   
    });

 

　　直接在頁面中append這張圖片，src從返回的數據中獲取。

　　好啦，如今你們能夠重啓express，上傳一張圖片後，在刷新頁面，即可以看到剛剛上傳的圖片了！！

　　好了教程到此圓滿結束了，本身的第一篇博客，寫做過程當中收穫頗多，也請你們發現問題，多提意見，不勝感激，最後附上整個項目的源代碼，點擊下載,

　　解壓後運行express的啓動代碼就好,運行不成功的先配置好數據庫！！

set DEBUG=myapp & npm start

 　　mac

DEBUG=myapp npm start

　　祝你們好運~

　　歡迎任何形式的轉載，但請務必註明原文詳細連接