关于博文机制

Question

问题是，当我们在 blogger 或 medium.com 或其他类似的地方创建 post 时，会在主页中显示 post 的简要详细信息，并且一旦我们点击 'read more' 按钮或 post 将导航到新的 url，其中所有详细信息都包含在 post 中（post 的全部内容将显示在新 url 中）。作为一名初级开发者l，我想知道这是怎么回事？？

如果你能使用 React.js + node.js + mongodb 技术回答我就更好了。

任何答案将不胜感激。

第一张图：是博客post，显示在博客首页

第二张图片：显示的是同一博客 post 的全部内容，并且在新 url / 新页面中。

Answer 1

确实有一百万种方法可以做到这一点，我认为更完整的答案需要更完整的细节，如“你想如何完成这个”。

您需要研究的是“路径变量”。

在 Express 中，使用路径变量的路由看起来像这样：

app.get('/articles/:article_id', (request, result) => {
  const {article_id} = request.params;
  //... Make database query using path variable
});

//Using two path variables
app.get('/articles/:article_id/:some_other', (request, result) => {
  const {article_id, some_other} = request.params;
  //... Make database query using path variables
});

而在 React 中，您可能希望使用 React Router 并制作一个 Route 和一些组件，如下所示：

//... surrounding parent component
<Route path='articles/:article_id'>
  <ArticlePage />
</Route>
//... surrounding parent component

文章页数：

import React from 'react';
import { useParams } from 'react-router-dom';

function ArticlePage() {
  const params = useParams();
  //... Make API call with params.article_id

  //... Render component with data from API call
}

您还需要担心“分页”或“无限滚动”来加载要显示的文章（在用户选择一个之前）。另一个有很多不同解决方案的问题，但我建议为这类事情寻找一个 npm 包。

关于博文机制

About blog posts mechanism

blogs

mongodb

node.js

posts

reactjs