小插件(qs插件,lodash插件,xlsx插件)

311 阅读2分钟

一.qs插件

  • qs是一个增加一些安全性查询字符串解析和序列化字符串的库,可以进行对象与字符串之间的一个转换。

1.安装方式

npm install qs

2.vue 项目中导入方式

import qs from 'qs'

//vue项目中 main.js设置全局属性的方式:
Vue.prototype.$qs=qs

3.qs使用

  • 它有两个方法:stringify和parse。

qs.stringify(data)

stringify方法,是将对象序列化成url形式的字符串,以&符号进行拼接。 eg:

const userInfo = { name: "xiaoming", age: "22" };
let info = qs.stringify(userInfo);
console.log(info); //name=xiaoming&age=22

qs.parse(data)

parse方法,是将URL形式的字符串解析成对象 eg:

const userInfo = "name=xiaoming&age=22";
let info = qs.parse(userInfo);
console.log(info, "转换成parse");
//{ name: "xiaoming", age: "22" } "转换成parse"

当需要传递数组时,可以使用下面的方法

  • 默认情况
   console.log(decodeURI(qs.stringify({ a: ["b", "c", "d"] }))); 
   //输出:a[0]=b&a[1]=c&a[2]=d  (decodeURI浏览器解码)
  • 重写这种默认方式为false
  console.log(qs.stringify({ a: ["b", "c", "d"] }, { indices: false }));
  // 输出 a=b&a=c&a=d
  • 可以通过 arrayFormat选项进行格式化输出
    console.log(
      qs.stringify({ a: ["b", "c", "d"] }, { arrayFormat: "indices" })
    ); // 输出 a[0]=b&a[1]=c&a[2]=d
    console.log(
      qs.stringify({ a: ["b", "c", "d"] }, { arrayFormat: "brackets" })
    ); // 输出 a[]=b&a[]=c&a[]=d
    console.log(
      qs.stringify({ a: ["b", "c", "d"] }, { arrayFormat: "repeat" })
    ); // 输出 a=b&a=c&a=d
    

二. lodash插件

是一个JavaScript语言的工具库,提供了很多实用工具函数,可以帮助我们更便捷地对数据进行操作。它的使用非常广泛,可以用于Web开发、后端开发等领域。

1.安装插件

 npm i --save lodash

2.项目中导入方式

//全部应用
import _ from 'lodash'

//按需应用
import { cloneDeep,throttle } from "lodash";

3.lodash的使用,请查看文档

三.导出xlsx格式

1.安装插件 npm import xlsx --save 注:如果vue2中引入XLSX插件,出现“export 'default' (imported as 'XLSX') was not found in 'xlsx',建议采用版本npm import xlsx@0.16.0 --save 2.项目中引用方式

    import XLSX from "xlsx";
    
    //导出(注:如果导出表格有字段需要转译,比如:1:通过,2:不通过,
    比如时间格式;拿到数据时需在js里面转译,在html用过滤器转译导出表格后还是转译前的数据)
    exportData(){
      //过滤要导出的数据,如果是全表导出就不需要过滤数据
      const data = this.exporList.map((item) => [
              item.id,
              item.clientName,
              item.createTime,
              item.clientId,
              item.operatorTime,
            ]);
           //导出数据对应的标题
            const headers = [
              "列表ID",
              "客户姓名",
              "申请日期",
              "客户号",
              "审核时间",
            ];
            //并使用`aoa_to_sheet`方法将它们转换为一个工作表
            const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data]); 
            //然后使用`book_new`方法创建一个新的工作簿
            const workbook = XLSX.utils.book_new();
            //将工作表添加到工作簿中
            XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
            //最后调用`writeFile`方法将工作簿导出为Excel文件
            XLSX.writeFile(workbook, "申请列表.xlsx");
    }