如何使用 Forem API 在您的网站上显示您的 DEV.to 博客文章（简单！）
从 DEV.TO 的 API 获取数据
过去，我曾使用 Jekyll 和 Gatsby 等工具创建博客网站，并在网站上创建和发布博客文章，之后再将它们交叉发布到 DEV.to 和其他网站。
但如果你想反过来操作呢？其实非常简单！甚至不需要任何身份验证。在本文中，我将解释如何使用Forem API在你的网站上显示你的博客文章。在这个示例中，我还会用到React和fetch API。
首先，请查阅Forem API 的文档，稍作阅读，熟悉一下相关内容。然后，前往API 的版本 1查看可用的端点。
我有一个 React 应用，用来显示博客文章。要显示我的文章，我只需要向文章端点发送一个 fetch 请求，并将我的用户名作为参数即可。
我希望页面加载完成后立即发出请求，所以我创建了一个名为 `getPosts()` 的函数，它会向 API 端点发送获取请求，并且我在只运行一次的 `useEffect` 中调用了它。要获取您自己的帖子，只需像这样将您的用户名插入 URL，或者将其作为参数添加：
// replace {yourUserName} with your DEV.to username:
"https://dev.to/api/articles?username={yourUserName}"
我的应用中显示如下：
useEffect(() => {
getPosts();
}, []);
const getPosts = async () => {
try {
const response = await fetch(
"https://dev.to/api/articles?username=tiaeastwood&per_page=8",
);
const json = await response.json();
setPosts(json);
} catch (error) {
console.log("error", error);
}
};
我还添加了一个查询，以便每次将结果限制为 8 个项目（per_page=8），API 文档将向您展示您可以使用的其他查询。
因此，一旦 fetch 请求成功发出，我就使用 `setPosts()` 将 fetch 结果存储到 state 中，以便在 render 函数中访问它。这会返回一个 post 对象数组，我可以访问每个对象的不同属性，例如 title、cover_image 等，从而在组件中动态显示我想要的内容；您可以在 `PostThumbnail` 组件中看到这一点：
const PostThumbnail = ({ post }) => {
return (
<div className="grid-item">
<div className="text-overlay">
<p>{post.title}</p>
</div>
<div className="gradient"></div>
<img src={post.cover_image} alt="" className="cover-image" />
</div>
);
};
const App = () => {
const [posts, setPosts] = React.useState([]);
React.useEffect(() => {
getPosts();
}, []);
const getPosts = async () => {
try {
const response = await fetch(
"https://dev.to/api/articles?username=tiaeastwood&per_page=8"
);
const json = await response.json();
setPosts(json);
} catch (error) {
console.log("error", error);
}
};
return (
<div id="app">
<h1>Latest Blog Posts</h1>
<div className="grid">
{posts.map((post) => (
<PostThumbnail post={post} />
))}
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
当你发出 fetch 请求时，我建议在某个地方插入 console.log，或者查看浏览器开发者工具的网络选项卡，这样你就可以看到你获取到的关于每篇博客文章的所有信息，信息量相当大！
最后，这里是 CodePen 示例，您可以看看代码是如何组合在一起的 :)
图片来源：
本文封面图片由Christopher Machicoane-Hurtaud拍摄，来自Unsplash。