Node.js查詢MySQL并返回結果集給客戶端的全過程

更新時間：2022年12月27日 15:40:21 作者：JV_32

nodejs最大的優(yōu)勢也是大家用著最為難以理解的一點,就是它的異步功能,它幾乎所有的io操作都是異步的,這也就導致很多人不理解也用不習慣,下面這篇文章主要給大家介紹了關于Node.js查詢MySQL并返回結果集給客戶端的相關資料,需要的朋友可以參考下

前言

mysql模塊 + Express框架 + 原始Ajax請求，實現(xiàn)Node對MySQL數(shù)據(jù)庫表的查詢，并將結果集返回給客戶端

一、mysql模塊

（1）Node想要操作MySQL數(shù)據(jù)庫，需要安裝第三方mysql模塊：npm i mysql

（2）通過mysql的 createPool 方法連接到MySQL數(shù)據(jù)庫

connDB.js

// 1.導入mysql模塊
const mysql = require('mysql');

// 2.建立連接
const db = mysql.createPool({
    host: '127.0.0.1',  // 數(shù)據(jù)庫 IP 地址
    user: 'root',   // 賬號
    password: '******',   // 密碼
    database: 'my_db_01'    // 指定要操作哪個數(shù)據(jù)庫
})

（3）導出獲取到連接的對象

module.exports = db;

二、操作MySQL數(shù)據(jù)庫

1.配置Express路由模塊

編寫Express路由模塊，處理客戶端的GET請求

routerModule.js

const express = require('express');
const db = require('./connDB');	// 導入獲取到MySQL連接的對象
const router = express.Router();	// express.Router() 創(chuàng)建路由對象

// 查詢數(shù)據(jù)庫 users 表中所有數(shù)據(jù)，并響應給客戶端
function showMsg(req, res) {
    const sqlStr = 'select * from users';	// 查詢SQL語句
    db.query(sqlStr, (err, results) => {
        if (err) return err.message;
        res.send(results);		// 將查詢結果響應給客戶端
    })
}
router.get('/showInfo', showMsg);   // 在路由對象上配置具體路由，處理 GET 請求

module.exports = router;	// 導出路由模塊

注：若使用res.end()響應數(shù)據(jù)，需要將數(shù)據(jù)轉化為Json字符串res.end(JSON.stringify(results))，如果方法傳入一個對象，會發(fā)生錯誤。一般建議使用 res.send()方法即可，這樣就不需要關心響應數(shù)據(jù)的格式，因為 Express 內部對數(shù)據(jù)進行了處理。

2.創(chuàng)建Web服務器

通過Express創(chuàng)建簡單的Web服務器，為客戶端提供請求的接口

server.js

const express = require('express');
const router = require('./routerModule');	// 導入路由模塊
const cors = require('cors');	// 導入cors模塊，解決跨域

const app = express();	
app.use(cors());    // 配置 cors 中間件，解決接口跨域問題
app.use(router);    // 加載路由中間件

app.listen(80, () => {
    console.log('服務器啟動成功!');
})

注：瀏覽器的同源安全策略會阻止網(wǎng)頁“跨域”獲取資源，CORS由一系列HTTP響應頭組成，這些HTTP響應頭決定瀏覽器是否阻止前端JS代碼跨域獲取資源，所以我們需要在接口服務器配置CORS，就可以阻止瀏覽器端的跨域訪問限制。

3.請求數(shù)據(jù)

在客戶端通過基礎的Ajax請求四部曲，請求數(shù)據(jù)

<body>
    <button>點我獲取數(shù)據(jù)庫數(shù)據(jù)</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function () {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://127.0.0.1/showInfo');
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 300) {
                        console.log(JSON.parse(xhr.response));		// 通過JSON.parse將數(shù)據(jù)轉化為JavaScript對象
                    }
                }
            }
        }
    </script>
</body>

請求結果：