reactkoa2mongodb实现留言功能（可体验）

　　头条创作挑战赛
　　本文同步本人掘金平台的文章：https：juejin。cnpost6982713711584608270
　　留言功能在社交中占据很重要的作用。这里实现的留言功能，参考微信朋友圈的方式：
　　用户发送一个TOPIC话题，读者可以在该话题下面进行评论，也可以对该话题下的留言进行评论。但是始终只会展示两层树的评论。
　　当然，也可以像掘金这样进行嵌套多层树的结构展示。臣妾觉得嵌套得太深
　　实际完成的效果如下：
　　体验站点请戳jimmyarea。com。前端实现
　　使用技术reactantdesigntypescript
　　在上面的截图中，很明显，就是一个表单的设计，外加一个列表的展示。
　　表单的设计使用了antdesign框架自带的form组件：复制代码
　　这里限制了输入的主题名称的长度为630；内容是30300字符
　　针对留言的展示，这里使用的是antdesign自带的List和Comment组件：Listloading｛loadingMsg｝itemLayouthorizontalpagination｛｛size：small，total：count，showTotal：（）共｛count｝条，pageSize，current：activePage，onChange：changePage，｝｝dataSource｛list｝renderItem｛（item：any，index：any）（List。Itemactions｛〔〕｝key｛index｝List。Item。Metaavatar｛｛item。userId？。username？。slice（0，1）？。toUpperCase（）｝Avatar｝title｛b｛item。subject｝b｝description｛｛item。content｝｛子留言｝span用户｛item。userId？。username｝发表于｛moment（item。meta？。createAt）。format（YYYYMMDDHH：mm：ss）｝spanspan｛item。canDel？（removeMsg（item）｝DeleteOutlinedDelete）：null｝replyMsg（item）｝MessageOutlinedReplyspan｛回复的内容｝｛item。childrenitem。children。length？（｛item。children。map（（innerItem：any，innerIndex：any）（Commentkey｛innerIndex｝author｛span｛innerItem。subject｝span｝avatar｛｛innerItem。userId？。username？。slice（0，1）？。toUpperCase（）｝Avatar｝content｛p｛innerItem。content｝｝datetime｛Tooltiptitle｛moment（innerItem。meta？。createAt）。format（YYYYMMDDHH：mm：ss，）｝span｛moment（innerItem。meta？。createAt）。fromNow（）｝spanTooltip｝actions｛〔｛innerItem。canDel？（removeMsg（innerItem）｝DeleteOutlinedDelete）：null｝，replyMsg（innerItem）｝MessageOutlinedReply，〕｝））｝）：null｝｛回复的表单｝｛replyObj。iditem。idreplyObj。piditem。id？（）：null｝｝List。Item）｝复制代码
　　当然，如果是多级地树结构嵌套，你完全可以只是使用Comment组件进行递归调用
　　列表是对用户发表的主题，留言以及子留言的展示。如果你纵览上面的代码片段，你会发现里面有一个Form表单。
　　是的，其Form表单就是给留言使用的，其结构仅仅是剔除了主题留言中的subject字段输入框，但是实际传参我还是会使用到。
　　完整的前端代码可前往jimmyarea留言（前端）查看。后端
　　使用的技术：mongodb数据库，这里我使用到了其ODMmongoosekoa2一个Node框架pm2进程守卫apidoc用来生成接口文档（如果你留意体验站点，右上角有一个文档的链接，链接的内容就是生成的文档内容）
　　这里的搭建就不进行介绍了，可以参考koa2官网配合百度解决
　　其实，本质上还是增删改查的操作。
　　首先，我们对自己要存储的数据结构schema进行相关的定义：constmongooserequire（mongoose）constSchemamongoose。Schema定义留言字段letMessageSchemanewSchema（｛关联字段用户的iduserId：｛type：mongoose。Schema。Types。ObjectId，ref：User｝，type：Number，1是留言，2是回复subject：String，留言主题content：String，留言内容pid：｛父idtype：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为话题的记录值。如下代码：letcountawaitMessage。count（｛pid：1｝）letdataawaitMessage。find（｛pid：1｝）。skip（（current1）pageSize）。limit（pageSize）。sort（｛meta。createAt：1｝）。populate（｛path：userId，select：usernameidselect：usernameidid是排除id｝）。lean（true）添加lean变成js的json字符串constpidsArray。isArray（data）？data。map（ii。id）：〔〕；letresReply〔〕if（pids。length）｛resReplyawaitMessage。find（｛pid：｛in：pids｝｝）。sort（｛meta。createAt：1｝）。populate（｛path：userId，select：usernameidselect：usernameidid是排除id｝）｝constlistdata。map（item｛constchildrenJSON。parse（JSON。stringify（resReply。filter（ii。piditem。id。toString（））））引用问题consttranformChildrenchildren。map（innerItem（｛。。。innerItem，canDel：innerItem。userIdinnerItem。userId。id。toString（）（user。iduser。id。toString（））？1：0｝））return｛。。。item，children：tranformChildren，canDel：item。userIditem。userId。id。toString（）（user。iduser。id。toString（））？1：0｝｝）if（list）｛ctx。body｛results：list，current：1，count｝return｝ctx。body｛code：10002，msg：获取留言失败！｝复制代码
　　至此，可以愉快地进行留言