9.编辑用户详情页面
新建用户详情页面src/views/edit_profile.vue
9.1数据获取和个人中心是用一个接口
// 获取用户详情
// 接口类型:【GET】
// 需要验证:【Authorization 】
// 接口地址:/user/:id
// xhr.setRequestHeader('Conent-Type','applicatio/x-www-form-urlencoded')
export const getUserInfo = (id) => {
return axios({
url: `/user/${id}`,
// headers: { Authorization: localStorage.getItem('hm_toutiao_56') }
})
}
9.2修改信息的接口
// id:当前用户id
// data:你想编辑的数据 修改数据接口
export const editUser = (id, data) => {
return axios({
method: "post",
url: `/user_update/${
id}`,
data
})
}
9.3配置路由
{
name: 'edit_profile',
path: '/edit_profile/:id',
component: () => import('@/views/edit_profile.vue')
}
// personal.vue修改路由跳转:加上id
<div class="personal">
<router-link :to="'/edit_profile/'+userinfo.id">
...
edit_profile.vue页操作:封装头部,修改之前封装的mycell:添加一个type,让password以******显示
9.4新建头部子组件:icon
引入字体图标 main.js 上图左右两边都是字体图标
import { Button, Toast, Icon } from 'vant';
.use(Icon)
src/components/myheader.vue头部封装开始
<template>
<div class="header">
<div>
<!-- 添加具名插槽,通过name为这个插槽设置名称,后期在使用的时候,可以指定内容放置到那个插槽中 -->
<slot name="left"></slot>
</div>
<div>{
{title}}</div>
<div>
<slot name="right"></slot>
</div>
</div>
</template>
<script>
export default {
props: ['title'] //标题
}
</script>
<style lang="less" scoped>
.header {
height: 50px;
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
.van-icon {
font-size: 18px;
}
div:nth-of-type(2) {
font-weight: bold;
}
div:last-child {
.van-icon {
font-size: 24px !important;
color: Red;
}
}
}
</style>
------------------------------------------------------
引入个人中心
import myheader from '@/components/myheader.vue'
export default {
components:{
myheader
}
};
<myheader title='编辑个人信息'>
<!-- 指定图标所放置的插槽,通过slot可以指定 -->
<van-icon name="arrow-left"
slot='left'
@click="$router.back()" />
<van-icon name="wap-home-o"
slot='right'
@click="$router.push({path:'/index'})" />
</myheader>
9.4头部渲染完成
头像,日期,用户名
async mounted () {
// 一进来渲染数据:头部头像和日期,用户名
let id = this.$route.params.id
let res = await getUserInfo(id)
console.log(res)
this.userinfo=res.data.data
// this.nickname=this.userinfo.nickname
if (this.userinfo.head_img) {
this.userinfo.head_img = axios.defaults.baseURL + this.userinfo.head_img
} else {
this.userinfo.head_img = axios.defaults.baseURL + '/uploads/image/timg.gif'
}
}
9.4 引入单元格子组件:mycell
src/components/mycell.vue添加type选择,用于设置密码框
//修改添加type
<div class="right">{
{
type=='pass'?'******':desc}}<span class="iconfont iconjiantou1"></span>
export default {
props: ['title', 'desc', 'type']
}
修改/personal.vue:把获取到的用户详情里的id通过url带过来,用于后面的编辑用户请求
<div class="personal">
<router-link :to="'/edit_profile/'+userinfo.id">
9.5实现页面渲染:和个人中心一样
edit_profile.vue引入密码框组件,引入头部组件,并渲染头像,用户名,日期
<template>
<div class="edit_profile">
<myheader title="编辑个人信息">
<!-- 指定图标所放置的插槽,通过slot可以指定 -->
<van-icon name="arrow-left"
slot='left'
@click="$router.back()" />
<van-icon name="wap-home-o"
slot='right'
@click="$router.push({path:'/index'})" />
</myheader>
<div class="userImg">
<img :src="userinfo.head_img"
alt="">
<van-uploader :after-read="afterRead" />
</div>
<!---->
<mycell title="昵称" :desc='userinfo.nickname'></mycell>
<mycell title="密码" :desc='userinfo.password'></mycell>
<mycell title="性别" :desc='userinfo.gender===0?"女":"男"'></mycell>
</div>
</template>
<script>
import myheader from '@/components/myheader.vue'
import mycell from '@/components/mycell.vue'
import {
getUserInfo } from '@/apis/user.js'
import axios from '@/utils/myaxios.js'
export default {
data () {
return {
userinfo:{
}
}
},
components:{
myheader,mycell
},
</script>
10.vant组件的文件上传功能实现点击头像上传文件修改头像
- main.js 引入
import {
Button, Toast, Icon, Uploader } from 'vant';
.use(Uploader)
2.添加到页面中 edit_profile.vue
组件:触发afterRead的时候,仅仅说明这个组件已经获取到的用户所选择的文件对象,但是上传操作得我们自己再手动的完成
<div class="userImg">
<img :src="userinfo.head_img"
alt="">
<van-uploader :after-read="afterRead" />
</div>
import mycell from '@/components/mycell.vue'
import axios from '@/utils/myaxios.js'
import {
getUserInfo } from '@/apis/user.js'
export default {
data () {
return {
userinfo: {
}
}
},
methods: {
// 触发afterRead的时候,仅仅说明这个组件已经获取到的用户所选择的文件对象,但是上传操作得我们自己再手动的完成
async afterRead (myfile) {
console.log(myfile)
let formdata = new FormData()
formdata.append('file', myfile.file)
// 实现文件上传
let res = await fileUpload(formdata)
console.log(res)
// 重新设置userinfo的head_img的值,以实现预览更新
this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url
// 同时还要实现用户头像的编辑
// 一定要注意这里传递的数据不要拼接基准路径
let result = await editUser(this.userinfo.id, {
head_img: res.data.data.url })
console.log(result)
}
},
async mounted () {
}
3.重置文件上传组件的样式
有的放矢:你得先找到控制某些效果的样式,再考虑如何进行重置
<style lang="less" scoped>
.edit_profile {
.userImg {
width: 100%;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
> img {
width: 90 * 100vw/360;
height: 90 * 100vw/360;
}
// 重置文件上传组件的样式-使用深度选择器,能够在父组件中影响子组件的样式
// 大小
/deep/ .van-uploader__upload {
width: 90 * 100vw/360;
height: 90 * 100vw/360;
}
// 定位
/deep/ .van-uploader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
}
}
</style>
11.编辑用户头像-重点关注
afterRead虽然没有实现文件上传功能,但是它能够获取到当前用户所选择文件对象
我们就需要拿到这个文件对象,上传到服务器
1.封装文件上传接口
@/apis/fileUpload.js
2.调用接口,实现文件上传
// 实现文件上传
import axios from '@/utils/myaxios.js'
// 接口类型:【POST】
// 需要验证:【Authorization 】
// 接口地址: /upload
export const fileUpload = (data) => {
return axios({
method: 'post',
url: '/upload',
data
})
3.调用接口,实现用户头像的更新
使用vant组件的afterRead方法触发文本上传,获取文件上传的路径,根据此路径发送文件上传请求,发送文件修改请求
import {
getUserInfo, editUser } from '@/apis/user.js'
import {
fileUpload } from '@/apis/fileUpload.js'
// 触发afterRead的时候,仅仅说明这个组件已经获取到的用户所选择的文件对象,但是上传操作得我们自己再手动的完成
async afterRead (myfile) {
console.log(myfile)
let formdata = new FormData()
formdata.append('file', myfile.file)
// 实现文件上传
let res = await fileUpload(formdata)
console.log(res)
// 重新设置userinfo的head_img的值,以实现预览更新
this.userinfo.head_img = axios.defaults.baseURL + res.data.data.url
// 同时还要实现用户头像的编辑
// 一定要注意这里传递的数据不要拼接基准路径
let result = await editUser(this.userinfo.id, {
head_img: res.data.data.url })
console.log(result)
}