Node.js Express 筆記

Yi-Ting
6 min readAug 30, 2019

--

這邊主要是紀錄利用 Node.js 的 Express 框架來寫網頁的一些筆記

1. Node.js

Node.js 就是一個javascipt的開發框架,根據google 到的文章,Node.js誕生的原因大都是因為想要整合前後端且可以用同一種語言就可以維護而誕生的框架。那Node.js 就是讓前後端都以Javasciript做開發,確實是不用額外再去學習php、python、java等這些後端的語言了XD

其實Node.js 的優點還有很多拉,像是高效能、易擴充等,但我感到最方便的還是只要用同一種語言就能開發前後端拉XD

Node.js有提供npm的指令,方便下載、管理 js 的套件,那其實也出現許多取代 npm 的指令,像是 yarn、cnpm、nodemon等,有興趣的可以google 看看唷 !!

2.Express

Express 是node.js提供的一個輕量的網頁框架,許多功能還是得自己寫,像是 Express就不提供資料庫 ORM的寫法,需自己設計一個函式。

那首先必須先安裝創資料夾並安裝npm

>> mkdir test
>> cd test
>> npm init //這邊是產生 package.json 檔案,很重要~
>> npm install express-generator //產生express 需要的套件
>> express --view=pug et_test//可以選擇前端的模板要用 ejs、pug或hbs

上述做完後會有進去 et_test的資料夾會有下圖中的檔案:

Express 產生的檔案

在這資料啟動安裝npm

>> npm install //下載npm的依賴包
>> DEBUG=et-test:* npm start //啟動server

接者在網頁上輸入 localhost:3000 即可看到下面的圖:

localhost:3000

打開et_test/package.json檔,可以看到安裝套件的版本,可以看到中間有script,中間有一段’start: node ./bin/www’,意思就是打上npm start這指令後,node.js便會去執行node ./bin/www,也就是打開網頁server,所以可以在script裡面增加自己熟悉的指令就可以囉:

由上述可以知道,node進入的點是./bin/www這個檔案,裡面定義了網址的port為3000,產生http server等,如下圖:

這邊設定了port 為 3000,也建立網頁了server(就是左圖的var server = http.createServer(app);那行)

Express也像其他MVC框架一樣有提供路由設定,設定的地方在app.js裡,有興趣可以看,這裏就不多做介紹了~

網頁 pug

前面有提到pug,pug是一種網頁的模板,過去都是用html來撰寫,但html語法需要起始跟結尾符號,如下:

<div class="et_class" id="et_id">hello!! world!!</div>

那pug則是減去了這種麻煩,只要有起始符號即可,上述的表示是可以表成如下:

div.et_class#et_id hello!! world!!

要怎麼知道好幾層的html tag,就是用縮排的方式即可,更詳情的可以參考這篇

Express開發起來真的很方便,因為Express已經將網頁頁面、js/css、後端分開,剛剛說的pug就位在views裡

js css放置

可以將寫完的 js 與 css 檔分別放至 public/javascripts 及 public/stylesheets中即可,並在 views/layout.pug 中新增要引入的js/css 路徑即可

後端程式

後端程式的部分主要放在 routes/index.js 以及 routes/users.js 中,我們可以看到index.js程式碼如下:

index.js

所以我們在網頁輸入localhost:3000可以看到網頁標題是Express,各位可以在下面創自己的路徑,例如我們在index.js下新增一個 /et_page_1 的路由,一樣用get的方法:

router.get('/et_page_1', function(req, res, next) {res.render('et_page', { title: 'et_test' });});

然後在views資料夾中新增一個 et_page.pug 的檔案,如下:

extends layoutblock contenth1= titlehello I'm eating

然後在網頁上輸入localhost:3000/et_page_1,就可以看到:

et_test頁面

那其實網頁的動作有很多,像剛剛的get是其中一種,還有像post、put、delete等等,可以自己google看看

3. 總結

這篇記錄了一些Node.js Express 入門時需注意的事~

自己有用Express 做了一個貨幣轉換的系統,在我的 github 上,如果有發現有什麼更加方便開發網頁的工具,都歡迎跟我說唷XD

4. 參考資料

[1] 使用 Node.js + Express 建構一個簡單的微博網站
[2] Express 教學
[3] pug

--

--

Yi-Ting
Yi-Ting

No responses yet