iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
0
Modern Web

網站前端後端與API系列 第 20

NodeJS的動態網站概念-2

  • 分享至 

  • xImage
  •  

在第七天的ExpressJS專案中的前端概念-1中,我們提到了:

前端程式:
views(使用者看得到的介面主框架)
public(前端相關套件,前端使用者可見此資料夾內容)

後端程式:
www(溝通連線環境設定與啟動指令)
app.js(後端主程式,包含所需套件與各子程式路徑)
node_modules(此Express專案所需NPM套件都會在此目錄下)
package.json(專案設定檔)
routes(路由器,後端判斷收到網頁前端使用者的指令要回覆什麼指令與內容給網頁前端使用者)

我們對於前端內容有了掌控,昨天我們提到,index.ejs裡面的<%= title %>
我們看MyTestProject裡面的routes資料夾,用編輯器打開裡面的index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

我們先看中間那段

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

直譯的話
當 路由(router)被要求(get) '/' 的request後,執行function。
function的內容為,回應要求(res),渲染模板檔案index,並帶著參數title。

咦!?這就是要求一個網頁,伺服器回傳index.ejs的機制嗎?

是的沒錯,所以我們不知不覺中,已經大略能懂JS在後端運作的邏輯了。
透過瀏覽器輸入網址,就是一種要求方式,而輸入的網址若為http://localhost:3000/ ,就是對這網址要求"/"的位置,所以我們在index.js中,回應說要放index.ejs的模板給這個發送這個要求的地方,所以就去views(Express預設路徑,在app.js中設定)裡面找到index.ejs就回應回去了。


上一篇
NodeJS的動態網站概念-1
下一篇
NodeJS的動態網站概念-3
系列文
網站前端後端與API30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言