[筆記] 實作一個複雜的 App（ Start, Template Engine ）

[henry1491491]

Start, Template Engine

在 VSCode 新增一個專案資料夾 complex_app

在根目錄新增 app.js

在 command line 輸入：

$ npm init -y

初始化專案

結果：
根目錄多出 package.json

若沒有可以按一下重新整理的按鈕

在 command line 輸入：

$ npm install express 

安裝 Express 模組

在 app.js 加上：

const express = require("express")
const app = express()

app.get('/', function(req, res) {
  res.send("Welcome to our new app!")
})

app.listen(3000)

const 宣告的為常數，意即指定一次後便不會再改變其內容

• 引入 express modules
• 指定到我們這隻程式 app
• 當有 get 請求時，將物件透過參數傳送進來
• 當有 / 請求，回應「Welcome to our new app!」
• 監聽在 port 3000

到 command line 輸入：

$ node app

結果：
瀏覽器輸入 localhost:3000，顯示

表示成功

接著要做出一個 html template，但因為這堂課主要以 JavaScript 為主，所以一樣直接複製樣板即可。

到 這裏

• 到 02_Complex_App 這個資料夾
• 到 01_HTML_Templates
• 下載 home-guest.html

在根目錄新增資料夾 views，在裡面新增 home-guest.ejs

在 home-guest.ejs 加上 home-guest.html 的內容

在 app.js，加上：

// 省略
app.set('views', 'views') // 加上這行
app.set('view engine', 'ejs') // 加上這行

app.get('/', function (req, res) {
  res.send("Welcome to our new app!")
})
// 省略

解釋：

• 第一行：第一個 views 是 express set 的選項，務必要是 views，第二個 views 是我們放置 template 的資料夾位置
• 第二行：設定要使用的樣版引擎（template engine），常見的有 pug、ejs . . .，而這邊使用 ejs，這也是為什麼先前 home-guest.ejs 這邊要是 ejs 檔名

在 command line 輸入：

$ npm install ejs

載入 ejs 樣板引擎

在 app.js 更改以下內容：

app.get('/', function (req, res) {
  // 舊
  res.send("Welcome to our new app!")
  // 新
  res.render('home-guest')
})

執行 server

$ node app

結果：
成功顯示畫面

接著要修改 CSS 的部分，因為目前畫面上方的 Navbar 跟背景一樣是白的，我們想把它變成深底色

在根目錄新增資料夾 public

在 app.js 內加上：

// 省略
app.use(express.static('public')) // 加上這行
app.set('views', 'views')
app.set('view engine', 'ejs') 
/ 省略

告知express 要用 public 這個資料夾（不確定是不是這個意思？）

到 這裏

• 到 02_Complex_App 這個資料夾
• 到 01_HTML_Templates
• 下載 main.css

在 public 加上 main.css

在 home-guest.ejs 更改以下內容：

// 舊
<link rel="stylesheet" href="main.css">
// 新
<link rel="stylesheet" href="/main.css">

到 command line 輸入：

npm install nodemon

存檔後自動執行 server 模組

在 package.json 裡面的 script 加上

"scripts": {
    "watch": "nodemon app", //  加上這段
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Directory

|-- Desktop
    |-- app.js
    |-- package-lock.json
    |-- package.json
    |-- public 
    |   |-- main.css
    |-- views
        |-- home-guest.ejs

Debug

• 資料夾、檔名在建立時注意不要有空格，因為這樣跳錯好幾次