Skip to content

  • 体验新版
    • 正在加载...
  • 登录
  • KnowledgePlanet
  • docdoc
  • Issue
  • #21

doc
doc
  • 项目概览

KnowledgePlanet / doc

通知 1303
Star 822
Fork 117
  • 代码
    • 文件
    • 提交
    • 分支
    • Tags
    • 贡献者
    • 分支图
    • Diff
  • Issue 42
    • 列表
    • 看板
    • 标记
    • 里程碑
  • 合并请求 0
  • DevOps
    • 流水线
    • 流水线任务
    • 计划
  • Wiki 2
    • Wiki
  • 分析
    • 仓库
    • DevOps
  • 项目成员
  • Pages
doc
doc
  • 项目概览
    • 项目概览
    • 详情
    • 发布
  • 仓库
    • 仓库
    • 文件
    • 提交
    • 分支
    • 标签
    • 贡献者
    • 分支图
    • 比较
  • Issue 42
    • Issue 42
    • 列表
    • 看板
    • 标记
    • 里程碑
  • 合并请求 0
    • 合并请求 0
  • Pages
  • DevOps
    • DevOps
    • 流水线
    • 流水线任务
    • 计划
  • 分析
    • 分析
    • 仓库分析
    • DevOps
  • Wiki 2
    • Wiki
  • 成员
    • 成员
  • 收起侧边栏
  • 动态
  • 分支图
  • 创建新Issue
  • 流水线任务
  • 提交
  • Issue看板
You need to sign in or sign up before continuing.
已关闭
开放中
Opened 7月 05, 2023 by 小傅哥@Yao__Shun__Yu⛹Owner

要实现类似推特系统中的时间线功能有啥好的的思路呢

  1. 创建一个数据库表存储用户发布的推文,包括推文的内容、发布时间、用户ID等信息。

  2. 创建一个数据库表存储用户的关注关系,包括用户ID、关注的用户ID等信息。

  3. 当用户访问自己的时间线页面时,首先查询该用户关注的其他用户的ID列表,然后根据这些用户ID从推文表中查询出所有相关的推文,按照发布时间倒序排列。

  4. 将查询到的推文列表渲染到页面上。

下面是一个简单的 Java 和 React 实现示例:

Java 后端代码:

@RestController
public class TimelineController {

    @Autowired
    private TweetRepository tweetRepository;

    @Autowired
    private FollowRepository followRepository;

    @GetMapping("/timeline/{userId}")
    public List<Tweet> getTimeline(@PathVariable("userId") Long userId) {
        List<Long> followingIds = followRepository.findFollowingIdsByUserId(userId);
        return tweetRepository.findTweetsByUserIds(followingIds);
    }
}

@Repository
public class TweetRepository {

    @Autowired
    private JdbcTemplate jdbcTemplate;

    public List<Tweet> findTweetsByUserIds(List<Long> userIds) {
        String sql = "SELECT * FROM tweets WHERE user_id IN (:userIds) ORDER BY created_at DESC";
        MapSqlParameterSource params = new MapSqlParameterSource();
        params.addValue("userIds", userIds);
        return jdbcTemplate.query(sql, params, new TweetRowMapper());
    }
}

@Repository
public class FollowRepository {

    @Autowired
    private JdbcTemplate jdbcTemplate;

    public List<Long> findFollowingIdsByUserId(Long userId) {
        String sql = "SELECT following_id FROM follows WHERE user_id = ?";
        return jdbcTemplate.queryForList(sql, new Object[]{userId}, Long.class);
    }
}

React 前端代码:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function Timeline({ userId }) {
  const [tweets, setTweets] = useState([]);

  useEffect(() => {
    axios.get(`/timeline/${userId}`)
      .then(response => setTweets(response.data));
  }, [userId]);

  return (
    <div>
      {tweets.map(tweet => (
        <div key={tweet.id}>
          <p>{tweet.content}</p>
          <p>{tweet.createdAt}</p>
        </div>
      ))}
    </div>
  );
}

export default Timeline;

在上面的代码中,Java 后端使用了 Spring Boot 框架,通过 JdbcTemplate 访问数据库。React 前端使用了 Axios 库发起 HTTP 请求,并将返回的推文列表渲染到页面上。

指派人
分配到
无
里程碑
无
分配里程碑
工时统计
无
截止日期
无
标识: KnowledgePlanet/doc#21
渝ICP备2023009037号

京公网安备11010502055752号

网络110报警服务 Powered by GitLab CE v13.7
开源知识
Git 入门 Pro Git 电子书 在线学 Git
Markdown 基础入门 IT 技术知识开源图谱
帮助
使用手册 反馈建议 博客
《GitCode 隐私声明》 《GitCode 服务条款》 关于GitCode
Powered by GitLab CE v13.7