在列表页面显示作者帖子可以通过以下步骤实现:
示例代码(使用JavaScript和React):
后端接口示例(Node.js和Express):
// 获取帖子列表数据接口
app.get('/posts', (req, res) => {
// 查询帖子表,并关联作者表,获取帖子和作者信息
const posts = db.query('SELECT p.*, a.name, a.avatar FROM posts p JOIN authors a ON p.author_id = a.id');
res.json(posts);
});
前端页面示例(React组件):
import React, { useEffect, useState } from 'react';
const PostList = () => {
const [posts, setPosts] = useState([]);
useEffect(() => {
// 发起请求获取帖子列表数据
fetch('/posts')
.then(response => response.json())
.then(data => setPosts(data));
}, []);
return (
<div>
<h1>帖子列表</h1>
{posts.map(post => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
<div>
<img src={post.avatar} alt={post.name} />
<span>{post.name}</span>
</div>
</div>
))}
</div>
);
};
export default PostList;
这样,当用户访问列表页面时,会向后端发起请求获取帖子列表数据,并在页面中显示每个帖子的标题、内容以及作者信息。
推荐的腾讯云相关产品:腾讯云服务器(CVM),腾讯云数据库(TencentDB),腾讯云对象存储(COS),腾讯云云原生应用平台(Tencent Kubernetes Engine,TKE)。
产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云