驰骋coding生涯四年,重来都没有想过要给自己所学之技可以自成一家之言,直到去年进入了css公司,遇到了WK架构师,他的一番之言让我醍醐灌顶,拨开云雾睹青天.于是今天的博客之作也算是由来已久了.未来,也许会有如今天一时冲动的写作,也许再也没有.但我相信,有我的她在身边一直默默的支持和鼓励,终将冲破层层艰难困苦.嘴不言谢,只要心中知恩.
vue学习之路简史
我本后端攻城狮,勤耕于spring系列,不求闻达于node.ZJ大神不以我半道出家web前端为卑鄙.手把手精心给我讲node + webpages的来龙去脉以及vue的今生前世.颇感兴趣.于是web突飞猛进,加之spring cloud系列的深究,实现双壁合一,熟练前后端分离之道.
vue学习之路新篇章
(一)起初,项目的时间紧急度过高,故没有深究性能和更高效的开发细节.后来时机成熟了便重构框架,加之半制动编程,让加班变得越来越不可能.用过vue的都知道,vuex是用来管理数据状态的,既是项目公共变量,工程里的任何组件都可以从中获取到值,其在整个项目里面是共享的,但是不好的一点是如果F5,浏览器一刷新后所有的值都会打回原形.为了防止浏览器刷新导致数据丢失,笨的办法我们只好把重要的东西保存到window.sessionStorage或者 window.localStorage里.但是如果使用太多,那么页面加载性能真的很慢.那么有没有一种一劳永逸的办法呢?答案是肯定的.我们必要的一些东西放到vuex里面,然后再App.vue里面加这么一段代码就可以了:
created() {
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("pageInfo") &&
this.$store.replaceState(
Object.assign(
this.$store.state,
JSON.parse(localStorage.getItem("pageInfo"))
)
);
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload", () => {
localStorage.setItem("pageInfo", JSON.stringify(this.$store.state));
});
}
如此一来,页面上基本没有使用localStorage或者sessionStorage的必要了.当然还有一个地方我尚未找到解决的办法,那就是:
router.beforeEach((to, from, next) => {
if (to.matched.some(r => r.meta.requireAuth)) {
//是校验的路由
//let token = window.localStorage.getItem('token')
let token = store.state.token || window.sessionStorage.getItem('token')
if (token) {
next()
} else {
if (to.path == '/login') {
next()
} else {
next({
path: '/login',
query: { redirect: to.fullPath }
})
}
}
} else {
next()
}
})
let token = store.state.token || window.sessionStorage.getItem(‘token’)这一行代码也算是计较蠢的了.
(二) 新建两个文件,分别是.env.development和.env.production.她两里面的键是一样的,值当然配置开发和打包生产的,比如:
VUE_APP_TEST1 = "http://10.10.18.102:8080"
VUE_APP_TEST1 = "http://10.10.18.112:8080"
VUE_APP_为前缀,必须的,官方都这么说了,我能有什么办法.
<1>index.html的使用:
<input type="hidden" name="" id="url-input" value="<%= process.env.VUE_APP_TEST1 %>">
<2>.js里面的使用:
`${process.env.VUE_APP_TEST1}`
<3>如果一个前端项目使用多个后台的数据,那么这么干吧:
在axios.js配置如下:
baseURL: `${process.env.VUE_APP_TEST1}`,
在api.js的文件配置如下:
let gwcsUrl = `${process.env.VUE_APP_TEST1}`
let wdglUrl = `${process.env.VUE_APP_TEST2}`
//获取权限地址本列表
const getAddressList = params => {
return axios.post(gwcsUrl + `/group/config/list?systemCode=szxtbg&userId=` + params.userId);
}
//获取新的组织机构数据
const getnewTreeData = (params) => {
return axios.post(wdglUrl + `/group/config/newGroup?systemCode=szxtbg&nmId=${params.id}&groupId=${params.groupId}&userId=${params.userId}`);
}
<4>全文搜索高亮代码:
<span v-html="brightenKeyword('',doc.vcOperName)">{{doc.vcOperName}}</span>
brightenKeyword(vcOfficialType, vcTitle) {
let searchText = this.form.keywords ? this.form.keywords : "";
let newVcOfficialType = "";
let newVcTitle = "";
for (var index = 0; index < vcOfficialType.length; index++) {
var element = vcOfficialType.charAt(index);
var elementUp = element.toLowerCase();
var elementLo = element.toUpperCase();
let isHave = false;
for (let i = 0; i < searchText.length; i++) {
const ele = searchText.charAt(i);
if (
ele.indexOf(element) == 0 ||
ele.indexOf(elementLo) == 0 ||
ele.indexOf(elementUp) == 0
) {
isHave = true;
}
}
if (isHave) {
newVcOfficialType =
newVcOfficialType + "<font color='red'>" + element + "</font>";
} else {
newVcOfficialType = newVcOfficialType + element;
}
}
for (var index = 0; index < vcTitle.length; index++) {
var element = vcTitle.charAt(index);
var elementUp = element.toLowerCase();
var elementLo = element.toUpperCase();
let isHave = false;
for (let i = 0; i < searchText.length; i++) {
const ele = searchText.charAt(i);
if (
ele.indexOf(element) == 0 ||
ele.indexOf(elementUp) == 0 ||
ele.indexOf(elementLo) == 0
) {
isHave = true;
}
}
if (isHave) {
newVcTitle = newVcTitle + "<font color='red'>" + element + "</font>";
} else {
newVcTitle = newVcTitle + element;
}
}
// if (vcOfficialType) {
// vcOfficialType = "【" +(newVcOfficialType ? newVcOfficialType : vcOfficialType)+"】";
// } else {
// vcOfficialType = newVcOfficialType;
// }
// let text = vcOfficialType+(newVcTitle ? newVcTitle : vcTitle);
let text = newVcTitle ? newVcTitle : vcTitle;
return text;
},