react壁纸网站项目开发中的一些思路总结

心安事随

发布于 2024-07-29 17:31:54

800

发布于 2024-07-29 17:31:54

文章被收录于专栏：前端大合集

此篇用来记录一个壁纸小应用网站中的某些功能模块开发思路. 如果能够帮助到您, 非常荣幸. 同时也为了方便自己梳理一下某个功能实现的思路. 方便自己日后学习.

需求

在壁纸详细页面的右上方显示的是该图片的发布者的基本信息(头像, 昵称, 个人简介), 需要实现的需求是点击用户头像, 跳转到他的个人中心页面.

分析

点击头像之后,调用react-router-dom 提供useNavigate钩子 进行路由跳转到个人中心页面, 跳转的时候我们需要将该用户(也就是该作品的发布者的id)带过去,那我们就可以在个人中心页面拿到这个id, 然后我们配合后端的接口,使用这个id进行用户信息接口的请求, 拿到数据,渲染页面.

我们这里需要动态路由, 因为不用用户中心基本都是一个样子, 我们可以使用一个页面, 而页面内容的展示取决于用户的id, 因为里面的内容都是通过用户id 进行后端接口调用, 返回用户的信息的.

操作

所以路由配置是这样

  { path: "/user/:id", element: <Self /> },

在壁纸详细页面,我们点击头像的时候, 使用react-router-dom 提供useNavigate钩子 进行路由跳转

壁纸信息都保存在picDetail中, 也包含了该壁纸的发布人的id(author),这个id就是我们需要的.
当前壁纸的作者的信息保存image_creator中.
然后使用navigate跳转到中心页

   const goto_Personal_homepage = (id)=>{
     navigate(`/user/${id}`)
   }
 
     <Space align="center"  >
             {/* 发布者头像 */}
             <img src={image_creator.user_avatar} alt="发布者头像" className={DetailStyle.publisher}  onClick={()=>goto_Personal_homepage(picDetail.author)} />
             {/* 发布者名字 */}
             <Space align="start"  vertical>
               <span className={DetailStyle.publisher_name}>{userCurrentInfo.user_nickname}</span>
               <span className={DetailStyle.publisher_desc}>{userCurrentInfo.user_description}</span>
             </Space>
    </Space>

在中心页面,使用useParams 钩子函数 拿到动态路由后面的参数, id

 import { useParams } from "react-router-dom";
 export default function Self() {
   // 获取路由参数
   const { id } = useParams();
   ......
 }

然后对于获取用户的信息, 获取用户上传的壁纸, 获取用户喜欢的壁纸, 获取用户收藏的壁纸, 都可以通过这个id来进行获取.

下面渲染模板就不多说了.

 // 获取用户信息
  get_user_info(id).then((res) => {
       console.log(res);
       setuserInfoData(res);
  }); 
 // 获取我上传的壁纸看列表
   const getmyUploadsimageList = async () => {
     get_user_images(id)
       .then((res) => {
         if (res.code == 200) {
           console.log(res);
           setmyUploadsimageList(res.data);
         }
       })
       .catch((err) => {
         console.log(err);
       });
   };
   // 获取我喜欢的图片列表
   const getmyLikesimageList = async () => {
     const res = await get_user_likes(id);
     if (res.code == 200) {
       setmyLikesimageList(res.data);
     }
   };
 
   // 获取我收藏的图片列表
   const getmyCollectsimageList = async () => {
     const res = await get_user_collects(id);
     if (res.code == 200) {
       setmyCollectsimageList(res.data);
     }
   };

不过需要提的一点就是

如果当前中心页面正好是当前用户的中心页面, 那么就需要在中心页面显示编辑个人信息的按钮
而其他用户的中心页面不显示.

我这里是通过条件渲染dom 来做的.

如果从动态路由获取的id(图片的作者id) == 本地存储的user_id, 那么就说明当前中心页正好是当前用户的中心页,那么就进行展示
反之亦然.

 export default function Self() {
   // 获取路由参数
   const { id } = useParams();
   const curId = JSON.parse(localStorage.getItem("userInfo")).user_id;
   const navigate = useNavigate();
   ....
   return(
          <div className={SelfStyle.edit}>
           {id == curId && (
             <Button
               icon={<IconEdit />}
               type="tertiary"
               theme="light"
               style={{ marginRight: 10, color: "white" }}
               onClick={showModal}
             >
               编辑
             </Button>
           )}
         </div>
   )
 }