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"
},
评论
1条评论热心网友
回复
IP数据库文件不存在或者禁止访问或者已经被删除！