前端不斷的演進,更講求畫面快速變化,跳脫傳統傳送資料方式,漸漸改為用javascript連接,所以,server端就負責建立api,透過串接api處理資料。

關於Api,就有所謂的RESTful (Representational State Transfer),RESTful 是某種設計架構的稱呼,方便、有彈性的傳輸資料。後面來會用node.js 搭配express 架構RESTful Api,部署到server上,建立一個簡單的留言板。

Demo comment board
Free Heroku 會 sleep,太慢請 reload

node restful api

安裝 Node.js express

首先先創建資料夾,npm init 安裝package.json。

// create file
mkdir nodeapi
cd nodeapi
// install package.json
npm init
// install express
npm install --save express

接下來要開始建立 node.js server

// open package.json & add npm start
...
 "scripts": {
"start": "node index.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
...

// create index.js
touch index.js

建立 nodejs server

以index.js作為node.js server的起始點,首先引入express,執行使用express,這邊先設定好Port是3000,再來建立get的route,路徑是/comments。儲存後執行 npm start,在網址輸入 http://localhost:3000/,這時候會看到畫面顯示 Hello world。

/index.js

const express = require('express');
const app = express();

const port = 3000;

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html')
})

app.listen(port, function () {
console.log(`server start on http://localhost:${port}, port`)
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Hello!!</h1>
</body>
</html>

建立 mLab account 創建 mongoDB

因為我想試試看串接mongoDB,這邊選用mLab來管理mongoDB,流程大概是進入mlab網站,建立帳戶,再來創建db,點擊建立User,設定帳號、密碼、權限。

這邊雖然看似簡單但非常麻煩。

mlab 建立mongoDB教學

記得要create user,後面會依靠這個username跟password來串接mongoDB,我因為打錯dbName,顯示 MongoError: not authorized on dbname to execute command,大概卡了40分鐘…。

createmlab

首先安裝 mongodb。

npm install --save mongodb

index.js 增加內容

// modify index.js
...
const MongoClient = require('mongodb').MongoClient;

const url = 'mongodb://ian:[email protected]:31323/ian-test';

MongoClient.connect(url, function(err, db) {
if (err) throw err;
const dbo = db.db("ian-test");
const myobj = { name: "john", time: "2018/10/13/00:58", content: "hello, good evening" };
dbo.collection("comments").insertOne(myobj, function(err, res) {
if (err) throw err;
console.log("1 document inserted");
db.close();
});
});
...

修改完成後輸入npm start,如果沒出現error就可以打開 collection 觀看,會增加一個comments的collection,點開comments會發現剛剛myobj資料在裡面。這邊是建立資料邏輯,在RESTful會用到Create,剩下更新PUT、刪除Delete、讀取Get後面再寫上。

w3c mongoDB 語法教學

mlabData

POST Api 創建資料

這邊要下載body-parser插件,要對資料格式處理,這邊要使用到是JSON data。在index.js引入body-parser,使用bodyParser對資料轉型別成json type,建立post的route,我們命名路徑為/comments。

npm install body-parser --save

index.js

...
const bodyParser = require('body-parser');

app.use(bodyParser.json());

app.post('/comments', (req, res) => {
console.log(req.body); // your JSON
db.collection('comments').save(req.body, (err, result) => {
if (err) return console.log(err)
console.log('saved to database')
res.send(req.body);
});
})

// modify app.listen(3000, () => {});
MongoClient.connect(url, (err, client) => {
if (err) return console.log(err)
db = client.db('ian-test')
app.listen(port, () => {
console.log('listening on 3000')
})
})
...

修改完成後重新npm start,打開localhost:3000,打開瀏覽器devtool,在console.log貼上這段fetch post,成功的話會接收到回傳資料,哇嗚,這樣就完成了儲存的API!!

javascript fetch post

fetch('http://localhost:3000/comments', {
method: 'post',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({
"name": "mikessss",
"time":"2018/10/13-02:33:01",
"content": "ggggggg."
})
}).then(res=>res.json())
.then(res => console.log(res));

Get Api 取得資料

我們前面成功的建立了儲存的api,之後的邏輯都大同小異,接收request,再依照請求方式跟mongoDB連接資料。我們這邊的get api會拿整個comments的資料,如果看不懂collection.find(),可以看一下w3c的mongoDB語法教學,非常簡單易懂。

增加完成後,一樣重新啟動,再來載入 http://localhost:3000/comments,就看到我們剛剛儲存進去的所有資料了。

index.js

...

app.get('/comments', (req, res) => {
db.collection('comments').find().toArray((err, result) => {
if (err) return console.log(err)
res.send({data: result})
})
})

...

Delete Api 取得資料

這邊就建立一個delete的網址路徑,我們利用網址:id來帶參數,方便我們好維運api。mongoDB刪除用的是remove function,假設要用 mongoDB預設的_id當作查詢刪除,會多需要使用ObjectID處理value,但如果你是自己用其他物件來查詢,就不用使用ObjectID。

這邊就不提供fetch測試了,推薦使用postman測試請求方式,又簡單又快又方便。

postman chrome tool

const ObjectID = require('mongodb').ObjectID;

app.delete('/comments/:id', (req, res) => {
// use _id need use ObjectID(value)
const obj = {_id: ObjectID(req.params.id)};
db.collection("comments").remove(obj, function(err, obj) {
if (err) throw err;
console.log("1 document deleted");
res.send('delete success');
});
})

Update Api 更新資料

建立put的route,使用updateOne來更新資料,前面兩個參數要帶查詢、更新資料。

這樣就完成了CRUD的API了,下個步驟會建立簡單的畫面,在部署到server上,讓我們可以在畫面操作讀取、建立、更新、刪除資料。

app.put('/comments/:id', (req, res) => {
console.log(req.params.id, req.body);
const newvalues = {$set: req.body};
const obj = {_id: ObjectID(req.params.id)};
db.collection("comments").updateOne(obj, newvalues, function(err, obj) {
if (err) throw err;
console.log("1 document update");
res.send('update success');
});
})

localhost api file

github 程式碼

部署到 Heroku

部署到server上,讓我們未來方便直接串接api,提醒一下要到heroku設定mLab的連線,否則會連不到mongoDB。
(這邊我也卡了30分鐘…,安裝addons也沒用,是執行下面的command才run起來)

heroku config:set PROD_MONGODB=mongodb://dbname:[email protected]:31323/ian-test

heroku mLab setting

heroku deploy 流程

//login account
heroku login

//use git
git init
git add .
git commit -m "init node"

// create heroku repo
heroku create

// push remote
git push heroku master

heroku ps:scale web=1

heroku open

再來載入 /comments 路徑,pathname/comments,看到mongoDB的資料拉!

node api data

大功告成,接下來就處理好前端串接,畫面互動就可以了。

實作頁面

Demo comment board

完整程式碼

github 程式碼

有問題歡迎詢問,感謝閱讀!!