SPA單頁(yè)面應(yīng)用容器?開(kāi)源地址：?https://github.com/yuzd/Spa

功能介紹

• 前端應(yīng)用開(kāi)發(fā)完后打包后自助上傳部署發(fā)布

• 配合服務(wù)端腳本(javascript)實(shí)現(xiàn)服務(wù)端業(yè)務(wù)邏輯編寫(xiě)渲染SSR功能

• 可以快速回滾到上一個(gè)版本

• 可以設(shè)置環(huán)境變量供SSR功能使用

• 服務(wù)端腳本提供執(zhí)行日志 redis db三大組件打造強(qiáng)大的基于js的ssr服務(wù)端運(yùn)行腳本功能

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

截圖介紹

首頁(yè)

新建單頁(yè)面應(yīng)用

重新部署上傳，回滾上一個(gè)上傳版本

全局配置

服務(wù)端SSR腳本編輯器

日志查看

01.快速開(kāi)始

將本項(xiàng)目clone到本地 git clone?https://github.com/yuzd/Spa.git?或者 下載zip到本地

然后用vs 2017或以上版本 打開(kāi)！

打開(kāi)appsettings.json 進(jìn)行您所使用環(huán)境的配置參數(shù)：

參數(shù)名稱說(shuō)明

BackUpLimit	每個(gè)單頁(yè)面上傳會(huì)進(jìn)行備份,這個(gè)參數(shù)是應(yīng)用維度下最多保留幾次上傳歷史
BasicAuth	設(shè)置進(jìn)入系統(tǒng)的賬號(hào)密碼
RedisConnection	配置redis的連接字符串(為啥用redis請(qǐng)看ssr相關(guān)介紹)
ConnectionString	配置mysql的連接字符串(為啥用mysql請(qǐng)看ssr相關(guān)介紹)

F5 運(yùn)行

然后打開(kāi)?http://localhost:5000/admin

02.單頁(yè)面應(yīng)用規(guī)范

系統(tǒng)跑起來(lái)之后，我們的前端容器就已經(jīng)搞定了。

什么是單頁(yè)面應(yīng)用呢？

• 就是指一個(gè)系統(tǒng)只加載一次資源，之后的操作交互、數(shù)據(jù)交互是通過(guò)路由、ajax來(lái)進(jìn)行，頁(yè)面并沒(méi)有刷新。

• 特點(diǎn)是加載次數(shù)少，加載以后性能較高

對(duì)于本套系統(tǒng)的規(guī)范

• 不管你用什么前端技術(shù)，只要是 靜態(tài)的html，js,css 的前端資源，就可以部署到本系統(tǒng)！

• 需要有一個(gè)約束 需要有index.html

例如下面的例子：

03.單頁(yè)面應(yīng)用部署,回滾

下面我們開(kāi)發(fā)一個(gè)最簡(jiǎn)單單頁(yè)應(yīng)用

有2個(gè)文件

• index.html

• index.js

然后我打包成 detai.zip 文件

進(jìn)入系統(tǒng) 新建一個(gè)單頁(yè)面應(yīng)用

• 單頁(yè)面名稱我這里填 detail 發(fā)布成功后可以通過(guò)

• 選擇剛剛的zip 然后點(diǎn)擊【創(chuàng)建并部署】

• 然后打開(kāi)?http://localhost:5000/detail?進(jìn)行確認(rèn)是否成功 如下圖

接下來(lái)我要修改index.html 然后重新部署

重新打包zip 然后

重新訪問(wèn)?http://localhost:5000/detail?進(jìn)行確認(rèn)是否修改成功 如下圖

大家應(yīng)該注意到了，前端有改動(dòng) 只要重新上傳立刻生效！

如果發(fā)布之后發(fā)布改錯(cuò)了咋辦，當(dāng)然是立刻回滾到上一次的上傳版本！

如下圖 回滾功能：

重新訪問(wèn)?http://localhost:5000/detail?進(jìn)行確認(rèn)是否回滾成功 如下圖?

04.單頁(yè)面應(yīng)用做服務(wù)端渲染SSR

首先得理解下面兩點(diǎn)

• 什么是服務(wù)端渲染？?關(guān)鍵詞：后端代碼+模板引擎

• 什么場(chǎng)景下需要用到服務(wù)端渲染？關(guān)鍵詞：seo：動(dòng)態(tài)的標(biāo)題 Description 等meta信息

什么是服務(wù)端渲染？下面是我的理解

我寫(xiě)了一個(gè)網(wǎng)頁(yè)，部署到web容器后，我打開(kāi)瀏覽器請(qǐng)求，服務(wù)端收到請(qǐng)求后 先在服務(wù)端讀取我的網(wǎng)頁(yè)的內(nèi)容，然后結(jié)合?后端代碼+模板引擎的方式重新渲染再 返回給瀏覽器展示

什么場(chǎng)景下需要用到服務(wù)端渲染？下面是我的理解

當(dāng)你的頁(yè)面的標(biāo)題，Description 等meta信息 需要?jiǎng)討B(tài)指定的時(shí)候。比如：

產(chǎn)品分享頁(yè)面：

productId=1 productName = "產(chǎn)品A"?http://localhost:5000/detai?productId=1

需要Title要指定為 "產(chǎn)品A"

productId=2 productName = "產(chǎn)品B"?http://localhost:5000/detai?productId=2

需要Title要指定為 "產(chǎn)品B"

要滿足這個(gè)需求 僅僅靠前端是沒(méi)有辦法完成的。因?yàn)槟沩?yè)面在頁(yè)面ready后再去調(diào)用ajax方法是沒(méi)有辦法動(dòng)態(tài)指定Title的。這點(diǎn)可以大家實(shí)驗(yàn)實(shí)驗(yàn)！

解決方案：服務(wù)端代碼+模板引擎

本系統(tǒng)最大的亮點(diǎn)來(lái)了：模板引擎約定好，前端自己就能搞定服務(wù)端js代碼

是用上面的?產(chǎn)品分享頁(yè)面?為例：

如下圖，進(jìn)入單應(yīng)用的SSR腳本編輯功能

默認(rèn) 腳本編輯器里面會(huì) 寫(xiě)好代碼模板， 如下：

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

當(dāng)提交保存 腳本代碼后，訪問(wèn)?http://localhost:5000/detai?productId=2?會(huì)先把當(dāng)前頁(yè)面的請(qǐng)求url 作為path參數(shù)傳到 腳本的 main 方法！

我們用 log 組件進(jìn)行打日志記錄下：

查看日志：

業(yè)務(wù)代碼?做如下改寫(xiě)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:'產(chǎn)品A'};}else if (productTid == 2){return {ProductName:'產(chǎn)品B'};}else {return {ProductName:'其他產(chǎn)品'};}},/*** [獲取URL中的參數(shù)名及參數(shù)值的集合]* 示例URL:http://localhost:5000/detail?productId=2* @param {[string]} urlStr [當(dāng)該參數(shù)不為空的時(shí)候，則解析該url中的參數(shù)集合]* @return {[string]} [參數(shù)集合]*/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方法改造了 返回了 一個(gè) 對(duì)象

{"ProductName" : "xxxxxx"}

模板引擎其實(shí)很簡(jiǎn)單：

SSR腳本返回了什么對(duì)象 在html中用 @Model.xxxx 的形式使用！！簡(jiǎn)單吧！！如下圖：

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

如上我們用SSR腳本代碼的業(yè)務(wù)邏輯 + 模板引擎 解決服務(wù)端渲染！

上面的腳本代碼我們用了log組件=》方便的把腳本的執(zhí)行過(guò)程中記錄日志， 當(dāng)然了 正常業(yè)務(wù)的服務(wù)端渲染邏輯肯定不是這么簡(jiǎn)單的，不用擔(dān)心我們接下來(lái)介紹另外2個(gè)組件：redis組件 和 db組件

05.SSR腳本的擴(kuò)展組件介紹

本系統(tǒng)預(yù)制了 log組件 redis組件 db組件，如果還有其他需要也可以自行擴(kuò)展

前面我們介紹了log組件。組件的使用采用commmonJS的方式 先 require 進(jìn)來(lái) 才可以使用

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

log組件

方法參數(shù)說(shuō)明

Info(msg)	string	記錄Info級(jí)別日志
Warn(msg)	string	記錄Warn級(jí)別日志
Error(msg)	string	記錄Error級(jí)別日志
Debug(msg)	string	記錄Debug級(jí)別日志

日志采用了開(kāi)源的LogDashbord 中間件解析Nlog的日志文件

redis組件

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

方法參數(shù)說(shuō)明

Get(key)	string	根據(jù)key從redis里面讀取信息
Set(key,value,senconds)	string,string,int	根據(jù)key把value設(shè)置到redis里面,經(jīng)過(guò)senconds(秒)后失效

一般做服務(wù)端渲染的腳本里面講究的是執(zhí)行快，不然服務(wù)端代碼執(zhí)行很慢，很?chē)?yán)重影響用戶體驗(yàn)！

是用上面的?產(chǎn)品分享頁(yè)面?為例：事先根據(jù)productId把product的對(duì)象記錄在redis里面！

db組件

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

方法參數(shù)說(shuō)明

Query(sql)	string	根據(jù)sql從db里面讀數(shù)據(jù)，返回db里row的jsonArry
Query(sql,param)	string，object	根據(jù)sql從db里面讀數(shù)據(jù)，返回db里row的jsonArry，和上面的區(qū)別是可以指定查詢替換符，這樣可以防止sql注入
Excute(sql)	string	執(zhí)行db的 insert,update,delete語(yǔ)句
Excute(sql,param)	string，object	執(zhí)行db的 insert,update,delete語(yǔ)句，和上面的區(qū)別是可以指定查詢替換符，這樣可以防止sql注入

是用上面的?產(chǎn)品分享頁(yè)面?為例：假如db里面 有一個(gè)product表

腳本可以這么寫(xiě)：

我在實(shí)際業(yè)務(wù)中還這么用過(guò)：

先從redis里面取，如果redis沒(méi)有我就從db里面取了放進(jìn)redis！這樣就比較靈活，而且效率也很高！！

全局配置功能

全局配置提供一個(gè)json編輯器，配置的json信息，可以直接在html 用 @Model.Env.XXX 的方式使用

例如：我上面配置了一個(gè) test ：“111”

?

總結(jié)

以上是生活随笔為你收集整理的开源netcore前后端分离,前端服务端渲染方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。