摘要：簡介搭建多頁面服務端渲染技術(shù)點搭建服務創(chuàng)建頁面路由模板引擎組合打包多頁面端異步請求服務端日志打印項目源碼運行一現(xiàn)代服務端渲染的由來服務端渲染概念是指，瀏覽器向服務器發(fā)出請求頁面，服務端將準備好的模板和數(shù)據(jù)組裝成完整的返回給瀏覽器展示前端后

nodejs搭建多頁面服務端渲染

技術(shù)點

koa 搭建服務

koa-router 創(chuàng)建頁面路由

nunjucks 模板引擎組合html

webpack打包多頁面

node端異步請求

服務端日志打印

項目源碼 git clone https://gitee.com/wjj0720/nod...

運行

npm i

npm start

服務端渲染概念： 是指，瀏覽器向服務器發(fā)出請求頁面，服務端將準備好的模板和數(shù)據(jù)組裝成完整的HTML返回給瀏覽器展示

1、前端后端分離

早在七八年前，幾乎所有網(wǎng)站都使用 ASP、Java、PHP做后端渲染，隨著網(wǎng)絡的加快，客戶端性能提高以及js本身的性能提高，我們開始往客戶端增加更多的功能邏輯和交互，前端不再是簡單的html+css更多的是交互，前端頁在這是從后端分離出來「前后端正式分家」

2、客戶端渲染

隨著ajax技術(shù)的普及以及前端框架的崛起(jq、Angular、React、Vue) 框架的崛起，開始轉(zhuǎn)向了前端渲染,使用 JS 來渲染頁面大部分內(nèi)容達到局部刷新的作用

優(yōu)勢

局部刷新，用戶體驗優(yōu)

富交互

節(jié)約服務器成本

缺點

不利于SEO(爬蟲無法爬取ajax)請求回來的數(shù)據(jù)

受瀏覽器性能限制、增加手機端的耗電

首屏渲染需要等js運行才能展示數(shù)據(jù)

3、現(xiàn)在服務端渲染

為了解決上面客戶端渲染的缺點，然前后端分離后必不能合，如果要把前后端部門合并，拆掉的肯定是前端部門

現(xiàn)在服務端渲染的特點

前端開發(fā)人員編寫html+css模板

node中間服務負責前端模板和后臺數(shù)據(jù)的組合

數(shù)據(jù)依然由java等前服務端語言提供

優(yōu)勢

前后端分工明確

SEO問題解決

4、前、后端渲染相關討論參考

知乎問答：為什么現(xiàn)在又流行服務器端渲染html

精讀前后端渲染之爭

服務端渲染 vs 客戶端渲染

確保你安裝node

目標: 創(chuàng)建node服務,通過瀏覽器訪問,返回"hello node!"(html頁面其實就是一串字符串)

  /** 創(chuàng)建項目目錄結(jié)構(gòu)如下 */
    │─ package-lock.json
    │─ package.json
    │─ README.md
    ├─bin
      │─ www.js

  // 1. 安裝依賴 npm i koa 
  // 2. 修改package.json文件中 scripts 屬性如下
    "scripts": {
      "start": "node bin/www.js"
    }

  // 3. www.js寫入如下代碼
    const Koa = require("koa");
    let app = new Koa();
    app.use(ctx => {
      ctx.body = "hello node!"
    });
    app.listen(3000, () => {
      console.log("服務器啟動 http://127.0.0.1:3000");
    });

  // 4 npm start 瀏覽器訪問 http://127.0.0.1:3000 查看效果

目標:使用koa-router根據(jù)不同url返回不同頁面內(nèi)容

依賴 npm i koa-router
koa-router 更多細節(jié) 請至npm查看

  /** 新增routers文件夾   目錄結(jié)構(gòu)如下 
    │─.gitignore
    │─package.json
    │─README.md
    ├─bin
    │   │─www.js
    ├─node_modules
    └─routers
        │─home.js
        │─index.js
        │─user.js 
  */
  //項目中應按照模塊對路由進行劃分,示例簡單將路由劃分為首頁(/)和用戶頁(/user) 在index中將路由集中管理導, 出并在app實例后掛載到app上

  /** router/home.js 文件 */
  // 引包
  const homeRouter = require("koa-router")()
  //創(chuàng)建路由規(guī)則
  homeRouter.get(["/", "/index.html", "/index", "/home.html", "/home"], (ctx, next) => {
    ctx.body = "home"
  });
  // 導出路由備用
  module.exports = homeRouter

  /** router/user.js 文件 */
  const userRouter = require("koa-router")()
  userRouter.get("/user", (ctx, next) => {
    ctx.body = "user"
  });
  module.exports = userRouter

  /** router/index.js 文件 */
  // 路由集中點
  const routers = [
    require("./home.js"),
    require("./user.js")
  ]
  // 簡單封裝 
  module.exports = function (app) {
    routers.forEach(router => {
      app.use(router.routes())
    })
    return routers[0]
  }

  /** www.js 文件改寫 */
  // 引入koa
  const Koa = require("koa")
  const Routers = require("../routers/index.js")
  // 實例化koa對象
  let app = new Koa()

  // 掛載路由
  app.use((new Routers(app)).allowedMethods())

  // 監(jiān)聽3000端口
  app.listen(3000, () => {
    console.log("服務器啟動 http://127.0.0.1:3000")
  })

目標:
  1.使用nunjucks解析html模板返回頁面
  2.了解koa中間件的使用

依賴 npm i nunjucks

nunjucks中文文檔

  /*
    *我向項目目錄下加入兩個準備好的html文件 目錄結(jié)構(gòu)如下
    │─.gitignore
    │─package.json
    │─README.md
    ├─bin
    │   │─www.js
    │─middlewares  //新增中間件目錄  
    │   ├─nunjucksMiddleware.js  //nunjucks模板中間件
    ├─node_modules
    │─routers
    │   │─home.js
    │   │─index.js
    │   │─user.js 
    │─views  //新增目錄 作為視圖層
        ├─home
        │   ├─home.html 
        ├─user
            ├─user.html
   */

  /* nunjucksMiddleware.js 中間件的編寫 
    *什么是中間件: 中間件就是在程序執(zhí)行過程中增加輔助功能
    *nunjucksMiddleware作用: 給請求上下文加上render方法 將來在路由中使用 
  */
  const nunjucks = require("nunjucks")
  const path = require("path")
  const moment = require("moment")
  let nunjucksEVN = new nunjucks.Environment(new nunjucks.FileSystemLoader("views"))
  // 為nkj加入一個過濾器
  nunjucksEVN.addFilter("timeFormate",  (time, formate) => moment(time).format( formate || "YYYY-MM-DD HH:mm:ss"))

  // 判斷文件是否有html后綴
  let isHtmlReg = /.html$/
  let resolvePath = (params = {}, filePath) => {
    filePath = isHtmlReg.test(filePath) ? filePath : filePath + (params.suffix || ".html")
    return path.resolve(params.path || "", filePath)
  }

  /** 
  * @description nunjucks中間件 添加render到請求上下文
  * @param params {}
  */
  module.exports = (params) => {
    return (ctx, next) => {
      ctx.render = (filePath, renderData = {}) => {
        ctx.type = "text/html"
        ctx.body = nunjucksEVN.render(resolvePath(params, filePath), Object.assign({}, ctx.state, renderData))
      }
      // 中間件本身執(zhí)行完成 需要調(diào)用next去執(zhí)行下一步計劃
      return next()
    }
  }

  /* 中間件掛載 www.js中增加部分代碼 */

  // 頭部引入文件 
  const nunjucksMiddleware = require("../middlewares/nunjucksMiddleware.js")
  //在路由之前調(diào)用 因為我們的中間件是在路由中使用的 故應該在路由前加到請求上下文ctx中
  app.use(nunjucksMiddleware({
    // 指定模板文件夾
    path: path.resolve(__dirname, "../views")
  })

  /* 路由中調(diào)用 以routers/home.js 為例 修改代碼如下*/
  const homeRouter = require("koa-router")()
  homeRouter.get(["/", "/index.html", "/index", "/home.html", "/home"], (ctx, next) => {
    // 渲染頁面的數(shù)據(jù)
    ctx.state.todoList = [
      {name: "吃飯", time: "2019.1.4 12:00"},
      {name: "下午茶", time: "2019.1.4 15:10"},
      {name: "下班", time: "2019.1.4 18:30"}
    ]
    // 這里的ctx.render方法就是我們通過nunjucksMiddleware中間件添加的
    ctx.render("home/home", {
      title: "首頁"
    })
  })
  module.exports = homeRouter

目標: 抽取頁面的公用部分 如導航/底部/html模板等

  /**views目錄下增加兩個文件夾_layout(公用模板) _component(公共組件) 目錄結(jié)構(gòu)如下
    │─.gitignore
    │─package.json
    │─README.md
    ├─bin
    │   │─www.js  /koa服務
    │─middlewares  //中間件目錄  
    │   ├─nunjucksMiddleware.js  //nunjucks模板中間件
    ├─node_modules
    │─routers  //服務路由目錄
    │   │─home.js
    │   │─index.js
    │   │─user.js 
    │─views  //頁面視圖層
        │─_component
        │   │─nav.html (公用導航)
        │─_layout
        │   │─layout.html  (公用html框架)
        ├─home
        │   ├─home.html 
        ├─user
            ├─user.html
  */

  
  
  
  
    
    
  
  
    
    {% block content %}
    {% endblock %}
  
  


  
  

    
首頁
    
用戶頁
  

  
  
  {% extends "../_layout/layout.html" %}
  {% block content %}
    
    {% include "../_component/nav.html" %}
    
待辦事項
    

      
      {% for item in todoList %}
        
{{item.name}} ---> {{item.time | timeFormate}}
      {% endfor %}
    
  {% endblock %}


  
  {% extends "../_layout/layout.html" %}
  {% block content %}
    {% include "../_component/nav.html" %}
    用戶中心
  {% endblock %}

目標: 處理頁面jscssimg等資源引入

依賴

用webpack打包靜態(tài)資源 npm i webpack webpack-cli -D

處理js npm i @babel/core @babel/preset-env babel-loader -D

處理less npm i css-loader less-loader less mini-css-extract-plugin -D

處理文件 npm i file-loader copy-webpack-plugin -D

處理html npm i html-webpack-plugin -D

清理打包文件 npm i clean-webpack-plugin -D

> *相關插件使用 查看npm相關文檔*

  /* 項目目錄 變更 
  │  .gitignore
  │  package.json
  │  README.md
  ├─bin
  │  www.js
  ├─config  //增加webpack配置目錄
  │  webpack.config.js
  ├─middlewares
  │  nunjucksMiddleware.js
  ├─routers
  │  home.js
  │  index.js
  │  user.js
  ├─src
  │  │─template.html  // + html模板 以此模板為每個入口生成 引入對應js的模板
  │  ├─images // +圖資源目錄
  │  │  ww.jpg
  │  ├─js // + js目錄 
  │  │  ├─home
  │  │  │   home.js
  │  │  └─user
  │  │      user.js
  │  └─less // + css目錄
  │      ├─common
  │      │   common.less
  │      │   nav.less
  │      ├─home
  │      │   home.less
  │      └─user
  │          user.less
  └─views
      ├─home
      │  home.html
      ├─user
      │  user.html
      ├─_component
      │      nav.html
      └─_layout  // webpac打包后的html模板
          ├─home
          │   home.html
          └─user
              user.html
  */

  
  
  
  
    
    
    
    
  
  
    
    {% block content %}
    {% endblock %}
  
  

  /* src/js/home/home.js 一個入口文件*/
  
  import "../../less/home/home.less" //引入css
  import img from "../../images/ww.jpg" //引入圖片
  console.log(111);
  let add = (a, b) => a + b; //箭頭函數(shù)
  let a = 3, b = 4;
  let c = add(a, b);
  console.log(c);
  // 這里只做打包演示代碼 不具任何意義

  
  // 引入公共樣式
  @import "../common/common.less";
  @import "../common/nav.less";

  .list {
    li {
      color: rebeccapurple;
    }
  }
  .bg-img {
    width: 200px;
    height: 200px;
    background: url(../../images/ww.jpg); // 背景圖片
    margin: 10px 0;
  }

  /* webpack配置  webpack.config.js */
  const path = require("path");
  const CleanWebpackPlugin = require("clean-webpack-plugin");
  const HtmlWebpackPlugin = require("html-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const CopyWebpackPlugin = require("copy-webpack-plugin");

  // 多入口
  let entry = {
    home: "src/js/home/home.js",
    user: "src/js/user/user.js"
  }

  module.exports = evn => ({
    mode: evn.production ? "production" : "development",
    // 給每個入口 path.reslove 
    entry: Object.keys(entry).reduce((obj, item) => (obj[item] = path.resolve(entry[item])) && obj, {}),
    output: {
      publicPath: "/",
      filename: "js/[name].js",
      path: path.resolve("dist")
    },
    module: {
      rules: [
        { // bable 根據(jù)需要轉(zhuǎn)換到對應版本 
          test: /.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"]
            }
          }
        },
        { // 轉(zhuǎn)換less 并交給MiniCssExtractPlug插件提取到多帶帶文件
          test: /.less$/,
          loader: [MiniCssExtractPlugin.loader,  "css-loader", "less-loader"],
          exclude: /node_modules/
        },
        { //將css、js引入的圖片目錄指到dist目錄下的images 保持與頁面引入的一致
          test: /.(png|svg|jpg|gif)$/,
          use: [{
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "./images",
          }
          }]
        },
        {
          test: /.(woff|woff2|eot|ttf|otf)$/,
          use: [{
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "./font",
          }
          }]
        }
      ]
    },
    plugins: [
      // 刪除上一次打包目錄(一般來說刪除自己輸出過的目錄 )
      new CleanWebpackPlugin(["dist", "views/_layout"], {
        // 當配置文件與package.json不再同一目錄時候需要指定根目錄
        root: path.resolve() 
      }),
      new MiniCssExtractPlugin({
        filename: "css/[name].css",
        chunkFilename: "[id].css"
      }),
      // 將src下的圖片資源平移到dist目錄
      new CopyWebpackPlugin(
        [{
          from: path.resolve("src/images"),
          to: path.resolve("dist/images")
        }
      ]),
      // HtmlWebpackPlugin 每個入口生成一個html 并引入對應打包生產(chǎn)好的js
      ...Object.keys(entry).map(item => new HtmlWebpackPlugin({
        // 模塊名對應入口名稱
        chunks: [item], 
        // 輸入目錄 (可自行定義 這邊輸入到views下面的_layout)
        filename: path.resolve("views/_layout/" + entry[item].split("/").slice(-2).join("/").replace("js", "html")),
        // 基準模板
        template: path.resolve("src/template.html")
      }))
    ]
  });

  
  "scripts": {
    "start": "node bin/www.js",
    "build": "webpack --env.production --config config/webpack.config.js"
  }

  運行 npm run build 后生成 dist views/_layout 兩個目錄

  
  
  
  
    
    
    
    
    
  
  
    {% block content %}
    {% endblock %}
    
  
  

  
  
  {% extends "../_layout/home/home.html" %}
  {% block content %}
    
    {% include "../_component/nav.html" %}
    
待辦事項
    

      
      {% for item in todoList %}
        
{{item.name}} ---> {{item.time | timeFormate}}
      {% endfor %}
    
    
 背景圖
    
    
  {% endblock %}

  /**koa處理靜態(tài)資源 
   * 依賴 npm i "koa-static
  */

  // www.js 增加 將靜態(tài)資源目錄指向 打包后的dist目錄
  app.use(require("koa-static")(path.resolve("dist")))

運行

npm run build
npm start
瀏覽器訪問127.0.0.1:3000 查看頁面 js css img 效果

目標: 文件發(fā)生改實時編譯打包

依賴 npm i pm2 concurrently

  /**項目中文件發(fā)生變動 需要重啟服務才能看到效果是一件蛋疼的事,故需要實時監(jiān)聽變動 */
  
    "scripts": {
      // concurrently 監(jiān)聽同時監(jiān)聽兩條命令
      "start": "concurrently "npm run build:dev" "npm run server:dev"",
      "dev": "npm start",
      // 生產(chǎn)環(huán)境 執(zhí)行兩條命令即可 無監(jiān)聽
      "product": "npm run build:pro && npm run server:pro",
      // pm2 --watch參數(shù)監(jiān)聽服務的代碼變更
      "server:dev": "pm2 start bin/www.js --watch",
      // 生產(chǎn)不需要用監(jiān)聽
      "server:pro": "pm2 start bin/www.js",
      // webpack --watch 對打包文件監(jiān)聽
      "build:dev": "webpack --watch --env.production --config config/webpack.config.js",
      "build:pro": "webpack --env.production --config config/webpack.config.js"
    }

目標: node請求接口數(shù)據(jù) 填充模板

依賴 npm i node-fetch

  /*上面的代碼中routers/home.js首頁路由中我們向頁面渲染了下面的一組數(shù)據(jù) */
  ctx.state.todoList = [
    {name: "吃飯", time: "2019.1.4 12:00"},
    {name: "下午茶", time: "2019.1.4 15:10"},
    {name: "下班1", time: "2019.1.4 18:30"}
  ]
  /*但 數(shù)據(jù)是同步的 項目中我們必然會向java獲取其他后臺拿到渲染數(shù)據(jù)再填充頁面 我們來看看怎么做*/

    /*我們在根目錄下創(chuàng)建一個util的目錄作為工具庫 并簡單封裝fetch.js請求數(shù)據(jù)*/
  const nodeFetch = require("node-fetch")
  module.exports = ({url, method, data = {}}) => {
    // get請求 將參數(shù)拼到url
    url = method === "get" || !method ? "?" + Object.keys(data).map(item => `${item}=${data[item]}`).join("&") : url;
    return nodeFetch(url, {
          method: method || "get",
          body:  JSON.stringify(data),
          headers: { "Content-Type": "application/json" },
      }).then(res => res.json())
  }

  /*在根目錄下創(chuàng)建一個service的目錄作為數(shù)據(jù)層 并創(chuàng)建一個exampleService.js 作為示例*/
  //引入封裝的 請求工具
  const fetch = require("../util/fetch.js")
  module.exports = {
    getTodoList (params = {}) {
      return fetch({
        url: "https://www.easy-mock.com/mock/5c35a2a2ce7b4303bd93fbda/example/todolist",
        method: "post",
        data: params
      })
    },
    //...
  }

  /* 將請求加入到路由中 routers/home.js 改寫 */
  const homeRouter = require("koa-router")()
  let exampleService = require("../service/exampleService.js") // 引入service api
  //將路由匹配回調(diào) 改成async函數(shù) 并在請時候 await數(shù)據(jù)回來 再調(diào)用render
  homeRouter.get(["/", "/index.html", "/index", "/home.html", "/home"], async (ctx, next) => {
    // 請求數(shù)據(jù)
    let todoList = await exampleService.getTodoList({name: "ott"})
    // 替換原來的靜態(tài)數(shù)據(jù)
    ctx.state.todoList = todoList.data
    ctx.render("home/home", {
      title: "首頁"
    })
  })
  // 導出路由備用
  module.exports = homeRouter

目標: 使程序運行可視

依賴 npm i log4js

  /* 在util目錄下創(chuàng)建 logger.js 代碼如下 作簡單的logger封裝 */
  const log4js = require("log4js");
  const path = require("path")
  // 定義log config
  log4js.configure({
    appenders: { 
      // 定義兩個輸出源
      info: { type: "file", filename: path.resolve("log/info.log") },
      error: { type: "file", filename: path.resolve("log/error.log") }
    },
    categories: { 
      // 為info/warn/debug 類型log調(diào)用info輸出源   error/fatal 調(diào)用error輸出源
      default: { appenders: ["info"], level: "info" },
      info: { appenders: ["info"], level: "info" },
      warn: { appenders: ["info"], level: "warn" },
      debug: { appenders: ["info"], level: "debug" },
      error: { appenders: ["error"], level: "error" },
      fatal: { appenders: ["error"], level: "fatal" },
    }
  });
  // 導出5種類型的 logger
  module.exports = {
    debug: (...params) => log4js.getLogger("debug").debug(...params),
    info: (...params) => log4js.getLogger("info").info(...params),
    warn: (...params) => log4js.getLogger("warn").warn(...params),
    error: (...params) => log4js.getLogger("error").error(...params),
    fatal: (...params) => log4js.getLogger("fatal").fatal(...params),
  }

  /* 在fetch.js中是喲logger */
  const nodeFetch = require("node-fetch")
  const logger = require("./logger.js")

  module.exports = ({url, method, data = {}}) => {
    // 加入請求日志
    logger.info("請求url:", url , method||"get", JSON.stringify(data))

    // get請求 將參數(shù)拼到url
    url = method === "get" || !method ? "?" + Object.keys(data).map(item => `${item}=${data[item]}`).join("&") : url;

    return nodeFetch(url, {
      method: method || "get",
        body:  JSON.stringify(data),
        headers: { "Content-Type": "application/json" },
    }).then(res => res.json())
  }

  
  [2019-01-09T17:34:11.404] [INFO] info - 請求url: https://www.easy-mock.com/mock/5c35a2a2ce7b4303bd93fbda/example/todolist post {"name":"ott"}

注: 僅共學習參考,生產(chǎn)配置自行斟酌!轉(zhuǎn)載請備注來源!