js對話資料庫體驗:hello-mysql

語言: CN / TW / HK

theme: channing-cyan highlight: a11y-dark


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第6天,點選檢視活動詳情

js對話資料庫體驗:hello-mysql

一、寫在前面

傳聞 JavaScript 已經到了全棧,前後端通吃的地步,今天體驗下在 JavaScript、nodejs, 連線 MySQL 資料庫查詢資訊,並通過一個 http 服務展示查詢結果的小 demo。

體驗 nodejs 中,JavaScript 直接對話資料庫的魅力,小 demo,前端人的一大步。

二、過程與思路

1.環境安裝和準備

  • ①安裝 Node.js, 儘管大部分做過前端工程化專案的人都安裝了 node 環境,但檢查合適環境的存在仍是必須的。 通過 node -v 可以檢視 node 的版本,如果像下面這樣,正確展示版本號, 那麼 node 就確實證明已經安裝了,可以放心繼續了。如需要安裝 nodejs 的教程,自行搜尋引擎檢索。

image.png

  • ②安裝 mysql 依賴 因為這個 demo,要對話 MySQL 資料庫,所以需要安裝 mysql 依賴。

// 安裝依賴命令 npm install mysql

  • ③安裝資料庫

既然要體驗對話資料庫,那得有資料庫,本 demo 中使用的是 MySQL 資料庫。 安裝 MySQL 資料庫教程自行按需去搜索引擎檢索。

cmd 命令視窗輸入以下命令回車鍵,並輸入密碼,如果能看到以下資訊,那麼證明你的 MySQL 服務已經在運行了, 可以放心繼續了。

image.png

  • ④在資料庫管理系統中,建立庫表 demo 中是查詢 ry 庫的 sys_user 表中的記錄,所以得先在資料庫管理系統(demo 中是 MySQL)中, 建立庫 ry 並在 ry 庫下建立表 sys_user,為了測試方便,還得新增幾條記錄。你可以使用命令做這些, 也可以使用視覺化工具處理。視覺化工具(例如 Navicat 等)建立庫表以及表記錄,那非常簡單。 如果此前沒接觸過 sql,那可能會有些麻煩。 (我的工具都是 jetbrains 全家桶,就不推薦了,因為收費,當然俺是正版。)

建庫建表新增表記錄教程,自行查詢。

2.初始化一個工程化專案

在資料夾 nodejs-hello 下,通過 npm init -y 命令初始化一個工程化專案,獲得 package.json。

image.png

3.建立 serve-mysql.js 檔案

```js // serve-mysql.js

const mysql = require('mysql'); // 需要額外安裝依賴:npm install mysql const http = require("http"); // 內建的模組功能

// 建立 mysql 連線 const conn = mysql.createConnection({ host: 'localhost', // 資料庫所在的域名或ip user: 'root', // 資料庫使用者賬號 password: '123456', // 資料庫賬號對應的密碼 database: 'ry' // 資料庫名稱 });

// 發起連線 conn.connect();

// sql 原句:查詢表 sys_user 的記錄中的全部欄位資訊 // * 表示查詢全部,通常不建議這麼做,應該顯示列出需要查詢的欄位,哪怕這些欄位很多 const sql = 'select * from sys_user' conn.query(sql, (err, results, fields) => { // 遇到錯誤丟擲異常 if (err) throw err;

// 列印查詢結果的第一行記錄
console.log('result =>', results[0]);

// 列印查詢結果的第二行記錄
console.log('result =>', results[1]);

// 建立一個 http 服務,
http.createServer(function (request, response) {

    // Send the HTTP header
    // HTTP Status: 200 : OK
    // Content Type: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain;charset=utf-8'});

    // 設定 http 請求的響應內容,
    // 獲取查詢結果的第二行記錄的 "user_name" 的值,即是使用者名稱
    const user = results[1]["user_name"] 
    response.end('你好,世界!\n Hello World\n'+user);

    // 監聽 3210 埠,即通過 3210 埠訪問該 http 服務,將獲得請求的響應內容
}).listen(3210);

console.log("您可以通過該地址訪問服務:" + "http://localhost:3210")

});

conn.end(); ```

4.執行 serve-mysql.js 的檔案

在 nodejs-hello 資料夾下,執行 serve-mysql.js 檔案,執行命令是:node serve-mysql.js

下面是執行命令相關的截圖

image.png

下面是在瀏覽器訪問建立的 http 服務的結果截圖 image.png

三、寫在後面

環境準備有點多,特別是對於沒有後端經驗的純前端來說,可能感到有些麻煩。 但總的來說,使用 JavaScript ”對話“資料庫,是一個不錯的體驗。

前端了解或說具備簡單 CRUD 能力可以,真的搞全棧,以我的經驗來說,實在吃不消。 前後端分工已成大勢,相信分工合作會是長期的趨勢,相信將來分工也只會是越來越細,而不會相反。