(六)文章评论功能和个人中心

在这一部分,完成文章评论功能和个人中心

文章评论功能包括以下内容

• 相关路由的搭建和铺设
• 获取评论数据
• 发布评论功能
• 加载评论功能
• 点赞和取消点赞
• 关注和取消关注
• 获取到评论

学习到的东西

1. 数组去重的方法
   通过set**,Set里面不允许重复的数据**,有重复的数据就会消去,再通过reset解构赋值转换成数组

2. 点赞或取消点赞类似的逻辑处理
   这类的逻辑可以通过传入一个true和false,如果是true就将原先的置为false,如果false就置为true,再调api

3. 点击滚动条,到达下面的方法
   获取想要的元素 通过ducument,queryselectAll().scrollheight来获取高度,再通过scrollTo,当点击的时候会直接到达下面如果需要动画要通过animation (配合帧动画), transition (过渡动画)

4. 当点击的时候就立即跳转了,怎么解决这样的问题
   通过setimeout,promise和nextThick来保证不会立马跳转

5. JSON转入和转出
   通过转入本地如果是数组,要通过JSON.toString,再通过Json.parse来转换为原来的数据

个人中心

• 包含以下内容

1. 铺设数据和组件
2. 退出登录功能
3. 编辑信息功能
4. .头像修改功能
5. 生日修改功能

总结一下自己学习到的东西

Content-Type: application/json; axios携带的, 前提: data请求体是对象 -> json字符串 -> 发给后台
Content-Type: application/json,data请求体是对象,必须使用对象包起来。
Content-Type: multipart/form-data; 浏览器携带的, 前提: data请求体必须FormData类型对象

// 用户 - 更新头像
export const updateUserPhotoAPI = (fd) => request({
  url: '/v1_0/user/photo',
  method: 'PATCH',
  data: fd // fd外面一会儿传进来的new FormData() 表单对象

  // 如果你的请求体直接是FormData表单对象, 你也不用自己添加
  // Content-Type, axios发现数据请求体是表单对象, 它也不会转换成json字符串
  // 也不会带Content-Type: application/json, 而是交给浏览器, 浏览器发现请求体是formData会自己携带Content-Type

  // Content-Type: application/json; axios携带的, 前提: data请求体是对象 -> json字符串 -> 发给后台
  // Content-Type: multipart/form-data; 浏览器携带的, 前提: data请求体必须FormData类型对象
})

2. 当我们使用的是PATCH类型,我们可能传入一个参数或者两个参数,但是如果没有相应的参数就不传入。
   问题一:传入的是一个对象数组而不是普通数组用什么遍历
   通过for in来遍历对象,如果传入的没有就删掉,有的话在传入

// 用户 - 更新基本资料
export const updateUserProfileAPI = (dataObj) => {
  // 判断, 有值才带参数名给后台, 无值参数名不携带
  // 写法1: 解构赋值, 4个判断, 往空对象上添加有值的加上去(以前做过)
  // 写法2: 外面想传几对象key+value, 就直接传入交给后台
  // 写法3: 上面写法不够语义化, 我看不出obj里有什么
  const obj = {
    name: '',
    gender: 0,
    birthday: '',
    intro: ''
  }
for (const prop in obj) {
  if (dataObj[prop]===undefined) { // 用key去外面传入的参数对象匹配, 如果没有找到(证明外面没传这个参数)
    delete obj[prop] // 从obj身上移除这对属性和值
  }else{
    obj[prop] = dataObj[prop] // 如果使用了, 就从外面对象取出对应key值, 保存到obj上

  }
}
  return request({
    url: '/v1_0/user/profile',
    method: 'PATCH', // 局部更新->PUT(全都更新)
    data: obj
    // { // data不会忽略值为null的那对key+value, params遇到null值会忽略不携带此对参数和值给后台
    //   name, // 昵称
    //   gender, // 性别0:男, 1:女
    //   birthday, // 生日(要求格式: 年-月-日 字符串)
    //   intro // 个人介绍
    // }
  })
}

3. 关于日期的处理
   前端得到的日期对象,后端可能需要的是年-月-日字符串,这里可以通过Moment.js或者day.js,原生需要一个个取出来拼接字符串

export const formatDate = (dateObj) => {
  return dayjs(dateObj).format('YYYY-MM-DD')
}