基於express框架下Node.js+MySQL連接池的數據庫增添操作

題記:

這幾天一直在學習Node以及關係型數據庫的知識,剛剛接觸到了express框架,就想利用express框架,實現一個通過ajax操作來向數據庫內增添數據的功能。

正文:

話不多說,現在我們就來一起看看吧!我們需要了解哪些知識,做哪些基本工作!

那麼,我們先從第一步做起,那就是寫前端的代碼:

註釋如下:

  • 首先,我們要了解我們的基本技術點。前端:html+jquery下的AJAX方法
  • 其次,我們要了解後端的知識,我是用的基於express框架下的node
  • 然後,對於靜態的html,是無法發送請求的,我使用的是nginx,非常輕量級的服務器
  • 最後,我們使用MySQL這個典型的關係型數據庫+可視化工具navicat
    那麼,我們先從第一步做起,那就是寫前端的代碼:

    註釋如下:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>接收參數</title>  
</head>  
<body>  
    <!-- 需要輸入的text -->  
    username:<input type="input" id="username"> <br>   
    firstname:<input type="input" id="firstname">  
    <button type="button" id="btn">點擊提交</button>  
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>  
    <script type="text/javascript">  
        $(function() {  
            $('#btn').click(function() {  
                var username = $('#username').val(); // 獲取username的值  
                var firstname = $('#firstname').val(); // 獲取firstname的值  
                $.ajax({  
                    url: 'http://localhost:1337/login', // url地址要跟node中的地址對應  
                    type: 'POST', // GET或者POST ,這裏選用POST  
                    dataType: 'json',  
                    data: {  
                        username: username,  
                        firstname: firstname  
                    },  
                    success:function(data) {  
                        console.log(data);  
                        switch (data.code){  
                            case 1:  
                                alert('插入數據成功');  
                                break;  
                            case 2:  
                                alert('插入數據失敗');  
                                break;  
                            case 0:  
                                alert('請求失敗,請檢查數據格式!');  
                        }  
                    }  
                })  

            });  
        });  
    </script>  
</body>  
</html> 

上面的代碼中,包含了html已經如何獲取輸入框內的值傳向後端

接下來,在開始展示node代碼之前,我想先向大家展示一下數據庫的設計

因爲關係型數據庫與NOSQL不太一樣,NOSQL是由文檔(關係型中的row)組成,再有多個文檔組合成集合(關係型中的table,具有很高的靈活性,每個文檔中的key是可以不一樣的。而關係型則必須提前設計好字段,我們纔可以向表中插入一行數據下面簡單展示一下數據庫。(本人是學前端的,所以可能看起來很不成熟,希望大家諒解)這裏寫圖片描述

* 下面,我們來看看基於express的node是如何寫的(server端的JavaScript):*

/** 
 *@fileName: 114.1.2.js 
 *@author: 吳曉陽 
 *@time: 2017/12/15 
 *@description: 利用連接池進行多次提交 
 */  
var express = require('express'); // express模塊 可以使用 npm install -g express  
var qs = require("querystring"); // querystring模塊 可以使用 npm install -g express 用於處理傳來的參數串  
var mysql = require('mysql'); // mysql模塊 同樣可以使用 npm install -g mysql 來全局下載  
var app = express();  
var pool = mysql.createPool({  
    host     : 'localhost',  // 主機名  
    port     : 3306, // 數據庫連接的端口號 默認是3306  
    database : 'test', // 需要查詢的數據庫  
    user     : 'root', // 用戶名  
    password : '' // 密碼,我的密碼是空。所以是空字符串  
});  
app.post('/login',function (req,res) { // 注意 這裏的login與最後的app.listen(1337,'localhost') 組成 localhost:1337/login 與 前端的ajax的url相對應,這裏我也是自己搞了好久,纔對應上,否則會報404  
    var body = "",data;  

    req.on('data', function(chunk) {  
        body += chunk;  
        console.log(body);  
    });  
    req.on('end', function() {  
        // 解析參數  
        data=qs.parse(body); // 這裏值得注意!querystring中的pares方法可以吧data解析成對象,供下文使用  
        // 設置響應頭部信息及編碼  
        res.writeHead(200, {  
            'Content-Type': 'text/html;charset=utf8',  
            "Access-Control-Allow-Origin":"*" //*表示允許的域名地址,本地則爲'http://localhost' 不添加此參數 會被認爲是跨域  
        });  
        if(data.username) { // 輸出提交的數據  
            // 插入數據  
            pool.getConnection(function (err,connection) { // 使用連接池  
                if(err){  
                    console.log('與MySQL數據庫建立連接失敗!');  
                    console.log('錯誤信息爲:' + err);  
                }  
                else{  
                    console.log('與MsSQL數據庫建立連接成功!');  
                    connection.query('INSERT INTO users SET ?',{  
                        username: data.username, // data.username 則是 由qs解析過的  
                        firstname: data.firstname // data.firstname 則是 由qs解析過的  
                    },function (err,result) {  
                        if(err){  
                            console.log('插入數據失敗');  
                            res.end('{code:2}'); // 同時要注意返回的數據要是json對象,以下同  
                            connection.release(); // 釋放連接池的連接,因爲連接池默認最大連接數是10,如果點擊數超過10 則不會與客戶端連接,客戶端的請求也會因爲長時間無反應報錯,下面會粘出報錯的圖  
                        }  
                        else{  
                            console.log('插入數據成功');  
                            res.end('{code:1}');  
                            connection.release(); // 釋放連接池的連接  
                        }  
                    })  
                }  
            });  
        } else {   
            res.end('{code:0}'); // 傳入的值爲空時,不執行插入操作  
        }  
    })  
});  
app.listen(1337,'localhost'); 

如果不釋放連接池的連接,我們點擊15次會發現:
這裏寫圖片描述
這裏寫圖片描述
第十一個請求,會無反應。

釋放連接池的連接後,示例如下:
這裏寫圖片描述

我們會發現,十多次點擊都是有反應的,這就代表,我們每次完成一次插入操作後,連接又重新回到了連接池中,供下一次請求使用!最後,數據庫中添入數據如下:
這裏寫圖片描述

結尾:

最後呢,希望大家可以自己嘗試一下,有什麼寫的不對的地方也請不吝指教!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章