我的头条（vue项目实战）--个人中心页

个人中心页的效果如上所示。我们分析一下应该如何实现这样的布局。首先蓝色背景色的是一个大的div,然后头像和用户信息也是一个div包裹，下面的动态粉丝关注则是需要三个div,这样个人信息框大致布局就完成了。下面的只需要三个input输入框就可以解决了，这样个人中心页布局就完成了。

 页面布局已完成。

 修改用户信息也完成。

发送的接口请求：

// 获取用户个人资料

export const userInfoAPI = () => request({

  url: '/v1_0/user/profile'

})

// 获取用户自己信息

export const UserAPI = () => request({

  url: '/v1_0/user'

})

// 更改用户头像

export const updatePhotoAPI = (fd) => request({

  url: '/v1_0/user/photo',

  method: 'PATCH',

  data: fd // 外面一会传进来的新表单数据，切记不能写对象，不然axios会解析成json文件

})

// 编辑用户个人资料

export const updateUserInfo = (obj) => {

  return request({

    url: '/v1_0/user/profile',

    method: 'PATCH',

    data: obj // data不会忽略值为null的那对键值对，params遇到null值会忽略不携带此键值对给后台obj

  })

}

由于小思同学需要用到websocket技术，还没学会所以暂时没实现。