Post提交方式下载文件

提要 通常下载文件是直接 GET 访问下载链接,由浏览器默认行为进行下载。对于一些动态生成数据的场景,特别是需要用户提交部分参数,这时候 GET 请求就不合适了,需要 POST 提交进行下载。 Form Post 下载文件 这是浏览器最原生的表单提交,可以设定form元素的method为POST,这样请求格式为applicat……

阅读全文

MySql利用Trigger实现SQL优化

问题 向数据库中插入多个标签数据,每个标签的schema如下: tag{ title: String; slug: String; topics_count: Integer; } 其中,title和slug字段都是唯一性索引。 首先的一个问题是当title不重复而slug重复时,这在多音词使用拼音做slug时常会出现,我们希望自动给slug加上后缀使之不重复。 第二个问题是当标签tit……

阅读全文

利用FileReader API预览图片

需求 在 Web 应用程序中,上传图片前进行预览是比较常见的需求。在老式浏览器中,必须先将图片上传至服务器,获取实际链接后嵌入方可预览。随着浏览器 API 的不断丰富,现在利用 FileReader 可以做到图片上传之前就在页面进行预览,提高用户体验。 FileReader & File & Blob FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原……

阅读全文

Webpack 文件hash控制

前言 持续开发和部署 WEB 项目时,对于引入的 script 脚步文件的缓存控制是一个比较重要的话题,通常使用 webpack 打包用于生产环境 js 文件时都在文件名中包含 chunkhash 值,即要求改动准确代表对应文件名变动,这样用户总是会获得最新的代码以获得正确的功能并也能利用浏览器缓存提高体验。 webpack dll 所有 js 代码,其必然包含两个部分:……

阅读全文

JavaScript Error继承踩坑记

Error ES6 Class 继承 在 Web App 中,我们通常会创建自定义错误类来区分错误类型。如果使用 ES6 的 Class 语法,那么应该有类似如下写法: class MyError extends Error { constructor (msg) { super(msg) this.message = msg this.name = "MyError" } } 现在我们需要报一个自定义错误,那么有: var err = new MyError("this is a error message") 同时,在流程处理中,可能需要通过错误类型执行不同的处理逻辑代码: if (err instanceof MyError) { // do some job console.log("MyError……

阅读全文

React/Redux应用使用Async/Await

Async/Await Async/Await 是尚未正式公布的 ES7 标准新特性。简而言之,就是让你以同步方法的思维编写异步代码。对于前端,异步任务代码的编写经历了callback到现在流行的Promise,最终会进化为Async/Await。虽然这个特性尚未正式发布,但是利用 babel polyfill 我们已经可以在应用中使用它了。 现在假设一个简单……

阅读全文

TypeScript装饰器

前言 在做个人项目的 REST API 服务时,一个常见的问题就是 API 路由的各种 Controllers 对于权限的要求是不一致的,最显著的是有的访客即可访问,有的需要已登录状态的注册用户,有的可能还需要登录者拥有一定的权限,如果每个 controller 的方法里面都判断一次用户以及权限,这显然不是很优雅,造成了代码冗余。虽然 Restify 框架的 APP 实例可……

阅读全文

ASP.Net Web API依赖注入

前言 为了提高团队的每日报告和周报的效率和简化管理,开发了一个局域网内的小型活动日志记录网站。 公司是微软系的死忠,那么后台自然用 ASP.Net 了,这里我只需要一个 API 服务,所以使用了 Web API2,数据库用现成的 SQL Server,前台用自己喜欢的 React 做 SPA 应用,账户验证因为是局域网,直接用 windows 验证,非常方便……

阅读全文

基于React生态、Webpack2工具打造Electron App的样板工程

简介 最近在学习 React 以及其生态产品,在为开发的一个 Electron 应用搭建一套自己熟悉的构建工具。 项目地址: Electron-React-Webpack-Boilerplate 使用它提升了开发效率,完成了StarCabinet - 一个开源的 Github Stars 管理工具 Webpack 我使用了 Webpack 作为模块加载和编译打包的主力,配合各种 loaders。 Webpack 的配置文件分为开发版本和生产版本,共同的部分抽……

阅读全文

一份纯CSS实现的loading动画

预览 代码 使用了 CSS 的 keyframes 自定义关键帧动画 <!DOCTYPE html> <html lang="en"> <head> <title>Loading</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div#preload { margin: auto; position: fixed; width: 100%; height: 100%; background-color: #fff; z-index: 9999999 } div#preload>img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%) } div#preload .cssload-loader { position: absolute; left: 0; right: 0; margin: auto; width: 62px; height: 62px; top: 50%; margin-top: -31px; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; perspective: 780px } div#preload .cssload-inner { position: absolute; width: 100%; height: 100%; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } div#preload .cssload-inner.cssload-one { left: 0; top: 0; animation: cssload-rotate-one 1.15s linear infinite; -o-animation:……

阅读全文