SDU项目实训——资源共享功能实现（一）

本篇博客开始，我记录项目实训的资源共享功能的实现，前期已经搭建好了后台，并学习的前端技术。

评论功能

回答的类型

包括用户ID、问题的序号、优先级、发布时间等

export interface CommentType {
  _id: string;
  userId: string;
  questionId: string;
  content: string;
  thumbNum: number;
  priority: number;
  reviewTime?: Date;
  reviewerId?: string;
  reviewStatus: number;
  reviewMessage?: string;
  _createTime: Date;
  _updateTime: Date;
}

单个回答展示

（只有登录的人才可以点赞）

  useEffect(() => {
    const thumbCommentIds = currentUser.thumbCommentIds ?? [];
    setIsThumb(thumbCommentIds.includes(comment._id));
  }, [currentUser, comment._id]);

  const doThumbUp = async (id: string) => {
    if (!currentUser?._id) {
      toLoginPage();
      message.warning('登录后才能点赞哦');
      return;
    }
    if (thumbLoading) {
      return;
    }
    setThumbLoading(true);
    const res = await thumbUpComment(id);
    if (res === 1 || res === -1) {
      comment.thumbNum = (comment.thumbNum ?? 0) + res;
      const thumbCommentIds = currentUser.thumbCommentIds ?? [];
      if (res > 0) {
        thumbCommentIds.push(comment._id);
      } else {
        thumbCommentIds.splice(thumbCommentIds.indexOf(comment._id), 1);
      }
      const newCurrentUser = { ...currentUser, thumbCommentIds };
      setInitialState({ ...initialState, currentUser: newCurrentUser });
    } else {
      message.error('操作失败，请刷新重试');
    }
    setThumbLoading(false);
  };

删除评论

评论只有自己和管理员可以删除，如果以为违规被删除，那么伴随而来的是封号和积分清空；用户自己删除的回答无法恢复。

const doDelete = async (commentId: string) => {
    const res = await deleteComment(commentId);
    if (res) {
      message.success('操作成功');
      onDelete();
    } else {
      message.error('操作失败');
    }
  };

  const commentOpMenu = (comment: CommentUserType) => (
    <Menu>
      {(comment.userId === currentUser._id || access.canAdmin) && (
        <Menu.Item
          key={`delete${comment._id}`}
          icon={<DeleteOutlined />}
          danger
          onClick={() =>
            Modal.confirm({
              icon: <ExclamationCircleOutlined />,
              content: '是否确认删除？不可找回',
              onOk() {
                doDelete(comment._id);
              },
            })
          }
        >
          删除
        </Menu.Item>
      )}
      <Menu.Item
        key={`report${comment._id}`}
        icon={<WarningOutlined />}
        onClick={() => {
          setReportResourceId(comment._id);
          setShowReportModal(true);
        }}
      >
        举报
      </Menu.Item>
    </Menu>
  );

export function deleteComment(commentId: string) {
  if (!commentId) {
    return false;
  }

  return axios
    .post('/comment/delete', {
      commentId,
    })
    .then((res: any) => {
      console.log(`deleteComment succeed, id = ${commentId}`, res);
      return res;
    })
    .catch((e: any) => {
      console.error(`deleteComment error, id = ${commentId}`, e);
      return false;
    });
}

新增一条评论

export function addComment(params: Partial<CommentType>) {
  const { content, questionId } = params;
  if (!content || !questionId) {
    return false;
  }

  return axios
    .post('/comment/add', params)
    .then((res) => {
      console.log(`addComment succeed`, res);
      return res;
    })
    .catch((e: any) => {
      console.error(`addComment error`, e);
      return false;
    });
}

分页搜索

实现分页搜索，便于用户操作，进行对回答的搜索

export async function searchComments(
  params: CommentSearchParams,
): Promise<PageResult<CommentUserType>> {
  const { pageSize = 8, pageNum = 1 } = params;
  const emptyResult = {
    data: [],
    total: 0,
  };
  if (pageSize < 1 || pageNum < 1) {
    return emptyResult;
  }
  return axios
    .post('/comment/search', params)
    .then((res: any) => {
      console.log(`searchComments succeed`, res);
      return res;
    })
    .catch((e: any) => {
      console.error('searchComments error', e);
      return emptyResult;
    });
}

审核回答

由于有些回答设计侮辱性词汇、政治敏感词汇，对读者造成不好的影响，所以如果有人举报，管理员需要审核并删除。

export async function reviewComment(
  commentId: string,
  reviewStatus: number,
  reviewMessage?: string,
) {
  if (!commentId || !reviewStatusInfoMap[reviewStatus]) {
    return false;
  }

  return axios
    .post('/comment/review', {
      commentId,
      reviewStatus,
      reviewMessage,
    })
    .then((res: any) => {
      console.log(`reviewComment succeed, id = ${commentId}`);
      return res;
    })
    .catch((e: any) => {
      console.error(`reviewComment error, id = ${commentId}`, e);
      return false;
    });
}

获取某个ID用户的回答

export function getComment(commentId: string, withUser = false) {
  if (!commentId) {
    return null;
  }

  return axios
    .post('/comment/get', {
      id: commentId,
      withUser,
    })
    .then((res: any) => {
      console.log(`getComment succeed, id = ${commentId}`, res);
      return res;
    })
    .catch((e: any) => {
      console.error(`getComment error, id = ${commentId}`, e);
      return null;
    });
}

点赞

export function thumbUpComment(commentId: string) {
  if (!commentId) {
    return false;
  }

  return axios
    .post('/comment/thumb-up', {
      commentId,
    })
    .then((res: any) => {
      console.log(`thumbUpComment succeed, id = ${commentId}`, res);
      return res.data;
    })
    .catch((e: any) => {
      console.error(`thumbUpComment error, id = ${commentId}`, e);
      return false;
    });
}

修改回答

export async function updateComment(commentId: string, comment: Partial<CommentType>) {
  if (!commentId || !comment) {
    return false;
  }

  return axios
    .post('/comment/update', {
      commentId,
      comment,
    })
    .then((res: any) => {
      console.log(`updateComment succeed, id = ${commentId}`, res);
      return true;
    })
    .catch((e: any) => {
      console.error(`updateComment error, id = ${commentId}`, e);
      return false;
    });
}