# 第九堂:從 express MVC 架構建立 RESTful API
1. 錄影
2. [講義簡報](https://whimsical.com/express-7XCkLv6KJUxXD39qoHK9Di)

## express 環境安裝與 router 設計
* 安裝 `express` NPM
``` =JavaScript
const express = require('express');
const app = express();
app.get('/',function(req,res){
res.status(200).json({
"name":"洧杰"
})
})
// 監聽 port
const port = process.env.PORT || 3000;
app.listen(port);
```
## express 語法
* req.query:取得參數
* [比價網](https://feebee.com.tw/s/iphone/?pl=3300&ph=12000)
* [TDX 觀光 API](https://tdx.transportdata.tw/api-service/swagger/basic/cd0226cf-6292-4c35-8a0d-b595f0b15352#/)
* req.params:取得動態路由
* req.body(express 產生器):獲得 post body,就不需要寫原生接 buffer
## 中場休息
* [學習地圖](https://coggle.it/diagram/Yl9rgn_hLg66qEo7/t/node-js-%E7%9B%B4%E6%92%AD%E7%8F%AD%E7%9F%A5%E8%AD%98%E9%BB%9E)、[backend roadmap](https://github.com/goodjack/developer-roadmap-chinese)
* [各週多了一個 CI/CD 資料夾](https://github.com/hexschool/node-training-postgresql/tree/main/week4)
## express 調整
1. 安裝 `cors`、`express` NPM
```
npm install cors express --save
```
## server.js
```jsx
const express = require('express');
const cors = require('cors')
const path = require('path')
const app = express();
const creditPackageRouter = require('./routes/creditPackage')
app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(express.static(path.join(__dirname, 'public')))
app.use('/api/credit-package', creditPackageRouter)
// 監聽 port
const port = process.env.PORT || 3000;
app.listen(port, async () => {
try {
console.log(`伺服器運作中. port: ${port}`)
} catch (error) {
process.exit(1)
}
})
```
### router > creditPackage.js
```jsx
const express = require('express')
const router = express.Router()
router.get('/', async (req, res, next) => {
res.status(200).json({
status: "success",
data: "取得資料"
})
})
router.post('/', async (req, res, next) => {
})
router.delete('/:creditPackageId', async (req, res, next) => {
})
module.exports = router
```
# 在 week4 加上資料庫環境後
## server.js
```jsx
require("dotenv").config()
const express = require('express');
const cors = require('cors')
const path = require('path')
const app = express();
const creditPackageRouter = require('./routes/creditPackage')
const dataSource = require("./db")
app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
app.use(express.static(path.join(__dirname, 'public')))
app.use('/api/credit-package', creditPackageRouter)
// 監聽 port
const port = process.env.PORT || 3000;
app.listen(port, async () => {
try {
await dataSource.initialize()
console.log('資料庫連線成功')
console.log(`伺服器運作中. port: ${port}`)
} catch (error) {
console.log(`資料庫連線失敗: ${error.message}`)
process.exit(1)
}
})
```
## router > creditPackage.js
```javascript
const express = require('express')
const router = express.Router()
// const { dataSource } = require('../db/data-source')
const AppDataSource = require("../db")
router.get('/', async (req, res, next) => {
const packages = await AppDataSource.getRepository("CreditPackage").find({
select: ["id", "name", "credit_amount", "price"]
})
res.status(200).json({
status: "success",
data: packages
})
})
router.post('/', async (req, res, next) => {
})
router.delete('/:creditPackageId', async (req, res, next) => {
})
module.exports = router
```
## express MVC 架構
```
npm install express --save
```
* 一個方便建立 web 應用程式的框架
* MVC 概念
* Model:資料層模型
* Controller:控制器
* Model 與 View 端的**橋樑**
* 管理 request、response
* View:視圖
* express 產生器:[express generator](https://expressjs.com/zh-tw/starter/generator.html)
* [express cors](https://expressjs.com/en/resources/middleware/cors.html)
## 觀看第五週 GitHub
1. [week5](https://github.com/hexschool/node-training-postgresql/tree/main/week5)