spa

基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件

由 懵懂的女人 提交于 2020-08-15 05:43:05
目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

前端路由简单理解及应用

由 一个人想着一个人 提交于 2020-08-14 11:56:39
路由的概念 路由的本质就是一种对应的关系，比如说我们在url中地址中输入我们需要访问的url地址之后，浏览器要去请求这个url地址对应的资源那么url地址和真实的资源之间就有一种对应关系，就是路由 路由分为前端路由和后端路由 后端路由 1.概念：根据不同的用户URL请求，返回不同的内容 2.本质：URL请求地址与服务器资源之间的对应关系 前端路由 1.概念：根据不同的用户事件，返回不同的页面内容 2.本质：用户事件与事件处理函数之间的对应关系 了解页面数据渲染的演变 最初页面的渲染是由后端路由来实现的但是后端渲染存在性能问题即：假设用户和服务器经常有提交表单这样的行为后端路由就会导致页面被频繁的刷新导致用户体验会非常的差。因此出现了Ajax技术，可以实现页面上的局部刷新，极大地提高了用户使用体验。但是单纯的Ajax技术不支持浏览器的前进和回退的这样的历史操作，没办法保存用户在浏览器中的保留的状态。因此，出现了SPA：单页面应用程序，所谓的SPA就是整个网站只有一个网页，内容的变化是通过Ajax局部更新同时支持浏览器的前进和后退 了解SPA实现的原理之一 ：基于URL地址的hash（hash的变化会导致浏览器记录访问历史的变化，但是hash的变化触发新的URL请求） 实现SPA过程中，最核心的技术点就是前端路由 实现前端路由的一个小例子 <!DOCTYPE html> <html

Web前端

由 北慕城南 提交于 2020-08-14 08:27:54
<!-- id标识vue作用的范围 --> <div id="app"> <!-- {{}} 插值表达式，绑定vue中的data数据 --> {{ message }} </div> <script src="vue.min.js"></script> <script> // 创建一个vue对象 new Vue({ el: '#app',//绑定vue作用的范围 data: {//定义页面中显示的模型数据 message: 'Hello Vue!' } }) </script> 基本数据渲染和指令 v-bind 特性被称为指令。指令带有前缀 v-，除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- v-bind指令 单向数据绑定

Web 端如何低成本打造 Native 体验？

由 天涯浪子 提交于 2020-08-13 16:10:10
云栖号资讯：【 点击查看更多行业资讯 】 在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！ 阿里妹导读：Web 应用在实际体验上和 Native 应用仍然存在非常明显的差距，那么如何低成本地把一个现有的网站改造成类 Native 的体验呢？本文分享一种让网站低成本渐进式实现 Native 化体验的方式——同屏渲染。 Web 端体验 在有了 PWA（Progressive web apps） 之后，Web Application 也具备了添加到桌面和离线访问等能力，但是实际体验上却总是和 Native 应用存在非常明显的差距。 我们可以看一下 Alibaba 的 M 站和 iOS 应用的录屏（左边为 WEB，右边为 iOS APP）： 我们可以看到，对于 Web Applicaiton 来说，在页面中来回跳转时访问的总是割裂的，从上一个页面到下一个页面需要等 loading ，返回时很多内存状态又都不在了，导致无法正确定位回之前的列表位置（这一点其实和不同的浏览器以及列表本身的实现方式有关，也有一些方案可以规避这个问题，在这里只是其中一个 case）。 这样对于用户的体验伤害非常明显，他能明确感觉到自己在用的并非一个 Application 而是一个 Website，而且在进行复杂的操作时整个链路也非常容易被中断。 而其实这种体验差异的根源，在于 B/S（Browser

Oracle 19c 迁移前，做好 RAT 回放测试有多重要？

由 笑着哭i 提交于 2020-08-12 20:17:19
云栖号资讯：【 点击查看更多行业资讯 】 在这里您可以找到不同行业的第一手的上云资讯，还在等什么，快来！ 背景 某客户的核心系统数据库一直是 IBM AIX 小型机和 Oracle 11g R2，这个数据库已修修补补用了近十年。最近计划迁移到 x86 环境下的 Oracle 19G，在之前的迁移测试以及应用测试中，做的都是一些简单的测试，没有试过模拟现网的压力。这可能会导致应用连接到新库之后，在出现各种未知问题时无法及时处理。 于是考虑使用 RAT 中的 Database Replay，模拟现网的运行，来发现数据迁移、兼容性、性能等各种问题。 RAT 介绍 Oracle Real Application Testing（简称 RAT）是 11gR2 的一个重要的 feature，其推出的初衷是为了满足数据中心变更后，有很好的方法和工具去衡量这些变更对于生产环境的应用带来的影响，更好地评估诸如硬件升级、软件升级、架构变化等等对于客户应用程序的影响。 Real Application Testing 其实有两个解决方法，分别是 Database Replay 和 SPA（SQL Performance Analyzer）。以前有用过 SPA 就不做介绍了，本次主要介绍 RAT 的使用以及我在使用过程中遇到的问题。 Database Replay，数据库回放顾名思义可以理解为一个录像机

基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件

由 本秂侑毒 提交于 2020-08-12 19:59:34
目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

ASP.NET Core Blazor 初探之 Blazor WebAssembly

由 故事扮演 提交于 2020-08-12 17:02:32
原文: ASP.NET Core Blazor 初探之 Blazor WebAssembly 最近Blazor热度很高，传说马上就要发布正式版了，做为微软脑残粉，赶紧也来凑个热闹，学习一下。 Blazor Blazor是微软在ASP.NET Core框架下开发的一种全新的Web开发框架。Blazor利用WebAssembly使得开发者可以抛开JavaScript而使用优雅的C#来开发web单页应用。微软利用WebAssembly在浏览器里实现了一个.NET Runtime，任何.NET STANDARD 2.1的代码都可以在浏览器上运行，真的是屌炸了。Blazor强化了Razor模板引擎，并且借鉴了当前热门前端框架的优点，比如双向绑定技术，组件化，使前端开发敏捷高效。如果你对NG，VUE等框架熟悉那么很容易找到其中的共通点。 Blazor WebAssembly Blazor 技术又分两种： Blazor WebAssembly Blazor Server Blazor WebAssembly 是真正的SPA，页面的渲染在前端实现，可以实现真正的前后端分离设计。而Blazor Server可以认为是前者的服务端渲染版本，它使用SignalR实现了客户端的实时通讯，它的计算跟渲染都在服务端处理。本次咱先研究WebAssembly技术，因为我觉得它的应用前景可能更适合一般项目

基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件

由 邮差的信 提交于 2020-08-12 08:35:37
目录 1. 前言 2. 关于vue-simple-uploader 3. 基于vue-simple-uploader封装全局上传组件 4. 文件上传流程概览 5. 文件分片 6. MD5的计算过程 7. 秒传及断点续传 7.1 对于前端来说 7.2 前端做分片检验：checkChunkUploadedByResponse 8. 源码及后记 8.1 关于第一个分片丢失问题 2019/8/6更新 1. 前言 之前公司要在管理系统中做一个全局上传插件，即切换各个页面的时候，上传界面还在并且上传不会受到影响，这在vue这种spa框架面前并不是什么难题。然而后端大佬说我们要实现 分片上传 、 秒传 以及 断点续传 的功能，听起来头都大了。 很久之前我写了一篇webuploader的文章，结果使用起来发现问题很多，且官方团队不再维护这个插件了， 经过多天调研及踩雷，最终决定基于 vue-simple-uploader 插件实现该功能，在项目中使用起来无痛且稳定。 如果你只是想实现基本的（非定制化的）上传功能，直接使用 vue-simple-uploader ，多读一下它的文档，不需要更多的二次封装。 如果你只是想实现全局上传插件，也可以参照一下我的实现。 如果你用到了分片上传、秒传及断点续传这些复杂的功能，恭喜你，这篇文章的重点就在于此。 本文源码在此： https://github.com

【译文】【前端架构鉴赏 02】：可拓展 Angular 2 架构

由 故事扮演 提交于 2020-08-12 05:12:59
李熠：【译文】【前端架构鉴赏 01】：Angular 架构模式与最佳实践 ​ zhuanlan.zhihu.com 原文 https:// blog.strongbrew.io/A-sc alable-angular2-architecture/ 序 这篇文章或许看上去仅和 Angular2 开发者相关，但我相信它也适用于其它的框架。这只是一份关于编写具有可拓展性和可维护性单页面应用的指南。需要指出的非常重要的是，这并不是达成目标的唯一方式，但是对我个人而言它们在不少的场景中都行之有效 编写可拓展性的单页面应用 许多开发者在编写大型的具有可拓展性和可维护性的单页面应用时都遇到困难。导致在开发早期就留下了技术债，修复 bug 时举步维艰，编写测试和创建复用代码时也踌躇不前 最大的一个挑战是：在一个拧巴的基础之上拓展现有逻辑和编写新的功能 对于那些能允许你用100种不同方式设计一个应用，没有结构和封装可言，一切东西都紧紧的耦合在一起的旧时框架，单页面应用是全新的概念 大部分时候在项目的开发的初始阶段都希望快速迭代。但是经过一些开发者，几轮功能迭代和重构之后，代码变得越来越难以维护。它开始看上去像意大利面了。虽然目前框架成熟了很多，但重要的是你编写的软件架构也要与时俱进 2016 年的单页面应用（甚至更早之前） 为了解释这篇文章谈到的架构，有必要回顾一下2016年的web应用长什么样子
订阅 spa