標籤：export 技術分享 引導 routes type callback 接下來 管理 json
簡介Mean是JavaScript的全棧開發架構。更多介紹
用Express實現MVC模式開發是Mean Web全棧開發中的一部分。
Express 是一個基於 Node.js 平台的極簡、靈活的 web 應用開發架構，它提供一系列強大的特性，協助你建立各種 Web 和行動裝置應用。Express官網。
兩種檔案夾結構
水平檔案夾結構：
按照檔案的功能來分類。整個應用的分類都放在一個按照MVC檔案夾結構組合的目錄之中。例如：
app檔案夾用於儲存Express應用的邏輯部分相關代碼，包含：
controllers檔案夾：存放Express應用的控制器檔案
config檔案夾用於存放Express設定檔。例如：
env檔案夾：存放Express應用環境設定檔（測試、開發環境的切換等等）
config.js檔案：用於Express應用配置
express.js檔案：用於Express應用初始化
public檔案夾使用者儲存瀏覽器端的靜態檔案，再次按照MVC模式分為：
package.json檔案：存有用於管理應用依賴的中繼資料
server.js檔案：是Node程式的主檔案，以模組的方式載入express.js引導Express應用的啟動
垂直檔案夾結構：
按照檔案所實現的功能進行檔案和檔案夾管理，每個功能都有各自的MVC模式組織目錄結構，比較適合大型項目。比如：
server檔案夾用於存放伺服器邏輯，其內部按照MVC可分為：
controllers、models、routes、views、config（evn、feature.server.config.js）檔案夾
client檔案夾用於存放用戶端檔案，按照MVC模式可分為：
config、controllers、css、directives、filters、img、views、feature.client.module.js檔案和檔案夾等
以水平檔案夾結構為例
1.首先建立如下目錄：
2.package.json代碼內容如下，暫時不用的dependencies可以不用寫上去。
{ "name": "websiteframe03", "version": "0.0.0", "private": true, "scripts": { "start": "node server.js" }, "dependencies": { "body-parser": "~1.16.0", "cookie-parser": "~1.4.3", "debug": "~2.6.0", "ejs": "~2.5.5", "express": "~4.14.1",
"serve-favicon": "~2.3.2" }}
3.在app/controllers檔案夾裡面建立一個名為index_server_control.js的檔案，注意命名方式，因為項目中前端AngularJS也會涉及到MVC模式，所以盡量將前端和後端的MVC檔案命名方式區分開來。
控制器：index_server_control.js檔案裡面代碼如下：
/** * Created by Goss on 2017/6/6. * 控制器：拼資料給視圖,渲染應用視圖 */exports.render=function(req,res){ console.log(‘start index_server_control_render‘); //res.send(‘Hello world‘); res.render(‘index‘,{title:‘Hello world title‘});}
4.兩種路由方式：
1.app.route(path).VERB(callback)
2.app.VERB(path,callback)
(VERB要替換成小寫http方法名，比如get、post)
建立路由檔案index_server_routes.js，然後加入如下代碼：
/** * Created by Goss on 2017/6/6. * 中介軟體：商務邏輯 */var index=require(‘../controllers/index_server_control.js‘);function index_server_routes(app){ console.log(‘start index_server_routes‘); app.get(‘/‘,index.render); return app;}module.exports=index_server_routes;
5.接下來建立express_config.js檔案來建立Express應用對象，分成兩步：
路由檔案中的函數會為應用執行個體調用控制器的render()方法來建立新的路由配置，最後返回處理好的應用執行個體，代碼如下：
/** * Created by Goss on 2017/6/6. * 配置Express應用，所有與Express應用相關的配置也需要添加到這個檔案中 */var express=require(‘express‘);var index_server_routes=require(‘../app/routes/index_server_routes.js‘);function express_config(){ console.log(‘start express_config‘); var app=express(); app.set(‘views‘,‘./app/views‘); //設定視圖檔案儲存體目錄 app.set(‘view engine‘,‘ejs‘); //設定EJS作為Express應用的模板引擎 new index_server_routes(app); app.use(express.static(‘./public‘)); //指定靜態檔案所在路徑，要放在路由中介軟體之下，即先執行路由邏輯 return app;}module.exports=express_config;
6.最後在根目錄的server.js檔案中寫入主程式碼，通過包含Express配置模組，擷取Express應用對象執行個體，並監聽8080連接埠，代碼如下：
var express_config=require(‘./config/express_config.js‘);var app=new express_config();app.listen(8080);console.log(‘server running at http://localhost:8080‘);module.exports = app;
7.在views檔案夾中加入EJS視圖渲染檔案，並在express_config.js檔案中加入app.set對引擎進行設定，index.ejs代碼如下：
<!DOCTYPE html><html> <head> <title><%= title %></title> <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> <img src="/images/timg.jpg" alt="img"> </body></html>
8.靜態檔案路徑的配置，即在express_config.js裡面加入靜態檔案路徑：
app.use(express.static(‘./public‘)); //指定靜態檔案所在路徑，要放在路由中介軟體之下，即先執行路由邏輯
最後運行：node server運行服務端，瀏覽器中開啟：http://localhost:8080
下篇加入：MongoDB
【Web開發】Mean web開發 01-Express實現MVC模式開發
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
