vue总结小知识

  • 内容
  • 相关

vue关于从后台获取的数据显示问题

由于后台给的数据是代码比如(男是M女是F这种)
尽量使用过滤器 不要获取的时候直接修改里面的数据

element可以使用 :formatter

或者使用filters 过滤 保证用到获取的数据的时候直接可以给后台返回原数据 不然会涉及到深拷贝浅拷贝问题 会改变里面的数据

 

-----------------------------------------------------------------------------------------------------

vue关于全局校验token 调用接口统一带token

import Vue from 'vue'
import axios from 'axios'
import qs from "qs";
axios.defaults.baseURL = 'http://192.168.2.90:9999/edu'; //测试接口地址
// 校验token 封装header统一带token
import Cookies from 'js-cookie'
import router from '../router/index'
axios.interceptors.request.use(config => { //配置axios请求头,axios每次发起请求携带token,在Network中的headers看的到
    // console.log(config)
    let token = Cookies.get('token')
    if (token) {
        config.headers.token = token //token  是请求头要求加上的字段
    }
    return config
})
// 验证登陆状态
var v = new Vue({router});
axios.interceptors.response.use(
    response => {
        if (response.data.code == 401) {
            // console.log(_that);
            v.$notify.error({
                title: '错误',
                message: '登录过期请重新登录'
            });
            Cookies.remove('token');
            Cookies.remove('username');
            Cookies.remove('workType');
            v.$router.push('/login')
            return
        } else {
            return response;
        }
    },
    error => {
        console.log(error.response);
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    401
                    // 返回 401 清除token信息并跳转到登录页面
                    // store.commit(types.LOGOUT);
                    // router.replace({
                    //     path: 'login',
                    //     query: {redirect: router.currentRoute.fullPath}
                    // })
                    console.log('报错了');
            }
        }
        return Promise.reject(error.response.data) // 返回接口返回的错误信息
    });
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs
export default ({
})

 

vue创建全局组件

import cuCustom from './components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

 

金额格式化、数字转大写中文

 

number_chinese(str) {
      var num = parseFloat(str);
      var strOutput = "",
        strUnit = "仟佰拾亿仟佰拾万仟佰拾元角分";
      num += "00";
      var intPos = num.indexOf(".");
      if (intPos >= 0) {
        num = num.substring(0, intPos) + num.substr(intPos + 1, 2);
      }
      strUnit = strUnit.substr(strUnit.length - num.length);
      for (var i = 0; i < num.length; i++) {
        strOutput +=
          "零壹贰叁肆伍陆柒捌玖".substr(num.substr(i, 1), 1) +
          strUnit.substr(i, 1);
      }
      return strOutput
        .replace(/零角零分$/, "整")
        .replace(/零[仟佰拾]/g, "零")
        .replace(/零{2,}/g, "零")
        .replace(/零([亿|万])/g, "$1")
        .replace(/零+元/, "元")
        .replace(/亿零{0,3}万/, "亿")
        .replace(/^元/, "零元");
    },
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明:
       * number:要格式化的数字
       * decimals:保留几位小数
       * dec_point:小数点符号
       * thousands_sep:千分位符号
       * */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function(n, prec) {
          var k = Math.pow(10, prec);
          return "" + Math.ceil(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + Math.round(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },

 

vue3代理

 

// vue.config.js 配置说明  把默认的axios上的地址删掉 用代理就不要用axios默认地址
// 这里只列一部分,具体配置惨考文档啊
module.exports = {
  // productionSourceMap: false,
 /* publicPath: './',*/
  publicPath: process.env.NODE_ENV === "production" ? "/aksManage/" : "./",
  productionSourceMap: false,//关闭SourceMap(关闭之后不仅能加快生产环境的打包速度,也能避免源码暴露在浏览器端:)
  lintOnSave: false,
  devServer: {
    proxy: {
        '/api':{
          target: 'http://192.168.2.90:9999/aks_platform',
          // target: 'http://172.17.52.12:80/aks_platform',
          // target: 'http://172.17.52.2:9999/aks_platform',
          changeOrigin: true,
          pathRewrite: {
            '/api': ''
          }
        },
        '/ggzfapi': {
            target: 'https://test.ggzf.sh.gov.cn/UnifiedPayWebFront/consume/consumeService.do',// 是你请求的第三方接口  
            changeOrigin: true,   // 设置同源  默认false,解决跨域问题
            pathRewrite:{
              '^/ggzfapi':""
            }
        }
    }
}

}

 导出文件流(URL.createObjectURL)

 /*导出考生信息*/
    handleEdit(index, row) {
      this.$axios({
        method: "post",
        url: "/examManage/expStu",
        data: qs.stringify({
          id: row.ID
        }),
        headers: {
          token: this.token
        },
        responseType: "blob"
      }).then(res => {
        // 处理返回的文件流
        const content = res.data;
        const blob = new Blob([content]);
        const files = res.headers["content-disposition"].substring(
          res.headers["content-disposition"].lastIndexOf(";filename=") + 10
        );
        const fileName = decodeURI(files);
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          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, fileName);
        }
      });
    },

vue项目 内存溢出解决

第一步:  全局安装  increase-memory-limit

npm install -g increase-memory-limit

第二步:  进入工程目录,执行:

increase-memory-limit

第三步:  重启项目即可(切记!!!)

如果未解决  package.json 再加上

 "scripts": {
    "serve": "vue-cli-service  --max_old_space_size=4096 serve",
    "build": "vue-cli-service  --max_old_space_size=4096 build",
    "lint": "vue-cli-service lint",
    "adjust-mermory-limit": "cross-env LIMIT='4096' increase-memory-limit"
  },

本文标签:

版权声明:若无特殊注明,本文皆为《热心网友》原创,转载请保留文章出处。

本文链接:vue总结小知识 - https://qibiao.qingshenshiye.cn/?post=42

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知

评论

1条评论
  1. avatar

    热心网友 回复

    IP数据库文件不存在或者禁止访问或者已经被删除!

    //