在这一部分,完成文章评论功能和个人中心
文章评论功能包括以下内容
- 相关路由的搭建和铺设
- 获取评论数据
- 发布评论功能
- 加载评论功能
- 点赞和取消点赞
- 关注和取消关注
- 获取到评论
学习到的东西
-
数组去重的方法
通过set**,Set里面不允许重复的数据**,有重复的数据就会消去,再通过reset解构赋值转换成数组 -
点赞或取消点赞类似的逻辑处理
这类的逻辑可以通过传入一个true和false,如果是true就将原先的置为false,如果false就置为true,再调api -
点击滚动条,到达下面的方法
获取想要的元素 通过ducument,queryselectAll().scrollheight
来获取高度,再通过scrollTo
,当点击的时候会直接到达下面如果需要动画要通过animation (配合帧动画), transition (过渡动画) -
当点击的时候就立即跳转了,怎么解决这样的问题
通过setimeout,promise和nextThick来保证不会立马跳转 -
JSON转入和转出
通过转入本地如果是数组,要通过JSON.toString,再通过Json.parse来转换为原来的数据
个人中心
- 包含以下内容
- 铺设数据和组件
- 退出登录功能
- 编辑信息功能
- .头像修改功能
- 生日修改功能
总结一下自己学习到的东西
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类型对象
})
- 当我们使用的是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 // 个人介绍
// }
})
}
- 关于日期的处理
前端得到的日期对象,后端可能需要的是年-月-日字符串,这里可以通过Moment.js或者day.js,原生需要一个个取出来拼接字符串
export const formatDate = (dateObj) => {
return dayjs(dateObj).format('YYYY-MM-DD')
}