1,新建項目 名Blog2
2,npm init 生成package.json
3,安裝第三方模塊;
npm install –save express cookies markdown mongoose swig
4,項目結構;
5,在入口文件app.js中
6,設置首頁路由;
//應用啓動入口
var express=require('express')
//創建app應用 相當於=》NodeJS Http.createServer();
var app=express();
/**
* 首頁
*
*/
app.get('/',function (req,res,next) {
res.send("<h1>歡迎光臨我的博客!</h1>")
})
//監聽app請求;
app.listen("8081")
7,前後端分離;
1)定義模板引擎;
//模板處理模塊
var swig=require('swig')
/**
* 定義模板引擎
* 參數1:引擎名稱,模板文件後綴;
* 參數2:用於解析處理模板內容的方法
*/
app.engine('html',swig.renderFile);
/**
* 設置模板文件存放目錄
* 參數1,必須是views。
* 參數2,是目錄
*/
app.set('views','./views');
/**
* 註冊使用的模板引擎;
* 參數1,必須是'view engine'
* 參數2,被註冊的模板引擎的名稱;
*/
app.set('view engine','html')
2)在views目錄下新建 index.html;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color:red">歡迎光臨我的博客!!!!!</h1>
</body>
</html>
3)最終app.js中代碼:
//應用啓動入口
var express=require('express')
//模板處理模塊
var swig=require('swig')
//創建app應用 相當於=》NodeJS Http.createServer();
var app=express();
/**
* 定義模板引擎
* 參數1:引擎名稱,模板文件後綴;
* 參數2:用於解析處理模板內容的方法
*/
app.engine('html',swig.renderFile);
/**
* 設置模板文件存放目錄
* 參數1,必須是views。
* 參數2,是目錄
*/
app.set('views','./views');
/**
* 註冊使用的模板引擎;
* 參數1,必須是'view engine'
* 參數2,被註冊的模板引擎的名稱;
*/
app.set('view engine','html')
/**
* 首頁
*
*/
app.get('/',function (req,res,next) {
/**
* 讀取views目錄下的指定文件,解析並返回給客戶端;
* 參數1:模板文件,相對於views;
* 參數2:傳遞給模板使用的數據;
*/
res.render('index');
})
//監聽app請求;
app.listen("8089")
8)方便調試
/**
* 開發過程中需要取消模板緩存
* 改變html時,直接刷新就可以不需要重啓服務;
*/
swig.setDefaults({cache:false})
9靜態託管;
當index.html需要加載css等靜態文件時。也是需要發起請求;
這時就需要一個靜態文件託管;
//設置靜態文件託管
//當用戶訪問url以/public開始,那麼直接返回對應??__dirname+"/public"下的文件;
app.use('/public',express.static(__dirname+"/public"))
/public/bg.css
.bg{
background: blue;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/public/bg.css">
</head>
<body >
<h1 style="color:red" class="bg">歡迎光臨我的博客!!!!!</h1>
</body>
</html>
本節總結:
用戶發送http請求–》url-》解析路由–》找到匹配的規則-》指定綁定函數,返回對應內容至用戶
/public->靜態->直接讀取指定目錄下的文件->返回用戶;
其他目錄-》動態-》處理業務邏輯,加載模板,解析模板-》返回數據給用戶;