nodejs基礎教程-簡單blog(0)

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->靜態->直接讀取指定目錄下的文件->返回用戶;

其他目錄-》動態-》處理業務邏輯,加載模板,解析模板-》返回數據給用戶;

發佈了61 篇原創文章 · 獲贊 35 · 訪問量 20萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章