vue项目切换用户头像的写法

vue程序的头像的切换，今天别人给我讲了下我今天来试了一下还不错，进行总结

首先是找清楚需要用的接口

1，https://www.365msmk.com/api/app/public/img向服务器上传图片

2，https://www.365msmk.com/api/app/user 把服务器图片上传到头像

就这两个就行了

接下来就是步骤的实现

主要用到的其实是表单输入中的file

<template>
<div id="app">
<img :src="img" alt style="width: 80px;" />
<br />
<label>
手机拍摄 //这里的camera就是调用手机相机的功能
<input type="file" accept="image/*" capture="camera" @change="paishe($event)" />
</label>
<br />
<br />
<label>
相册上传 //去掉capture就没有手机相机功能只提供上传图片
<input type="file" accept="image/*" @change="paishe($event)" />
</label>
</div>
</template>

<script>
export default {
data() {
return {
img: "",
};
},
//页面加载的时候获取一下用户信息
mounted() {
this.$http.get("https://www.365msmk.com/api/app/userInfo").then((res) => {
this.img = res.data.data.avatar;
});
},
methods: {
paishe(e) {//这是一个change事件参数是e,e中的target.files中包含了图片的主要信息，上传时间之类的
console.log(e);
//因为这里的上传接口是利用 FromData来实现传参的
//所以我们这里初始化了一个FromData
let formData = new FormData();
formData.append("file", e.target.files[0]);
//调用上传图片接口上传照片
this.$http
//将formData作为参数传给服务器
.post("https://www.365msmk.com/api/app/public/img", formData)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
//成功拿到图片在服务器的数据后就可以调用设置头像的接口了
//设置头像接口
this.$http
.put("https://www.365msmk.com/api/app/user", {
avatar: res.data.data.path,
})
.then((ress) => {
console.log("图像路径", ress);
this.img = res.data.data.avatar;
});
}
});
},
},
filters: {},
watch: {},
};
</script>
**

vue路由传值

vue的路由传值有两种方式

params

this.$router.push({
path:"/地址",
params:{
参数名:"参数值"
}
})
接受
this.$route.params."参数值"
12345678

params的话传参刷新页面数据会消失不会保存

query

this.$router.push({
path:"/地址",
params:{
参数名:"参数值"
}
})

接受
this.$route.query."参数值"
123456789

query的话刷新页面数据也不会丢失

flex 最后一行左对齐

最近项目布局上要求item两端对齐，而且最后一行在列不满的情况下要求左对齐，使用flex的**justify-content: space-between;**实现时发现最后一行不能左对齐，而是两端对齐方式，下图不是项目上想要的效果（不使用flex也可以实现，本文仅讨论使用flex实现）

felx最后一行对齐的话可以用空白div来填充

还可以用：:after（适用于每行列数确定的场景）

.box:after {
content: "";
flex: auto;
}

Js数组中常用的方法

push()

像数组的末尾添加，返回的是添加后的数组的长度，会改变原来的数组

var a = [a]
var b= a.push(b)

结果：[a,b]

pop()

删除数组尾部的元素，改变原来数组

var a = [a,b]
var b= a.pop()

结果：[a]

unshift()

数组前添加一个元素，改变原来数组

var a = [a]
var b= a.unshift(b)

结果：[b,a]

shift()

删除数组中的首个元素，改变原来数组

var a = [a,b]
var b= a.shift()

结果：[b]

splice()

方法用于添加或删除数组中的元素，改变原来的数组

var a = [a,b]
var b= a.splice(0,1)
从0开始删除一个
结果：[b]

var a = [a,b]
var b= a.splice(0,1,c,d)
移出a,并且添加c,d
结果：[b,c,d]