参考页面

  1. 网易跟帖手机版 https://3g.163.com/touch/comment.html?docid=G4O7VC5K00258105
  2. 网易跟帖PC版 https://comment.tie.163.com/G4O5RR7K0514R9KU.html
  3. 阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html
  4. 正则可视化 http://wangwl.net/static/projects/visualRegex

展现逻辑

  1. 一次加载所有评论数据,不做分页。 (因为参考阮一峰老师的博客,也很少有评论数超过100的文章,所以没必要做分页逻辑)
  2. 按时间升序展示
  3. 每条评论中显示之前的回复引用,类似网易的盖楼。
  4. 引用的评论最多显示2条,超过2条显示就近2条,并显示「查看全部{cnt}条引用」
  5. 每条展示信息: 用户名/ip/时间/留言内容/回复按钮/引用列表,其中引用列表可能没有就不展示。
  6. 引用列表中每条展示信息:序号/用户名/ip/时间/回复的用户名/留言内容/回复按钮
  7. 由两部分组成,评论列表区 和 发表评论区,发表评论区在下方
  8. 发表评论区构成元素: 评论输入框/用户名输入框/邮箱输入框/发布按钮/回复的评论
  9. 评论输入框/用户名输入框必填, 邮箱输入框选填。 在输入框失焦和点击发布的时候校验。

前端的列表请求逻辑

  1. page参数,从1计数。不做分页了。由于不分页了,后端就不做排序了,前端根据create_time升序排序。
  2. topic_id参数, 当前评论对应的topic
  3. 获得返回数据后,前端根据path数据构造回复引用列表,后端不额外返回信息。

后端的列表响应逻辑

  1. 根据topic_id查询数据,根据create_time ASC(升序)排序。 由于不分页了,也就不添加order by了,查到数据后直接返回,前端排序。
  2. 如果page为1,返回[0,offset2)区间数据,如果page>1,返回[offsetpage,offset(page+1))区间数据。 实现第一页offset2条,后续都是offset条。
  3. offset为20,即每页20条数据。
  4. 注意返回每条数据中,email不返回,ip去隐私后返回。

前端的发布请求逻辑

  1. 传入content/username/email/pid/topic_id

后端的发布响应逻辑

  1. 返回保存后的单条数据所有字段。这里返回的字段应当和列表响应里每条数据的字段保持一致。

UI交互逻辑

  1. 输入框label和正则可视化的label交互保持一致
  2. 所有输入框宽度都100%铺满容器。
  3. 评论输入框高度自适应,根据输入内容自动变化。用户名/邮箱输入框高度写死不能变。
  4. 发布按钮一旦点击,将输入框和发布按钮锁死,防止误触多次发布。
  5. 发布按钮一旦点击,保存用户名和邮箱到localStorage中。下次留言板加载后,先在localStorage中找用户名和邮箱填充到输入框中。
  6. 发布按钮延迟300ms仍未收到响应则再展示loading。
  7. 收到发布失败响应/或超时,在发布按钮旁提示发送失败请稍后重试,输入框内容保持不变不清空。
  8. 收到成功响应后,
    • 8.1 解除输入框和按钮锁死,清空评论输入框,其他输入框保持不变。
    • 8.2 如果是第一级的评论,则不定位,因为新评论是追加到最后一条的,在页面上位置紧挨着评论输入框,没必要再定位。
    • 8.3 如果是第二级的评论(回复他人的评论),则定位到对应的显示位置,因为新评论是显示在回复的评论下的。如果是第二级的评论,也不进行定位,因为预计也没几个人评论,没必要做这个。
    • 8.4 如果是第二级的评论,将二级评论追加到对应的二级评论列表中,且如果二级列表是收缩的则展开。这里如果不展开的话,
      • 其一还要处理「展开cnt条引用」的cnt状态。
      • 其二如果想要回复某个评论,正常用户操作一般应该会展开所有评论看一下,所以这里回复后就认为展开状态,不额外增加复杂度。
  9. 点击回复按钮后,页面直接定位到发表评论界面。

前端校验规则

  1. 用户名: 1)不允许为空 2)字符数限制
  2. 昵称: 1)不允许为空 2)字符数限制
  3. 邮箱: 2)字符数限制 3) 邮箱格式判断

补充UI交互逻辑中的校验交互

  1. 校验出错后红框展示,并在输入框的间隔中展示提示。这个UI交互也和正则可视化保持一致。
  2. 点击发布时,判断所有校验逻辑,如果出错则显示错误提示。
  3. input事件只检查2)3),点击发布会检查所有校验规则。为了防止强迫症看到红框很烦,用户看到过一次红框做了修改后就恢复状态。

接口安全校验

  1. 数据htmlEncode
  2. 请求参数加密
  3. 前端请求频次校验,避免被黑产扫描

邮件功能 todo

  1. 新回复邮件提醒,
    • 如何验证邮箱有效性?对邮箱有所属权而不是随便写的邮箱
    • 如何退订提醒?
  2. 在保证邮箱有效的前提下,是否实现用户信息的维护,将该邮箱的用户名关联显示?