---
# System prepended metadata

title: 用Node js開api不求人

---

# 用Node js開api不求人

＊＊確認你的電腦已經裝好node.js!

參考文件：https://expressjs.com/zh-tw/starter/generator.html

參考影片：https://www.youtube.com/watch?v=RpMVP52YQRQ&ab_channel=%E5%85%AD%E8%A7%92%E5%AD%B8%E9%99%A2


1. 先npm安裝express generator
````
sudo npm install express-generator -g
````

2. 建立一個express專案(照老師改的)從pug改成ejs
````
express --view=ejs 'project-name'
````

3. 進入剛剛建立好的專案
````
cd 'project-name'
````

4. 發現沒有node_modules來補裝個
````
npm install
````

5. 資料夾結構
````
---|
   bin-www.js //伺服器配置
---|
   node_modules //模組
---|
   public //html, css, js
---|
   routes //TBC
---|
   views //後端渲染資料的html也就是.ejs
-|
   app.js //整個專案的心臟
   
````

6. 開始運行專案
````
npm start
````
7. 看到這個畫面，記得預設port為3000
![](https://i.imgur.com/WjT3mgn.png)

http://localhost:3000/

令人安心的畫面長這樣：
![](https://i.imgur.com/MGC38LX.png)

8-1. 在views/index.ejs改的東西要重啟npm start網頁才會更新

or

8-2.vscode快速工具
找到左邊導覽列：
![](https://i.imgur.com/LUNsyBw.png)

點擊『建立launch.json檔案』會出現：
![](https://i.imgur.com/JeWtU1i.png)

選擇Node.js後會看到本畫面：
![](https://i.imgur.com/u4frcBc.png)

點擊左上角綠色play按鈕，確定下方終端有跑出來就可以確定有啟動了：
![](https://i.imgur.com/hoaFy2j.png)

上方中央有按鈕欄位，下方有橘色邊框才有辦法重整網頁：（有幾次欄位會瞬間出現又瞬間消失，重新npm start試試看）
![](https://i.imgur.com/zudWY2Z.png)

9. 在routes資料夾新增api.js
````
#內容暫時拷貝新增index.js即可，等等重寫
````
10. 記得到駕駛艙回報（引入）剛剛新增的api.js
````
var apiRouter = require('./routes/api');
app.use('/api', apiRouter);
````
重整檢查以下連結是否有效：

http://localhost:3000/api

＊＊thunderClient太香啦，從vscode左側延伸模組的選項叫出來。
懶得用postman了:)
