Skip to content

Commit c3e68c5

Browse files
andy6804twandy6804tw
committed
done Part8-Articles-api(2)
1 parent 019967a commit c3e68c5

File tree

5 files changed

+240
-3
lines changed

5 files changed

+240
-3
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,6 @@
2424
- Article新增、顯示
2525
- [Link 連結](https://github.com/andy6804tw/RESTful_API_start_kit/tree/Part7-Articles-api(1))
2626
- [Tutorial 教學](/tutorials/Part7-Articles-api(1))
27+
- Article修改、刪除
28+
- [Link 連結](https://github.com/andy6804tw/RESTful_API_start_kit/tree/Part8-Articles-api(2))
29+
- [Tutorial 教學](/tutorials/Part8-Articles-api(2))

‎src/server/controllers/article.controller.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,28 @@ const articlePost = (req, res) => {
2121
}).catch((err) => { return res.send(err); }); // 失敗回傳錯誤訊息
2222
};
2323

24+
/* Article PUT 修改 */
25+
const articlePut = (req, res) => {
26+
// 取得修改id
27+
const articleId = req.params.article_id;
28+
console.log(articleId);
29+
// 取得修改參數
30+
const insertValues = req.body;
31+
articleModule.modifyArticle(insertValues, articleId).then((result) => {
32+
res.send(result); // 回傳修改成功訊息
33+
}).catch((err) => { return res.send(err); }); // 失敗回傳錯誤訊息
34+
};
35+
36+
/* Article DELETE 刪除 */
37+
const articleDelete = (req, res) => {
38+
// 取得刪除id
39+
const articleId = req.params.article_id;
40+
articleModule.deleteArticle(articleId).then((result) => {
41+
res.send(result); // 回傳刪除成功訊息
42+
}).catch((err) => { return res.send(err); }); // 失敗回傳錯誤訊息
43+
};
44+
45+
2446
const test = (req, res) => {
2547
res.send('測試');
2648
};
@@ -29,5 +51,7 @@ const test = (req, res) => {
2951
export default {
3052
test,
3153
articleGet,
32-
articlePost
54+
articlePost,
55+
articlePut,
56+
articleDelete
3357
};

‎src/server/modules/article.module.js‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,58 @@ const createArticle = (insertValues) => {
5858
});
5959
};
6060

61+
/* Article PUT 修改 */
62+
const modifyArticle = (insertValues, productId) => {
63+
return new Promise((resolve, reject) => {
64+
connectionPool.getConnection((connectionError, connection) => { // 資料庫連線
65+
if (connectionError) {
66+
reject(connectionError); // 若連線有問題回傳錯誤
67+
} else { // Article資料表修改指定id一筆資料
68+
connection.query('UPDATE Article SET ? WHERE article_id = ?', [insertValues, productId], (error, result) => {
69+
if (error) {
70+
console.error('SQL error: ', error);// 寫入資料庫有問題時回傳錯誤
71+
reject(error);
72+
} else if (result.affectedRows === 0) { // 寫入時發現無該筆資料
73+
resolve('請確認修改Id！');
74+
} else if (result.message.match('Changed: 1')) { // 寫入成功
75+
resolve('資料修改成功');
76+
} else {
77+
resolve('資料無異動');
78+
}
79+
connection.release();
80+
});
81+
}
82+
});
83+
});
84+
};
85+
86+
/* Article DELETE 刪除 */
87+
const deleteArticle = (productId) => {
88+
return new Promise((resolve, reject) => {
89+
connectionPool.getConnection((connectionError, connection) => { // 資料庫連線
90+
if (connectionError) {
91+
reject(connectionError); // 若連線有問題回傳錯誤
92+
} else { // Article資料表刪除指定id一筆資料
93+
connection.query('DELETE FROM Article WHERE article_id = ?', productId, (error, result) => {
94+
if (error) {
95+
console.error('SQL error: ', error);// 資料庫存取有問題時回傳錯誤
96+
reject(error);
97+
} else if (result.affectedRows === 1) {
98+
resolve('刪除成功！');
99+
} else {
100+
resolve('刪除失敗！');
101+
}
102+
connection.release();
103+
});
104+
}
105+
});
106+
});
107+
};
108+
109+
61110
export default {
62111
selectArticle,
63-
createArticle
112+
createArticle,
113+
modifyArticle,
114+
deleteArticle
64115
};
65-

‎src/server/routes/article.route.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,9 @@ router.route('/')
77
.get(articleCtrl.articleGet) /** 取得 Article 所有值組 */
88
.post(articleCtrl.articlePost); /** 新增 Article 值組 */
99

10+
router.route('/:article_id')
11+
.put(articleCtrl.articlePut) /** 修改 Article 值組 */
12+
.delete(articleCtrl.articleDelete); /** 刪除 Article 值組 */
13+
1014

1115
export default router;

‎tutorials/Part8-Articles-api(2).md‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
## 本文你將會學到
2+
- 如何修改資料庫一筆文章資料
3+
- 如何刪除資料庫一筆文章資料
4+
- 使用Postman測試PUT與DELETE
5+
6+
## 前言
7+
昨天已經將 Article 的新增和顯示實作出來了，今天就來繼續實作修改及實作，基本上整個流程跟昨日差不多，重點還是處理 article 路由底下的內容分別為 `article.module.js`、`article.controller.js`、`article.route.js`。
8+
9+
## 修改Article
10+
11+
#### article.module.js
12+
13+
傳入值 `insertValues` 是使用者要修改的資料為一個物件 Object 型態，這個變數是由 `article.controller.js` 傳過來的，此外旁邊多了一個 `productId` 這個就是你要修改的 id 用在 WHERE 語句供修改哪筆資料。
14+
15+
```js
16+
// article.module.js
17+
...略
18+
/* Article PUT 修改 */
19+
const modifyArticle = (insertValues, productId) => {
20+
return new Promise((resolve, reject) => {
21+
connectionPool.getConnection((connectionError, connection) => { // 資料庫連線
22+
if (connectionError) {
23+
reject(connectionError); // 若連線有問題回傳錯誤
24+
} else { // Article資料表修改指定id一筆資料
25+
connection.query('UPDATE Article SET ? WHERE article_id = ?', [insertValues, productId], (error, result) => {
26+
if (error) {
27+
console.error('SQL error: ', error);// 寫入資料庫有問題時回傳錯誤
28+
reject(error);
29+
} else if (result.affectedRows === 0) { // 寫入時發現無該筆資料
30+
resolve('請確認修改Id！');
31+
} else if (result.message.match('Changed: 1')) { // 寫入成功
32+
resolve('資料修改成功');
33+
} else {
34+
resolve('資料無異動');
35+
}
36+
connection.release();
37+
});
38+
}
39+
});
40+
});
41+
};
42+
...略
43+
```
44+
45+
#### article.controller.js
46+
這邊比較特別的是由於修改資料時要指定是哪一筆值組要修改所以勢必要有id，這邊使用 `req.params` 方式將網址上的 id 參數讀取下來(例如:http://127.0.0.1:3000/api/article/1)後面的1代表就是你要修改的id值。
47+
48+
```js
49+
// article.controller.js
50+
import articleModule from '../modules/article.module';
51+
...略
52+
/* Article PUT 修改 */
53+
const articlePut = (req, res) => {
54+
// 取得修改id
55+
const articleId = req.params.article_id;
56+
// 取得修改參數
57+
const insertValues = req.body;
58+
articleModule.modifyArticle(insertValues, articleId).then((result) => {
59+
res.send(result); // 回傳修改成功訊息
60+
}).catch((err) => { return res.send(err); }); // 失敗回傳錯誤訊息
61+
};
62+
...略
63+
```
64+
65+
#### article.route.js
66+
這支檔案就是要指定你的路徑，因為是修改所以使用 put 請求，有發現到賢面路徑跟 GET 與 POST 不同嗎？是這樣的由於修改資料要取得修改的id所以這邊在網址上要求 `:article_id` 加個冒號代表有個 `req.params` 功能。
67+
68+
```js
69+
// article.route.js
70+
import articleCtrl from '../controllers/article.controller';
71+
...略
72+
/** 修改 Article 值組 */
73+
router.route('/:article_id').put(articleCtrl.articlePut);
74+
...略
75+
```
76+
77+
#### PUT測試
78+
將程式碼 `yarn build` 再 `yarn start` 後，開啟Postman在網址列輸入 `http://127.0.0.1:3000/api/article/1` 並選擇 PUT 請求方式，接下來是要放入修改的內容，`Body > raw > 選擇 JSON(application/json)`，將所有要修改的資料寫成 JSON 格式在下面空白處如下圖，最後再點選 Send 送出，修改成功後會有成功的字串，此時代表你成功了修改資料庫的內容，若你輸入的id有誤下面訊息也會提供你錯誤的線索像是查無此id。
79+
80+
```json
81+
{
82+
"user_id": 1,
83+
"article_title": "Node.js教學",
84+
"article_tag": "API",
85+
"article_content": "修改了內容"
86+
}
87+
```
88+
89+
90+
## 刪除Article
91+
92+
#### article.module.js
93+
刪除作法也跟修改差不多也是要有傳入 id 名為 productId 的參數，使用 `DELETE` 刪除資料表 Article 內的某一筆值組。
94+
95+
```js
96+
// article.module.js
97+
...略
98+
/* Article DELETE 刪除 */
99+
const deleteArticle = (productId) => {
100+
return new Promise((resolve, reject) => {
101+
connectionPool.getConnection((connectionError, connection) => { // 資料庫連線
102+
if (connectionError) {
103+
reject(connectionError); // 若連線有問題回傳錯誤
104+
} else { // Article資料表刪除指定id一筆資料
105+
connection.query('DELETE FROM Article WHERE article_id = ?', productId, (error, result) => {
106+
if (error) {
107+
console.error('SQL error: ', error);// 資料庫存取有問題時回傳錯誤
108+
reject(error);
109+
} else if (result.affectedRows === 1) {
110+
resolve('刪除成功！');
111+
} else {
112+
resolve('刪除失敗！');
113+
}
114+
connection.release();
115+
});
116+
}
117+
});
118+
});
119+
};
120+
...略
121+
```
122+
123+
#### article.controller.js
124+
這邊主要是接收刪除的id利用 `req.params.article_id` 儲存到變數 `articleId` 中在丟入 module 內的 `deleteArticle` 刪除函式執行的帶回傳。
125+
126+
```js
127+
// article.controller.js
128+
import articleModule from '../modules/article.module';
129+
...略
130+
/* Article DELETE 刪除 */
131+
const articleDelete = (req, res) => {
132+
// 取得刪除id
133+
const articleId = req.params.article_id;
134+
articleModule.deleteArticle(articleId).then((result) => {
135+
res.send(result); // 回傳刪除成功訊息
136+
}).catch((err) => { return res.send(err); }); // 失敗回傳錯誤訊息
137+
};
138+
...略
139+
```
140+
141+
#### article.route.js
142+
加上刪除的路徑並使用 `delete` 請求方式。
143+
144+
```js
145+
import articleCtrl from '../controllers/article.controller';
146+
147+
...略
148+
router.route('/:article_id')
149+
.put(articleCtrl.articlePut) /** 修改 Article 值組 */
150+
.delete(articleCtrl.articleDelete); /** 刪除 Article 值組 */
151+
152+
export default router;
153+
```
154+
155+
#### 刪除測試
156+
將程式碼 `yarn build` 再 `yarn start` 後，開啟Postman在網址列輸入 `http://127.0.0.1:3000/api/article/1` 並選擇 DELETE 請求方式，完成後按下 Send 送出後即可發現有刪除成功訊息。

0 commit comments

Comments
 (0)