iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
1
Modern Web

還在想要買哪一堂線上課程嗎?培養看文件的習慣吧!用 MDN 文件學後端:NodeJS & MongooseDB系列 第 20

20日: Express/Node introduction ( ERR 處理 、 使用 db 、 把資料渲染到畫面 、 檔案結構 、 總結 )

  • 分享至 

  • xImage
  •  

承上篇 出處 , 有簡體版 , 進入後自行點選

Handling errors

用一個或多個 mw function 帶 4 個參數 ( err, req, res, next ) 處理錯誤 。 例如:

app.use(function(err,req,res,next) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});

這麼做可以回傳任何需要的內容 , 但它必須寫在 app.use() & routes 之後 , 所以它是最後的 req 處理程序 mw

Express 內建 err handler , 它也是放在 stack 中最後面 。 如果不用 handler 處理 err 直接傳到 next() , err 會由內建 handler 接手處理 , 然後寫到 client stack trace 去

Note: Stack trace 不包含在 production 環境裡 , 如果要在 production mode 執行 , 需要把環境變數 NODE_ENV 設為 'production'

Note: 404 及其他錯誤狀態碼不被視為 err , 若想要處理他們 , 可以增加 mw function 。 更多資訊見 FAQ

這個小節官網上有更多資訊 Error handling

Using databases

Express app 可以使用任何支援 Node 的 db ( Express 本身沒有定義額外的資料庫管理行為/需求 ) , 有很多選擇: PostgreSQL, MySQL, Redis, SQLite, MongoDB ...

要用 db 得先透過 npm 安裝 db driver ( driver 應該是翻成驅動程式 ) 。
我們以安裝熱門的 NoSQL ( Not only SQL ) MongoDB 為例:

$ npm i mongodb

Db 可以安裝在本地或是雲端, 在我們的 Express code 中需要 driver 連接到 db , 然後可以 CRUD 。 下面範例來自 Express 文件, 演示要怎麼用 MongoDB 找到 "mammal" 紀錄 ( 原文有舊版新版, 這邊只節錄新版 )

//mongodb 3.0 版本以上適用
let MongoClient = require('mongodb').MongoClient;
MongoClient.connect('mongodb://localhost:27017/animals', function(err, client){
   if(err) throw err;
   
   let db = client.db('animals');
   db.collection('mammals').find().toArray(function(err, result){
     if(err) throw err;
     console.log(result);
     client.close();
   });
});

其他常用的方法是直接透過 ORM (Obj Relation Mapper ) 存取資料庫 , 在這方法中我們把資料定義成 objmodel , 接著 ORM 會映射資料到 db 。
這個方式的優點是開發者可以照著 JS 語意去寫 code 而不是 db 語意 , 而且有明顯的目標可以驗證收到的資料。 後續文章我們會有更多 db 的討論

這裡看更多關於 db integration

Rendering data (views)

Template 引擎讓我們可以指定產出結構 , 使用預留呈現資料的欄位 (placeholders) 。 Template 通常用來生成 HTML , 也可以生成其他類型的檔案 。 Express 支援許多 template 引擎(例如 pug) , 這裡有篇有用的比較 templates 文章: Comparing JS Templating Engines: Jade, Mustache, Dust and More

下方程式法演示在 app 設定 template 引擎, 及 Express 要使用哪邊的 views & view engines ( 需要預先安裝含有你個人的 template library (蛤?) )

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

// Set directory to contain the templates ('views')
app.set('views', path.join(__dirname, 'views'));

// Set view engine to use, in this case 'some_template_engine_name'
app.set('view engine', 'some_template_engine_name');

假這我們有個名叫 index.<template_extension> 的檔案, 裡面有帶變數 title & messageplaceholders, 接著在 route handler function 呼叫 Response.render(), 來建造及傳遞到 HTML res

app.get('/', function(req, res) {
  res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
});

看更多關於 [Using template engines with Express]](http://expressjs.com/en/guide/using-template-engines.html)

File structure

Express 沒有假設結構或使用的 components , 在目錄結構下, routes, views, static files, app-specific logic ( 這我沒看過,也沒估狗到看起來適合的 ) 想用多少數量都可以。
髓然要用一個檔案做完 Express app 也可以, 但依照功能 ( 如:帳號管理、 部落格、 討論區 ) 和架構 ( 如: MVC architecture ) 分檔比較妥當

之後的文章會使用 Express Application Generator 來建造 web app , 它會有模組型態的架構, 可以讓我們去擴展

MDN 的本章總結

恭喜! 完成 Express/Node 的第一步, 我們了解 E/N 的主要特色、 code 的模樣會是什麼樣子 ( routes, mw, err 處理, template )。 也知道它主導性低、 彈性高, 想添加什麼進去都隨你高興!

輕巧型框架有很多等待我們去使用的第三方 libraries & feature, 後續章節也會慢慢出現。 下篇文章我們要看看設定 Node 開發環境, 可以開始看到一些 Express code 了 ( 蛤? 上面那些不是 Express code 嗎 )

更多的補充資料

好像很多內文就有提到過, 想看的人點See also連到官網


上一篇
19日: Express/Node introduction ( 使用 middleware 、 Serving 靜態檔案 )
下一篇
21日: Setting up a Node development environment ( Express 開發環境概覽、 安裝 、 測試安裝有沒有成功--比較讓人感到興奮的測試方式 )
系列文
還在想要買哪一堂線上課程嗎?培養看文件的習慣吧!用 MDN 文件學後端:NodeJS & MongooseDB30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言