#头条创作挑战赛# 本文同步本人掘金平台的文章:https://juejin.cn/post/6982713711584608270 留言功能在社交中占据很重要的作用。这里实现的留言功能,参考微信朋友圈的方式: 用户发送一个TOPIC话题,读者可以在该话题下面进行评论,也可以对该话题下的留言进行评论。但是始终只会展示两层树的评论。 当然,也可以像掘金这样进行嵌套多层树的结构展示。臣妾觉得嵌套得太深~ 实际完成的效果如下: 体验站点请戳 jimmyarea.com 。前端实现 使用技术reactant designtypescript 在上面的截图中,很明显,就是一个表单的设计,外加一个列表的展示。 表单的设计使用了ant design框架自带的form组件: 复制代码 这里限制了输入的主题名称的长度为6-30;内容是30-300字符 针对留言的展示,这里使用的是ant design自带的List和Comment组件:`共 ${count} 条`, pageSize, current: activePage, onChange: changePage, }} dataSource={list} renderItem={(item: any, index: any) => (
)} /> 复制代码 当然,如果是多级地树结构嵌套,你完全可以只是使用Comment组件进行递归调用 列表是对用户发表的主题,留言以及子留言的展示。如果你纵览上面的代码片段,你会发现里面有一个Form表单。 是的,其Form表单就是给留言使用的,其结构仅仅是剔除了主题留言中的subject字段输入框,但是实际传参我还是会使用到。 完整的前端代码可前往jimmyarea 留言(前端)查看。后端 使用的技术:mongodb 数据库,这里我使用到了其ODM mongoosekoa2 一个Node框架pm2 进程守卫apidoc 用来生成接口文档(如果你留意体验站点,右上角有一个"文档"的链接,链接的内容就是生成的文档内容) 这里的搭建就不进行介绍了,可以参考koa2官网配合百度解决~ 其实,本质上还是增删改查的操作。 首先,我们对自己要存储的数据结构schema进行相关的定义:const mongoose = require("mongoose") const Schema = mongoose.Schema // 定义留言字段 let MessageSchema = new Schema({ // 关联字段 -- 用户的id userId: { type: mongoose.Schema.Types.ObjectId, ref: "User" }, type: Number, // 1是留言,2是回复 subject: String, // 留言主题 content: String, // 留言内容 pid: { // 父id type: String, default: "-1" }, replyTargetId: { // 回复目标记录id, 和父pid有所不同 type: String, default: "-1" }, meta: { createAt: { type: Date, default: Date.now() }, updateAt: { type: Date, default: Date.now() } } }) mongoose.model("Message", MessageSchema) 复制代码 这里有个注意的点userId字段,这里我直接关联了注册的用户。 完成了字段的设定之后,下面就可以进行增删改查了。 详细的crud代码可以到jimmyarea 留言(后端) 查看。 本篇的重点是,对评论的话题和留言,如何转换成两层的树型结构呢? 这就是涉及到了pid这个字段,也就是父节点的id: 话题的pid为-1,话题下留言的pid为话题的记录值。如下代码:let count = await Message.count({pid: "-1"}) let data = await Message.find({pid: "-1"}) .skip((current-1) * pageSize) .limit(pageSize) .sort({ "meta.createAt": -1}) .populate({ path: "userId", select: "username _id" // select: "username -_id" -_id 是排除_id }) .lean(true) // 添加lean变成js的json字符串 const pids = Array.isArray(data) ? data.map(i => i._id) : []; let resReply = [] if(pids.length) { resReply = await Message.find({pid: {$in: pids}}) .sort({ "meta.createAt": 1}) .populate({ path: "userId", select: "username _id" // select: "username -_id" -_id 是排除_id }) } const list = data.map(item => { const children = JSON.parse(JSON.stringify(resReply.filter(i => i.pid === item._id.toString()))) // 引用问题 const tranformChildren = children.map(innerItem => ({ ...innerItem, canDel: innerItem.userId && innerItem.userId._id.toString() === (user._id&&user._id.toString()) ? 1 : 0 })) return { ...item, children: tranformChildren, canDel: item.userId && item.userId._id.toString() === (user._id&&user._id.toString()) ? 1 : 0 } }) if(list) { ctx.body = { results: list, current: 1, count } return } ctx.body = { code: 10002, msg: "获取留言失败!" } 复制代码 至此,可以愉快地进行留言~ } title={{item.subject}} description={ <> {item.content} {/* 子留言 */} 用户 {item.userId?.username} 发表于 {moment(item.meta?.createAt).format("YYYY-MM-DD HH:mm:ss")} {item.canDel ? ( removeMsg(item)} > Delete ) : null} replyMsg(item)} > Reply {/* 回复的内容 */} {item.children && item.children.length ? ( <> {item.children.map((innerItem: any, innerIndex: any) => ( {innerItem.subject}} avatar={ {innerItem.userId?.username?.slice(0, 1)?.toUpperCase()} } content={ {innerItem.content}} datetime={
{moment(innerItem.meta?.createAt).fromNow()} } actions={[ <> {innerItem.canDel ? ( removeMsg(innerItem)} >Delete ) : null} >, replyMsg(innerItem)} > Reply , ]} /> ))} > ) : null} {/* 回复的表单 */} {replyObj._id === item._id || replyObj.pid === item._id ? ( ) : null} > } />