前端实战：打造个人中心，打造完善的 Node + React 记账本

前端

2023-10-10 17:18:56

前言：个人中心的意义

各位亲爱的开发者们，我们本次的征程即将接近尾声。我们即将踏入最后一个模块的开发：个人中心。

个人中心是应用程序中不可或缺的一部分，它为用户提供了管理其帐户和个人信息的中心位置。在这个模块中，我们将涵盖以下主要功能：

用户信息展示（头像、昵称、签名）
账户管理（修改密码、注销）
个人资料编辑（更改昵称、签名）

有了这些功能，用户可以轻松地管理自己的账户，定制他们的个人资料，并与应用程序进行更深入的互动。

架构概述

我们的个人中心模块将由两个主要组件组成：

用户信息展示组件： 负责显示用户头像、昵称和签名。
账户管理组件： 提供修改密码、注销和编辑个人资料的选项。

我们将使用 React 来构建这些组件，并使用 Redux 来管理应用程序状态。

实施步骤

1. 用户信息展示

首先，我们从用户信息展示组件开始。我们将创建两个文件：UserInfo.js 和 UserInfo.css。

// UserInfo.js
import React from "react";

const UserInfo = ({ user }) => {
  return (
    <div className="user-info">
      <img src={user.avatar} alt="头像" />
      <div className="user-details">
        <p className="user-name">{user.name}</p>
        <p className="user-signature">{user.signature}</p>
      </div>
    </div>
  );
};

export default UserInfo;

// UserInfo.css
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-info img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-signature {
  font-size: 16px;
  color: #999;
}

2. 账户管理

接下来，我们构建账户管理组件。同样，我们将创建两个文件：AccountManagement.js 和 AccountManagement.css。

// AccountManagement.js
import React from "react";

const AccountManagement = () => {
  const [showChangePasswordModal, setShowChangePasswordModal] = useState(false);
  const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false);

  const handleOpenChangePasswordModal = () => {
    setShowChangePasswordModal(true);
  };

  const handleCloseChangePasswordModal = () => {
    setShowChangePasswordModal(false);
  };

  const handleOpenDeleteAccountModal = () => {
    setShowDeleteAccountModal(true);
  };

  const handleCloseDeleteAccountModal = () => {
    setShowDeleteAccountModal(false);
  };

  return (
    <div className="account-management">
      <button onClick={handleOpenChangePasswordModal}>修改密码</button>
      <button onClick={handleOpenDeleteAccountModal}>注销账户</button>
      {showChangePasswordModal && <ChangePasswordModal onClose={handleCloseChangePasswordModal} />}
      {showDeleteAccountModal && <DeleteAccountModal onClose={handleCloseDeleteAccountModal} />}
    </div>
  );
};

export default AccountManagement;

// AccountManagement.css
.account-management {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.account-management button {
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
}

.account-management button:hover {
  background-color: #eee;
}

3. Redux 集成

为了管理个人中心模块的状态，我们将使用 Redux。我们首先创建一个新的 Redux store：

// store.js
import { createStore } from "redux";

const initialState = {
  user: {
    avatar: "",
    name: "",
    signature: "",
  },
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_USER":
      return { ...state, user: action.payload };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

然后，我们将使用 useSelector 和 useDispatch hook 来访问和更新 store：

// UserInfoContainer.js
import React from "react";
import { useSelector } from "react-redux";

const UserInfoContainer = () => {
  const user = useSelector((state) => state.user);

  return <UserInfo user={user} />;
};

export default UserInfoContainer;

// AccountManagementContainer.js
import React from "react";
import { useDispatch } from "react-redux";

const AccountManagementContainer = () => {
  const dispatch = useDispatch();

  const handleSetUser = (user) => {
    dispatch({ type: "SET_USER", payload: user });
  };

  return <AccountManagement handleSetUser={handleSetUser} />;
};

export default AccountManagementContainer;

4. API 集成

最后，我们需要集成 API 来获取和更新用户信息。我们将在一个名为 api.js 的文件中定义这些 API 调用：

// api.js
import axios from "axios";

const API_URL = "http://localhost:3000/api";

export const getUserInfo = () => {
  return axios.get(`${API_URL}/user`);
};

export const updateUserInfo = (data) => {
  return axios.put(`${API_URL}/user`, data);
};

然后，我们在组件中调用这些 API：

// UserInfoContainer.js
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { getUserInfo } from "../api";

const UserInfoContainer = () => {
  const user = useSelector((state) => state.user);
  const dispatch = useDispatch();

  useEffect(() => {
    getUserInfo().then((response) => {
      dispatch({ type: "SET_USER", payload: response.data });
    });
  }, []);

  return <UserInfo user={user} />;
};

// AccountManagementContainer.js
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { updateUserInfo } from "../api";

const AccountManagementContainer = () => {
  const dispatch = useDispatch();
  const [name, setName] = useState("");
  const [signature, setSignature] = useState("");

  const handleUpdateUserInfo = () => {
    const data = { name, signature };
    updateUserInfo(data).then((response) => {
      dispatch({ type: "SET_USER", payload: response.data });
    });
  };

  return (
    <AccountManagement handleUpdateUserInfo={handleUpdateUserInfo} />
  );
};