- 建立一個全新的專案資料夾,拉進 VSCode 中。
- 在 VSCode 中建立一個資料夾,取名為 server,做為伺服器用。
- 打開命令提示字元或終端機,進入到 server 資料夾,初始化專案
npm init
- 在 server 資料夾中建立主要的程式,index.js
- 完成初步的專案建立
- 為了快速搭建一個網站,需要 express
npm i express
- 為了讓不同 port 中的程式可以讀到跨 port 的內容(跨網域),需要 cors
npm i cors
- 為了讀取 mySQL,需要 mysql
npm i mysql
- 想要讓 index.js 只要一修改,伺服器就自動 reload,需要中介軟體(middleware),nodemon
npm i nodemon
- 一般來說,在 index.js 中使用套件需要先引用與定義
const express = require('express');
如果想讓引用與定義與寫 reactJS 中的 ES6 語法一致,那需要在 package.json 中設定 type 為 module
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
這樣一來,就可以寫成
import express from "express";
- 完成所需套件的安裝
- 開啟 xampp,開啟 phpMyAdmin
- 建立一個新資料庫叫 nodejsTest
- 將附上的 sql 檔匯入
- 點選一下左側的 nodejsTest
- 再由中間上方找到「匯入」選項
- 選擇附件 nodejsTest.sql
- 再按下方的「匯入」按鈕
- 結果應該是在 nodejsTest 資料庫下產生一個 users 的資料表
- 完成後點一下左側的 nodejsTest 下的 users 資料表,檢查看看是否有兩筆資料
- 為了要使用 express,要引用 express,並建立變數實體 express
- 為了要使用 mysql,要引用 mysql,並建立變數實體 mysql
- 為了要使用 cors,要引用 cors,並建立變數實體 cors
import express from "express";
import mysql from "mysql";
import cors from "cors";
- 開啟 server 程式 express,也就是去執行它的意思。而為了之後能夠方便取用,把執行它的結果放進變數 app 中
const app = express();
- 這時候就有一個主機 app 了,但要建立一個對外的通道讓別人進來,通道就是 port,而這個範例會使用通道 3001
app.listen(3001, ()=>{
console.log('Connect to server!')
});
- 這時候如果在位於 server 資料夾下的命令提示字元或終端機,輸入以下的指令,就可以看把主機開起來放著
node index.js
- 但是之後會一直加指令進來 index.js,只要加了,就要 ctrl + c 把主機中斷,然後再重新下指令開啟,很~~~累。所以使用剛剛有裝的中介軟體 nodemon 來幫我們做事。也就是要讓 nodemon 幫我們執行 index.js
- 進到 package.json
- 在 scripts 裡加上這句
"server": "nodemon index.js"
- 因為 scripts 裡原本也只有一句 test,所以把它覆寫後,完整的 scripts 會像這樣
"scripts": { "server": "nodemon index.js" },
- 回到位於 server 資料夾下的命令提示字元或終端機,輸入以下的指令
這時候就可以看到
npm run server
[nodemon] starting `node index.js` Connect to server!
- 試著改一下「Connect to server!」變成「Welcome to server!」,然後記得存檔。這時候就會看到命令提示字元或終端機中的字主動會更新成「Welcome to server!」了
- 在開始使用前,設定一下主機能夠使用 JSON 格式
- 在開始使用前,設定主機能夠被跨網域存取
const app = express();
app.use(express.json());
app.use(cors());
-
設定 mySQL 的連線設定
- 由 mysql 中的方法 createConnection() 來建立連線
- 並將連線的結果指定給變數 db,這樣將來只要認這個變數就知道是資料庫連線結果
app.use(cors()); const db = mysql.createConnection({ });
- 設定連線的細節,帳號、密碼或是 port 號等等
const db = mysql.createConnection({ host: "localhost", port: "8086", // 預設是 3306,老師有改過,所以要輸入改過的 user: "admin", password: "a12345", database: "nodejsTest", });
- 測試有沒有連線成功
const db = mysql.createConnection({ // 略 }); db.connect(function(err) { if (err) throw err; console.log("Connected!"); });
-
設計讀取所有使用者的 API
- 假設,想要取得所有使用者資料,不需要先傳給主機任何訊息,那麼就只要使用方法 get 即可
db.connect(function(err) { // 略 }); app.get();
- 要設定要取用的入口,由網址中決定。比如說是由 localhost:3001/users
app.get("/users");
- 設定取用時要做的事
app.get("/users", function(){});
- 取用的 function 會自動帶入兩個參數
app.get("/users", function(req, res){});
- 先寫一句 sql 來取得所有使用者資料,放在一個變數中待用
app.get("/users", function(req, res){ const q = "SELECT * FROM users"; });
- 再由資料庫連線,也就是變數 db,去執行
app.get("/users", function(req, res){ const q = "SELECT * FROM users"; db.query(q}); });
- 執行時總是要告知做什麼事,做什麼事就是寫在一組 function。有結果時,會帶錯誤或是回傳的資料進這個 function
app.get('/users', (req, res)=>{ const q = "SELECT * FROM users"; db.query(q, (err, data)=>{ }); });
- 如果有錯誤,就把錯誤用 JSON 格式回傳。有 return 程式就會停在這句。沒有錯,就是有結果,就把結果變成 JSON 回傳
app.get('/users', (req, res)=>{ const q = "SELECT * FROM users"; db.query(q, (err, data)=>{ if(err) return res.json(err); // 如果有錯誤,就把錯誤用 JSON 格式回傳 return res.json(data); // 沒有錯,就是有結果,就把結果變成 JSON 回傳 }); });