使用Express.js／靜態檔案

X13QQ

Published in

X13QQ

4 min readDec 17, 2020

Express

Node.js 中最流行的 Web 開發框架/模組
簡潔靈活的特性
豐富完整的 API 文件(https://expressjs.com/zhtw/4x/api.html)
能快速地搭建㇐個網站

創建專案資料夾 lab

mkdir lab

切換到lab

cd lab

專案初始化

npm init -f

安裝Express

npm install express — save

新增app.js

touch app.js

加程式碼app.js

var express = require('express')
var app = express()
app.listen(3000)

啟動

node app.js

設定網站根目錄 routes

app.js加點程式碼

app.get('/', function(req, res){
    res.send('HELLO NODEJS')
})

使用app.get

app.get(‘/’, function(req, res){
    res.send(‘home page’)
})
app.get(‘/about’, function(req, res){
    res.send(‘about page’)
})
app.get(‘/info’, function(req, res){
    res.send(‘info page’)
})

使用express.Router()

var page = express.Router()page.get('/', function(req, res){
    res.send('home page')
})
page.get('/about', function(req, res){
    res.send('about page')
})
page.get('/info', function(req, res){
    res.send('info page')
})app.use('/', page)

API Router

新增API服務

var api = express.Router()api.get(‘/getUser’, function(req, res){
    res.json({
        type: ‘api’,
        content: ‘User API’
    })
})app.use(‘/api’, api)

可回傳JSON字串

res.json(obj)

自訂畫面

將網址打錯，就會出現預設找不到網頁的畫面

app.use(function(req, res){
    res.send('404 page')
})

靜態檔案

常見的靜態檔案
如：HTML、CSS、圖片

新增public資料夾

mkdir public
cd public
mkdir css js img

設定網頁靜態檔案資料夾

app.use(express.static(__dirname + ‘/public’));
// or
app.use(express.static("./public"));

靜態檔案特性

唯獨，不能修改
透過指定
檔案位置不變
檔案格式：檔案名稱+副檔名

什麼是套件模組

函式庫是包含不同函式的檔案，用於提供主程式服務
每㇐個套件模組亦是㇐個函式庫
例如 express.js， Express 是輕量靈活的 Node.js Web 應用程式架構（函式庫）
使用套件模組中的函式前，我們首先要引用套件模組

使用Express.js／靜態檔案

Written by X13QQ