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

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-105p-2 rounded-full cursor-pointer transition-all duration-300${isUpdatingProfile ? 'animate-pulse pointer-events-none' : ''}`}><Camera className="size-5 text-base-200" /><inputtype="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-2border-b border-zinc-700"><span>账号注册时间</span><span>{authUser.createdAt?.split("T")[0]}</span></div><div className="flex items-center justify-between py-2border-b border-zinc-700"><span>账号状态</span><span className="text-green-500">正常</span></div></div></div></div></div></div>)
}export default ProfilePage

效果如图

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