Vue开发后台用到的一些方法

1 路由重复报错

// 重写push方法来 屏蔽 重复跳转到同一个路由的报错
const orginPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location, onResolve, onReject) {
  if (onResolve || onReject) return orginPush.call(this, location, onResolve, onReject)
  return orginPush.call(this, location).catch(err => err)
}

2 封装 Axios 请求

2.1 创建 Request 文件，文件下方创建 request.js 和 api.js(名字任意)

// request.js
yarn add axios
src项目下创建 request文件
// request.js
import axios from 'axios'
import Vue from 'vue'
const instance = axios.create({
    baseURL: '/api', // 请求地址例如'http://xxx.cn'
    timeout: 5000    // 请求超时时间
})
instance.interceptors.request.use(config=>{
    const token = localStorage.getItem('token')
    if(token){
        config.headers = config.headers || {}
        config.headers['后端提供'] = token // 请求头token上传字段和后端商量
        config.headers['Authorization'] = token // 例如
    }
    return config
},err=>Promise.reject(err))
instance.interceptors.response.use(res=>{
    if(res.data.code !== 0){   // 查看后端返回数据code (有的是0，有的是200)
        // 统一的网络请求报错处理
        // Vue.use(Element) 就在 Vue的prototype上面添加element相关的API
        Vue.prototype.$message.error(res.data.message)
    }
    return res.data
},err=>Promise.reject(err))
export default instance

// api.js
import request from './request'
// 登录接口
export const loginApi = params => request.post('/api/login',params)
// 获取用户信息
export const GetInfoApi = (params) => request.get('/admin/info',{params})

// 页面中使用 
import {loginApi} from '../request/api'
loginApi('请求参数').then(res=>{
   if(res.data.code === 0){
      .....
    }
})

3 Vue原型链上绑定函数，引入全局调用

// 创建一个文件（Allhint）并且在下面创建一个js(index.js)
// 例如 index.js 中：
export function AlertFn() {
  alert('即将开放..')
}
// main.js中引入
import {AlertFn} from  './Allhint'
import Vue from 'vue'
Vue.prototype.$AlertFn = AlertFn
// 全局使用
this.$AlertFn()

4打包项目设置title与favicon.ico

// 我们完成项目后，想要在webpack修改 index.html 的title标签，可以在 vue.config.js 中：
module.exports = {
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "XXX管理系统";
      return args;
    });
  },
  publicPath: "./",
};
// 如果想改favicon.ico，可以在网上扒一个你想要的，然后替换  public 下的favicon.ico即可。

5记录一下平时解决的问题

5.1 视频的下载

// 绑定事件到按钮上
    downVideo(url, name) {
     const token = getToken(); // 拿到token
      let headers = new Headers({    // 设置请求头
        "Access-Control-Allow-Origin": "*",
        token: token,    
      });
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'arraybuffer';    // 返回类型blob
      xhr.headers = headers
      xhr.onload = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          let blob = this.response;
          // 转换一个blob链接
          let Allurl = window.URL.createObjectURL(new Blob([blob], { type: 'video/mp4' }))
          let a = document.createElement('a');
          a.download = name + ".mp4";
          a.href = Allurl;
          a.style.display = 'none'
          document.body.appendChild(a)
          a.click();
          a.remove();
        }
      };
      xhr.send()
    }
//调用  点击按钮实现mp4格式视频下载
downVideo('请求路径', '下载视频名称')

5.2 Excel文档导出

封装Excel.js 下载 xlsx （我使用的老版本 0.14.1）

import XLSX from 'xlsx'

function json_to_array(key, jsonData){
    return jsonData.map(v => key.map(j => { return v[j] }));
}

function get_header_row(sheet) {
    const headers = []
    const range = XLSX.utils.decode_range(sheet['!ref'])
    let C
    const R = range.s.r /* start in the first row */
    for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */
        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
    }
    return headers
}

export const read = (data, type) => {
    const workbook = XLSX.read(data, { type: type });
    const firstSheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[firstSheetName];
    const header = get_header_row(worksheet);
    const results = XLSX.utils.sheet_to_json(worksheet);
    return {header, results};
}

export const export_array_to_excel = ({key, data, title, filename, autoWidth}) => {
    const wb = XLSX.utils.book_new();
    const arr = json_to_array(key, data);
    arr.unshift(title);
    const ws = XLSX.utils.aoa_to_sheet(arr);
    XLSX.utils.book_append_sheet(wb, ws, filename);
    XLSX.writeFile(wb, filename + '.xlsx');
}

export default {
    export_array_to_excel,
    read
}

页面中使用

  import excel from "../excel.js";
  // 例如   这个是需要导出的数据
   let arr = [
        {
          Title: "嘿嘿嘿嘿哈哈哈",
          Areas: "中国",
          age: "99",
          name:'小明',
          gender:'男'
        }
      ];
      let Excelparams = {
        title: [
          "标题",
          "地区",
          "年龄",
          "名字",
          "性别"
        ],
        key: [
          "Title",
          "Areas",
          "age",
          "name",
          "gender"
        ],
        data: arr,
        filename: "此处是需要导出的Excel名称，切记不能超过31个字，否则会报错",
      };
      excel.export_array_to_excel(Excelparams);

5.3 使用vue-qr生成图片，并下载压缩包（Zip）

生成图片

1. npm install vue-qr --save
2.(https://files.mdnice.com/user/33977/c64b33eb-d645-485e-bda2-4dd5f81ce2f5.png)
3.import VueQr from 'vue-qr';
//  PitchOnList 数组，拿到数据批量生成二维码
<div v-for="item in PitchOnList" :key="item.Id">
        <vue-qr :text="item.QrcodeUrl" :qid="item.Title" :size="200" :margin="0" ref="Qrcode" :callback="callbackFn">  
        </vue-qr>
 </div>
 // callback 生成图片后的回调函数   callbackFn(url,name) url:base64路径，name:绑定的名称 

批量导出生成的图片

// jszip  file-saver 需要下载的包
import JSZip from "jszip";
import FileSaver from "file-saver";
callbackFn(url, name) {
      let that = this;
      // 定义一个数组，存放已经生成的图片数据
      this.qrCodeFile.push({
        url: url,
        name: name,
      });
      // PitchOnList 这是选中需要导出的数据
      if (that.qrCodeFile.length == that.PitchOnList.length) {
        const zip = new JSZip();
        that.qrCodeFile.forEach((item) => {
          const fileName = item.name + ".png";
          zip.file(fileName, item.url.substring(22), { base64: true }); //向zip中添加文件
        });
        zip.generateAsync({ type: "blob" }).then((content) => {
          // 生成二进制流
          FileSaver.saveAs(content, "批量打包--二维码.zip"); // 利用file-saver保存文件
        });
        this.qrCodeFile = [];
      }
    },

5.4 下载Dom元素图片

1.npm i html2canvas
2.import html2canvas from "html2canvas";
3. <div style="margin: auto; width: 90%" ref="imageWrapper">
  内容
</div>
4.  html2canvas(this.$refs.imageWrapper).then((canvas) => {
        let dataURL = canvas.toDataURL("image/png");
        if (dataURL !== "") {
          var aLink = document.createElement("a");
          aLink.download = this.Orgname + "-所有宣讲";
          aLink.href = dataURL;
          aLink.click();
        }
      });

5.5 数据可视化 echarts 生成图片回调的使用

  1.npm i echarts
  2.import echarts from "echarts";
  3......
  4.生成图表回调
   this.myChart = echarts.init(document.getElementById(this.id));
    this.zcRecordId = this.id;
    let that = this;
    // 回调函数
    this.myChart.on("finished", function () {
      console.log("finished");
      var opts = {
        type: "jpeg", // 配置导出的格式，还可以是png
        pixelRatio: 2, // 导出的图片分辨率，默认为 1。
        backgroundColor: "#fff", // 导出的图片背景色，默认使用 option 里的 backgroundColor
      };
      var resBase64 = that.myChart.getDataURL(opts);
      that.$store.dispatch("app/pushAllFIlE", {
        title: that.Province + ".png", //导出文件的标题
        base64: resBase64, //导出文件的编码
      });
    });