开源netcore前后端分离,前端服务端渲染方案

摘要:
如下图回滚功能:重新访问http://localhost:5000/detail进行确认是否回滚成功如下图04.单页面应用做服务端渲染SSR首先得理解下面两点什么是服务端渲染?productId=2需要Title要指定为"产品B"要满足这个需求仅仅靠前端是没有办法完成的。

SPA单页面应用容器开源地址:https://github.com/yuzd/Spa

功能介绍

  • 前端应用开发完后打包后自助上传部署发布
  • 配合服务端脚本(javascript)实现服务端业务逻辑编写渲染SSR功能
  • 可以快速回滚到上一个版本
  • 可以设置环境变量供SSR功能使用
  • 服务端脚本提供执行日志 redis db三大组件打造强大的基于js的ssr服务端运行脚本功能

快速部署(支持docker),各功能介绍使用 请查看wiki

截图介绍

首页

image

新建单页面应用

image

image

重新部署上传,回滚上一个上传版本

image

全局配置

image

服务端SSR脚本编辑器

image

日志查看

image

01.快速开始

image

将本项目clone到本地 git clone https://github.com/yuzd/Spa.git 或者 下载zip到本地

然后用vs 2017或以上版本 打开!

打开appsettings.json 进行您所使用环境的配置参数:

参数名称说明
BackUpLimit每个单页面上传会进行备份,这个参数是应用维度下最多保留几次上传历史
BasicAuth设置进入系统的账号密码
RedisConnection配置redis的连接字符串(为啥用redis请看ssr相关介绍)
ConnectionString配置mysql的连接字符串(为啥用mysql请看ssr相关介绍)

F5 运行

image

然后打开 http://localhost:5000/admin

image

02.单页面应用规范

系统跑起来之后,我们的前端容器就已经搞定了。

什么是单页面应用呢?

  • 就是指一个系统只加载一次资源,之后的操作交互、数据交互是通过路由、ajax来进行,页面并没有刷新。
  • 特点是加载次数少,加载以后性能较高

对于本套系统的规范

  • 不管你用什么前端技术,只要是 静态的html,js,css 的前端资源,就可以部署到本系统!
  • 需要有一个约束 需要有index.html

例如下面的例子:

image

03.单页面应用部署,回滚

下面我们开发一个最简单单页应用

有2个文件

  • index.html
  • index.js

image

然后我打包成 detai.zip 文件

进入系统 新建一个单页面应用

image

  • 单页面名称我这里填 detail 发布成功后可以通过
  • 选择刚刚的zip 然后点击【创建并部署】
  • 然后打开 http://localhost:5000/detail 进行确认是否成功 如下图

image

接下来我要修改index.html 然后重新部署

image

重新打包zip 然后

image

image

重新访问 http://localhost:5000/detail 进行确认是否修改成功 如下图

image

大家应该注意到了,前端有改动 只要重新上传立刻生效!

如果发布之后发布改错了咋办,当然是立刻回滚到上一次的上传版本!

如下图 回滚功能:

image

重新访问 http://localhost:5000/detail 进行确认是否回滚成功 如下图 image

04.单页面应用做服务端渲染SSR

首先得理解下面两点

  • 什么是服务端渲染? 关键词:后端代码+模板引擎
  • 什么场景下需要用到服务端渲染?关键词:seo:动态的标题 Description 等meta信息

什么是服务端渲染?下面是我的理解

我写了一个网页,部署到web容器后,我打开浏览器请求,服务端收到请求后 先在服务端读取我的网页的内容,然后结合 后端代码+模板引擎的方式重新渲染再 返回给浏览器展示

什么场景下需要用到服务端渲染?下面是我的理解

当你的页面的标题,Description 等meta信息 需要动态指定的时候。 比如:

产品分享页面

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

需要Title要指定为 "产品A"

image

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

需要Title要指定为 "产品B"

image

要满足这个需求 仅仅靠前端是没有办法完成的。因为你页面在页面ready后再去调用ajax方法是没有办法动态指定Title的。这点可以大家实验实验!

解决方案: 服务端代码+模板引擎

本系统最大的亮点来了:模板引擎约定好,前端自己就能搞定服务端js代码

是用上面的 产品分享页面 为例:

如下图,进入单应用的SSR脚本编辑功能

image

默认 脚本编辑器里面会 写好代码模板, 如下:

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

当提交保存 脚本代码后,访问 http://localhost:5000/detai?productId=2 会先把当前页面的请求url 作为path参数传到 脚本的 main 方法!

我们用 log 组件进行打日志记录下:

image

查看日志:

image

业务代码 做如下改写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"
    
}

image

模板引擎其实很简单:

SSR脚本返回了什么对象 在html中用 @Model.xxxx 的形式使用!!简单吧!!如下图:

image

逻辑和上面的SSR脚本一致!

image

如上我们用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的日志文件

image

redis组件

前提:如上文中已提到,要在appsettings.json里面配置redisconnection连接字符串

方法参数说明
Get(key)string根据key从redis里面读取信息
Set(key,value,senconds)string,string,int根据key把value设置到redis里面,经过senconds(秒)后失效

一般做服务端渲染的脚本里面讲究的是执行快,不然服务端代码执行很慢,很严重影响用户体验!

是用上面的 产品分享页面 为例:事先根据productId把product的对象记录在redis里面!

image

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注入

是用上面的 产品分享页面 为例:假如db里面 有一个product表

image

脚本可以这么写:

image

我在实际业务中还这么用过:

先从redis里面取,如果redis没有我就从db里面取了放进redis!这样就比较灵活,而且效率也很高!!

全局配置功能

全局配置提供一个json编辑器,配置的json信息,可以直接在html 用 @Model.Env.XXX 的方式使用

image

例如:我上面配置了一个 test : “111”

image

image

免责声明:文章转载自《开源netcore前后端分离,前端服务端渲染方案》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MIPI DSI 和 D-PHY 初始化序列IOS开发之__bridge,__bridge_transfer和__bridge_retained (转)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

java的输入输出

0x01:输出流 java常用的输出语句有下面三种: System.out.println();//换行打印,输出之后会自动换行  System.out.print();//不换行打印 System.out.printf();//按格式输出 0x02:输出示例 public class test { public static void...

如何解决Linux 系统下 ifconfig 命令无网络接口 ens33

今天我在做Redis的哨兵集群模式的时候,以前都是好的,也不知道从什么时候开始就无法连接Redis服务器了,就是运行如下命令,没有效果:redis-server redis.conf,然后在通过命令查看redis的状态,始终没有启动Redis,命令如下:ps -ef|grep redis 或者 ps -ef|grep 6379 ,查询不到Redis服务器的...

初探机器学习之使用讯飞TTS服务实现在线语音合成

最近在调研使用各个云平台提供的AI服务,有个语音合成的需求因此就使用了一下科大讯飞的TTS服务,也用.NET Core写了一个小示例,下面就是这个小示例及其相关背景知识的介绍。 一、什么是语音合成(TTS) 1.1 What is 语音合成? 将文字信息转化为声音信息,给应用配上“嘴巴”,这就是语音合成。 Note:语音合成和语音识别技术是实现人机语音通...

java8中List根据某一字段去重

实体类: package test; public class User { private String userid; private String username; private String age; private String address; public User(String use...

完整UI组件库Kendo UI for Vue R3 2021

R3 2021版本是Kendo UI for Vue有史以来最重大的版本发布,这个版本非常庞大,其中有20个新的原生组件,或者说有34个新组件,包括各种图表和数据可视化。下来,跟我们一起了解一下这些功能吧! Kendo UI for Vue R3 2021最新版下载 支持Bootstrap 5 在 R3 2021 中,Kendo UI for Vue正式...

delphi 对应 c# 的一些函数及类型的转换方法【原】

例一 实现目的:将字符串中每一个字符转成二进制(比如 'Data' 中的 D 转成 00100010 ,整个就是 00100010100001100010111010000110) 处理逻辑:string result = StrToByte("Data"); result结果是00100010100001100010111010000110   1、实际...