blog
blog copied to clipboard
xuya227939
💡 技术博客
基于lucian这套项目模板，引导大家如何创建列表展示，搜索，自动处理 loading 状态等。全部代码在仓库下。 最终效果：  网站效果预览：https://downfuture.com ## 开始之前 1. 确保 node 版本是 8.4 或以上 2. 用 cnpm 或 yarn 能节约你安装依赖的时间 ## Step 1. 安装 lucian 并创建项目 ``` $ git clone...
基于tristana这套项目模板，引导大家如何创建列表展示，搜索，自动处理 loading 状态等。全部代码在仓库下。 最终效果：  网站效果预览：https://order.downfuture.com ## 开始之前 1. 确保 node 版本是 8.4 或以上 2. 用 cnpm 或 yarn 能节约你安装依赖的时间 ## Step 1. 安装 tristana 并创建项目 ``` $ git clone...
## How fix node.js use request package and options add a secureProtocol is 'TLSv1_method' ## Example ``` const request = require('request'); const options = { url: 'https://10.134.136.112:8888/casserver/login?service=http%3A%2F%2F10.134.137.120%3A8000%2Fpiccclaim%2Fj_acegi_security_check%3BPICC_CLAIM_Cookie%3DWTXhd5pQY4SwQJpdKGxMQhXvl0L4Qp7pJhPrprm0ptmCqlW7JHkS%21566150954%21-472537668', // proxy: 'http://127.0.0.1:8888'...
## 代码 ``` // 下载视频地址 export function downloadVideoUrl(url) { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'blob'; xhr.onload = function(e) { if...
## 问题 当使用iframe作为文件下载的载体时，如何知道文件已经下载完毕，现有的iframe的```onload```方法具有兼容性问题，在Chrome、IE下无法监听```onload```事件监听文件下载完毕，因为```onload```事件本身也是对iframe中的html结构的加载进度监听。 ``` const url = 'http://www.example.com/file.zip'; const iframe = document.createElement('iframe'); iframe.src = url; iframe.style.display = 'none'; iframe.onload = function() { console.log('start downloading...'); document.body.removeAttribute(iframe); } document.body.appendChild(iframe); ``` 当Chrome、IE下时，如果HTTP文件头中包含Content-disposition: attachment；即下载文件的链接的话，不会触发这个事件```onload```事件。...
## 起因 最近，笔者接到一个需求，需要在前端把PDF转成图片，再把图片转成Base64，传给小程序。然后发现，只有PDF.js这个库，才能满足我们的需求。 ## 核心代码 ``` renderPage(url) { return new Promise((resolve, reject) => { const loadingTask = pdfjsLib.getDocument(url); loadingTask.promise.then((pdf) => { const pages = pdf.numPages; // 添加canvas, 根据pdf的页数添加 for (let...
## 前言 自己利用业余时间，基于React、Ant、Webpack、Mobx、React-Router写了一个后台管理模板，接下来会出三部曲系列，分为前端、后端、运维到发布，从零搭建React后台管理模板，目前已在公司内部搭建了几套项目，并都已上线，希望这个系列，帮助自己梳理各技术最新知识点，同时也希望对看到的人有所帮助。 ## 项目效果： 登录页：  404页：  列表页：  ## GitHub源码地址 [Tristana](https://github.com/Cherry-Team/tristana) ## 在线预览地址 [Tristana](https://order.downfuture.com) ## 技术栈 - React - Ant - React-Router - Mobx - Webpack -...
## How to fix - Linux-CentOS：`$ yum install GraphicsMagick && yum install ImageMagick` - Mac：`$ brew install imagemagick && brew install graphicsmagick`
## 本地缓存 sessionStorage 、localStorage 、cookie ## 共同点 都是保存在浏览器端，且同源的。 ## 区别 - cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 - 数据有效期不同：sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器 - 作用域不同：sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
 ## 结语 可以从以下几个指标，来选择一套适合自己团队的项目。 - 是否符合团队的技术栈 - 是否符合项目需求 - 生态圈是否完善、社区是否活跃 - 开发效率是否会降低 - 团队的学习能力如何