Express 框架

網址: https://expressjs.com/

首先建立一個資料夾 week14

使用終端機進到該目錄，然後建立所需要的指令

mkdir myapp
cd myapp
npm init

entry point 輸入 app.js 後按下 Enter

後面的都一直按 Enter 直到出現最後一個 yes，輸入 yes 後按下 Enter

安裝 Express

npm install express --save

在該目錄下開啟 VSCODE

code .

新建一個檔案 app.js 並且貼上以下程式碼

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 at http://localhost:${port}`)
})

選到執行與偵錯頁面，按下執行並偵錯

選擇 Nodejs

進入網址 http://localhost:3000 查看，會看到 HelloWorld

快速導覽

修改根目錄(靜態網頁)

再來修改程式碼，覆蓋成以下程式碼

const express = require('express')
const app = express()
const port = 3000

app.use(express.static('public'));

/* app.get('/', (req, res) => {
  res.send('Hello World!')
}) */

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

新增一個 public 資料夾裡面分別新增兩個檔案， index.html 以及 csie.html，並且覆蓋以下程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello STUST!!!</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>CSIE!!!</h1>
</body>
</html>

啟動伺服器並且進入，http://localhost:3000

進入 http://localhost:3000/csie.html

映射網址(靜態與動態並存)

再將 app.js 替換成以下程式碼

const express = require('express')
const app = express()
const port = 3000

app.use('/static', express.static('public'));

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

重新執行程式，進入 http://localhost:3000