从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(六) 导航栏和个人信息设置

news2025/5/12 23:17:17

1.导航栏（navbar）

在components下面创建NavBar.jsx

import { MessageSquare,Settings,User,LogOut} from "lucide-react"

import {Link} from "react-router-dom"

import { useAuthStore } from "../store/useAuthStore"

const NavBar = () => {

const {authUser,logout} = useAuthStore()

return (

<header className="bg-base-100 border-b border-base-300 fixed w-full top-0 z-40

backdrop-blur-lg bg-base-100/80">

</div>

<h1 className="text-lg font-bold">HamburgerChat</h1>

</Link>

</div>

</Link>

// 只有登录了才会显示个人资料和退出按钮

{authUser && (

</Link>

</button>

</>

)}

</div>

</header>

)

}

export default NavBar

然后再App.jsx引入 NavBar.jsx组件

import NavBar from '@/components/NavBar'

并使用组件加在Routes配置上面

</Routes>

效果如图

点击退出按钮会跳转到登录页面导航栏这就完成了。

2.个人信息设置

修改ProfilePage内容 Profile最主要的内容就是点击头像上的小相机图标我们可以上传更换头像。上传功能我们是使用cloudinary （类似七牛云阿里oss）。网址:https://cloudinary.com/

我们在官方申请账号

1.后端接口

在server 下 .env配置

在lib下新建cloudinary.js 使用我们申请的key

import {v2 as cloudinary} from 'cloudinary'
import  {config} from "dotenv"

config()

cloudinary.config({
    cloud_name: process.env.CLOUDINARY_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET
})


export default cloudinary

接下来在后端实现保存个人信息接口

在server auth.route.js 增加保存信息路由

先引入updateProfile方法

import {signUp, login,logout,checkAuth,updateProfile} from "../controllers/auth.controller.js"

router.put('/update-profile', protectRoute, updateProfile)

在auth.controller.js 增加UpdateProfile方法

2.前端页面

在useAuthStore中增加保存信息loading状态和请求方法

isUpdatingProfile: false, // 是否更新中

updateProfile: async(data) => {

set({isUpdatingProfile: true})

try {

const res = await axiosInstance.put('/auth/update-profile', data)

set({authUser: res.data}) // 请求成功后更新当前user的信息

toast.success("资料更新成功")

} catch (error) {

console.log("useAuthStore updateProfile error",error.message)

toast.error(error.response.data.message)

} finally {

set({isUpdatingProfile: false})

}

修改ProfilePage.jsx

import { useState } from "react";
import { useAuthStore } from "../store/useAuthStore";
import {Camera,User,Mail} from "lucide-react";
const ProfilePage = () => {

  const [selectedImage, setSelectedImage] = useState(null)
  const { authUser, isUpdatingProfile,updateProfile } = useAuthStore();
  const handlerImageUpload = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = async () => {
      const base64Image = reader.result;
      await updateProfile({ profilePic: base64Image });
    }
  }
    
  return (
    <div className="h-screen pt-20">
        <div className="max-w-2xl mx-auto py-8">
           <div className="bg-base-300 rounded-xl p-6 space-y-8">
              <div className="text-center">
                <h1 className="text-2xl font-semibold">个人资料</h1>
                <p className="mt-2">你的个人信息</p>
              </div>

              {/* 头像 */}
              <div className="flex flex-col items-center gap-4">
                <div className="relative">
                  <img src={selectedImage || authUser.profilePic || "https://placehold.co/128x128"} alt="profile"
                    className="size-32 rounded-full object-cover border-4"
                  ></img>
                  <label 
                    htmlFor="avatar-upload"
                    className={`absolute bottom-0 right-0 bg-base-content hover:scale-105
                      p-2 rounded-full cursor-pointer transition-all duration-300
                      ${isUpdatingProfile ? 'animate-pulse pointer-events-none' : ''}
                    `}
                  >
                    <Camera className="size-5 text-base-200" />
                    <input
                      type="file"
                      id="avatar-upload"
                      className="hidden"
                      accept="image/*"
                      onChange={handlerImageUpload}
                      disabled={isUpdatingProfile}
                    />
                  </label>
                </div>
                <p className="text-sm text-zinc-400">
                   {isUpdatingProfile ? "上传中..." : "点击相机上传头像"}
                </p>
              </div>

              {/* 用户信息 */}
              <div className="space-y-6">
                <div className="space-y-1.5">
                  <div className="text-sm text-zinc-400 flex items-center gap-2">
                    <User className="size-4"/>
                    用户名
                  </div>
                  <p className="px-4 py-2.5 bg-base-200 rounded-lg border">{authUser?.userName}</p>
                </div>

                <div className="space-y-1.5">
                  <div className="text-sm text-zinc-400 flex items-center gap-2">
                    <Mail className="size-4"/>
                    邮箱地址
                  </div>
                  <p className="px-4 py-2.5 bg-base-200 rounded-lg border">{authUser?.email}</p>
                </div>
              </div>

              {/* 账号状态 */}
              <div className="mt-6 bg-base-300 rounded-xl p-6">
                <h2 className="text-lg font-medium mb-4">账号信息</h2>
                <div className="spacy-y-3 text-sm">
                  <div className="flex items-center justify-between py-2
                    border-b border-zinc-700"
                  >
                    <span>账号注册时间</span>
                    <span>{authUser.createdAt?.split("T")[0]}</span>
                  </div>
                  <div className="flex items-center justify-between py-2
                    border-b border-zinc-700"
                  >
                    <span>账号状态</span>
                    <span className="text-green-500">正常</span>
                  </div>
                </div>
              </div>
           </div>
        </div>
    </div>
  )
}

export default ProfilePage

效果如图

点击头像小相机选择一张小于50kb的图片上传更新头像