vue开发过程中常见问题

一直做后端工作，近期由于工作需要写vue，作为vue小白，记录使用过程中遇到的问题？

• el-button点击后不失去焦点(按钮颜色不变)的解决

clickHandler(evt) {
    let target = evt.target;
    if(target.nodeName === "SPAN") {
        target = evt.target.parentNode;
    }
    target.blur();
}

原因：
下图为el-button的结构：

<el-button
    plain
    type="primary"
    size="mini"
    @click="test($event, row)"
>
    点击
</el-button>

点击button的时候，如果点击到文字（即span）上，这个时候evt.target是span标签，这个时候是没法直接触发其父节点button的blur方法的，也就没法强制button失去焦点。所以需要判断点击的是span还是button。

• vue下载资源：需求是已有下载链接，把内容下载到本地

// 本窗口打开下载
window.location.href = urls;
 // 新开窗口下载 
window.open(urls, '_blank');

• vue中axios来发送get、post消息时，遇到的问题
  使用vue一定会发送消息，我在使用过程中发现了一个很疑惑的问题，下面举例说一下：
  get方式

// request是一个axios对象
// 这里params {"id": 1}
return request.get(
         'http://localhost:8080/test',
        {
            params,
        }
    );
    
这里使用@RequestParam接收即可

post方式

// 这里params是一个对象
return request.post(
         'http://localhost:8080/test',  params
    );
    
接收使用@RequestBody可

注意：post的方式不用加{}，加上之后反而@RequestBody不能识别；而对于get不加{}，也是可以的，不过最好加上。
get不常用方式

// 这里params是一个对象
return request.get(
       'http://localhost:8080/test',
        {
            params,
        }
    );
后端使用对应类接收即可，跟post的方式一样，只是不需要加@RequestBody注解。

post指定Content-Type等配置

return request.post(  'http://localhost:8080/test', params, {
        headers: {
            'Content-Type': 'multipart/form-data',
        },
    });

记录vue使用过程中，遇到的问题，持续更新中。。。