开发小结

Element UI --- Select下拉框页面数据不更新问题

@change方法里面加上this.$forceUpdate()

a标签不跳转

1.<a href="javascript:void(0);" >javascript:void(0);</a> 
2.<a href="javascript:;" >javascript:;</a> 
3.<a href="" οnclick="return false;">return false;</a>    这个会刷新页面
4.<a href="#" οnclick="return false;">return false;</a>   这个会刷新页面
5.<a href="##" >##</a>    这个会刷新页面
6.<a href="####" >####</a>      这个会刷新页面
7.<a href="#all" >#all</a>  这个会刷新页面

post请求下载文件

axios.defaults.headers = {
"Content-Type": "application/json", // 这儿是通过json格式 传值，如果需要通过formData形式，可以改，详情 https://www.cnblogs.com/honkerzh/p/14157038.html
authorization: bearer ${this.token}
};
axios({
method: "post",
url: "/apps/insight-integration/api/v1/" + this.props.url,
data: { ext: "csv", ...params } // post 请求传值：formData ，或者 json （根据接口的要求传值即可）
})
.then(response => {
const fileName = response.headers["content-disposition"].split(";")[1].split("=")[1].split(".csv")[0]; // 根据接口返回情况拿到文件名
const blob = new Blob([response.data], { type: "csv/plain" }); // 通过返回的流数据 手动构建blob 流
const reader = new FileReader();
reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签的href （转换base64还可用 window.atob ，未实验过）
reader.onload = e => { // 转换完成，创建一个a标签用于下载
const a = document.createElement("a");
console.log(decodeURIComponent(fileName));
a.download = decodeURIComponent(fileName) + ".csv"; // 构建 下载的文件名称以及下载的文件格式（可通过传值输入）
if (typeof e.target.result === "string") {
a.href = e.target.result;
}
a.click();
};
})
.catch(error => {
// doSomething()
});

Referer

1、Referer含义

HTTP 协议在请求（request）的头信息里面，设计了一个Referer字段，给出"引荐网页"的 URL。告诉了服务器，用户在访问当前资源之前的位置。这往往可以用来用户跟踪。这个字段是可选的。客户端发送请求的时候，自主决定是否加上该字段。

2、发生场景

用户在地址栏输入网址，或者选中浏览器书签，就不发送Referer字段。
主要是以下三种场景，会发送Referer字段。

（1）用户点击网页上的链接。

（2）用户发送表单。

（3）网页加载静态资源，比如加载图片、脚本、样式。

如果要改变默认的Referer行为，rel="noreferrer"属性是最简单的一种方法。

<a href="..." rel="noreferrer" target="_blank">xxx</a>
<a>、<area>和<form>三个标签可以使用这个属性，一旦使用，该元素就不会发送Referer字段。

还有一种比较老式的技巧，但是非常有效，可以隐藏掉原始网址，谷歌和 Facebook 都在使用这种方法。

链接的时候，不要直接跳转，而是通过一个重定向网址，就像下面这样。

<a  href="/exit.php?url=http%3A%2F%2Fexample.com">Example.com</a>

上面网址中，先跳转到/exit.php，然后再跳转到目标网址。这时，Referer字段就不会包含原始网址。

图片加载出错时候替换图片

图片在页面显示的时候，万一图片被移动了位置或者丢失的话，将会在页面显示一个带X的图片，很是影响用户的体验。即使使用alt属性给出了"图片XX"的提示信息，也起不了多大作用。 前端一般这样处理：当图片不存在的时候，会触发onerror事件，在该事件中做一下补救的工作：

将图片隐藏：
<img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>  
用另一张图片替换当前访问出错的图片：
<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>  

但是上述用默认图片替换的方案有个bug：如果使用不当，在IE内核的浏览器下会造成死循环。比如：当【默认图片的url地址】也加载不成功（比如网速比较慢的时候）或不存在的话，就会反复的加载，最后造成堆栈溢出错误。 因此， 需要用下面两种方法解决： a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小，并且存在。 b、控制onerror事件只触发一次，需要增加这句话：this.οnerrοr=null; 增加后如下：

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址';this.οnerrοr=null"/>

vue-router query和params传参(接收参数)$router $route的区别

传参是this.$router,接收参数是this.$route
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象，里面可以获取name、path、query、params等
注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined
query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示
另外，params传值刷新页面是要消失的，然而query却不会
params如果想传入多个参数写法如下：

path: '/adminCun/:jum/:id/:type

还有一种方法，就是在定义路由的时候，给path设定参数

export default [{
  path: '/platform',
  component: Layout2,
  children: [{
    path: '/adminCun/:jum',        //这里值用:加参数的写法，jum即为参数，注意一定要用/隔开(多参数传递如上代码↑)
    name:'platformRecycleAdminCun',
    meta:{
      title:'管辖村级详情'
    },
    component: resolve => require(['@/view/platform/recycle/admincun'],resolve)
  }]
}]

这样，就能在理由组件里面直接通过this.$route.params.jum取值了

Mac设置Android-sdk环境变量

1.打开Terminal
2.进入当前用户的home目录：$ cd ~/
3.创建.bash_profile文件：$ touch .bash_profile
4.打开并编辑.bash_profile文件：$ open .bash_profile
5.在文件中写入以下内容：
$ export ANDROID_HOME=/Users/youruser/Library/Android/sdk

$ export PATH=${PATH}😒{ANDROID_HOME}/tools

$ export PATH=${PATH}😒{ANDROID_HOME}/platform-tools

6、使其立即生效：$ source .bash_profile