场景:
接到一个需求，有一个下载按钮，点击后要带token信息然后下载，正常下载都是打开一个网址自动进行了下载文件
接口请求方式下载文件也是第一次做，所以网上搜了一些方案进行了总结，同时也有一些坑进行了提醒

我们先来看一下主要代码 (代码浏览)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const blob = new Blob([res.data], {
  type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
  // 文件格式
})
if ('download' in document.createElement('a')) { // 非IE下载
  const elink = document.createElement('a')
  elink.download = 'markone'
  elink.style.display = 'none'
  elink.href = URL.createObjectURL(blob)
  document.body.appendChild(elink)
  elink.click()
  URL.revokeObjectURL(elink.href) // 释放URL 对象
  document.body.removeChild(elink)
} else { // IE10+下载
  navigator.msSaveBlob(blob, 'markone')
}

概要

在前端开发中，有一个非常好用的工具，Visual Studio Code，简称VS code，前段时间意外的看见了基于服务器搭建的一款vscode服务code-serve，跟着官方文档搭起来，以下仅做记录，根据版本迭代可能略有不同（觉得这个趋势的发展以后）

前言

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

安装

npm i v-charts echarts -S

文档地址：https://v-charts.js.org/
GitHub地址：https://github.com/ElemeFE/v-charts

Step 1 准备

本次软件是装在Parallels Desktop虚拟机运行的，运行的是win7环境

Fiddler下载地址:https://www.telerik.com/download/fiddler

虚拟机的网络要设置为桥接模式，如下

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

开始

看了很多vuex教程有配置有操作之类的，我个人对于Vuex操作点理解就是三个，第一个点是初始化，因为建立了脚手架之后默认的store.js并不能满足我们复杂的业务需求所以需要抽离等初始化（初配置）操作，第二个点就是读，怎么读取store里的值，第三个点就是写，怎么把数值写入（更新）到store当中。

推荐阅读 vuex最简单、最详细的入门文档 - 梁晓谊

先理解

Vuex中几个常用到的关键字State,Getter,Mutation,Action

这是官方文档提供的一张流程图

大致流程如下：

• 在组件中通过dispatch调用actions
• 在actions中通过commit调用mutations
• 在mutations中修改state的值
• 返回到视图上

前往bilibili观看

前言

在项目中遇见了一个这样的需求，就是需要调用手机摄像头拍照后对图片进行压缩（因为原图基本在4~6M以上），但是在iphone手机下会有一个特殊的问题，就是手机竖着拍，传上去的照片是横着的，所以需要根据Exif信息校正

推荐仓库：img_compress_rotate_preview_upload

提交了一个ratio的修复已经申请合并到仓库

本篇文章是拜读掘金专栏两篇文章之后总结而来，如有侵权请联系删
参考文章一 《css经典布局——圣杯布局》
参考文章二 《浅谈面试中常考的两种经典布局——圣杯与双飞翼》
推荐阅读 《聊聊为什么淘宝要提出「双飞翼」布局》

两种布局区别

圣杯布局

双飞燕布局

(图@徐小武)

两种布局呈现的样子都是一样的,最主要的区别就是，圣杯布局因为左右有两个把手，所以左右是空的，双飞燕布局的话中间不变，内容区域为左右两边腾出位置

在刷题目的时候看见了这样一个代码：

1
2
3
4

if (true) {
    let name = 'zhangsan'
}
console.log(name)  // 报错，因为let定义的name是在if这个块级作用域

但是我自己去试了这段代码结果并不一样呀…

前言

遇见一个需求,我需要在tree控件里随意选中内容，并且最后发送给后端一个字符串，字符串格式要求，父级后面跟:，子级后面跟,，其实我刚开始想了很多方法，甚至比如递归循环之类的，但后面发现其实把问题复杂化了