鸿蒙应用中的论坛使用与实现

应用中的论坛在社交方面发挥着重要作用，它为用户提供了一个开放的交流平台，使用户能够围绕共同兴趣、话题或问题展开讨论，增进彼此之间的了解与联系。通过发表帖子和评论，用户可以表达自己的观点、分享生活经验或提出疑问，这种互动方式不仅增强了用户之间的沟通，也促进了社区氛围的形成。例如，在图片中可以看到关于校园流浪动物保护的讨论，这种话题既能引发共鸣，也能让用户之间建立起基于共同关注点的情感连接。

论坛还具有信息聚合的功能，能够让用户及时获取感兴趣的内容，并参与讨论，从而提升用户的活跃度和粘性。当某个话题引起广泛关注时，往往会吸引大量用户参与，形成热烈的讨论氛围，这不仅增加了用户之间的互动频率，也有助于建立稳定的社交关系网络。此外，论坛也为用户提供了展示自我、建立个人影响力的机会，一些高质量的发言或独特见解可能会获得其他用户的认可和关注，从而帮助用户在社区中树立一定的声誉和地位。

同时，论坛也是用户寻求帮助和支持的重要渠道，无论是学习上的问题、生活中的困惑，还是情感上的困扰，都可以在论坛中发起讨论并获得来自其他用户的建议和鼓励。这种互助性质的互动不仅增强了用户之间的信任感，也让用户在虚拟社区中感受到归属感和被理解的感觉。特别是在面对某些社会议题或校园问题时，论坛还能成为推动集体行动或促成改变的力量，如图片中提到希望学校出台更完善的流浪动物政策，就体现了用户通过社交平台表达诉求、寻求共识的过程。

总体来看，论坛不仅是信息传播和讨论的空间，更是用户之间建立社交关系、增强互动体验的重要工具。它打破了传统单向信息传递的模式，让用户成为内容的创造者和参与者，形成了一个动态的社交生态系统。在这个过程中，用户不仅可以获取信息，还能建立人脉、表达自我、获得支持，进而提升整体的社交质量和使用体验。

import axios from '@ohos/axios';
import { api } from '../../common/Constants';

export class commentData {
  avatar: ResourceStr; // 头像
  name: string; // 名字
  level: number; // 用户等级
  likeNum: number; // 点赞数量
  isLike: boolean; // 是否点赞
  levelIcon: Resource; // 等级图标
  timeString: string; // 发布时间
  time: number; // 时间戳
  commentTxt: string; // 内容
  _id: string; // 评论 ID

  constructor(avatar: ResourceStr, name: string, level: number, likeNum: number, isLike: boolean, time: string, commentTxt: string, id: string) {
    this.avatar = avatar;
    this.name = name;
    this.level = level;
    this.likeNum = likeNum;
    this.isLike = isLike;
    this.levelIcon = this.convertLevel(this.level);
    this.timeString = this.convertTime(new Date(time).getTime()); // 将时间字符串转换为时间戳
    this.time = new Date(time).getTime(); // 将时间字符串转换为时间戳
    this.commentTxt = commentTxt;
    this._id = id; // 保存评论 ID
  }

  convertTime(timestamp: number) {
    const currentTimestamp = Date.now();
    const timeDifference = (currentTimestamp - timestamp) / 1000; // 转换为秒

    if (timeDifference < 0 || timeDifference === 0) {
      return '刚刚';
    } else if (timeDifference < 60) {
      return `${Math.floor(timeDifference)}秒前`;
    } else if (timeDifference < 3600) {
      return `${Math.floor(timeDifference / 60)}分钟前`;
    } else if (timeDifference < 86400) {
      return `${Math.floor(timeDifference / 3600)}小时前`;
    } else if (timeDifference < 604800) {
      return `${Math.floor(timeDifference / 86400)}天前`;
    } else if (timeDifference < 2592000) {
      return `${Math.floor(timeDifference / 604800)}周前`;
    } else if (timeDifference < 31536000) {
      return `${Math.floor(timeDifference / 2592000)}个月前`;
    } else {
      return `${Math.floor(timeDifference / 31536000)}年前`;
    }
  }

  convertLevel(level: number) {
    const iconList = [
    $r('app.media.icon_level1'),
    $r('app.media.icon_level2'),
    $r('app.media.icon_level3'),
    $r('app.media.icon_level4'),
    $r('app.media.icon_level5'),
    $r('app.media.icon_level6'),
    ];
    return iconList[level];
  }
}

// 查找评论
export async function getComments(): Promise<commentData[]> {
  const response = await axios.get(api(`getComments`));
  return response.data.map(comment => new commentData(
    comment.avatar,
    comment.name,
    comment.level,
    comment.likeNum,
    comment.isLike,
    comment.time,
    comment.commentTxt,
    comment._id // 传递评论 ID
  ));
}

// userName是账号 即123
// name是用户名
export const addList = (userName, passWord, commentTxt): Promise<void> => {
  return axios({
    method: 'get',
    url: api(`find/${userName}/${passWord}`),
  }).then(res => {
    console.log('查找成功');
    const avatar: string = res.data.avatar; // 头像
    const name: string = res.data.name; // 名字
    const level: number = res.data.level; // 用户等级

    return axios({
      method: 'post',
      url: api(`addComment`),
      data: {
        avatar: avatar,
        name: name,
        level: level,
        commentTxt: commentTxt
      }
    });
  }).then(() => {
    console.log('新增成功');
  }).catch(error => {
    console.error('新增失败' + error);
  });
};

// 点赞评论
export const likeComment = async (commentId: string) => {
  await axios.post(`http://localhost:3000/like/${commentId}`);
};

import bottom from './bottom';
import head from './head';
import infoitem from './infoitem';
import { commentData, getComments } from './commentdata';

@Entry
@Component
export default struct forum {

  @State commentList: commentData[] = [];

  async aboutToAppear(): Promise<void> {
    await this.loadComments(); // 加载评论
  }

  async loadComments(): Promise<void> {
    const comments = await getComments(); // 获取评论
    this.commentList = comments; // 更新 commentList
  }

  // 处理排序
  handleSort(type: number) {
    if (type === 0) {
      // 按时间排序（最新）
      this.commentList.sort((a, b) => b.time - a.time);
    } else if (type === 1) {
      // 按热度排序（点赞数）
      this.commentList.sort((a, b) => b.likeNum - a.likeNum);
    }
  }

  // 处理点赞
  handleLike(index: number) {
    // 这里可以添加额外的逻辑，例如更新 UI
    this.loadComments(); // 重新加载评论
  }

  build() {
    Column() {
      head({
        onSort: (type: number) => {
          this.handleSort(type);
        }
      });
      List() {
        ForEach(this.commentList, (item: commentData, index: number) => {
          ListItem() {
            infoitem({
              itemobj: item as commentData,
              onLikeClick: (index: number) => {
                this.handleLike(index);
              },
              index: index as number
            });
          }
        });
      }
      .layoutWeight(1)
      .padding({ bottom: 10 });

      // 底部，传递更新方法
      bottom({
        onSubmitComment: (content: string) => {
          this.loadComments();
        },
      });
    }
    .height('100%');
  }
}

import { commentData, likeComment } from './commentdata';

@Component
export default struct infoitem {
  @Prop itemobj: commentData;
  @Prop index: number;
  onLikeClick = (index: number) => {};

  build() {
    Column() {
      Row() {
        Image(this.itemobj.avatar)
          .width(30).aspectRatio(1)
          .margin({ top: 10 })
          .borderRadius(10);
        Text(this.itemobj.name)
          .fontSize(13)
          .fontColor(Color.Grey)
          .margin({ top: 10, left: 8 });
        Image(this.itemobj.levelIcon)
          .width(30).aspectRatio(1)
          .margin({ top: 10, left: 8 })
          .borderRadius(15);
      }

      Text(this.itemobj.commentTxt)
        .fontSize(13)
        .fontColor(Color.Black)
        .margin({ left: 40, top: 0, bottom: 8 });

      Row() {
        Text(this.itemobj.timeString)
          .fontSize(11)
          .fontColor(Color.Gray);
        Row() {
          Image(this.itemobj.isLike ? $r('app.media.icon_dianzan') : $r('app.media.icon_weidianzan'))
            .width(15).aspectRatio(1)
            .onClick(async () => {
              try {
                // 切换 isLike 状态
                const newIsLike = !this.itemobj.isLike;

                // 更新点赞数量
                this.itemobj.likeNum += newIsLike ? 1 : -1;
                this.itemobj.isLike = newIsLike; // 更新状态

                // 发送点赞请求
                await likeComment(this.itemobj._id); // 发送请求

                // 通知父组件更新
                this.onLikeClick(this.index);
              } catch (error) {
                console.error('点赞失败', error);
              }
            });
          Text(this.itemobj.likeNum.toString())
            .fontSize(11)
            .fontColor(this.itemobj.isLike ? Color.Blue : Color.Gray);
        }
      }
      .padding({ left: 40, top: 5 })
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween);
    }
    .padding({ left: 15, right: 15 })
    .alignItems(HorizontalAlign.Start);
  }
}