開源netcore先後端分離,前端服務端渲染方案

時間 2020-02-13

標籤開源 netcore 後端分離前端服務渲染方案简体版

原文原文鏈接

SPA單頁面應用容器開源地址： https://github.com/yuzd/Spa

功能介紹

前端應用開發完後打包後自助上傳部署發佈
配合服務端腳本(javascript)實現服務端業務邏輯編寫渲染SSR功能
能夠快速回滾到上一個版本
能夠設置環境變量供SSR功能使用
服務端腳本提供執行日誌 redis db三大組件打造強大的基於js的ssr服務端運行腳本功能

快速部署（支持docker），各功能介紹使用請查看wiki

截圖介紹

首頁

新建單頁面應用

從新部署上傳，回滾上一個上傳版本

全局配置

服務端SSR腳本編輯器

日誌查看

01.快速開始

將本項目clone到本地 git clone https://github.com/yuzd/Spa.git 或者下載zip到本地javascript

而後用vs 2017或以上版本打開！css

打開appsettings.json 進行您所使用環境的配置參數：html

參數名稱	說明
BackUpLimit	每一個單頁面上傳會進行備份,這個參數是應用維度下最多保留幾回上傳歷史
BasicAuth	設置進入系統的帳號密碼
RedisConnection	配置redis的鏈接字符串(爲啥用redis請看ssr相關介紹)
ConnectionString	配置mysql的鏈接字符串(爲啥用mysql請看ssr相關介紹)

F5 運行前端

而後打開 http://localhost:5000/adminjava

02.單頁面應用規範

系統跑起來以後，咱們的前端容器就已經搞定了。node

什麼是單頁面應用呢？mysql

就是指一個系統只加載一次資源，以後的操做交互、數據交互是經過路由、ajax來進行，頁面並無刷新。
特色是加載次數少，加載之後性能較高

對於本套系統的規範git

無論你用什麼前端技術，只要是靜態的html，js,css 的前端資源，就能夠部署到本系統！
須要有一個約束須要有index.html

例以下面的例子：github

03.單頁面應用部署,回滾

下面咱們開發一個最簡單單頁應用web

有2個文件

index.html
index.js

而後我打包成 detai.zip 文件

進入系統新建一個單頁面應用

單頁面名稱我這裏填 detail 發佈成功後能夠經過
選擇剛剛的zip 而後點擊【建立並部署】
而後打開 http://localhost:5000/detail 進行確認是否成功以下圖

接下來我要修改index.html 而後從新部署

從新打包zip 而後

從新訪問 http://localhost:5000/detail 進行確認是否修改爲功以下圖

你們應該注意到了，前端有改動只要從新上傳馬上生效！

若是發佈以後發佈改錯了咋辦，固然是馬上回滾到上一次的上傳版本！

以下圖回滾功能：

從新訪問 http://localhost:5000/detail 進行確認是否回滾成功以下圖

04.單頁面應用作服務端渲染SSR

首先得理解下面兩點

什麼是服務端渲染？ 關鍵詞：後端代碼+模板引擎
什麼場景下須要用到服務端渲染？關鍵詞：seo：動態的標題 Description 等meta信息

什麼是服務端渲染？下面是個人理解

我寫了一個網頁，部署到web容器後，我打開瀏覽器請求，服務端收到請求後先在服務端讀取個人網頁的內容，而後結合 後端代碼+模板引擎的方式從新渲染再返回給瀏覽器展現

什麼場景下須要用到服務端渲染？下面是個人理解

當你的頁面的標題，Description 等meta信息須要動態指定的時候。好比：

產品分享頁面：

productId=1 productName = "產品A" http://localhost:5000/detai?productId=1

須要Title要指定爲 "產品A"

productId=2 productName = "產品B" http://localhost:5000/detai?productId=2

須要Title要指定爲 "產品B"

要知足這個需求僅僅靠前端是沒有辦法完成的。由於你頁面在頁面ready後再去調用ajax方法是沒有辦法動態指定Title的。這點能夠你們實驗實驗！

解決方案：服務端代碼+模板引擎

本系統最大的亮點來了：模板引擎約定好，前端本身就能搞定服務端js代碼

是用上面的 產品分享頁面 爲例：

以下圖，進入單應用的SSR腳本編輯功能

默認腳本編輯器裏面會寫好代碼模板，以下：

module.exports = {
  main:function (path){
    
  }
};

當提交保存腳本代碼後，訪問 http://localhost:5000/detai?productId=2 會先把當前頁面的請求url 做爲path參數傳到腳本的 main 方法！

咱們用 log 組件進行打日誌記錄下：

查看日誌：

業務代碼 作以下改寫SSR腳本：

let log = require('log');

module.exports = {
  main:function (path){
    log.Info(path);
    var requestparams = module.exports.GetRequest(path);
    var productTid = requestparams.productId;
    if(!productTid) return;
    if(productTid == 1){
      return {
        ProductName:'產品A'
      };
    }
    else if (productTid == 2){
      return {
        ProductName:'產品B'
      };      
    }
    else {
      return {
        ProductName:'其餘產品'
      };      
    }
  },
  /** * [獲取URL中的參數名及參數值的集合] * 示例URL:http://localhost:5000/detail?productId=2 * @param {[string]} urlStr [當該參數不爲空的時候，則解析該url中的參數集合] * @return {[string]} [參數集合] */
  GetRequest:function (urlStr) {
      var url = "?" + urlStr.split("?")[1];
      var theRequest = {};
      if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          strs = str.split("&");
          for (var i = 0; i < strs.length; i++) {
              theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
          }
      }
      return theRequest;
  }
};

注意：上面我把main方法改造了返回了一個對象

{
    "ProductName" : "xxxxxx"
    
}

模板引擎其實很簡單：

SSR腳本返回了什麼對象在html中用 @Model.xxxx 的形式使用！！簡單吧！！以下圖：

邏輯和上面的SSR腳本一致！

如上咱們用SSR腳本代碼的業務邏輯 + 模板引擎解決服務端渲染！

上面的腳本代碼咱們用了log組件=》方便的把腳本的執行過程當中記錄日誌，固然了正常業務的服務端渲染邏輯確定不是這麼簡單的，不用擔憂咱們接下來介紹另外2個組件： redis組件和 db組件

05.SSR腳本的擴展組件介紹

本系統預製了 log組件 redis組件 db組件，若是還有其餘須要也能夠自行擴展

前面咱們介紹了log組件。組件的使用採用commmonJS的方式先 require 進來纔可使用

let log = require('log');
let db = require('db');
let redis = require('redis');

log組件

方法	參數	說明
Info(msg)	string	記錄Info級別日誌
Warn(msg)	string	記錄Warn級別日誌
Error(msg)	string	記錄Error級別日誌
Debug(msg)	string	記錄Debug級別日誌

日誌採用了開源的LogDashbord 中間件解析Nlog的日誌文件

redis組件

前提：如上文中已提到，要在appsettings.json裏面配置redisconnection鏈接字符串

方法	參數	說明
Get(key)	string	根據key從redis裏面讀取信息
Set(key,value,senconds)	string,string,int	根據key把value設置到redis裏面,通過senconds(秒)後失效

通常作服務端渲染的腳本里面講究的是執行快，否則服務端代碼執行很慢，很嚴重影響用戶體驗！

是用上面的 產品分享頁面 爲例：事先根據productId把product的對象記錄在redis裏面！

db組件

前提：如上文中已提到，要在appsettings.json裏面配置db的鏈接字符串

方法	參數	說明
Query(sql)	string	根據sql從db裏面讀數據，返回db裏row的jsonArry
Query(sql,param)	string，object	根據sql從db裏面讀數據，返回db裏row的jsonArry，和上面的區別是能夠指定查詢替換符，這樣能夠防止sql注入
Excute(sql)	string	執行db的 insert,update,delete語句
Excute(sql,param)	string，object	執行db的 insert,update,delete語句，和上面的區別是能夠指定查詢替換符，這樣能夠防止sql注入