留言板功能

留言板功能

数据库表结构

-- ----------------------------
-- Table structure for comments
-- ----------------------------
DROP TABLE IF EXISTS `comments`;
CREATE TABLE `comments` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `postId` int(11) DEFAULT NULL COMMENT '文章id',
  `content` text COMMENT '评论内容',
  `fromUserId` int(11) DEFAULT NULL COMMENT '评论用户',
  `toUserId` int(11) DEFAULT NULL COMMENT '目标用户',
  `createdTime` datetime DEFAULT NULL COMMENT '创建时间',
  `number` int(11) DEFAULT NULL COMMENT 'number',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8;

1. 前端逻辑
   1. 获取评论，
   2. 添加一级评论请求接口，带上 token，目的是让服务器解析该 token 是否合法，如果失效或者不合法将会有一个 alert 提示

if (this.newComment.content === '') {
  alert('评论内容不能为空！');
  return;
}
let token = localStorage.getItem('GITHUB_LOGIN_TOKEN');
axios
  .post(
    api.api.addComment,
    qs.stringify({
      comment: this.newComment,
      token: 'Bearer ' + token
    })
  )
  .then((res) => {
    if (res.data.success === 1) {
      let obj = {
        fromAvatar: this.guestAvatar,
        fromUserName: this.guestName,
        fromUserId: res.data.data.fromUserId,
        content: this.newComment.content,
        createdTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        toUserId: res.data.data.toUserId
      };
      this.comments.unshift(Object.assign({}, obj));
      this.newComment.content = '';
    } else if (res.data.success == -1) {
      this.dialogOption.text = '当前用户登录信息已过期，请重新登录！';
      this.showDialog = true;
      this.$refs.dialog
        .confirm()
        .then(() => {
          this.showDialog = false;
          localStorage.removeItem('GITHUB_LOGIN_TOKEN');
          localStorage.removeItem('GITHUB_LOGIN_GUEST');
          this.isLogin = false;
          this.guestAvatar = '';
          this.guestName = '';
          this.newComment.content = '';
        })
        .catch(() => {
          this.showDialog = false;
          this.newComment.content = '';
        });
    }
  });

2. 后端逻辑
   1. 获取评论

let postId = ctx.params.postId || 0;
sql = `SELECT comments.*, user.avatar as fromAvatar, user.userName as fromUserName
        FROM comments
        LEFT JOIN user ON comments.fromUserId = user.id
        WHERE comments.postId = ? ORDER BY comments.createdTime DESC`;
try {
  let comments = await ctx.execSql(sql, postId);
  ctx.body = {
    success: 1,
    message: '',
    comments: comments
  };
} catch (error) {
  console.log(error);
  ctx.body = {
    success: 0,
    message: '获取评论错误'
  };
}

3. 添加评论
   1. 校验传来的 token，是否合法
   2. 插入评论

let commentData = ctx.request.body.comment;
commentData.createdTime = moment().format('YYYY-MM-DD HH:mm:ss');
try {
  // 解密payload，获取用户名和ID
  let payload = await verify(ctx.request.body.token.split(' ')[1], config.tokenSecret);
  commentData.fromUserId = payload.id;
} catch (error) {
  ctx.body = {
    success: -1,
    message: '用户登录信息已过期，请重新登录'
  };
  return;
}
try {
  let maxData = await ctx.execSql('SELECT IFNULL(max(number), 0) AS maxNumber FROM comments WHERE postId = ?', commentData.postId);
  let maxNumber = maxData[0].maxNumber + 1;
  commentData.number = maxNumber;
  let insert = await ctx.execSql('INSERT INTO comments SET ?', commentData);
  if (insert.affectedRows > 0) {
    ctx.body = {
      success: 1,
      data: {
        fromUserId: commentData.fromUserId,
        toUserId: commentData.toUserId,
        number: maxNumber
      }
    };
  } else {
    ctx.body = {
      success: 0,
      message: '添加评论错误'
    };
  }
} catch (error) {
  console.log(error);
  ctx.body = {
    success: 0,
    message: '添加评论错误'
  };
}