小白学前端--第十二天（2026/2/25）Layout页面的功能实现

距离出发又进了一天呢，好在我们把基本的Layout静态结构写完了。今天我们来完成业务功能，静态结构及之前的代码文件我已上传到git上。想要了解搭建过程的请见我之前的文章：

小白学前端–第九天（2026/2/20）header设计-CSDN博客

小白学前端–第十天（2026/2/21）home-top部分搭建-CSDN博客

小白学前端–第十一天（2026/2/24）（home-bottom部分搭建）-CSDN博客

react模板:react模板 – AtomGit | GitCodehttps://gitcode.com/2401_86252365/react?isLogin=1

智慧商城-首页业务功能实现

首先我们来看一下当前界面状况。当前页面中右上角的个人信息是写死的，所以我们来实现一下用户信息的获取。

1.用户信息的获取

通过这个api我们可以获取到用户的姓名等信息。所以我们在store的user模块里面创建一个userInfo字段，并在reducer里创建setUserInfo函数

setUserInfo(state, action) {
state.userInfo = action.payload
}

这里时action.payload哦，之前不小心写错了，直接传的payload了。

然后创建一个 fetchUserInfo函数

const fetchUserInfo =()=>{

    return async (dispatch) => {

        const res = await getUserInfoAPI()

        console.log(res)

        dispatch(setUserInfo(res.data.userInfo));

    }
}

一定要记得修改state数据时，要通过dispatch来修改（没加的把之前的setToken部分也加上）

最后在api的user模块加入这个api请求方法：

export const getUserInfoAPI = () => {
return request({
url: 'user/info',
method: 'GET'
})
}

接下来回到我们Layout文件中，面对未登录的用户我们是无法获得userInfo信息的，所以这里要做一个判断，判断的依据就是是否存有token！这里我们简单写一下逻辑：没有token=>请登录；有token=>显示userInfo里的nick_name字段。所以我们在代码里面也要有体现：

<div className="header-right">
<Space size={14} align="center">
<Badge count={3} size="small">
<Button className="icon-btn" icon={<ShoppingCartOutlined />} />
</Badge>
<div className="user-mini" onClick={() => {
if (!token) {
navigate("/login")
}
}
}>
<Avatar size={34} icon={<UserOutlined />} />
<div className="user-mini-text">
<div className="user-name">{token ? userInfo.nick_name : "请登录"}</div>
<div className="user-sub">
{token ? `欢迎回来` : "点此登录"}
</div>
</div>
</div>
</Space>
</div>

用三元表达式进行判断渲染，同时在div上绑定一个点击跳转事件：没有token去登录页面，有token进入个人中心（虽然还没做这个页面，暂时不实现）

在页面初始时渲染，依赖项为token

useEffect(() => {
if (token) {
dispatch(fetchUserInfo())
}
}, [dispatch, token])

最后我们进行样式的简单美化：悬挂时鼠标变成抓手，加上阴影等增加用户交互感。

.user-mini {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
cursor: pointer;
transition: all 0.2s ease;

&:hover {
background: rgba(255, 255, 255, 0.28);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
}

就可以看到最终效果：

今天先写到这里（要走了需要搬东西收拾收拾呢）明天我们继续！

代码我已上传：

react模板:react模板 – AtomGit | GitCodehttps://gitcode.com/2401_86252365/react?isLogin=1