Jie Jing的部落格

Restful API 

 

Restful API 重點

他的意思: 代表狀態轉移 Restful 是概念原則 。需要遵守的原則 HTTP methods 的 Restful Routing HTTP control CRUD

1.GET 2.POST 3.PUT 4.PATCH 5.DELETE

可以把你製作 student project 給全世界使用 可以獲得數據 就是要把它變成 Restful API

檔名變成 Restful API 以下是修改過的 app.js 刪掉一些 用不到的連結

 

const express = require("express");

const app = express();

const ejs = require("ejs");

const mongoose = require("mongoose");

const bodyParser = require("body-parser");

const Student = require("./models/student"); // 連結到 student.js 運用他的模組

const methodOverride = require("method-override"); // 連結到 做資料修改要用的 一個模組

app.use(express.static("public"));

app.use(bodyParser.urlencoded({ extended: true })); // 幫助我們處理不同格式的請求資料 解析 JSON

app.use(methodOverride("_method")); // 把修改得模組寫進去他的使用連結 就可以做覆寫的動作

app.set("view engine", "ejs");

mongoose .connect("mongodb://127.0.0.1:27017/studentDB", { useNewUrlParser: true, useUnifiedTopology: true, }) .then(() => { console.log("Successfully connected to mongoDB."); }) .catch((e) => { console.log("Connection failed."); console.log(e); });

 

///////////////////////

 

// 做一個連結到 students 頁面 獲取 ejs 再來如果再以下 students 發生問題怎麼辦 用 try

app.get("/students", async (req, res) => { try { let data = await Student.find();

// 放進去資料會顯示這個首頁

res.send(data); // 我們要 send 他這個 data

} catch { res.send({ message: "Error with finding data." }); // 可以這樣寫

} });

///////////////////////

// 幫學生建立個人頁面

app.get("/students/:id", async (req, res) => {

let { id } = req.params;

try {

// 再來我們在 database 要找到 有這個 id 的學生

let data = await Student.findOne({ id }); // 回傳唯一的物件

// 處理隨便輸入回傳錯誤資料頁面的樣子

if (data !== null) {

// 在 views 裡面新增一個 studentPag.ejs

res.render("studentPage.ejs", { data });

// 如果找到 data 就來到 studentPag.ejs 做設定 標題為名字

} else { res.render("Cannot find this student. Please enter a valid id.");

// 沒有這個資料就會顯示

} } catch (e) { res.send("Error!!");

// 就算有上面這個 程式碼還是有留著的必要性 因為上面有錯 還是會跳到這個 Error!!

console.log(e);

}

//console.log(req.params); // 測試顯示可以拿到 :id

//res.send("hello"); // 測試顯示可以拿到 :id

});

 

///////////////////// /////////////////////

 

// 再來看能不能把 students.ejs 的頁面顯示出來 在 views 裡面創建 students.ejs

/////////////////////

// http://localhost:3000/students/insert 網址連到這就會出現設定的 tabel

// 連結運用到 studentInsert.ejs get 產生一個 html form 可以新增學生 post 會把 data 放到 mongoDB裡面 在檔案裏面創建列表

 

app.post("/students/insert", (req, res) => {

// 得知下面可以的話 可以變成這樣寫

// 靠 html form 可以新增資料的方式

let { id, name, age, merit, other } = req.body;

let newStudent = new Student({ id, name, age, scholarship: { merit, other }, });

newStudent .save() .then(() => { console.log("Student accepted.");

// 如果成功的話 就 render 到這個 accept.ejs 頁面

res.render("accept.ejs"); }) .catch((e) => { console.log("Student not accepted.");

console.log(e);

res.render("reject.ejs"); // 如果失敗的話 就 render 到這個 reject.ejs 頁面

});

//console.log(req.body); // 來看一下這個 form 回傳給我們的是甚麼 出現在命令提示自元

//res.send("thanks for posting."); // 這個成功他就會把網站輸入的資料傳入 { id: '100', name: 'jie jing', age: '25', merit: '1500', other: '0' } });

 

////////////////////////////// //////////////////////////////

// 寫一個學生可以修改資料的頁面

 

app.get("/students/edit/:id", async (req, res) => { let { id } = req.params; // 當有這個 id 的時候要把它拿來用 順帶創建 edit.ejs

try { let data = await Student.findOne({ id });

if (data !== null) {

res.render("edit.ejs", { data }); // 放入這個 data 的目的 是因為 edit.ejs 會需要使用他

} else { res.send("Cannot find student.");

} } catch { res.render("Error!");

} });

// 再來我們要給他一個 put request 要怎麼讓他得到 get post 要借助一個 npm 叫做 method override npm 去下載模組 網址: https://www.npmjs.com/package/method-override

// 再到 cmd npm install method-override 下載好後 網址會教你怎麼用

// 在網站打 findoneandupdate mongoose 去找這個 api 怎麼用 網址 https://mongoosejs.com/docs/api/model.html#Model.findOneAndUpdate()

app.put("/students/edit/:id", async (req, res) => {

let { id, name, age, merit, other } = req.body;

try {

let d = await Student.findOneAndUpdate( { id }, { id, name, age, scholarship: { merit, other } }, { new: true, runValidators: true, } );

res.redirect(/students/${id}); // 更改完重新導向這個頁面的 id redirect 用戶重定向到另一個 URL

} catch { res.render("reject.ejs"); // 導入一個 錯誤的話就顯示這個程式檔的頁面

} });

////////////////////////////////

 

//////////////////////////////

// 刪除資料頁面與方式 用 postman 的方式 先用 cmd 打開檔案 node app.js 到 postman 左邊有個 下拉式選單 選到 DELETE 輸入 localhost:3000/students/delete/100 然後 右邊按鈕 Send 然後下面會顯示成功 Deleted successfully.

// 使用以上方式 Send 就成功把上面的 ID 100 頁面 移除了

app.delete("/students/delete/:id", (req, res) => {

let { id } = req.params;

Student.deleteOne({ id }) .then((meg) => {

console.log(meg);

res.send("Deleted successfully.");

}) .catch((e) => { console.log(e);

res.send("Delete failed."); });

});

///////////////////////////////

// 再來有人亂打資料一通的話 設定為不能亂打一通

app.get("/*", (req, res) => {

res.status(404);

res.send("Not allowed.");

});

///////////////////////// ////////////////////////////

app.listen(3000, () => { console.log("Server is running on port 3000."); });

// localhost:3000 為網址

// 記得一個重點 如果 mongoDB 報錯沒有連結服務的話 請到 命令提示字元右鍵管理者身分 輸入代碼 net start MongoDB

///////////////////////////// ////////////////////////////// //////////////////////////////

再來打開 Postman 試試看能不能取得我要的資料 打開 cmd 去執行 這個 資料夾的 node app.js

再來就可以到這個 Postman 來看看我的資料 輸入 localhost:3000/students 然後 給他 send按鍵點下去 左邊下拉選單是 GET 喔 下面就會顯示資料 這樣就成功做出可以 get request 的 API

再來修改 app.js 程式碼 並測試修改 修改 app.post 的那個 在打開到 postman 運用 左邊下拉是選單要到 POST 然後 send 的網址為 localhost:3000/students 下面到 Body 來來下面點到 x-www-form-urlencoded 再來 裡面有 key(左) 跟 value(右) 以下輸入 會增加進去資料庫

id 106 name Luke Voit age 25 merit 1400 other 200

之後重跑一次 node app.js (cmd) 再來把這個 send 進去 要怎麼知道咧

在到下拉式 GET 然後右邊輸入網址 localhost:3000/students 然後 Send 下面就可以看到資料

循序漸進程式碼式陸續修改的

 

app.js

 

const express = require("express");

const app = express();

const ejs = require("ejs");

const mongoose = require("mongoose");

const bodyParser = require("body-parser");

const Student = require("./models/student"); // 連結到 student.js 運用他的模組

const methodOverride = require("method-override"); // 連結到 做資料修改要用的 一個模組

app.use(express.static("public"));

app.use(bodyParser.urlencoded({ extended: true })); // 幫助我們處理不同格式的請求資料 解析 JSON

app.use(methodOverride("_method")); // 把修改得模組寫進去他的使用連結 就可以做覆寫的動作

app.set("view engine", "ejs");

mongoose .connect("mongodb://127.0.0.1:27017/studentDB", { useNewUrlParser: true, useUnifiedTopology: true, }) .then(() => { console.log("Successfully connected to mongoDB."); }) .catch((e) => { console.log("Connection failed."); console.log(e); });

 

///////////////////////

 

// 做一個連結到 students 頁面 獲取 ejs 再來如果再以下 students 發生問題怎麼辦 用 try

app.get("/students", async (req, res) => {

try {

let data = await Student.find(); // 放進去資料會顯示這個首頁

res.send(data); // 我們要 send 他這個 data

} catch { res.send({ message: "Error with finding data." }); // 可以這樣寫

} });

 

///////////////////////

// 幫學生建立個人頁面

 

app.get("/students/:id", async (req, res) => {

let { id } = req.params;

try {

// 再來我們在 database 要找到 有這個 id 的學生

let data = await Student.findOne({ id }); // 回傳唯一的物件

if (data !== null) {

res.send(data); // 成功就會跑出 直接輸入這個 在 postman 裡面 就可以直接 send 打後面的 id 101 就會有所有資訊 例: localhost:3000/students/101

} else { res.status(404);

res.send({ message: "Cannot find data." }); // 失敗便會出現英文

} } catch (e) { res.send("Error!!"); // 就算有上面這個 程式碼還是有留著的必要性 因為上面有錯 還是會跳到這個 Error!!

console.log(e);

}

//console.log(req.params); // 測試顯示可以拿到 :id

//res.send("hello"); // 測試顯示可以拿到 :id

});

 

///////////////////// /////////////////////

 

// 連結運用到 studentInsert.ejs get 產生一個 html form 可以新增學生 post 會把 data 放到 mongoDB裡面 在檔案裏面創建列表

app.post("/students", (req, res) => {

// 得知下面可以的話 可以變成這樣寫

// 靠 html form 可以新增資料的方式

let { id, name, age, merit, other } = req.body;

let newStudent = new Student({ id, name, age, scholarship: { merit, other }, });

newStudent .save() .then(() => { res.send({ message: "Successfully post a new student." });

}) .catch((e) => { res.status(404);

// 回傳有問題 就會顯示 404 not found

res.send(e); // 如果有問題直接傳回去

});

//console.log(req.body); // 來看一下這個 form 回傳給我們的是甚麼 出現在命令提示自元

//res.send("thanks for posting."); // 這個成功他就會把網站輸入的資料傳入 { id: '100', name: 'jie jing', age: '25', merit: '1500', other: '0' }

});

 

////////////////////////////// //////////////////////////////

// 寫一個學生可以修改資料的頁面

 

app.get("/students/edit/:id", async (req, res) => {

let { id } = req.params; // 當有這個 id 的時候要把它拿來用 順帶創建 edit.ejs

try { let data = await Student.findOne({ id });

if (data !== null) {

res.render("edit.ejs", { data }); // 放入這個 data 的目的 是因為 edit.ejs 會需要使用他

} else { res.send("Cannot find student.");

} } catch { res.render("Error!"); }

});

// 再來我們要給他一個 put request 要怎麼讓他得到 get post 要借助一個 npm 叫做 method override npm 去下載模組 網址: https://www.npmjs.com/package/method-override

// 再到 cmd npm install method-override 下載好後 網址會教你怎麼用

// 在網站打 findoneandupdate mongoose 去找這個 api 怎麼用 網址 https://mongoosejs.com/docs/api/model.html#Model.findOneAndUpdate()

 

app.put("/students/edit/:id", async (req, res) => {

let { id, name, age, merit, other } = req.body;

try {

let d = await Student.findOneAndUpdate( { id }, { id, name, age, scholarship: { merit, other } }, { new: true, runValidators: true, } );

res.redirect(/students/${id}); // 更改完重新導向這個頁面的 id redirect 用戶重定向到另一個 URL

} catch { res.render("reject.ejs"); // 導入一個 錯誤的話就顯示這個程式檔的頁面

} });

 

////////////////////////////////

 

////////////////////////////// // 刪除資料頁面與方式 用 postman 的方式 先用 cmd 打開檔案 node app.js 到 postman 左邊有個 下拉式選單 選到 DELETE 輸入 localhost:3000/students/delete/100 然後 右邊按鈕 Send 然後下面會顯示成功 Deleted successfully.

// 使用以上方式 Send 就成功把上面的 ID 100 頁面 移除了

app.delete("/students/delete/:id", (req, res) => {

let { id } = req.params;

Student.deleteOne({ id }) .then((meg) => {

console.log(meg);

res.send("Deleted successfully.");

}) .catch((e) => {

console.log(e);

res.send("Delete failed.");

});

});

/////////////////////////////// // 再來有人亂打資料一通的話 設定為不能亂打一通

app.get("/*", (req, res) => {

res.status(404);

res.send("Not allowed.");

});

///////////////////////// ////////////////////////////

app.listen(3000, () => { console.log("Server is running on port 3000.");

});

// localhost:3000 為網址 // 記得一個重點 如果 mongoDB 報錯沒有連結服務的話 請到 命令提示字元右鍵管理者身分 輸入代碼 net start MongoDB

/////////////////////////////////// ////////////////////////////////// ///////////////////////////////////

再來 我們知道 Restful API 一定要有 CRUD 的功能

1. Create http verds post
2. Read http verds get
3. Update http verds put/patch
4. Delete http verds delete

接下來依樣用更改 app.js 代碼 可以用 put/patch 來更新我的資料的更改 以下代碼打完 可以到 postman 這邊用資料 下拉式選單為 put 右邊網址為 localhost:3000/students/107 後面為她的 id 依樣進去 Body 再來 x-www-form-urlencoded 以下有 key value 可以用來更改我們的值 以下 輸入

KET VALUE age 24 name json id 107 merit 1800 other 1000

然後按下 send 按鈕 更改他的年齡 原本為 28 變 24 年齡就改變了

const express = require("express");

const app = express();

const ejs = require("ejs");

const mongoose = require("mongoose");

const bodyParser = require("body-parser");

const Student = require("./models/student"); // 連結到 student.js 運用他的模組

const methodOverride = require("method-override"); // 連結到 做資料修改要用的 一個模組

app.use(express.static("public"));

app.use(bodyParser.urlencoded({ extended: true })); // 幫助我們處理不同格式的請求資料 解析 JSON

app.use(methodOverride("_method")); // 把修改得模組寫進去他的使用連結 就可以做覆寫的動作

app.set("view engine", "ejs");

mongoose .connect("mongodb://127.0.0.1:27017/studentDB", { useNewUrlParser: true, useUnifiedTopology: true, }) .then(() => { console.log("Successfully connected to mongoDB."); }) .catch((e) => { console.log("Connection failed."); console.log(e); });

 

///////////////////////

 

// 做一個連結到 students 頁面 獲取 ejs 再來如果再以下 students 發生問題怎麼辦 用 try

app.get("/students", async (req, res) => {

try { let data = await Student.find(); // 放進去資料會顯示這個首頁

res.send(data); // 我們要 send 他這個 data

} catch { res.send({ message: "Error with finding data." }); // 可以這樣寫

} });

///////////////////////

// 幫學生建立個人頁面

app.get("/students/:id", async (req, res) => {

let { id } = req.params;

try {

// 再來我們在 database 要找到 有這個 id 的學生

let data = await Student.findOne({ id });

// 回傳唯一的物件

if (data !== null) {

res.send(data); // 成功就會跑出 直接輸入這個 在 postman 裡面 就可以直接 send 打後面的 id 101 就會有所有資訊 例: localhost:3000/students/101

} else {

res.status(404);

res.send({ message: "Cannot find data." }); // 失敗便會出現英文

} } catch (e) { res.send("Error!!"); // 就算有上面這個 程式碼還是有留著的必要性 因為上面有錯 還是會跳到這個 Error!!

console.log(e);

}

//console.log(req.params); // 測試顯示可以拿到 :id

//res.send("hello"); // 測試顯示可以拿到 :id

});

 

///////////////////// /////////////////////

 

// 連結運用到 studentInsert.ejs get 產生一個 html form 可以新增學生 post 會把 data 放到 mongoDB裡面 在檔案裏面創建列表

app.post("/students", (req, res) => {

// 得知下面可以的話 可以變成這樣寫

// 靠 html form 可以新增資料的方式

let { id, name, age, merit, other } = req.body;

let newStudent = new Student({ id, name, age, scholarship: { merit, other }, });

newStudent .save() .then(() => { res.send({ message: "Successfully post a new student." });

}) .catch((e) => {

res.status(404); // 回傳有問題 就會顯示 404 not found

res.send(e); // 如果有問題直接傳回去

});

//console.log(req.body); // 來看一下這個 form 回傳給我們的是甚麼 出現在命令提示自元

//res.send("thanks for posting."); // 這個成功他就會把網站輸入的資料傳入 { id: '100', name: 'jie jing', age: '25', merit: '1500', other: '0' }

});

 

////////////////////////////// //////////////////////////////

 

// 寫一個學生可以修改資料的頁面 // 再來我們要給他一個 put request 要怎麼讓他得到 get post 要借助一個 npm 叫做 method override npm 去下載模組 網址: https://www.npmjs.com/package/method-override // 再到 cmd npm install method-override 下載好後 網址會教你怎麼用 // 在網站打 findoneandupdate mongoose 去找這個 api 怎麼用 網址 https://mongoosejs.com/docs/api/model.html#Model.findOneAndUpdate()

app.put("/students/:id", async (req, res) => {

let { id, name, age, merit, other } = req.body;

try {

let d = await Student.findOneAndUpdate( { id }, { id, name, age, scholarship: { merit, other } }, { new: true, runValidators: true, } );

// 我們要回傳一個訊息給使用者

res.send("Successfully updated the data.");

} catch { res.status(404);

res.send("Error with updating."); // 有問題的訊息 一個重點 res.send 不能用到兩個 不然會報錯

}

});

////////////////////////////////

 

////////////////////////////// // 刪除資料頁面與方式 用 postman 的方式 先用 cmd 打開檔案 node app.js 到 postman 左邊有個 下拉式選單 選到 DELETE 輸入 localhost:3000/students/delete/100 然後 右邊按鈕 Send 然後下面會顯示成功 Deleted successfully.

// 使用以上方式 Send 就成功把上面的 ID 100 頁面 移除了

app.delete("/students/delete/:id", (req, res) => {

let { id } = req.params;

Student.deleteOne({ id }) .then((meg) => {

console.log(meg);

res.send("Deleted successfully.");

}) .catch((e) => {

console.log(e);

res.send("Delete failed.");

});

});

 

/////////////////////////////// // 再來有人亂打資料一通的話 設定為不能亂打一通

 

app.get("/*", (req, res) => { res.status(404); res.send("Not allowed."); });

 

///////////////////////// ////////////////////////////

 

app.listen(3000, () => { console.log("Server is running on port 3000."); });

 

// localhost:3000 為網址 // 記得一個重點 如果 mongoDB 報錯沒有連結服務的話 請到 命令提示字元右鍵管理者身分 輸入代碼 net start MongoDB

 

///////////////////////// //////////////////////// //////////////////////////

 

再來一樣 修改 app.js 程式碼 關於 patch 作用就是可以單獨想更改一些東西然後送過去

 

const express = require("express");

const app = express();

const ejs = require("ejs");

const mongoose = require("mongoose");

const bodyParser = require("body-parser");

const Student = require("./models/student"); // 連結到 student.js 運用他的模組

const methodOverride = require("method-override"); // 連結到 做資料修改要用的 一個模組

app.use(express.static("public"));

app.use(bodyParser.urlencoded({ extended: true })); // 幫助我們處理不同格式的請求資料 解析 JSON

app.use(methodOverride("_method")); // 把修改得模組寫進去他的使用連結 就可以做覆寫的動作

app.set("view engine", "ejs");

mongoose .connect("mongodb://127.0.0.1:27017/studentDB", { useNewUrlParser: true, useUnifiedTopology: true, }) .then(() => { console.log("Successfully connected to mongoDB."); }) .catch((e) => { console.log("Connection failed."); console.log(e); });

 

///////////////////////

 

// 做一個連結到 students 頁面 獲取 ejs 再來如果再以下 students 發生問題怎麼辦 用 try

app.get("/students", async (req, res) => {

try {

let data = await Student.find(); // 放進去資料會顯示這個首頁

res.send(data); // 我們要 send 他這個 data

} catch {

res.send({ message: "Error with finding data." }); // 可以這樣寫

}

});

 

///////////////////////

// 幫學生建立個人頁面

 

app.get("/students/:id", async (req, res) => {

let { id } = req.params;

try {

// 再來我們在 database 要找到 有這個 id 的學生

let data = await Student.findOne({ id });

// 回傳唯一的物件

if (data !== null) {

res.send(data); // 成功就會跑出 直接輸入這個 在 postman 裡面 就可以直接 send 打後面的 id 101 就會有所有資訊 例: localhost:3000/students/101

} else {

res.status(404);

res.send({ message: "Cannot find data." }); // 失敗便會出現英文

} } catch (e) { res.send("Error!!"); // 就算有上面這個 程式碼還是有留著的必要性 因為上面有錯 還是會跳到這個 Error!!

console.log(e);

}

//console.log(req.params); // 測試顯示可以拿到 :id

//res.send("hello"); // 測試顯示可以拿到 :id

});

 

///////////////////// /////////////////////

 

// 連結運用到 studentInsert.ejs get 產生一個 html form 可以新增學生 post 會把 data 放到 mongoDB裡面 在檔案裏面創建列表

app.post("/students", (req, res) => {

// 得知下面可以的話 可以變成這樣寫

// 靠 html form 可以新增資料的方式

let { id, name, age, merit, other } = req.body;

let newStudent = new Student({ id, name, age, scholarship: { merit, other }, });

newStudent .save() .then(() => { res.send({ message: "Successfully post a new student." });

}) .catch((e) => {

res.status(404); // 回傳有問題 就會顯示 404 not found

res.send(e); // 如果有問題直接傳回去

});

//console.log(req.body); // 來看一下這個 form 回傳給我們的是甚麼 出現在命令提示自元

//res.send("thanks for posting."); // 這個成功他就會把網站輸入的資料傳入 { id: '100', name: 'jie jing', age: '25', merit: '1500', other: '0' }

});

 

////////////////////////////// //////////////////////////////

 

// 寫一個學生可以修改資料的頁面 // 再來我們要給他一個 put request 要怎麼讓他得到 get post 要借助一個 npm 叫做 method override npm 去下載模組 網址: https://www.npmjs.com/package/method-override // 再到 cmd npm install method-override 下載好後 網址會教你怎麼用 // 在網站打 findoneandupdate mongoose 去找這個 api 怎麼用 網址 https://mongoosejs.com/docs/api/model.html#Model.findOneAndUpdate()

 

app.put("/students/:id", async (req, res) => {

let { id, name, age, merit, other } = req.body;

try {

let d = await Student.findOneAndUpdate( { id }, { id, name, age, scholarship: { merit, other } }, { new: true, runValidators: true, overwrite: true,

// 就是寫新的資料要把舊的資料覆蓋掉

} );

// 我們要回傳一個訊息給使用者

res.send("Successfully updated the data.");

} catch (e) {

res.status(404);

res.send(e); // 有問題的訊息 一個重點 res.send 不能用到兩個 不然會報錯

} });

 

////////////////////////////////

 

// 以下 沒辦法獲得資訊的解決方式 加入一個 class

 

class newData { constructor() {}

// 空白的 裡面什麼都沒有

// 他有一個屬性叫 setProperty 裡面有兩個 一個 key 一個 value

setProperty(key, value) { if (key !== "merit" && key !== "other") { this[key] = value; } else { this[scholarship.${key}] = value; } } }

// 作用就是可以單獨想更改一些東西然後送過去

// patch 用法 順序 打開 postman 左邊下拉式選單 PATCH 一樣到 Body 再來 x-www-form-urlencoded 右邊網址 為 localhost:3000/students/107 最後 107 為 id

// KEY 跟 VALUE 的設定 age 27 merit 2500

app.patch("/students/:id", async (req, res) => {

// 先從 url 網址先拿到 id

let { id } = req.params; // 再來做一個物件出來 連結上面的 newData

let newObject = new newData();

for (let property in req.body) { newObject.setProperty(property, req.body[property]); // 功能可以導入 req.body 的 [property] 也就是說把 let { name, age, merit, other } = req.body; 這個弄進來 }

// 我們有個個 for 迴圈 就可以設定希望變成的樣子 以下 console.log 使用

console.log(newObject);

try {

let d = await Student.findOneAndUpdate( { id },

// req.body 沒辦法獲得

// scholarship.merit: 2500 這個資訊 因為只填入 age 跟 merit

// 所以裡面放入 newObject 原本是長 { id, name, age, scholarship: {merit, other}},

// overwrite: true 這邊就不能寫 因為會全部覆蓋掉 就不是 patch request 了 newObject, { new: true, runValidators: true, } );

// 為了保險起見 我們在這邊設一個可以看改過的檔案

console.log(d);

// 我們要回傳一個訊息給使用者

res.send("Successfully updated the data.");

} catch (e) { res.status(404);

res.send(e);

// 有問題的訊息 一個重點 res.send 不能用到兩個 不然會報錯

} });

 

//////////////////////////////

// 刪除資料頁面與方式 用 postman 的方式 先用 cmd 打開檔案 node app.js 到 postman 左邊有個 下拉式選單 選到 DELETE 輸入 localhost:3000/students/delete/100 然後 右邊按鈕 Send 然後下面會顯示成功 Deleted successfully.

// 使用以上方式 Send 就成功把上面的 ID 100 頁面 移除了

 

app.delete("/students/delete/:id", (req, res) => {

let { id } = req.params;

Student.deleteOne({ id }) .then((meg) => {

console.log(meg);

res.send("Deleted successfully.");

}) .catch((e) => {

console.log(e);

res.send("Delete failed.");

});

});

 

///////////////////////////////

// 再來有人亂打資料一通的話 設定為不能亂打一通

 

app.get("/*", (req, res) => {

res.status(404);

res.send("Not allowed.");

});

 
///////////////////////// /////
/////////////////////// 

 

app.listen(3000, () => { console.log("Server is running on port 3000.");

});

 

// localhost:3000 為網址 // 記得一個重點 如果 mongoDB 報錯沒有連結服務的話

請到 命令提示字元右鍵管理者身分 輸入代碼 net start MongoDB

 

/////////////////////////////////// ///////////////////////////////////// ////////////////////////////////////

 

再來一樣修改 app.js 程式碼 運用 Delete 打開 postman 下拉式選單為 左邊 DELETE 右邊為網址 網址為 localhost:3000/students/delete/107 這樣 send 就可以把 107id 的刪除了

再來還有一個刪除全部的

// 到 postman 那邊 下拉式選單一樣是 左邊 DELETE 右邊為網址 localhost:3000/students/delete 然後右邊 send 就會把全部資料都刪除了

 

const express = require("express");

const app = express();

const ejs = require("ejs");

const mongoose = require("mongoose");

const bodyParser = require("body-parser");

const Student = require("./models/student"); // 連結到 student.js 運用他的模組

const methodOverride = require("method-override"); // 連結到 做資料修改要用的 一個模組

app.use(express.static("public"));

app.use(bodyParser.urlencoded({ extended: true })); // 幫助我們處理不同格式的請求資料 解析 JSON

app.use(methodOverride("_method")); // 把修改得模組寫進去他的使用連結 就可以做覆寫的動作

app.set("view engine", "ejs");

mongoose .connect("mongodb://127.0.0.1:27017/studentDB", { useNewUrlParser: true, useUnifiedTopology: true, }) .then(() => { console.log("Successfully connected to mongoDB."); }) .catch((e) => { console.log("Connection failed."); console.log(e); });

 

///////////////////////

// 做一個連結到 students 頁面 獲取 ejs 再來如果再以下 students 發生問題怎麼辦 用 try

 

app.get("/students", async (req, res) => {

try { let data = await Student.find(); // 放進去資料會顯示這個首頁

res.send(data); // 我們要 send 他這個 data

} catch { res.send({ message: "Error with finding data." });

// 可以這樣寫

} });

 

///////////////////////

 

// 幫學生建立個人頁面

 

app.get("/students/:id", async (req, res) => {

let { id } = req.params;

try {

// 再來我們在 database 要找到 有這個 id 的學生

let data = await Student.findOne({ id }); // 回傳唯一的物件

if (data !== null) {

res.send(data); // 成功就會跑出 直接輸入這個 在 postman 裡面 就可以直接 send 打後面的 id 101 就會有所有資訊 例: localhost:3000/students/101

} else {

res.status(404);

res.send({ message: "Cannot find data." }); // 失敗便會出現英文

} } catch (e) { res.send("Error!!"); // 就算有上面這個 程式碼還是有留著的必要性 因為上面有錯 還是會跳到這個 Error!!

console.log(e);

}

//console.log(req.params); // 測試顯示可以拿到 :id

//res.send("hello"); // 測試顯示可以拿到 :id

});

 

///////////////////// /////////////////////

 

// 連結運用到 studentInsert.ejs get 產生一個 html form 可以新增學生 post 會把 data 放到 mongoDB裡面 在檔案裏面創建列表

app.post("/students", (req, res) => {

// 得知下面可以的話 可以變成這樣寫

// 靠 html form 可以新增資料的方式

let { id, name, age, merit, other } = req.body;

let newStudent = new Student({ id, name, age, scholarship: { merit, other }, });

newStudent .save() .then(() => {

res.send({ message: "Successfully post a new student." });

}) .catch((e) => {

res.status(404); // 回傳有問題 就會顯示 404 not found

res.send(e); // 如果有問題直接傳回去

});

//console.log(req.body); // 來看一下這個 form 回傳給我們的是甚麼 出現在命令提示字元

//res.send("thanks for posting."); // 這個成功他就會把網站輸入的資料傳入 { id: '100', name: 'jie jing', age: '25', merit: '1500', other: '0' }

});

 

////////////////////////////// //////////////////////////////

 

// 寫一個學生可以修改資料的頁面

// 再來我們要給他一個 put request 要怎麼讓他得到 get post 要借助一個 npm 叫做 method override npm 去下載模組 網址: https://www.npmjs.com/package/method-override

// 再到 cmd npm install method-override 下載好後 網址會教你怎麼用

// 在網站打 findoneandupdate mongoose 去找這個 api 怎麼用 網址 https://mongoosejs.com/docs/api/model.html#Model.findOneAndUpdate()

 

app.put("/students/:id", async (req, res) => {

let { id, name, age, merit, other } = req.body;

try {

let d = await Student.findOneAndUpdate( { id }, { id, name, age, scholarship: { merit, other } }, { new: true, runValidators: true, overwrite: true,

// 就是寫新的資料要把舊的資料覆蓋掉

} );

// 我們要回傳一個訊息給使用者

res.send("Successfully updated the data.");

} catch (e) {

res.status(404);

res.send(e); // 有問題的訊息 一個重點 res.send 不能用到兩個 不然會報錯

} });

 

////////////////////////////////

 

// 以下 沒辦法獲得資訊的解決方式 加入一個 class

 

class newData { constructor() {}

// 空白的 裡面什麼都沒有

// 他有一個屬性叫 setProperty 裡面有兩個 一個 key 一個 value

setProperty(key, value) { if (key !== "merit" && key !== "other") { this[key] = value; } else { this[scholarship.${key}] = value; } } }

// 作用就是可以單獨想更改一些東西然後送過去

// patch 用法 順序 打開 postman 左邊下拉式選單 PATCH 一樣到 Body 再來 x-www-form-urlencoded 右邊網址 為 localhost:3000/students/107 最後 107 為 id

// KEY 跟 VALUE 的設定 age 27 merit 2500

app.patch("/students/:id", async (req, res) => {

// 先從 url 網址先拿到 id

let { id } = req.params; // 再來做一個物件出來 連結上面的 newData

let newObject = new newData();

for (let property in req.body) { newObject.setProperty(property, req.body[property]); // 功能可以導入 req.body 的 [property] 也就是說把 let { name, age, merit, other } = req.body; 這個弄進來

}

// 我們有個個 for 迴圈 就可以設定希望變成的樣子 以下 console.log 使用

console.log(newObject);

try {

let d = await Student.findOneAndUpdate(

{ id },

// req.body 沒辦法獲得

// scholarship.merit: 2500 這個資訊 因為只填入 age 跟 merit

// 所以裡面放入 newObject 原本是長 { id, name, age, scholarship: {merit, other}},

// overwrite: true 這邊就不能寫 因為會全部覆蓋掉 就不是 patch request 了

newObject, { new: true, runValidators: true, } ); // 為了保險起見 我們在這邊設一個可以看改過的檔案

console.log(d); // 我們要回傳一個訊息給使用者

res.send("Successfully updated the data.");

} catch (e) {

res.status(404);

res.send(e);

// 有問題的訊息 一個重點 res.send 不能用到兩個 不然會報錯

} });

 

////////////////////////////// // 刪除資料頁面與方式 用 postman 的方式 先用 cmd 打開檔案 node app.js 到 postman 左邊有個 下拉式選單 選到 DELETE 輸入 localhost:3000/students/delete/100 然後 右邊按鈕 Send 然後下面會顯示成功 Deleted successfully.

// 使用以上方式 Send 就成功把上面的 ID 100 頁面 移除了

app.delete("/students/delete/:id", (req, res) => {

let { id } = req.params;

Student.deleteOne({ id }) .then((meg) => {

console.log(meg);

res.send("Deleted successfully.");

}) .catch((e) => {

console.log(e);

res.send("Delete failed.");

});

});

 

///////////// /////////////

// 刪除資料庫全部資料

// 到 postman 那邊 下拉式選單一樣是 左邊 DELETE 右邊為網址 localhost:3000/students/delete 然後右邊 send 就會把全部資料都刪除了

 

app.delete("/students/delete", (req, res) => {

Student.deleteMany({}) .then((meg) => {

console.log(meg);

res.send("Deleted all data successfully.");

}) .catch((e) => {

console.log(e);

res.send("Delete failed.");

});

});

 

///////////////////

 

/////////////////////////////// // 再來有人亂打資料一通的話 設定為不能亂打一通

 

app.get("/*", (req, res) => { res.status(404); res.send("Not allowed."); });

 

///////////////////////// ////////////////////////////

 

app.listen(3000, () => { console.log("Server is running on port 3000."); });

 

// localhost:3000 為網址 // 記得一個重點 如果 mongoDB 報錯沒有連結服務的話 請到 命令提示字元右鍵管理者身分 輸入代碼 net start MongoDB

---

 

分別的程式碼 

 

(app.js)

 

const express = require("express");
const app = express();
const ejs = require("ejs");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const Student = require("./models/student"); // 連結到 student.js 運用他的模組
const methodOverride = require("method-override"); // 連結到 做資料修改要用的 一個模組

app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: true })); // 幫助我們處理不同格式的請求資料 解析 JSON
app.use(methodOverride("_method")); // 把修改得模組寫進去他的使用連結 就可以做覆寫的動作
app.set("view engine", "ejs");

mongoose
  .connect("mongodb://127.0.0.1:27017/studentDB", {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log("Successfully connected to mongoDB.");
  })
  .catch((e) => {
    console.log("Connection failed.");
    console.log(e);
  });

///////////////////////

// 做一個連結到 students 頁面 獲取 ejs 再來如果再以下 students 發生問題怎麼辦 用 try
app.get("/students", async (req, res) => {
  try {
    let data = await Student.find(); // 放進去資料會顯示這個首頁
    res.send(data); // 我們要 send 他這個 data
  } catch {
    res.send({ message: "Error with finding data." }); // 可以這樣寫
  }
});

///////////////////////

// 幫學生建立個人頁面

app.get("/students/:id", async (req, res) => {
  let { id } = req.params;
  try {
    // 再來我們在 database 要找到 有這個 id 的學生
    let data = await Student.findOne({ id }); // 回傳唯一的物件
    if (data !== null) {
      res.send(data); // 成功就會跑出 直接輸入這個 在 postman 裡面 就可以直接 send 打後面的 id 101 就會有所有資訊  例: localhost:3000/students/101
    } else {
      res.status(404);
      res.send({ message: "Cannot find data." }); // 失敗便會出現英文
    }
  } catch (e) {
    res.send("Error!!"); // 就算有上面這個 程式碼還是有留著的必要性 因為上面有錯 還是會跳到這個 Error!!
    console.log(e);
  }

  //console.log(req.params); // 測試顯示可以拿到 :id
  //res.send("hello");  // 測試顯示可以拿到 :id
});

/////////////////////
/////////////////////

// 連結運用到  studentInsert.ejs get 產生一個 html form 可以新增學生 post 會把 data 放到 mongoDB裡面 在檔案裏面創建列表
app.post("/students", (req, res) => {
  // 得知下面可以的話 可以變成這樣寫
  // 靠 html form 可以新增資料的方式
  let { id, name, age, merit, other } = req.body;
  let newStudent = new Student({
    id,
    name,
    age,
    scholarship: { merit, other },
  });
  newStudent
    .save()
    .then(() => {
      res.send({ message: "Successfully post a new student." });
    })
    .catch((e) => {
      res.status(404); // 回傳有問題 就會顯示 404 not found
      res.send(e); // 如果有問題直接傳回去
    });
  //console.log(req.body); // 來看一下這個 form 回傳給我們的是甚麼 出現在命令提示自元
  //res.send("thanks for posting."); // 這個成功他就會把網站輸入的資料傳入  { id: '100', name: 'jie jing', age: '25', merit: '1500', other: '0' }
});

//////////////////////////////
//////////////////////////////

// 寫一個學生可以修改資料的頁面
// 再來我們要給他一個 put request 要怎麼讓他得到 get post 要借助一個 npm 叫做  method override npm 去下載模組 網址: https://www.npmjs.com/package/method-override
// 再到 cmd npm install method-override 下載好後 網址會教你怎麼用
// 在網站打 findoneandupdate mongoose 去找這個 api 怎麼用 網址 https://mongoosejs.com/docs/api/model.html#Model.findOneAndUpdate()

app.put("/students/:id", async (req, res) => {
  let { id, name, age, merit, other } = req.body;
  try {
    let d = await Student.findOneAndUpdate(
      { id },
      { id, name, age, scholarship: { merit, other } },
      {
        new: true,
        runValidators: true,
        overwrite: true, // 就是寫新的資料要把舊的資料覆蓋掉
      }
    );
    // 我們要回傳一個訊息給使用者
    res.send("Successfully updated the data.");
  } catch (e) {
    res.status(404);
    res.send(e); // 有問題的訊息 一個重點 res.send 不能用到兩個 不然會報錯
  }
});

////////////////////////////////

// 以下 沒辦法獲得資訊的解決方式 加入一個 class

class newData {
  constructor() {} // 空白的 裡面什麼都沒有
  // 他有一個屬性叫  setProperty 裡面有兩個  一個 key 一個 value
  setProperty(key, value) {
    if (key !== "merit" && key !== "other") {
      this[key] = value;
    } else {
      this[`scholarship.${key}`] = value;
    }
  }
}

// 作用就是可以單獨想更改一些東西然後送過去
// patch 用法 順序 打開 postman 左邊下拉式選單 PATCH 一樣到 Body 再來 x-www-form-urlencoded 右邊網址 為 localhost:3000/students/107 最後 107 為 id
// KEY 跟 VALUE 的設定 age 27   merit 2500
app.patch("/students/:id", async (req, res) => {
  // 先從 url 網址先拿到 id
  let { id } = req.params;
  // 再來做一個物件出來 連結上面的 newData
  let newObject = new newData();
  for (let property in req.body) {
    newObject.setProperty(property, req.body[property]); // 功能可以導入  req.body 的 [property] 也就是說把   let { name, age, merit, other } = req.body; 這個弄進來
  }
  // 我們有個個 for 迴圈 就可以設定希望變成的樣子  以下 console.log 使用
  console.log(newObject);
  try {
    let d = await Student.findOneAndUpdate(
      { id },
      // req.body 沒辦法獲得 // scholarship.merit: 2500 這個資訊 因為只填入 age 跟 merit
      // 所以裡面放入  newObject 原本是長  { id, name, age, scholarship: {merit, other}},
      // overwrite: true 這邊就不能寫 因為會全部覆蓋掉 就不是 patch request 了
      newObject,
      {
        new: true,
        runValidators: true,
      }
    );
    // 為了保險起見 我們在這邊設一個可以看改過的檔案
    console.log(d);
    // 我們要回傳一個訊息給使用者
    res.send("Successfully updated the data.");
  } catch (e) {
    res.status(404);
    res.send(e); // 有問題的訊息 一個重點 res.send 不能用到兩個 不然會報錯
  }
});

//////////////////////////////
// 刪除資料頁面與方式 用 postman 的方式 先用 cmd 打開檔案 node app.js 到 postman 左邊有個 下拉式選單 選到 DELETE 輸入 localhost:3000/students/delete/100 然後 右邊按鈕 Send 然後下面會顯示成功 Deleted successfully.
// 使用以上方式 Send 就成功把上面的 ID 100 頁面 移除了
app.delete("/students/delete/:id", (req, res) => {
  let { id } = req.params;
  Student.deleteOne({ id })
    .then((meg) => {
      console.log(meg);
      res.send("Deleted successfully.");
    })
    .catch((e) => {
      console.log(e);
      res.send("Delete failed.");
    });
});

/////////////
/////////////
// 刪除資料庫全部資料
// 到 postman 那邊 下拉式選單一樣是 左邊 DELETE 右邊為網址 localhost:3000/students/delete 然後右邊 send 就會把全部資料都刪除了

app.delete("/students/delete", (req, res) => {
  Student.deleteMany({})
    .then((meg) => {
      console.log(meg);
      res.send("Deleted all data successfully.");
    })
    .catch((e) => {
      console.log(e);
      res.send("Delete failed.");
    });
});

///////////////////

///////////////////////////////
// 再來有人亂打資料一通的話 設定為不能亂打一通

app.get("/*", (req, res) => {
  res.status(404);
  res.send("Not allowed.");
});

/////////////////////////
////////////////////////////

app.listen(3000, () => {
  console.log("Server is running on port 3000.");
});

// localhost:3000 為網址
// 記得一個重點 如果 mongoDB 報錯沒有連結服務的話 請到 命令提示字元右鍵管理者身分 輸入代碼 net start MongoDB

---

 

(/models/student.js)

 

const mongoose = require("mongoose");

const studentSchema = new mongoose.Schema({
  id: {
    type: Number,
    require: true,
  },
  name: {
    type: String,
    require: true,
  },
  age: {
    type: Number,
    default: 18,
    max: [80, "Too old in this school"],
  },
  scholarship: {
    merit: {
      type: Number,
      min: 0,
      max: [5000, "Too much merit scholarship"],
    },
    other: {
      type: Number,
      min: 0,
    },
  },
});

const Student = mongoose.model("Student", studentSchema);

module.exports = Student; // exports 唯一的物件

// 再回到 app.js 連結這個物件
// const Student = require("./models/student");
// 以上程式碼為連結方式

---

 

(/views/accept.ejs)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Thanks for posting.</h1>
    <h1>Data has been saved.</h1>
    <!-- 把他導回所有學生的一個頁面 -->
    <a href="/students">Go back to students page.</a>
</html>

---

 

 

Restful API 重點(/views/edit.ejs)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 在這邊運用 edit.ejs 的 data 加入 value  -->
    <form action="/students/edit/<%= data.id %>?_method=PUT" method="POST"> <!-- 加入 app.js 裡面的 "/students/edit/:id" 但是後面 id 要改掉  ?_method=PUT put request 的運用方式-->
        <label for="id">ID:</label>
        <input type="number" id="id" name="id" value="<%= data.id %>" />
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"  value="<%= data.name %>" />
        <label for="age">Age:</label>
        <input type="number" id="age" name="age"  value="<%= data.age %>" />
        <label for="merit">Merit:</label>
        <input type="number" id="merit" name="merit"  value="<%= data.scholarship.merit %>"/>
        <label for="other">Other:</label>
        <input type="number" id="other" name="other"  value="<%= data.scholarship.other %>"/>
        <button>Submit</button>
    </form> 
</body>
</html>

---

 

(/views/reject.ejs)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Error!!</h1>
    <h1>Data has not been saved.</h1>
    <!-- 把他導回所有學生的一個頁面 -->
    <a href="/students">Go back to students page.</a>
</body>
</html>

---

 

(/views/studentInsert.ejs)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add New Student</title>
</head>
<body>
    <!-- 把 app.js 的 app.post("students/insert", (req, res) => {}); 放過來  -->
    <!-- 裡面就是一個 html form 然後這個網站要弄到哪裡 再回到 app.js 設定 post 連結 後面記得放大寫 POST-->
    <form action="/students/insert" method="POST">
        <label for="id">ID:</label>
        <input type="number" id="id" name="id" />
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" />
        <label for="age">Age:</label>
        <input type="number" id="age" name="age" />
        <label for="merit">Merit:</label>
        <input type="number" id="merit" name="merit" />
        <label for="other">Other:</label>
        <input type="number" id="other" name="other" />
        <button>Submit</button>
    </form> 
</body>
</html>

---

 

(/views/studentPage.ejs)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= data.name %>></title> <!-- 學生的名字 -->
</head>
<body>
    <!-- 學生的資訊 把它做成一個表格  -->
    <table>
        <tr>
            <td>Student ID</td>
            <td><%= data.id %></td>
        </tr>
        <tr>
            <td>Fullname</td>
            <td><%= data.name %></td>
        </tr>
        <tr>
            <td>Age</td>
            <td><%= data.age %></td>
        </tr>
        <tr>
            <td>Merit Scholarship</td>
            <td><%= data.scholarship.merit %></td>
        </tr>
        <tr>
            <td>Other Scholarship</td>
            <td><%= data.scholarship.other %></td>
        </tr>
        <tr>
            <td>Total Scholarship</td>
            <td><%= data.scholarship.merit + data.scholarship.other %></td>
        </tr>
    </table>
    <!-- 再回到這個頁面的連結  -->
    <a href="/students">Go back to students page.</a>

</body>
</html>

<!-- 再到 students.ejs 放一個連結  <a></a>  裡面每一個都導向 students id 是什麼  -->
<!-- http://localhost:3000/students/100 網址入入加進去的 id 就會跑出來 -->

---

 

(/views/students.ejs)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Page</title>
</head>
<body>
    <!-- 把所有學生放在 ul 裡面 http://localhost:3000/students/100 網址入入加進去的 id 就會跑出來   -->
    <ul>
        <% data.forEach(student => { %>
            <li><a href="/students/<%= student.id %>"><%= student.name %></a></li>  <!-- 放進去資料會顯示這個首頁 連結 app的 -->
       <% }) %>
    </ul>
</body>
</html>

---

 

感謝大家觀賞我分享 Udemy 線上課程的筆記

希望對大家都是有幫助的唷^^

---