这篇文章开始编写 个人中心的页面

    首先看下页面的效果
    接下来 就按照 这个设计 来编写代码
    image.png

    个人中心页面，我们使用ssr的方式来渲染

    1.首先引入数据库等的配置

    1. /* eslint-disable @next/next/link-passhref */
    2. import React from 'react';
    3. import Link from 'next/link';
    4. import { observer } from 'mobx-react-lite';
    5. import { Button, Avatar, Divider } from 'antd';
    6. import {
    7.   CodeOutlined,
    8.   FireOutlined,
    9.   FundViewOutlined,
    10. } from '@ant-design/icons';
    11. import ListItem from 'components/ListItem';
    12. import { prepareConnection } from 'db/index';
    13. import { User, Article } from 'db/entity';

    2.通过ssr的方式获取用户信息和文章相关的数据
    3.根据url获取当前用户的id

    1. const userId = params?.id;

    4.根据当前用户的id查询 从用户表中查询当前用户的信息

    1. const user = await db.getRepository(User).findOne({
    2.     where: {
    3.       id: Number(userId),
    4.     },
    5.   });

    5.根据用户id以及关联的用户表和标签表查询相关联的文章

    1. const articles = await db.getRepository(Article).find({
    2.     where: {
    3.       user: {
    4.         id: Number(userId),
    5.       },
    6.     },
    7.     relations: ['user', 'tags'],
    8.   });

    6.最后将上面两个数据返回

    1. return {
    2.     props: {
    3.       userInfo: JSON.parse(JSON.stringify(user)),
    4.       articles: JSON.parse(JSON.stringify(articles)),
    5.     },
    6.   };

    7.在前端 通过 props 拿到 数据

    1. const { userInfo = {}, articles = [] } = props;

    8.获取 全部文章的 总浏览数

    1. const viewsCount = articles?.reduce(
    2.     (prev: any, next: any) => prev + next?.views,
    3.     0
    4.   );

    9.最后将 所有的数据渲染出来

    1. <div className={styles.userDetail}>
    2.       <div className={styles.left}>
    3.         <div className={styles.userInfo}>
    4.           <Avatar className={styles.avatar} src={userInfo?.avatar} size={90} />
    5.           <div>
    6.             <div className={styles.nickname}>{userInfo?.nickname}</div>
    7.             <div className={styles.desc}>
    8.               <CodeOutlined /> {userInfo?.job}
    9.             </div>
    10.             <div className={styles.desc}>
    11.               <FireOutlined /> {userInfo?.introduce}
    12.             </div>
    13.           </div>
    14.           <Link href="/user/profile">
    15.             <Button>编辑个人资料</Button>
    16.           </Link>
    17.         </div>
    18.         <Divider />
    19.         <div className={styles.article}>
    20.           {articles?.map((article: any) => (
    21.             <div key={article?.id}>
    22.               <ListItem article={article} />
    23.               <Divider />
    24.             </div>
    25.           ))}
    26.         </div>
    27.       </div>
    28.       <div className={styles.right}>
    29.         <div className={styles.achievement}>
    30.           <div className={styles.header}>个人成就</div>
    31.           <div className={styles.number}>
    32.             <div className={styles.wrapper}>
    33.               <FundViewOutlined />
    34.               <span>共创作 {articles?.length} 篇文章</span>
    35.             </div>
    36.             <div className={styles.wrapper}>
    37.               <FundViewOutlined />
    38.               <span>文章被阅读 {viewsCount} 次</span>
    39.             </div>
    40.           </div>
    41.         </div>
    42.       </div>
    43.     </div>

    10.这里有个地方是 编辑 个人资料的 入口，点击 跳转到 编辑个人资料的页面

    1. <Link href="/user/profile">
    2.             <Button>编辑个人资料</Button>
    3.           </Link>

    首先看下 编辑个人资料的页面
    image.png

    这里的逻辑就是 首先 从接口 获取当前用户的信息，然后修改个人信息，最后 保存修改。

    1.首先通过接口获取用户信息

    1. useEffect(() => {
    2.     request.get('/api/user/detail').then((res: any) => {
    3.       if (res?.code === 0) {
    4.         console.log(333333);
    5.         console.log(res?.data?.userInfo);
    6.         form.setFieldsValue(res?.data?.userInfo);
    7.       }
    8.     });
    9.   }, [form]);

    2.接着将用户信息渲染到表单中

    1. return (
    2.     <div className="content-layout">
    3.       <div className={styles.userProfile}>
    4.         <h2>个人资料</h2>
    5.         <div>
    6.           <Form
    7.             {...layout}
    8.             form={form}
    9.             className={styles.form}
    10.             onFinish={handleSubmit}
    11.           >
    12.             <Form.Item label="用户名" name="nickname">
    13.               <Input placeholder="请输入用户名" />
    14.             </Form.Item>
    15.             <Form.Item label="职位" name="job">
    16.               <Input placeholder="请输入职位" />
    17.             </Form.Item>
    18.             <Form.Item label="个人介绍" name="introduce">
    19.               <Input placeholder="请输入个人介绍" />
    20.             </Form.Item>
    21.             <Form.Item {...tailLayout}>
    22.               <Button type="primary" htmlType="submit">
    23.                 保存修改
    24.               </Button>
    25.             </Form.Item>
    26.           </Form>
    27.         </div>
    28.       </div>
    29.     </div>
    30.   );

    3.最后调用保存修改的接口 将 修改后的数据 更新到 数据表中

    1. const handleSubmit = (values: any) => {
    2.     console.log(99999);
    3.     console.log(values);
    4.     request.post('/api/user/update', { ...values }).then((res: any) => {
    5.       if (res?.code === 0) {
    6.         message.success('修改成功');
    7.       } else {
    8.         message.error(res?.msg || '修改失败');
    9.       }
    10.     });
    11.   };