Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 33 節： Creating Servers With Express
###### tags: `JavaScript` `Udemy` `The Web Developer Bootcamp 2021`
2022.02.17（Thu.）~2022.02.18（Fri.）
## ● 上課筆記
## 0. 酷
> [Node.js 系列學習日誌 #9 - 運用 express, socket.io, boostrap 建立一個簡單的聊天室功能](https://ithelp.ithome.com.tw/articles/10158724)
## 1. Our Very First Express App
> 參考網址：
> 1. [express官方文件](http://expressjs.com/)
> 2. [Node.js — 從一個實例看Express 的運作方式](https://medium.com/web-design-zone/%E5%BE%9Enode-js-%E5%BE%9E%E4%B8%80%E5%80%8B%E5%AF%A6%E4%BE%8B%E7%9C%8Bexpress-%E7%9A%84%E9%81%8B%E4%BD%9C%E6%96%B9%E5%BC%8F-7c61cdd477f5)
```javascript=
const express = require('express')
const app = express()
const port = 3000
app.use(() => {
console.log("we got a new request!")
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
```
* 一行一行解釋：
1. 載入express，指定給變數express
```javascript=
const express = require('express')
```
2. 使用express，指定給變數app
```javascript=
const app = express()
})
```
3. 設定port的位置
```javascript=
const port = 3000
```
==問題==
什麼是port？
==解決==
> 參考網址：
> 1. [網路基礎概論 ─ 重點整理](https://hackmd.io/@Yu040419/S1raoZE3E)
> 2. [[30 天學會 Web 前端效能優化] 2. 傳輸層簡述](https://ithelp.ithome.com.tw/articles/10155707)
> 3. [關於Web後端(1)-什麼是Web Server?](https://medium.com/@justinlee_78563/%E9%97%9C%E6%96%BCweb%E5%BE%8C%E7%AB%AF-1-%E4%BB%80%E9%BA%BC%E6%98%AFweb-server-83ee32bc7d3e)
4. 監聽port
```javascript=
app.listen(port)
```
這時在terminal上執行該程式，並且在瀏覽器搜尋localhost:3000，會發現出現Cannot GET /的訊息。
5. 取得request時執行裡面的function
```javascript=
app.use(() => {
console.log("we got a new request!")
})
```
不管取得的request從哪裡來，他都會執行此函式。
而在此範例中，當我們在terminal上執行該程式，並且在瀏覽器搜尋localhost:3000後，就等於對伺服器發出了request，因此在terminal上會得到"we got a new request!"的訊息。
不過瀏覽器會一直運轉，這是因為目前我們還沒寫出讓伺服器回傳response的程式碼。
## 2. The Request & Response Objects
> 可以到[express官方文件](http://expressjs.com/)上方導覽列中的API reference中，裡面點擊request，可以看到很多request的用法。
```javascript=
const express = require('express')
const app = express()
const port = 3000
app.use((req,res) => {
console.log("we got a new request!")
res.send("hello, we got your request!this is a response")
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
```
把app.use抓出來獨立觀察：
```javascript=
app.use((req,res) => {
console.log("we got a new request!")
res.send("hello, we got your request!this is a response"
})
```
這次括號裡多了兩個object，一個是request，一個是response。（要叫做req或res看自己高興，
，只是多數都是這樣命名）
* res.send()
與console.log()不同之處在於，console.log()只會跑在terminal，而res.send()裡的內容，則會當作response，回傳給瀏覽器，並顯示在瀏覽器上頁面。
另外，如果想輸入網址localhost:3000/cats，後面接/cats或任何東西，而有不同結果的話，則可使用以下的語法：
```javascript=
app.get("/cats", (req,res)=>{
console.log("cat request!")
})
```
如果照樣想輸入localhost:3000就好（不要後面的內容），則在前面加上"/"即可：
```javascript=
app.get("/", (req,res)=>{
console.log("cat request!")
})
```
## 3. Express Path Parameters
> 參考資料：
> 1. [Express routes parameters stack overflow](https://stackoverflow.com/questions/34704593/express-routes-parameters)
> 2. [path example](http://expressjs.com/en/api.html#path-examples)
課程中的範例：
```javascript=
app.get("/r/:subreddit",(req,res)=>{
res.send("this is a subreddit!")
})
```
在terminal執行這個程式後，再到瀏覽器搜尋localhost:3000/r/＃＃＃，井字號（＃＃＃）部份可填任意內容，皆可得到"this is a subreddit!"的文字。
目前看下來的理解應該是在app.get()裡的連結，若有冒號，則可以隨意打任何內容去發送request，就像express官方文件截圖裡的`:id`以及課程範例中的`:subreddit`，在發出request時`:id`或`:subreddit`可替換輸入任何內容，結果都不變。
****
* req.params
Params is for parameter（老師說的）
```javascript=
app.get("/r/:subreddit",(req,res)=>{
consoe.log(req.params)
res.send("this is a subreddit!")
})
```
```javascript=
const express = require("express")
const app = express()
const port = 3000
app.get("/r/:subreddit",(req,res)=>{
console.log(req.params)
res.send("this is a subreddit!")
})
app.get("/",(req,res)=>{
res.send("this is a home page!")
})
app.get("/cats", (req,res)=>{
res.send("meow!")
})
app.get("/dogs",(req,res)=>{
res.send("woof!")
})
app.listen(port, ()=>{
console.log("listening on port 3000!")
})
```
執行上述程式碼後，若在瀏覽器搜尋localhost:3000/r/gooood，則console.log(req.params)會在terminal上印出底下內容：
```
{subreddit: 'gooood'}
```
## 4. Working With Query Strings
```javascript=
app.get("/search",(req,res)=>{
const {q} = req.query
res.send(`search result for ${q}`)
})
```
執行上述程式碼後，在瀏覽器搜尋localhost:3000/search?q=hellooooooo，則會在網頁上印出search result for hellooooooo。
那假如只搜尋localhost:3000/searh，而沒有後方的?q=，則會顯示undefined。
為了防止這樣的事情發生，可用if else來解決，改成以下內容：
```javascript=
app.get("/search",(req,res)=>{
const {q} = req.query
if(!q){
res.send("nothing found if nothing searched!")
}
res.send(`search result for ${q}`)
})
```
## 5. Auto-Restart With Nodemon
下載nodemon可在程式改動時，自動化取代node去執行程式碼。
（暫時沒下載）
> 參考網址：[nodemon - npm](https://www.npmjs.com/package/nodemon)
> 下載方法參考：The web developer bootcamp L338
Sign in with Wallet
Connect another wallet