从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(八) 聊天框用户列表

简单画了个聊天框 就是咱们的HomePage.jsx

1.后端接口开发

在server/src/index.js 新增 messagesRoutes

先引入

import messageRoutes from './routes/message.route.js'

// 消息接口

app.use('/api/messages', messageRoutes)

在routes文件夹下新建message.route.js 有3个路由 左侧用户列表 点击用户获取消息列表 发送消息接口

在controllers下面 新建message.controller.js 先实现获取前端左侧边栏用户列表接口

import User from '../models/user.model.js';

export const getUsersForSidebar = async (req, res) => {

try {

// 获取当前登录用户的id

const loggedInUserId = req.user._id;

// 过滤用户 所有不等于当前用户id 的用户 .select 查询时排除password

const filteredUsers = await User.find({ _id: { $ne: loggedInUserId } }).select("-password");

res.status(200).json(filteredUsers);

} catch (error) {

console.log("error in getSidebarUsers: ");

res.status(500).json({ message: error.message });

}

}

// 点击左侧用户时,获取该用户与当前用户之间的聊天记录

export const getMessages = async (req, res) => {

}

// 发送消息

export const sendMessage = async (req, res) => {

}

2.测试接口

使用postman测试接口成功

3.前端页面

修改HomePage.jsx页面

在components下面 新建3个组件 Sidebar NoChatSelected ChatBox

新建useChatStore.js

import {create} from "zustand";

import toast from "react-hot-toast"

import axiosInstance from "../lib/axios";

export const useChatStore = create((set, get) => ({

users: [],

selectedUser: null,

isUserLoading:false,

getUsers: async () => {

set({isUserLoading: true});

try {

const res = await axiosInstance.get("/messages/users");

set({users: res.data});

} catch{

toast.error("Error while fetching users");

} finally{

set({isUserLoading: false});

}

},

// 选择一个联系人

setSelectedUser: (user) => {

set({selectedUser: user});

}

}))

然后我们完善Sidebar.jsx

javascript 复制代码
import { useEffect} from "react"
import { useChatStore } from "../store/useChatStore"
import {User} from "lucide-react"

const Sidebar = () => {
    const {getUsers,users,selectedUser, setSelectedUser,isUsersLoading} = useChatStore()

    useEffect(() => {
        getUsers()
    },[getUsers])

    if(isUsersLoading) return <div>Loading...</div>
  return (
    <aside className="h-full w-20 lg:w-72 border-r border-base-300 flex flex-col transition-all duration-200">
       <div className="border-b border-base-300 w-full p-5">
            <div className="flex items-center gap-2">
                <User  className="size-6" />
                <span className="font-medium hidden lg:block">联系人</span>
            </div>
            {/* 在线人员过滤 */}

       </div>

       <div className="overflow-y-auto w-full py-3">

         {users.map((user) =>(
            <button
                key={user._id}
                onClick={() => setSelectedUser(user)}
                className={`w-full p-3 flex items-center gap-3
                    hover:bg-base-300 transition-colors
                    ${selectedUser?._id===user._id ? "bg-base-300 ring-l ring-base-300":""}
                `}
            >
                <div className="relative mx-auto lg:mx-0">
                    <img 
                        src={user.profilePic || "https://picsum.photos/200" }
                        alt={user.userName}
                        className="size-12 object-cover rounded-full"
                    
                    />
                </div>

                {/* 用户信息 只在大屏显示 */}
                <div className="hidden lg:block text-left min-w-0">
                    <div className="font-medium truncate">{user.userName}</div>
                </div>
               
            </button>
         ))}
       </div>
    </aside>
  )
}

export default Sidebar

效果如下

好这篇就到这 下一篇 实现聊天功能

相关推荐
读心悦25 分钟前
CSS:盒子阴影与渐变完全解析:从基础语法到创意应用
前端·css
m0_616188491 小时前
使用vue3-seamless-scroll实现列表自动滚动播放
开发语言·javascript·ecmascript
湛海不过深蓝2 小时前
【ts】defineProps数组的类型声明
前端·javascript·vue.js
layman05282 小时前
vue 中的数据代理
前端·javascript·vue.js
柒七爱吃麻辣烫2 小时前
前端项目打包部署流程j
前端
layman05282 小时前
vue中理解MVVM
前端·javascript·vue.js
一舍予3 小时前
八股文-js篇
开发语言·前端·javascript
鸡鸭扣4 小时前
DRF/Django+Vue项目线上部署:腾讯云+Centos7.6(github的SSH认证)
前端·vue.js·python·django·腾讯云·drf
龙井茶Sky4 小时前
验证码与登录过程逻辑学习总结
前端·登录·验证码
Edward Nygma5 小时前
springboot3+vue3融合项目实战-大事件文章管理系统-更新用户密码
android·开发语言·javascript