---
# System prepended metadata
title: 後端basic - Express
---
# 後端basic - Express
[Node.js Express 結構分析](https://ithelp.ithome.com.tw/articles/10222345)
開始使用Express in project: 在目標資料夾使用`npm init`並用`npm install express`安裝
* Tools:
Templating
URL Mapping/Routing
User Input Processing
[Installation guides for common application development tools](https://treehouse.github.io/installation-guides/) | [解決: 因為這個系統上已停用指令碼執行，所以無法載入...](https://israynotarray.com/other/20200510/1067127387/)
#### Server
A **program** runs on a remote computer, wait for **HTTP request** from client(使用者輸入網址), then bring action to putting together a **response**.
通常會先在local端建server測試app,測試完成後再把app [Deploy](https://teamtreehouse.com/library/deploy-a-node-application-to-heroku) 到remote server.
#### Route (end point)
對client端來說: Route是URLs
對server端來說: Route是**command**,會執行特定**function** which sends **response** back to client
## 開始使用express
[Express doc - API reference](https://expressjs.com/en/4x/api.html) | 若code有更改,server必須重開才會更新,此時可用[nodemon](https://www.npmjs.com/package/nodemon)來自動化此步驟
```
const express = require('express');
const app = express();
app.get('/', (request, response) => {...}); //參數1-PATH:'/'是root route, 參數2-callback
```
* `app.listen(port, callback)`method: 參數1 tell server which port to serve the app on
## Pug Templating
#### template (views)
templates are a special type of file that have their own syntax and language, **stored on server**, and act as some kind of **form letter** for your HTML.
The result is a **full HTML page** sent to the client.
* Rendering the template: provides the **basic HTML** for app and serves it to the users.
* vary output to provide customized **responses**.
* JS templatimg engine languages: **[Pug](https://pugjs.org/api/getting-started.html)**(formerly Jade), **[Handlebars](https://handlebarsjs.com/)**, **[EJS](https://ejs.co/)**
[pug加attrubutes](https://pugjs.org/language/attributes.html)
#### start to use pug
1. Downloading Pug with npm
2. Update code with `app.set()` method in app to use Pug
```
app.set('view engine', 'pug'); //參數2:要用哪個engine
```
3. Create templates and folder for templates
By default, Express會指向root裡面的'views'資料夾,我們會把Template檔案(e.g. `index.pug`)放在裡面。若要更改路徑參考[app.set()](https://expressjs.com/en/guide/using-template-engines.html)
4. Render templates with response.render()
```
res.render('index'); //Pug會自己抓資料夾裡面的檔案名來render
```
可用dev tool來查看template的內容,並整理排版
5. templates.pug檔案常用開頭:
```
doctype html
html(lang="en")
head
title Your Web Page
body
```
* [Using Logic in Pug](https://orandigo.github.io/blog/2020/12/27/20201227-pug-note/)
可做if...else判斷,loop等
#### interpolation (template literals of Pug)
```
h1 My name is #{name} //My name is Andrew
```
attributes(title, id, class...)不接受interpolation,所以要這樣寫:
```
h1(title='My name is '+ name) #{name} // Andrew
```
#### [Template Inheritance](https://pugjs.org/language/inheritance.html)
可以寫一個layout.pug包含所有template會共用的部分,並讓child.pug繼承parent.pug來共用layout
* 方法1:block content
```
//parent template: layout.pug
block content
------
//child template
extends layout.pug //延伸的template路徑,parent.pug
block content //讓child.pug輸入內容到content block
section#content //這些內容會被放入parent.pug的content block
```
*方法2:[Include](https://pugjs.org/language/includes.html) 常用在header跟footer
```
//parent template: layout.pug
include includes/header.pug //views裡創建includes資料夾,並連結child檔案路徑
------
//child template
header //直接寫內容
h1 Assignment 2
```
#### [HTML to Pug](https://html2jade.org/)
## Request object & Response object in Pug
### Request object
Gives us access to data the client has sent to the server, such as values of fields from a form submission.
#### making a [POST](https://expressjs.com/en/4x/api.html#app.post.method) request using `form` tag: send data to the server
```
form(action='/url', method='post') //參數1:提供data到哪個path(空白會提供給當前頁面), 參數2:request method
label Please enter a Number:
input(type='number', name='inputValue') //給user的輸入欄位
button(type='submit') Submit //submit按鈕
```
#### [Request](https://expressjs.com/en/4x/api.html#req) Object in Pug
* `req.body`: 注意body property, this is where our ***form response* will end up**. By default, it is **undefined**
* **Middleware**: some **code fits in the middle** of a *request* or *response*, it dose something with the *incoming data*(HTTP request), and hands the result of to the app.
We use middleware **to put the form response into the body**. (e.g.`express.json()` or `express.urlencoded()`)
```
app.use(express.urlencoded({ extended: false})); //不要問為甚麼,之後user輸入的資料就會進到req.body了
```
* `express.urlencoded()`在做這件事:
* 三個獲取參數的method: `req.params` `req.body` `req.query`
### [Response](https://expressjs.com/en/4x/api.html#res) object
Packaging a response to be sent back to the client.
#### res.send()
```
res.send('Hello World!
')
```
#### [res.render()](https://expressjs.com/en/4x/api.html#res.render) Method: Turn templates into HTML
```
res.render(view [, locals] [, callback]) //[]代表optional
```
參數1:view檔案名(不用加附檔名.pug)
參數2:Locals-{var:value} for view to have access to when being rendered.
### Locals
Locals是一個object(e.g.`{prompt: 'Who are you?'}`,`{num: request.body.num}`)
也可使用`res.locals`,以下兩段程式碼等效
```
res.render('card', {prompt:'Who is buried in Grant's tomg?}); //在.pug檔裡使用prompt會輸出值'Who is buried in Grant's tomg?
```
* 兩種把res.locals傳入template.pug的方法
```
h1= prompt //若var沒定義,則為undefined, h1值為空白
h1 The hint is #{name} //類似template literals的用法
```
#### GET POST cycle
express裡設定GET跟POST request(num的值由POST form裡的.inputValue定義)
Pug裡寫if num有被定義則GET,else則render POST(屬性name:inputValut)
#### res.json()
For client who don't want all the persentation of HTML CSS, they just want data. (e.g. build REST API)
```
res.json(req.body); //return {"username":"Andrew"}
```
## Modular Routes
### Cookies
Cookie store **state** data on the client.
(Further Resources for Storing State: keywords - Local Storage, SQL and Node.js with Sequelize, Mongo)
1. [`res.cookie()`](https://expressjs.com/en/4x/api.html#res.cookie): Send a cookie to the broswer after *submit the form*, then the browser will automatically send this cookie with *every request it makes*.
```
//res.cookie(name, value [, options])
res.cookie('username', req.body.username); //參數1:name, 參數2:從form取出的值
```
但此時server isn't reading回傳的cookie, to read the cookie from the request, 在request object裡需要有 cookie's property, 此時就需要cookie-parser這個Middleware.
2. [`cookie-parser`](https://github.com/expressjs/cookie-parser): 可以讓我們讀取form裡的data
* npm install cookie parser
* config and use cookieParser in your app
```
const cookieParser = require('body-parser');
app.use(cookieParser());
```
3. [`res.cookies()`](https://expressjs.com/en/4x/api.html#req.cookies): 讀取步驟1 form submit的值. When using *cookie-parser* middleware, this property is an **object** that contains *cookies sent by the request*. If the request contains no cookies, it defaults to `{}`.
### redirect
當Client端request一個 *受保護的*(需login) 或*輸入錯誤的*(Google買下的類似domain) 或*被移動的* URL, Server通常會回覆一個包含redirect URL的response, Client收到後會立刻make a 2nd request去這個new URL.
HTTP Redirects require a browser or client to make a second request and **don't require action from the user** to follow the new URL being redirected to.
* `res.redirect([status,] path)`
利用cookie state來redirect: 若cookie state裡有username,首頁會歡迎{[name](https://ui.dev/shorthand-properties)}; 若無,redirect到inputForm讓使用者輸入username
* `res.clearCookie()`
首頁清除cookie後redirect到inputForm
## [Middleware](https://expressjs.com/en/guide/writing-middleware.html)
讀取req跟res的需求,處理成回覆給使用者的res
* Basic form of Express middleware
```
(req, res, next) => {
// do something
next();
}
```
* express使用middleware
```
app.use((req, res, next) => {}); //for every request
app.use('/users', (req, res, next) => {}); //run for特定route
```
`.use`可以換成`.get`,單純處理get request
* Sequence: 會按順序由上往下執行,也可用`,`增加多個function
```
app.use((req, res, next) => { //func1
console.log('one');
next();
},
(req, res, next) => { //func2
console.log('two');
next();
});
app.use((req, res, next) => { //func3
console.log('three');
next();
});
//one two three
```
* pass info
```
app.use((req, res, next) => {
req.message = 'I made it!';
next();
});
app.use((req, res, next) => {
console.log(req.message);
next();
});
//I made it!
```
#### The `next` function
* `next()`;宣告一個middleware-function結束了,可以執行下一個
* 要結束一個middleware function,要馬`next()`,要馬完成一個response (e.g.`.render()`,`.send()`),不然app會一直loading
* third party middleware: these func are being called as Express sets up the server and returns middleware functions.([Closures的概念](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures))
### Handling Errors in an Express App
By Passing an object as a parameter to `next()`來抓app裡的錯誤
```
app.use((req, res, next)=>{
const err = new Error('Oh noes!'); //製作一個方便查找的簡短Error message
err.status = 500; //這裡的.status是普通的object property, 500代表general error
next(err);
});
```
This output comes from Express's built in error handler.紅線為錯誤發生位置
#### Error Handling Middleware
* Error Middleware
```
(err, req, res, next) => {} //Express會把Error object pass給第一個有4個parameter的Middleware(類似request.on("error", () =>{})的概念)
```
```
app.use((err, req, res, next)=>{
res.local.error = err; //把local.error property設成err
res.status(err.status); //抓取status code給browser
res.render('error', err); //參數1:error template, 參數2:error object
});
```
* `res.status()`method takes the number of the code.
#### Handling 404 Errors
A 404 signals the requested route dosen't exists. Express's native handler會傳送預設的404 plain text給client端
如何catch the request before他跑到最後,並傳送客製化404頁面
```
//做一個'error製造Middleware'放在Error Middleware之前,Express跑到這,會使用這個製造機
app.use((req, res, next)=>{
const err = new Error('Not Found');
err.status = 404;
next(err);
});
```
## Parameters, Query Strings, and Modularizing Routes
### Modular Routes
通常業界會把route依功能模組拆分成數個檔案,放在route資料夾
```
//index.js裡的config
const express = require('express');
const router = express.Router();
======
router.get('/'......);
router.post('/inputForm'......);
======
module.exports = router;
```
```
//cards.js裡的config
const express = require('express');
const router = express.Router();
======
router.get('/'......); //因為在app.js裡app.use('/cards', cardRoutes); 所以在cards.js裡的route都會多一個/cards
======
module.exports = router;
```
### Using Data and Route Parameters
以下程式碼使用{[ES6 Shorthand Properties](https://ui.dev/shorthand-properties)} + 解構賦值
* Route Parameters `/:`
```
// '/:'的':'後面的值會被當成param的name,以id示範
router.get('/:id',(req, res)=>{});
```
* [`req.params`](https://expressjs.com/en/api.html#req.params) object 網頁網址會變`/url/id`
* [`req.query`](https://expressjs.com/en/api.html#req.query) object 用query string的方法取值 網頁網址會變`/url?key1=value1&key2=value2`
### 隨機card的.pug
## Serving Static Assets
Static Assets: 靜態網頁內容(CSS, client-side JS),存放在web server資料夾內的完整檔案,會直接交由browser(Client端)執行.(Express無法讀取Client端的js)
#### Setup
1.先在project裡建立一個public(業界慣用)資料夾,裡面存放.css檔案
#### `express.static()` method
2.設一個route連到public資料夾
```
app.use('/static', express.static('public'));
```
3.若希望所有頁面都使用此stylesheet, 在layout.pug裡連結此檔案(css會放在``tag裡)
4.調整template