快捷導(dǎo)航

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

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

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

前言

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

一、mysql模塊

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

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

connDB.js

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

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

（3）導(dǎo)出獲取到連接的對(duì)象

module.exports = db;

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

1.配置Express路由模塊

編寫Express路由模塊，處理客戶端的GET請(qǐng)求

routerModule.js

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

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

module.exports = router;	// 導(dǎo)出路由模塊

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

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

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

server.js

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

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

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

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

3.請(qǐng)求數(shù)據(jù)

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

<body>
    <button>點(diǎn)我獲取數(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ù)轉(zhuǎn)化為JavaScript對(duì)象
                    }
                }
            }
        }
    </script>
</body>

請(qǐng)求結(jié)果：