Nodejs 手動搭建 Express 項目

俗話說好記性不如爛筆頭，在看了兩天文檔後，在這裏準備把本身學到的東西寫成文章記錄下來。

安裝全局模塊

npm install -g express express-generator suptervisor 

// express-generator  Express 應用生成器
// suptervisor  監視你對代碼的改動，並自動重啓 Node.js ,必須全局安裝

快速生成項目

express -e blog   // -e 使用ejs 模板引擎生成項目

手動建立項目

1.安裝依賴

npm init 
npm install express ejs --save

// 項目結構

blog
├─app.js        // 入口文件
├─package.json  // 項目依賴配置
├─node_modules  // 存放項目的依賴庫
├─public        // 靜態文件資源目錄
│  ├─images
│  ├─js
│  └─styles
└─views         // 視圖文件（ejs模板 或jade 模板）

2.編寫入口文件

// 引用模塊
var express = require('express');
var path = require('path');
var ejs = require('ejs');
var app = express();

app.set('views', path.join(__dirname,'views'));  // 設置視圖文件目錄

app.set('view engine' , 'ejs'); //設置模板引擎爲ejs

app.use( express.static(path.join(__dirname, 'public')) );  // 配置靜態資源目錄


// 路由規則
app.get('/', function(request, response){
    response.send('Hello Node.js')
});

app.listen(3000);    // 監聽 3000 端口

console.log('server started at port 3000');

3.修改模板後綴

默認ejs模板只支持渲染以ejs爲擴展名的文件，可能在使用的時候會以爲它的代碼書寫方式很不爽仍是想用html的形式去書寫。
在這裏可使用engine 註冊模板引擎的函數，讓他處理指定後綴名的文件

/*
* 將上面的 app.set('view engine' , 'ejs')
* 修改爲
* */

app.set('view engine' , 'html'); //修改模板文件的後綴名爲html
app.engine('.html' , ejs.__express);   //"__express"，ejs模塊的一個公共屬性，表示要渲染的文件擴展名。

接下來在控制檯跑起來看看

瀏覽器訪問 http://localhost:3000 成功輸出

到這裏項目就已經初步搭建起來了。

4.路由模塊化

在根目錄新建routes 文件夾

// routes/index.js  

var express = require('express');
var router = express.Router();   //使用 express.Router 類建立模塊化、可掛載的路由句柄

// 訪問根路由 渲染 index 模板
router.get('/', function (req, res) {
    res.render('index');
});

module.exports = router;

添加模板, 在views文件夾下新建 index.html 模板 （就一普通html文件）

修改入口文件app.js

// 引入 路由模塊
var router = require('./routes/index');
app.use('/', router);

將寫在app.js 中的路由刪掉。

到這裏整個項目已經搭建起來了，大功告成。

//app.js

// 引用模塊
var express = require('express');
var path = require('path');
var ejs = require('ejs');
var app = express();
var port = process.env.PORT || 3000;
// 引入 路由模塊
var router = require('./routes/index');
app.use('/', router);
// 設置視圖文件目錄
app.set('views', path.join(__dirname,'views'));  

// app.set('view engine' , 'ejs'); //設置模板引擎爲ejs
app.set('view engine' , 'html'); //設置模板引擎爲html
app.engine('.html' , ejs.__express);

app.use( express.static(path.join(__dirname, 'public')) );  // 配置靜態資源目錄
app.listen(port);
console.log('server started at port ' + port);

ps: 第一次寫文章，請多加指教。