其他

文件流处理

axios的使用
axios.get('地址'，{
//识别为文件流blob|arrarBuffer
responseType:'blob' 
}).then(res=>{
  //通过a 标签实现下载
  const a = document.createElement('a')

  //创建一个下载的地址 URL.creatObject()
  const URL = URL.createObject(res.data)
  
 //将a.herf的地址设置为URL
   a.herf = URL
 
 //a 标签的下载
  a.download= '文件名' //最好是取请求头里的内容
 
 //调用a的点击 
 a.click()
})

假数据Mock.js的使用

- yarn add mockjs
- yarn add @types/mockjs -D    (ts的时候要)

执行mock/index.ts. 就是在main.ts中引入index.ts文件即可
 
引入：import Mock from 'mockjs'
注册：Mock.mock('地址'，’方式‘，返回的数据)

工程化mock: 

 分模块:1.模块名.mock.js
	2.在文件夹里面导出一个一个mock接口对象
 	export const goodsInfo = {
 		 url: '/goods/info',
 		 method: 'get',
 		 data: () => { 
    		// 伪造数据
  		  return 'userInfo'
 		 }
		}
创建mock/index.js
 引入所有的接口对象
 
// 全自动导入所有mock
// 获取到所有的
let module1 = import.meta.glob('./*.mock.ts')
console.log(module1);

Object.values(module1).forEach((item) => { //得到每一个方法
  // console.log(item());

  item().then((v: any) => {   //调用后会得到一个promise

    Object.values(v).forEach((d: any) => { //得到每一个mock接口函数得数据 
      console.log(d);
      Mock.mock(d.url, d.methods, d.data)

      // console.log(d);

    })
  })
})

// 半自动
// let arr = [goods, homes]
// import * as goods from './goods.mock'
// import * as homes from './home.mock'
// arr.forEach((item) => {
//   Object.values(item).forEach(v => {
//     Mock.mock(v.url, v.methods, v.data)
//   })
// })
// for (let k in item) {
//   Mock.mock(item[k].url, item[k].methods, item[k].data)
// }

XLSX.js处理excecl文件

yarn add xlsx 

引入：
import * as XLSX from 'xlsx'

核心api 

- XLSX.utils.book_new()  新建工作簿
- xlsx.utils.json_to_sheet(json数组)创建一个sheet，然后给该sheet添加数据
- xlsx.utils.aoa_to_sheet(二维数组)创建工作表 数组格式
- xlsx.utils.book_append_sheet： 往工作簿里面添加一个sheet
- xlsx.writeFile(工作簿,名称,配置项)  下载生成的excel

实例：
// 1. 创建一个工作簿 workbook
  const workBook = xlsx.utils.book_new()
  // 2. 创建工作表 worksheet
  const workSheet = xlsx.utils.json_to_sheet([
  {
      id: 1, name: '张三', age: 16
    },
    {
      id: 2, name: '李四', age: 18
    },
    {
      id: 3, name: '王五', age: 20
    }
])
  // 3. 将工作表放入工作簿中
  xlsx.utils.book_append_sheet(workBook, workSheet)
  // 4. 生成数据保存
  xlsx.writeFile(workBook, `测试.xlsx`, {
    bookType: 'xlsx'
  })



Excel导入
   通过Elemenui 有上传可得到二进制流的数据。
   
   const readExecl = (e) => {
  //1 获取文件信息
  let file = e.raw // 文件信息
  //创建读取器
  const fileReader = new FileReader()

  //2 开始读取文件的内容为二进制
  fileReader.readAsBinaryString(file)
  
  //3 读取完成
  fileReader.onload = (ev) => {

  const data = ev.target.result

    //4 读取工作簿
    const workbook = XLSX.read(data, {
      type: 'binary', // 以字符编码的方式解析
    })

    //5 获取工作表
    const exlname = workbook.SheetNames[0]
 // 取第一张表

    //6 把工作表变成json格式
    const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) 
    

    //生成json表格内容
    console.log(exl) 
  }
  
}


导入要将文件转为二进制数据 原生JS有个input框的type属性值为file 

UI库可直接拿到数据,例如:e.row是转换的数据
  1.浏览器可以读取文件了 通过let fileReader =  new FilReader()
  2.通过fileReader 的 readAsBinryString(e.row)
  3.通过读取成功时的函数loud 
  4.fileReader.loude=(ev)=>{}函数得到一个读取成功后的数据
  5.XLSX读取数据       let book =XLSX.read(ev.target.rults,{type:'binary'})
  6.拿到一页数据let sheet= book.SheetName[0]
  7.根据sheet的名字拿到对应的内容，通过XLSX.utiles.sheet_to_json拿到转化的数据

无感刷新token

axios&token

• 请求拦截器

  • 从本地把token拿出来，然后放入header中，带过后端

• 响应式拦截器

  • 拦截401错误码，跳转到登录页面。【token的过期于否是后端规定】

• 问题：

  • 场景：假设当前这个token还有10秒过期，用户这个时候填写了一个特别长的表单（填写时间超过10s）。用户辛辛苦苦填写表单，一下子没了（axios拦截到401之后跳转到登录页面）。用户体验非常差。

刷新token（双token刷新策略）

• 登录成功之后，后端返回两个token
  • access_token: 请求的时候使用 ——-》 过期时间比较短
  • refresh_token： 用来刷新token（换取一个新的token） —-》过期事件比较长
• 以后发起请求都带上access_token
  • 正常的请求
• access_token失效之后
  • 以前：拦截401，跳转到登录页面。【糟糕的用户体验】
  • 现在：重新发起一个请求（刷新token），得到一个新的token。（缓存之前的接口）重新发起请求。