spa

示例代码托管在： http://www.github.com/dashnowords/blogs 博客园地址： 《大史住在大前端》原创博文目录 华为云社区地址： 【你要的前端打怪升级指南】 【带着canvas去流浪（9）】粒子动画一. 粒子特效二. 开发中遇到的问题2.1 卡顿2.2 轨迹2.3 复位2.4 防护层2.5 二维向量类三. 实现讲解3.1 粒子类的 update 方法3.2 粒子群的绘制3.3 爆破层的仿真 一. 粒子特效 粒子特效一般指密集点阵效果，它并不是canvas独有的，这个名词更多出现在 AE ， cocos2d ， Unity 相关的教程中，并且提供了方便的编辑插件让使用者可以轻松地做出例如烟火，流星，光晕等等动态变化的效果，看起来非常酷炫。如果你接触过 Three.js ，会发现三维空间的点阵效果看起来更生动。粒子特效的本质还是一个逐帧动画，所以我们仍然可以使用上一节中提到的动画编程范式来实现它。本节的教程将实现下面这样一个粒子效果： 这是笔者第5个版本，看起来还挺像回事的吧，本篇中我们将逐步实现这样一个酷炫的粒子动画，也邀请你一起来看看开发过程中那些各种令人哭笑不得的问号黑人脸时刻。 二. 开发中遇到的问题 2.1 卡顿 想实现上面的动画，我们首先要做的是构建一个静态的粒子点阵，构建的过程并不复杂，无非就是 x 和 y 两个方向上以固定间距来画点

路由就是根据不同的 url 地址展示不同的内容或页面 后端路由 后端路由切换页面是跳转全局刷新页面（用户体验差），而且比如A页面的静态资源和B页面的静态资源会重复请求。 下面说下SSR 服务器渲染 网络爬虫在爬取资源时候会及时找到重要资源有利于SEO优化，但对服务器压力较大。因此一般首页服务器渲染，其他页面使用ajax（比如淘宝） 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源 后端路由的优缺点 优势：服务器渲染有利于SEO优化 劣势：1、静态资源重复请求，对服务器压力较大 　　 2、用户体验不好 前端路由 通过不同的路由 切换不同的页面 对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由 前端路由的主要模式是hash和history模式 比如 hash路由 -> #/ #/2.html history路由 / /2.html 说下单页面应用SPA(single page application) 它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容 单页面应用核心：更新视图而不重新请求页面 vue的路由 Vue Router 是 Vue.js 官方的路由管理器 前端路由的优缺点 优势：1、单页面应用

开发一个大型后台管理系统，应该用前后端分离的技术方案吗？ 话说这天，我们团队开会讨论了一个问题，不，与其说“讨论”，不如说“争吵”更合适。 背景是这样的： 我们要开发一个 xxx 后台管理系统，这个系统业务复杂、功能又多，大家的争吵集中在“这个系统是否应该用前后端分离的方案”。 这次争吵的问题比较典型，于是我就写了这篇文章。为了大家好理解，把“xxx 后台管理系统”泛化一下，变成： 开发一个大型后台管理系统，应该用前后端分离的技术方案吗？ 先说一下，本文中的观点肯定有人不认同，再加上我对前端技术掌握有限，所以大家批判的看吧。 1. 先审题，冷静的分析一下 前后端分离的优点多多，这不需要多说，大家人人都清楚。 来，讨论之前，我们先一起好好审审题。 结合“开发一个大型后台管理系统”这个约束条件，冷静的分析一下： • 什么是后台管理系统：首先后台管理系统这个称呼，意味着这是一个 B 端系统。可以小到部门级应用（客户投诉登记系统、办公设备台账系统），大一点可以是大集团级核心系统（500 强保险公司客服、呼叫中心），可以是 ERP、CRM、OA（SAP、用友、泛微协同），可以是一个 B2C 电商的商城后台、支付网关管理控制台，可以是 Saas 的管理后台（Salesforce、Teambition、Jira），可以大到阿里云控制台…… • 什么是大型：我理解大型系统是指功能模块多、交互复杂

Blazor Blazor他是一个开源的Web框架,不,这不是重点，重点是它可以使c#开发在浏览器上运行Web应用程序.它其实也简化了SPA的开发过程. Blazor = Browser + Razor 为什么选择Blazor? Blazor可以让.NET附有全栈开发功能,它可以使Web开发变得轻松而高效.而且Blazor是开源的,它得到了社区的大力支持,而且发展速度会很快. 它还拥有SPA的一些功能比如： 路由 依赖注入 服务端渲染 Layout 等等 创建应用 如果说无法在看到 Blazor WebAssembly App 那么执行如下命令即可. dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview5.20216.8 项目结构如下所示 我们可以看到上图中的项目结构 BlazorServerCRUDSample.Client :该项目工程中包含了客户端的相关代码页面等文件 BlazorServerCRUDSample.Server :该项目工程中包含了webapi. BlazorServerCRUDSample.Shared :该类库中用于存放客户端和服务端之间的共享代码. BlazorServerCRUDSample.Server 控制器代码如下所示 [Route(

分为三种： 纯后端渲染，纯前端渲染，服务端的 js 渲染结合前端渲染。 纯后端渲染 纯后端的DOM渲染，DOM树的生成完全是在后端服务器中完成的，相当于后端服务器的程序会把各种的数据拼成一个DOM树，并转换成一个字节流作为HTTP Response的body返回给浏览器。 纯前端渲染 纯前端渲染可以解决纯后端渲染中出现的各种体验问题。纯前端渲染把DOM生成的主题逻辑都放在了前端，这时后端只会返回一个框架的DOM结构，比如只带一个容器元素的的DOM，然后由js代码把页面的主题渲染到这个容器元素中。 服务端的 js 渲染结合前端渲染 主要是把前两个阶段中，一些交给纯后端DOM渲染逻辑分离的不好，但是交给纯前端DOM渲染又会造成较高延迟的部分单独分离出来形成了一独立DOM渲染阶段，保留的代码中天然的展示层和数据层的分离，又把API请求的累计延迟减少了很多，从SEO角度来说渲染结果对搜索引擎也很友好。当然，这样的做法需要给整体的架构增加一个独立的单元，给开发和部署都带来了更高复杂性。 单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。 　　 　　多页面

我是来自微医集团消费事业群的前端工程师高翔，这篇文章整理自我在《第一届缤纷前端技术沙龙》的主题分享《Node.js 在医疗行业的应用》，介绍了 Node.js 在微医的发展历程和应用实践经验。 微医是总部位于杭州萧山的一家互联网医疗公司，我们的前端研发人员从2015年的几个人发展到现在的120多人，前端技术栈体系发生了巨大的变化，下面这张图展示了我们部门前端团队的技术栈演进过程。 16年之前主要是前后端耦合的开发方式。 17年开始引进 Vue，进行前后端分离，并开始尝试做 Vue SSR 的探索。 18年全面推 Vue SSR，积累了一定的 Node.js 经验，出现了越来越多的线上 Node.js 应用。 今年主要是将之前的解决方案沉淀下来，变成框架、文档、插件、脚手架等，来更好的支持需求的迭代。 可以看到在微医， Node.js 在线上应用起步较晚，但是发展很快，例如消费线业务基本都迁移到了 SSR 技术体系。 下面 这张图是我们公司前端应用的分布情况。 可以看到，集团总体前端应用中，Node.js 应用大概占比 1/4，而在 Node.js 应用中主要是 SSR 应用，其次是一些全栈体系的内部应用，接着是一些 API 服务，做一些接口的聚合和转发。 所以我今天主要从 Vue SSR、内部应用和 API 服务来介绍一下 Node.js 在微医的使用情况。 应用场景一：内部工具

1 Download ngx-admin from https://github.com/akveo/ngx-admin 2 Create a new Web Application in vs2017 through file->new->project->Select .Net Core->Select ASP.NET Core Web Application and Next->Select Empty Template(Not Angular) and OK Now you have a .net core app and a ngx-admin app in different folders. Presume: ngx-admin in D:\test\ngx-admin asp.net application solution in D:\test\WebApplication1 and there's a project named WebApplication1 in D:\test\WebApplication1\WebApplication1 3 Copy all contents in D:\test\ngx-admin into D:\test\WebApplication1\WebApplication1 . Yes only the contents,

10月20日，天猫正式发布新一代「天猫双11全球狂欢季」，代号：双节棍。 此次升级最大的变化是：不只在11月11日一天爆发，消费者可分两波购买，11月1日-3日是第一波，11月11日为第二波。 这意味着，今年双11比以往多了3天，消费者11月1日起就可以付预售商品的尾款，提前10天收到货。 基于阿里巴巴商业操作系统打造的新一代天猫双11，配置全面升级，具备同时并发1400万款打折商品的能力，拥有最大折扣力度和最快送货速度，性能超越此前所有版本。 10月21日，新一代天猫双11将正式启动预售。 8亿全球消费者已翘首以待，参与天猫双11，创造今年最大的一次消费爆发。 具体「配置」信息如下： 1、11月1日起付尾款，提前10天收货 10月21日：预售开始，付定金，养猫领红包 11月1日-3日：付尾款，买买买，提前10天收到货 11月4日-10日：添加购物车 11月11日：买买买 2、不用领津贴，满300直接减40 跨店购物满300直接减40 天天领5折券和大额券 花呗付款，可24期分期免息 3、1400万款商品打折，史上最多 一共有1400万款商品参加双11折扣活动，是去年1.4倍 既有华为mate、iPhone、运动潮鞋、智能家电、潮玩盲盒、自热羽绒服等200万新款 也有53度飞天茅台、1000条航线随心飞、迪士尼乐园6.7折、不用配货就能买到的爱马仕…… 4、去年盖楼，今年养猫

加利福尼亚州海沃德 -2020年 9 月 4日-在线表面检测解决方案的领先提供商阿美特克表面视觉公司已经支持铝生产商Laminazione Sottile SpA满足客户对产品质量的要求 ， 更多信息尽在振工链 。 它的 SmartView ®系统安装在意大利的公司的临界表面处理生产线，确保只有检查材料进行进一步处理，并带入市场。 该系统以明场配置安装，具有在线检查和流媒体视频功能，使 Laminazione Sottile能够保持高水平的材料质量，从而大大减少了客户要求。 Laminazione Sottile生产轧制铝产品，包括刚性，半刚性和柔性包装，HVAC-R，汽车零件，炊具和一般工程组件。该公司需要一个能够实时客观地检查产品质量，检测缺陷并确定其根本原因的自动化系统。它还必须充当质量控制的大门，以便将卷材直接销售给客户并由Laminazione Sottile Group其他子公司进行进 一步 加工。 AMETEK Surface Vision的销售客户经理Marco Saitta表示：“借助SmartView，可以根据最终客户的要求选择已检验的材料。该过程利用了有关当前表面质量的知识，并提供了纠正任何过程不正常现象的能力。现在可以基于目标数据来计划和评估过程改进。” Laminazione Sottile的饰面部门经理Pierpaolo Panza表示：“

话说这天，我们团队开会讨论了一个问题，不，与其说“讨论”，不如说“争吵”更合适。 背景是这样的： 我们要开发一个 xxx 后台管理系统，这个系统业务复杂、功能又多，大家的争吵集中在“这个系统是否应该用前后端分离的方案”。 这次争吵的问题比较典型，于是我就写了这篇文章。为了大家好理解，把“xxx 后台管理系统”泛化一下，变成： 开发一个大型后台管理系统，应该用前后端分离的技术方案吗？ 先说一下，本文中的观点肯定有人不认同，再加上我对前端技术掌握有限，所以大家批判的看吧。 1. 先审题，冷静的分析一下 前后端分离的优点多多，这不需要多说，大家人人都清楚。 来，讨论之前，我们先一起好好审审题。 结合“ 开发一个大型后台管理系统 ”这个约束条件，冷静的分析一下： • 什么是后台管理系统：首先后台管理系统这个称呼，意味着这是一个 B 端系统 。可以小到部门级应用（客户投诉登记系统、办公设备台账系统），大一点可以是大集团级核心系统（500 强保险公司客服、呼叫中心），可以是 ERP、CRM、OA（SAP、用友、泛微协同），可以是一个 B2C 电商的商城后台、支付网关管理控制台，可以是 Saas 的管理后台（Salesforce、Teambition、Jira），可以大到阿里云控制台…… • 什么是大型：我理解大型系统是指功能模块多、交互复杂，而不是访问量、TPS、数据量大。所以 CMS、OA