这篇文章开始编写 使用 ssr 渲染文章详情页

    这里需要使用 nextjs中的动态路由

    在pages/article 新建 [id].tsx，表示 文章详情页的入口文件
    同时新建 pages/article/index.module.scss

    首先通过 url 获取 文章的 id字段

    然后根据通过ssr获取文章详情数据
    根据id 去数据表中查询当前文章的详情
    这里增加一个功能，就是浏览次数，当前查询的时候，浏览次数增加 1 次

    1. export async function getServerSideProps({ params }: any) {
    2.   const articleId = params?.id;
    3.   const db = await prepareConnection();
    4.   const articleRepo = db.getRepository(Article);
    5.   const article = await articleRepo.findOne({
    6.     where: {
    7.       id: articleId,
    8.     },
    9.     relations: ['user', 'comments', 'comments.user'],
    10.   });
    12.   if (article) {
    13.     // 阅读次数 +1
    14.     article.views = article?.views + 1;
    15.     await articleRepo.save(article);
    16.   }
    18.   return {
    19.     props: {
    20.       article: JSON.parse(JSON.stringify(article)),
    21.     },
    22.   };
    23. }

    通过以上 ssr 代码就拿到了 当前文章的数据

    然后渲染这些基本信息
    这里 markdown的内容 使用 markdown-to-jsx 第三方库 来加载

    1. <div className="content-layout">
    2.         <h2 className={styles.title}>{article?.title}</h2>
    3.         <div className={styles.user}>
    4.           <Avatar src={avatar} size={50} />
    5.           <div className={styles.info}>
    6.             <div className={styles.name}>{nickname}</div>
    7.             <div className={styles.date}>
    8.               <div>
    9.                 {format(new Date(article?.update_time), 'yyyy-MM-dd hh:mm:ss')}
    10.               </div>
    11.               <div>阅读 {article?.views}</div>
    12.             </div>
    13.           </div>
    14.         </div>
    15.         <MarkDown className={styles.markdown}>{article?.content}</MarkDown>
    16.       </div>

    接着增加 是否显示编辑的逻辑

    通过store拿到 当前登录的用户信息

    1. const store = useStore();
    2.   const loginUserInfo = store?.user?.userInfo;

    当 用户登录的时候，显示编辑按钮
    并且 点击 编辑 按钮 跳转到 文章 编辑页面 

    1. {Number(loginUserInfo?.userId) === Number(id) && (
    2.                 <Link href={`/editor/${article?.id}`}>编辑</Link>
    3.               )}