【山东大学软件学院21级项目实训】前端1：创建一个现代化用户资料页面：使用 React、Material-UI 和 React Query

在本文中，我们将深入探讨如何使用 React、Material-UI 和 React Query 创建一个现代化的用户资料页面。这个页面将展示用户的头像、基本信息、状态面板以及活动热图。让我们逐步解析这个过程，并探讨每个部分的实现细节。

技术栈简介

• React: 一个用于构建用户界面的 JavaScript 库。

• Material-UI: 一个受 Google Material Design 规范启发的 React 组件库。

• React Query: 一个用于数据获取和状态管理的库，简化了与服务器通信的流程。

项目结构

为了方便管理，我们将代码分成多个组件。主要组件包括 Profile、HistoryInfoPanel、StatusPanel 和 DayHeatmap。我们会专注于 Profile 组件，它是整个页面的核心。

代码解析

首先，我们需要导入所需的模块和组件：

import { Avatar, Box, Container, Grid, Typography } from "@mui/material";
import HistoryInfoPanel from "./HistoryInfoPanel";
import StatusPanel from "./StatusPanel";
import DayHeatmap from "../../components/DayHeatMap";
import { useSearchParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { queryFn } from "../../queries/queryFn";
import { get_user_info } from "../../constants/url";
import { grey } from "@mui/material/colors";

这些导入的模块包括 Material-UI 组件、自定义组件、React Router 和 React Query 的钩子函数。

用户头像和基本信息展示

  return (
    <Grid container spacing={2}>
      <Grid item xs={12}>
        <Container
          sx={{
            alignItems: "center",
            display: "flex",
            justifyContent: "center",
          }}
        </Container>
      </Grid>

Grid 布局: 使用 Material-UI 的 Grid 布局组件来创建响应式布局。外层 Grid 组件包含三个子 Grid 项目。

通过 Material-UI 的 Avatar 和 Typography 组件，我们可以优雅地展示用户的头像和基本信息

我们使用了 Material-UI 的 sx 属性来定义内联样式：

• Container 样式: 设置 alignItems, display, 和 justifyContent 属性来居中内容。

• Avatar 样式: 设置头像的尺寸、边框和阴影效果，以及 hover 时的放大和阴影变化效果。

• Typography 样式: 显示用户姓名和描述，设置文本对齐方式和颜色。

{isSuccess && (
  <div>
    <Avatar
      src={data.data.data.avatar}
      sx={{
        width: 128,
        height: 128,
        border: "2px solid #fff",
        boxShadow: "0px 0px 10px 0px rgba(0,0,0,0.1)",
        "&:hover": {
          transform: "scale(1.05)",
          boxShadow: "0px 0px 10px 0px rgba(0,0,0,0.2)",
          transition: "all 0.3s",
        },
      }}
    />
    <div style={{ height: 16 }} />
    <Typography variant="h6" sx={{ textAlign: "center" }}>
      {data.data.data.name}
    </Typography>
    <Typography variant="body1" sx={{ textAlign: "center" }} color={grey[500]}>
      {data.data.data.description}
    </Typography>
  </div>
)}