spa

一. 什么是微前端？ Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks . — Micro Frontends 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 上面是阿里的qiankun框架中引用的微前端定义，微前端第一次提出于在2016年的底的 ThoughtWorks Technology Radar 。 那微前端出现为了解决什么问题呢？ 笔者看了很多资料认为微前端是为了解决不同版本及不同框架的多个应用共存及增量部署问题。 Tom Söderlund 在 这篇文章 中提到了如何实现微前端的七种方式： Here’s a few different approaches to implementing micro frontends: The best solution I’ve seen is the Single-SPA “meta framework” to combine multiple frameworks on the same page without refreshing the page (see this demo

今天给大家翻译一篇由ASP.NET首席开发工程师 James Newton-King 前几天发表的一篇博客，文中带来了一个实验性的产品gRPC-Web。大家可以点击文末的讨论帖进行相关反馈。我会在文章末尾给出原文链接。全部译文如下： 我很高兴宣布通过.NET对gRPC-Web进行实验性支持。gRPC-Web允许从基于浏览器的应用程序（例如JavaScript SPA或Blazor WebAssembly应用程序）调用gRPC。 .NET的gRPC-Web承诺将gRPC的许多出色功能引入浏览器应用程序： 强类型代码生成的客户端 紧凑的Protobuf消息 服务流 什么是gRPC-Web 无法在浏览器中实现gRPC HTTP / 2规范，因为没有浏览器API能够对HTTP请求进行足够的细粒度控制。 gRPC-Web 通过与HTTP / 1.1和HTTP / 2进行兼容来解决此问题。 gRPC-Web不是一项新技术。已经有一个稳定的 gRPC-Web JavaScript客户端 ，以及一个 用于在gRPC和gRPC-Web之间进行转换的代理 。新的实验性程序包允许ASP.NET Core gRPC应用程序支持 不 带代理的gRPC-Web ，并允许.NET Core gRPC客户端调用gRPC-Web服务。（非常适合Blazor WebAssembly应用！） 使用gRPC

今天给大家翻译一篇由ASP.NET首席开发工程师 James Newton-King 前几天发表的一篇博客，文中带来了一个实验性的产品gRPC-Web。大家可以点击文末的讨论帖进行相关反馈。我会在文章末尾给出原文链接。全部译文如下： 我很高兴宣布通过.NET对gRPC-Web进行实验性支持。gRPC-Web允许从基于浏览器的应用程序（例如JavaScript SPA或Blazor WebAssembly应用程序）调用gRPC。 .NET的gRPC-Web承诺将gRPC的许多出色功能引入浏览器应用程序： 强类型代码生成的客户端 紧凑的Protobuf消息 服务流 什么是gRPC-Web 无法在浏览器中实现gRPC HTTP / 2规范，因为没有浏览器API能够对HTTP请求进行足够的细粒度控制。 gRPC-Web 通过与HTTP / 1.1和HTTP / 2进行兼容来解决此问题。 gRPC-Web不是一项新技术。已经有一个稳定的 gRPC-Web JavaScript客户端 ，以及一个 用于在gRPC和gRPC-Web之间进行转换的代理 。新的实验性程序包允许ASP.NET Core gRPC应用程序支持 不 带代理的gRPC-Web ，并允许.NET Core gRPC客户端调用gRPC-Web服务。（非常适合Blazor WebAssembly应用！） 使用gRPC

原文: .NET Core技术研究-中间件的由来和使用 我们将原有ASP.NET应用升级到ASP.NET Core的过程中，会遇到一个新的概念： 中间件。 中间件是ASP.NET Core全新引入的概念。 中间件是一种装配到应用管道中以处理请求和响应的软件。 每个组件： 选择是否将请求传递到管道中的下一个组件。 可在管道中的下一个组件前后执行工作。 单独看以上中间件的定义，一个很直观的感觉：中间件是HTTP请求管道中的一层层的AOP扩展。 在展开介绍中间件之前，我们先回顾一下ASP.NET中HttpHandler和HttpModule的处理方式。 一、ASP.NET中HttpHandler和HttpModule 先看一张图： 上图中有两个概念HttpHandler和HttpModule，其中： HttpHandler 用于处理具有给定文件名或扩展名的请求。比如上图中的.report类的请求，同时，任何一个HttpHandler都需要实现接口IHttpHandler，都需要在Web.Config配置文件中注册使用。 HttpModule 用于处理每个请求调用，比如上图中的Authorization Module，每个Http请求都会经过HttpModule的处理。通过HttpModule可以中断Http请求，可以自定义HttpResponse返回。同时

​在开始之前，我们先来了解一下什么是SEO。 SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。 说白了就是你的SEO做的越好，当别人搜索某个关键词时，你的网站在搜索结果中就排的越靠前。这是我的网站，有时排在第一，有时第二。 我的网站： www.dzyong.top 公众号： 《前端筱园》 普通的一个前端网站可以通过哪些地方来做优化呢？ 1.合理的title、description、keywords <title>邓占勇的博客</title> <meta name="description" content='邓占勇，一名前端工程师，这是我的个人博客，主要分享前端但不限于前端技术。公众号《前端校园》'> <meta name="keywords" content="个人博客,邓占勇,前端,技术,WEB,blog,BLOG,搭建博客,前端技术,VUE博客,邓占勇的博客"> <meta name="anthor" content="邓占勇,2657179843@qq.com"> <meta name="robots" content="博客,前端,blog,个人博客,邓占勇

使用 BrowserRouter 的问题（方案：后台自定义中间件，前提：前台和后台不要有路径重复） a. 问题: 刷新某个路由路径时, 会出现 404 的错误 b. 原因: 项目根路径后的 path 路径会被当作后台路由路径, 去请求对应的后台路由，但没有 c. 解决: 使用自定义中间件去读取返回 index 页面展现 d. 注意: 前端路由的路径不要与后台路由路径相同(并且请求方式也相同) 　　如下所示，访问首页时可以正常访问 　　 　　但刷新页面时便会出现问题 　　 分析如下： 　　 　　分析： 1 、如果是localhost: 5000 /#/ home则是访问的是项目根路径下的文件，即打包后的index.html文件为主的SPA应用 2 、但这里是localhost: 5000 / home，后台收到的是该路径请求，会将其看成后台路径进行处理，而后台确实没有处理该路由。而我们希望将视为前端路由进行处理。 3 、这里注意，我们在开发环境下可以正常刷新访问。因为在开发环境是webpack服务器，始终返回index.html 　　继续分析如下，后端路由都有对应的注册步骤 　　 　　接下来我们使用自定义中间件，如果没有对应路由，则读取我们打包的Index.html页面 　　 　　此时便可以正常刷新 app.use((req, res) => { fs.readFile(_

写在前面 好久好久没写了，最近刚换了工作，花了几天的时候熟悉了项目，接着就是功能的完善，随后就是对新项目的基础架构搭建。 看过Po主博客的都知道，Po主一直致力于推广.Net Core在微服务架构上的实践，包括从去年年底开始也正在写一本关于此类的书（目前还在写的阶段，不便公布）。换新东家的目的也是如此，公司是个集团公司，但楼主负责的项目还不是很大，So，微服务架构可能现阶段还无法实现。 但Po主一心向往微服务架构，所以我在搭建基础架构的时候，想到了一种过度架构方式，也不知道如何称呼，随心所欲称之为：单体服务架构（Single Service Architecture-简称SSA） 什么是单体服务架构 什么是单体服务架构呢？总的来说，架构看上去类似于微服务架构，但它只包含了一个服务，我们的业务逻辑统统放到这一个服务来，简单画个图： 怎么样，简单吧，我们来对比下eShop的架构图： 如何，看出什么了吗？我们的架构去除了Api gateway，去除了EventBus，把各个服务结合在了一起，形成了一个单一的服务，所以我称它为单体服务架构。 为什么需要单体服务架构 可能大家好奇，为什么需要单体服务架构（后称SSA）呢？如果大家了解过微服务架构的话，应该听说过康威定理吧，或者说听说过“微服务架构不是银弹”类似的话吧，概论就是并不是所有企业所有项目都适合微服务架构。但在技术热潮之中

最近使用百度埋点的时候发现 SPA 的项目无法统计 hash 路由后的路径，永远都是首页路径，经过一番查询资料和调研，总结了两套实现方式。 方式一（ 注意：这个方法会每次先统计一次首页路径，然后再统计每个路由 ）： // 首先在模版页面的 <head> 或者 <body> 标签中加入百度统计的引用 <!-- 百度埋点 --> <script type="text/javascript"> var _hmt = _hmt || []; (function () { var hm = document.createElement("script") hm.src = "https://hm.baidu.com/hm.js?9843875bfddf7f60876feae4c662753a" var s = document.getElementsByTagName("script")[0] s.parentNode.insertBefore(hm, s) })() </script> // 然后在路由中增加统计操作 // 百度埋点 SPA 页面支持 router.beforeEach((to, from, next) => { if (window._hmt) { if (to.path) window._hmt.push(['_trackPageview', window

我们将原有ASP.NET应用升级到ASP.NET Core的过程中，会遇到一个新的概念： 中间件。 中间件是ASP.NET Core全新引入的概念。 中间件是一种装配到应用管道中以处理请求和响应的软件。 每个组件： 选择是否将请求传递到管道中的下一个组件。 可在管道中的下一个组件前后执行工作。 单独看以上中间件的定义，一个很直观的感觉：中间件是HTTP请求管道中的一层层的AOP扩展。 在展开介绍中间件之前，我们先回顾一下ASP.NET中HttpHandler和HttpModule的处理方式。 一、ASP.NET中HttpHandler和HttpModule 先看一张图： 上图中有两个概念HttpHandler和HttpModule，其中： HttpHandler 用于处理具有给定文件名或扩展名的请求。比如上图中的.report类的请求，同时，任何一个HttpHandler都需要实现接口IHttpHandler，都需要在Web.Config配置文件中注册使用。 HttpModule 用于处理每个请求调用，比如上图中的Authorization Module，每个Http请求都会经过HttpModule的处理。通过HttpModule可以中断Http请求，可以自定义HttpResponse返回。同时，任何一个HttpModule都需要实现接口IHttpModule，都需要在Web

1.Nuxt.js概述 1.1.什么是Nuxt.js? Nuxt.js是一个基于Vue.js的轻量级应用框架,可用来创建服务端渲染(SSR)应用, 也可以充当静态站点引擎生成。 具有优雅的代码结构分层和热加载等特性。 官方学习网址： https://zh.nuxtjs.org/guide/installation 1.2 为什么要学习Nuxt.js? SPA(single page web application)单页Web应用, Web不再是一张张页面, 而是一个整体的应用,一个由路由系统、数据系统、页面（组件）系统等等组成的应用程序。 Vue.js就是SPA中的佼佼者。 SPA应用广泛用于对SEO要求不高的场景中。 1.2.1 那什么是SEO呢？ SEO就是 搜索引擎优化(Search Engine Optimization)，通过各种技术（手段）来确保我们 的Web内容被搜索引擎最大化收录，最大化提高权重，最终带来更多流量。 而SPA程序不利于SEO。 注: 而我们需要解决SEO这个问题就可以用到Nuxt.js框架来创建服务端渲染(SSR)应用。 1.2.2 那什么是 SSR技术呢？ SSR服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。 将前端拆分2部分：客户端和服务端 服务器端渲染，就是让前端服务端的代码先执行