此篇 用来记录一个壁纸小应用网站中的某些功能模块开发思路. 如果能够帮助到您, 非常荣幸. 同时也为了方便自己梳理一下某个功能实现的思路. 方便自己日后学习.
在壁纸详细页面的右上方显示的是该图片的发布者的基本信息(头像
, 昵称
, 个人简介
), 需要实现的需求是点击用户头像, 跳转到他的个人中心页面.
点击头像之后,调用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
来做的.
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>
)
}
主要使用了 React Router 提供的动态路由跳转功能,并结合了 useParams 钩子函数获取路由参数。以及使用条件判断&&通过条件渲染来实现仅在当前用户中心页面显示编辑按钮的功能.