iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
Modern Web

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

ExpressJS專案中的前端概念-1

  • 分享至 

  • xImage
  •  

回到ExpressJS專案

我們可以將昨天的子目錄主要分為前後端來看:

前端程式:

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

後端程式:

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

一個動態網站會有前端與後端組成,像昨天的例子,使用者從前端發送指令給後端,後端處理後,把對應資訊傳給前端呈現給使用者,就完成了一個前後端資料串連的過程。我們接著從前端開始認識,我們使用的模板是ejs模板,是一個接近HTML加上動態傳輸資料的模板。MyTestProject專案中,views與public兩個資料夾內負責前端介面呈現的相關程式碼,其中views資料夾包含:

error.ejs(錯誤頁面模板)
index.ejs(主頁面模板)

兩個ejs模板,而public包含三個資料夾:

images (圖片素材)
javascripts (js腳本)
stylesheets (css樣式)

P.S. Terminal/cmd指令很重要!
Terminal/cmd除了可以執行NodeJS外,有很多內建指令是可以記下來的,方便使用。基本上Terminal可以對電腦做跟滑鼠鍵盤一樣的操作,使用的是文字介面,這是我們必須先習慣的。所以這些功課要先做喔!也可以自己測試看看~
常用Terminal指令可以看這裡(引用Git 教學:終端機及常用指令介紹)


上一篇
用NPM套件-ExpressJS建立網站框架-3
下一篇
ExpressJS專案中的前端概念-2
系列文
網站前端後端與API30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言