开源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到本地

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

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

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

F5 运行

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

02.单页面应用规范

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

什么是单页面应用呢?

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

  • 特点是加载次数少,加载以后性能较高

对于本套系统的规范

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

  • 需要有一个约束 需要有index.html

例如下面的例子:

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

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

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

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

脚本可以这么写:

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

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

全局配置功能

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

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/311871.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[蓝桥杯2016初赛]方格填数-next_permutation

代码如下&#xff1a; #include <iostream> #include <algorithm> using namespace std;int main() {int a[10] {0, 1, 2, 3, 4, 5, 6, 7, 8, 9};int cnt 0;do {if ((abs(a[0] - a[1]) ! 1) && (abs(a[1] - a[2]) ! 1) && (abs(a[3] - a[4]) ! …

word List 13

word List 13 如果存在什么问题&#xff0c;欢迎批评指正&#xff01;谢谢&#xff01;

ASP.NetCore+VUE 实现学生成绩管理系统(一)

周三陪伴是最长情的告白还有两天情人节&#xff1a;「无论是在家里&#xff0c;还是在工作&#xff0c;或者是在自我防护中&#xff0c;多给家人爱人发句平安&#xff0c;是最有心意、最重要的一件事。」♥感谢老李????近来一段时间一直没有学习新的东西&#xff0c;闲暇的…

下拉菜单实现树状结构_树形图:复杂层次结构的数据可视化

树形图&#xff1a;复杂层次结构的数据可视化作者&#xff1a;Page Laubheimer[1]树形图是一种复杂的&#xff0c;基于区域的数据可视化&#xff0c;用于复杂层次结构的数据&#xff0c;可能难以精确解释。在许多情况下&#xff0c;最好使用更简单的可视化效果&#xff08;例如…

[蓝桥杯2016决赛]路径之谜

题目描述 小明冒充X星球的骑士&#xff0c;进入了一个奇怪的城堡。城堡里边什么都没有&#xff0c;只有方形石头铺成的地面。 假设城堡地面是 n x n 个方格。 按习俗&#xff0c;骑士要从西北角走到东南角。可以横向或纵向移动&#xff0c;但不能斜着走&#xff0c;也不能跳跃…

数据结构---二叉平衡排序树的删除

数据结构—二叉平衡排序树的删除 原理&#xff1a;参考趣学数据结构 代码&#xff1a; #include<stdio.h> #include<stdlib.h> typedef struct avlTree {int data;struct avlTree *lchild, *rchild;int height; }avlTree;int height(avlTree* AVLTree);//声明av…

Magicodes.IE 2.0发布

Magicodes.IE是我们维护的开源的导入导出通用库&#xff0c;去年年底已加入NCC开源组织。Github地址&#xff1a;https://github.com/xin-lai/Magicodes.IEMagicodes.IE不是一蹴而就&#xff0c;而是根据实际需求不断迭代出来的&#xff0c;而且历经多次重构。这一次&#xff0…

python百分号用法_python百分号%—%s、%d、%f

百分号%表示占位符&#xff0c;在后续通过%传入真实的值 %s 拼接字符串&#xff0c;实际可以接受任何类型的值 %d 只能拼接整数数字 %.nf 四舍五入拼接浮点数&#xff0c;n表示保留到小数点后n位&#xff0c;不加.n默认保留6位小数 %% 在有%拼接的的字符串里&#xff0c;如果要…

《ASP.NET Core 微服务实战》-- 读书笔记(第11章)

第 11 章 开发实时应用和服务在本章&#xff0c;我们将讨论“实时”的准确含义&#xff0c;以及在大部分消费者看来应该属于这一范畴的应用类型接着&#xff0c;我们将探讨 WebSocket&#xff0c;并分析为什么传统的 WebSocket 与云环境完全不相适应&#xff0c;最后我们将构建…

word List 14

word List 14 如果存在什么问题&#xff0c;欢迎批评指正&#xff01;谢谢&#xff01;

python编程模式是什么_python 开发的三种运行模式详细介绍

Python 三种运行模式 Python作为一门脚本语言&#xff0c;使用的范围很广。有的同学用来算法开发&#xff0c;有的用来验证逻辑&#xff0c;还有的作为胶水语言&#xff0c;用它来粘合整个系统的流程。不管怎么说&#xff0c;怎么使用python既取决于你自己的业务场景&#xff0…

递归实现排列型枚举

把 1∼n 这 n 个整数排成一行后随机打乱顺序&#xff0c;输出所有可能的次序。 输入格式 一个整数 n。 输出格式 按照从小到大的顺序输出所有方案&#xff0c;每行 1 个。 首先&#xff0c;同一行相邻两个数用一个空格隔开。 其次&#xff0c;对于两个不同的行&#xff0c;…

【在路上5】实时计算助力派件管控

签收率系统试运营以来&#xff0c;每天算出高额罚款&#xff0c;虽然没有真正执行&#xff0c;但也挺吓人的。并且&#xff0c;完完全全的把全网人员积极性提升起来了。总部网络管理中心每天给出各省区前一天的签收率报表&#xff0c;来了个排名和点名&#xff1b;各省区管理中…

数据结构---B-(B)、B+的总结

数据结构—B-&#xff08;B&#xff09;、B的总结 原理&#xff1a;参考趣学数据结构 m阶B-树规则(有序的&#xff08;左子树的元素值<根节点的元素值<右子树的元素值&#xff09;、平衡的&#xff08;每个结点的左右子树的高度差<1&#xff09;、多路的&#xff08…

dfs巩固训练

按顺序从上往下刷即可&#xff01;&#xff01;&#xff01; 知识点: 关于环形的数组&#xff0c;前移动和后移动可能会溢出下标。解决方法是&#xff0c;转移后的坐标公式为 &#xff08;原坐标改变量数组长度&#xff09;%数组长度 易错点: 写搜索时候&#xff0c;有时候会…

python适用范围_Python应用范围总结概览

Python就是万金油&#xff01; Python&#xff08;派森&#xff09;&#xff0c;它是一个简单的、解释型的、交互式的、可移植的、面向对象的超高级语言。这就是对Python语言的最简单的描述。 Python有一个交互式的开发环境&#xff0c;因为Python是解释运行&#xff0c;这大大…

重磅!K8S 1.18版本将内置支持SideCar容器。

作者&#xff1a;justmine头条号&#xff1a;大数据与云原生微信公众号&#xff1a;大数据与云原生创作不易&#xff0c;在满足创作共用版权协议的基础上可以转载&#xff0c;但请以超链接形式注明出处。为了方便阅读&#xff0c;微信公众号已按分类排版&#xff0c;后续的文章…

广义表的学习(原理和代码)

广义表的学习&#xff08;原理和代码&#xff09; 参考链接&#xff1a; https://blog.csdn.net/it_is_me_a/article/details/99870530

bfs巩固训练

按顺序从上往下刷即可&#xff01;&#xff01;&#xff01; 知识点: 关于环形的数组&#xff0c;前移动和后移动可能会溢出下标。解决方法是&#xff0c;转移后的坐标公式为 &#xff08;原坐标改变量数组长度&#xff09;%数组长度 易错点: 写搜索时候&#xff0c;有时候会…

python输出文本 去掉引号_Python可以在文本文件中读取时从字符串中删除双引号吗?...

我有一些这样的文本文件&#xff0c;有50​​00行&#xff1a; 5.6 4.5 6.8 "6.5" (new line) 5.4 8.3 1.2 "9.3" (new line) 所以最后一个术语是双引号之间的数字。 我想做的是使用Python(如果可能的话)将四列分配给双变量。但主要的问题是最后一个术语&a…