iT邦幫忙

2022 iThome 鐵人賽

DAY 12
0
Software Development

Web專案建置雜談系列 第 12

Web專案建置雜談 - 實作篇(二)

  • 分享至 

  • xImage
  •  

前一篇講解了一個基本的 web 應用程式,但是實際上一個 web 應用程式是更為複雜的,你必須也考慮進去例如:「路由的擴充」、「安全性」...,那麼以一個專案的框架來說這個小程式是不夠用的。

Express 專案架構

好在Express提供了一個方便的小工具express-generator方便我們建立專案,在連結中已經有詳細敘述怎麼樣使用這個小工具建置一個這邊就不再贅述,我們就來看建立出來的專案內容是甚麼。

以下是建立出來專案的內容:

root@DESKTOP-6KCSQQG /home/mars/testcode $ express --view=ejs --git  myapp

   create : myapp/
   create : myapp/public/
   create : myapp/public/javascripts/
   create : myapp/public/images/
   create : myapp/public/stylesheets/
   create : myapp/public/stylesheets/style.css
   create : myapp/routes/
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/views/
   create : myapp/views/error.ejs
   create : myapp/views/index.ejs
   create : myapp/.gitignore
   create : myapp/app.js
   create : myapp/package.json
   create : myapp/bin/
   create : myapp/bin/www

   change directory:
     $ cd myapp

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=myapp:* npm start

再更清楚一點可以再依照資料夾來區分:

.
├── app.js             // 應用程式入口   
├── bin                // 啟動檔
│   └── www            
├── package.json
├── public             // 共用資源
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes             // 路由
│   ├── index.js
│   └── users.js
├── views              // 頁面
│   ├── error.ejs
│   ├── index.ejs
└──.gitignore
  • 啟動檔(bin): 這裡面放著的基本上就是近似於我們前一個章節提到的那個小程式的進階版本,包含了包括「創建 Http Server」、「事件處理」和「監聽接口」...等,也從此呼叫了app.js。
  • 應用程式入口(app.js): app.js 就是用來連結所有資料夾裡各種功能整個應用程式的入口了,他配置了所有的路由(route)及錯誤處理(error handler),後續如果有相關的一些中間件的添加也通常會到這個地方來進行添加處理。
  • 共用資源(public): 這邊通常是用來放一些共用的圖檔(首頁縮圖、各頁面上圖檔...)、前端使用的javascripts及css
  • 路由(routes): 放置路由物件的地方,經過app.js的第一層分配,還能夠再將路由往下繼續擴充,所有功能的實作也都可以在這個地方進行。
  • 頁面(views): 有一些路由是可以渲染出動態的頁面的,這邊提供了兩種語法類似於html的頁面模板ejspug,可以選擇其中一種進行生成即可(往後我都是用ejs進行演示)

經過簡單的啟動之後可以得到以下的狀態,一個簡單而完整的web server便正式的啟用動了。

啟動專案指令:

cd myapp
npm install
npm run start
  • Server啟動
  • 頁面

上一篇
Web專案建置雜談 - 實作篇(一)
下一篇
Web專案建置雜談 - 實作篇(三)
系列文
Web專案建置雜談30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言