Backend[0]
By 小黑
目錄
- 迷你版網路概論
- JavaScript 複習
- Node.js & npm
- Express.js
- Routing
講師介紹
小黑（吳習之）
- 建中電研 44th 網管
- 寒訓一小隊輔 & 暑訓三小隊輔
- Linux & Python 廚
- 不要像我一樣選二，然後被炸魚
迷你版網路概論
打個比方啊：菜市場
- 你今天家裡比如說有四口人六口人也好，總會上菜市場
- 你看到一家之前在天龍國去過的店，好奇走了進去
- 你問老闆之前有的老婆餅有賣嗎，老闆說沒有
- 你又問老闆有賣牛舌餅嗎，老闆說有
- 於是你跟老闆訂了一盒，老闆也給你了
這跟網頁有啥關係？
Request & Response
還是你
網站伺服器
/about 有網頁嗎
你
老闆
有太陽餅嗎
沒有欸
404 Not Found
Request & Response
還是你
網站伺服器
/home 有網頁嗎
你
老闆
有牛舌餅嗎
有
有哦
Request & Response
還是你
網站伺服器
請根據 Prompt 回答
你
老闆
那給我來一盒（給錢）
（給牛舌餅）
（給回覆）
Request
- 跟老闆講你要幹嘛 = 跟伺服器要網頁
- Request 有不同方法 -> 你跟老闆問的不同問題
GET = 你想得到知道有沒有賣 XX = 讀取網頁
POST = 拿錢跟老闆換牛舌餅 = 給伺服器資料要東西
DELETE = 取消訂單 = 跟伺服器講你要刪資料
Response
- 老闆的回應 = 伺服器給你的 Response
- Response 的 head = 牛舌餅的資訊（哪牌的、價格）
- Response 的 body = 牛舌餅本身 = 網頁 or 資料
- Response 的 status code = 老闆給你的不同答案
200 = 一切順利
201 = 你訂單下了且老闆也在處理了
400 = 老闆看不懂你的訂單
404 = 這裡沒賣
500 = 老闆店裡出了點 trouble
JavaScript 複習
Hello World!
console.log("Hello, world");Variable
let name = "Aaron"; // String
console.log(name); // "Aaron"
let age = 16; // number
age = 18;
console.log(age) // 18;
let eth_price = 1496.98; // number, but QAQ
const avogadro = 6 * Math.pow(10, 23);Function
let add = (a, b) => {
return a + b;
}; // arrow function
function add(a, b) {
return a + b;
}Node.js & npm
Node.js
- JavaScript 理論上只能跑在 Browser，對吧？
- But 有人嫌傳統的 Server 設計很卡，沒辦法同步處理請求
- 所以拿 V8 替 JavaScript 寫了一套類似 Interpreter 的東東
- 這東東就叫 Node.js
- Node.js 讓你可以在電腦上跑 JS
- 然後就有人拿 JS 來寫後端了 （怒
npm (Package Manager)
- 如題，是個 package manager
- 假設你想寫遊戲，但沒有現成的 Library
- 沒有 npm，你得自己去找 Library 自己裝
- 有 npm 的話，你可以方便的透過幾條指令安裝 Library
Express.js
Express.js
- 一套很老的後端框架
- JavaScript 寫後端的第一選擇
安裝
1. 開一個新的資料夾，名稱隨意
2. cd 到這個資料夾
3. 初始化 npm
4. 用 npm 安裝 Express
mkdir hello_express
cd hello_express
npm init -y
npm i expressHello, Express!
Express，啟動！
- 在剛剛的資料夾底下創個 JS 檔 server.js，手敲下面的 code
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})- 敲完之後存檔，然後在剛剛的資料夾底下跑以下指令
node server.js- 在瀏覽器打 localhost:3000 ，理論上就看得到網站了
Routing
Routing
- 一種定義使用者（瀏覽器）進入特定 URL 時，伺服器該返回哪些內容或執行哪些操作的機制
app.get('/', (req, res) => {
// 要執行的內容
});Callback Function
(要執行的操作）
URL
Method
URL - Params (參數）
app.get('/:user/:article_id', (req, res) => {
let user = req.params.user;
let article_id = req.params.article_id;
res.send(`${user} ${article_id}`);
});URL - Query String
- URL 裡 ? 開頭的那段就是 Query String
- ? 後面每個 XX=XX 的鍵值對用 & 分隔
app.get('/', (req, res) => {
let title = req.query.title;
let action = req.query.action;
res.send(`${title} ${action}`);
});Router
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
res.send('This is the home page');
});
router.get('/about', (req, res) => {
res.send('About us');
});
const app = express();
app.use('/api', router);
app.listen(3000);EJS
EJS
- EJS 是一個 JavaScript 的 Template Engine
- Template Engine 的功能是根據模板生成 HTML
- 安裝：
npm i ejs- 接著在剛剛創的資料夾底下創 views
- EJS 的寫法就很像 HTML ，只是加了 JS 的一些語法
- 等下創的 EJS 模板都會放這
第一個 EJS 程式
- 在 views 資料夾底下創 index.ejs ，內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>- 基本就跟 HTML 沒啥兩樣
第一個 EJS 程式
- 接著稍微修改一下 server.js
const express = require('express');
const app = express();
const port = 3000;
// 設置 EJS 為模板引擎
app.set('view engine', 'ejs');
// 設置視圖文件夾（可選，預設是 'views'）
app.set('views', './views');
app.get('/', (req, res) => {
res.render('index');
});
app.get('/search', (req, res) => {
let title = req.query.title;
let action = req.query.action;
res.send(`${title} ${action}`);
});
app.listen(port);解釋
- Express 會去 views 抓 ejx 檔，並渲染
- 到 localhost:3000 就會看到網頁了
加圖片跟 CSS
- Express 可以創一個專門放 CSS、圖片等東西的資料夾
- 一樣在 server.js 裡加（加在 app.get 那幾行前）下面的 code
- 接下來就在模板檔案裡正常加圖片、CSS 那些
// 設置靜態文件目錄
app.use(express.static('public'));- 圖片跟 CSS 要丟在 public 資料夾裡
在 EJS 裡執行 JS
- <%- %> 可以渲染 HTML 標籤
- <% %> 執行一行 JS 但不返回執行結果
- <%= %> 執行一行 JS 且返回執行結果
Backend[0]: Express
By Aaron Wu
