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