1.跨域问题
使用vue进行前后台分离的开发，问题出现是这样的，后台使用spring+boot在电脑192.168.34.40:8080/xx电脑的tomcat中运行，开启跨域请求。前台使用vue+axios在192.168.34.41:9000上开发，前台要想获取后台的请求资源，按官网的方法，vuecli3以上，在package.json同一级下的vue.config.js配置文件中写入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
module.exports = {
devServer: {
port:9000,
proxy: {
'/api': {
target: 'http://192.168.34.40:8080/xx/',
ws: true,
logLevel:"debug",
changeOrigin: true
},
'/user': {
target: 'http://192.168.34.40:8080/xx/',
ws: true,
logLevel:"debug",
changeOrigin: true
}
}
}
}
|
经过尝试，假如前后台都在同一台机器（40）,只是端口不同，是没有问题的。对于不同的ip,不同的端口，就失效了。原因在于，后台设置cookie时，path路径为/xx，而经过vue代理的cookie，path=/，当前开发路径与后台设置的path不同，所以后台无法获取相应的cookie，解决方法为，为axios加入baseurl以及withCredentials:true。
1
2
3
4
5
6
7
| axios({
url:'/user/login'
,baseURL: 'http://192.168.34.40:8080/xx/'
,withCredentials: true,
}).then(function (response) {
console.log(response);
})
|
这样就相当于告诉axios请求全部用全路径请求，后台设置path就会是全路径的path，下一次请求时也会将cookie带上，有点jsonp的味道。至于vue.config.js中的proxy就可以去掉了。
后台的spring boot跨域设置：实现WebMvcConfigurer接口，重写addCorsMappings方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET","POST", "PUT", "DELETE")
.allowedHeaders("*");
}
|
2.监听window的resize事件
说是Vue监听window的resize事件，不如说是js直接监听window.onresize,因为vuejs也不是全能的，对于windows上的事件来说，也不能全部写一个语法糖，这里我们姑且直接使用windows.onresize事件进行处理。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| mounted() {
let resizeTimer = null
let $searchlist=this.$el.querySelector('.searchlist');
let body=document.querySelector('body');
window.onresize=() => {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
let bodyStyle=window.getComputedStyle(body);
console.log(bodyStyle.height);
resizeTimer = setTimeout(() => {
$searchlist.style.maxHeight='';
}, 400);
}
}
|
需要说明的是：
1.关于resize事件触发的优化，针对scroll也是一样。为了避免用户随意改变窗口大小，致使resize事件不断的触发，需要添加一个延迟，如果在400毫秒之内，resize持续触发了，那么就直接将上一个事件处理程序抛弃掉重新设置事件监听，这样可以避免resize中的代码被重复执行。
1
2
3
4
5
6
7
8
9
10
| var resizeTimer = null;
window.onresizie= function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log("window resize");
}, 400);
}
);
|
2.在项目中 window.onresize只能挂载一次，在多个页面中同时挂载 window.onresize时，只有其中一个 window.onresize会起作用。
