项目简介
本项目是基于 React、Redux、Node.js 和 MongoDB 开发的询职聊天室系统。前端用 React 构建界面,结合 Redux 管理状态,使用 antd-mobile 提升体验;后端借助 Express 搭建接口服务,用 MongoDB 存储数据,通过 Socket.io 实现实时双向通信。系统具备用户注册、登录、聊天等功能,适用于询职场景交流。
项目的主要特性和功能
前端方面
- 以 React 构建 UI,遵循“一切皆组件”原则,采用 ES6 语法开发,结合 babel 支持低端浏览器。
- 用 Redux 管理状态,实现单一状态和单向数据流,借助 store、state、action、reducer 等核心概念,通过 react-redux 连接 React 和 Redux。
- 利用 React Router 4 实现单页应用路由,支持动态路由与参数传递。
- 使用 antd-mobile UI 库,减少 CSS 编写,快速搭建美观界面。
后端方面
- 运用 Express 框架开发 Web 接口,支持 GET 和 POST 请求,使用 nodemon 自动重启。
- 采用 MongoDB 非关系型数据库,通过 mongoose 模块连接和操作数据库,支持数据增删改查。
- 使用 Socket.io 实现基于事件的实时双向通信,后端可主动推送数据,避免 Ajax 轮询。
其他特性
- 基于 cookie 进行用户验证,用 cookie-parser 存储登录信息。
- 运用 axios 发送异步请求,配置 proxy 解决端口不一致问题,设置拦截器统一处理 loading 状态。
- 使用 ESLint 进行代码校验,利用 React 16 特有的错误处理机制和性能优化策略。
安装使用步骤
前提条件
确保已下载项目源码文件,且本地安装了 Node.js、MongoDB。
安装依赖
- 在项目根目录终端运行以下命令安装前端依赖:
bash yarn install
- 安装 Redux 相关依赖:
bash yarn add redux redux-thunk react-redux
- 安装 antd-mobile UI 库:
bash yarn add antd-mobile@next -S
- 安装 axios 用于发送异步请求:
bash yarn add axios
- 安装 cookie 相关依赖:
bash yarn add cookie-parser browser-cookies
- 安装 Socket.io 相关依赖:
bash yarn add socket.io socket.io-client
配置 MongoDB
- 安装并配置 MongoDB 环境,使用以下命令安装服务:
bash mongod --dbpath "D:\DataBase\MongoDB\data\" --logpath "D:\DataBase\MongoDB\log\mongod.log" -install -serviceName "MongoDB"
- 启动 MongoDB 服务:
bash net start mongodb
启动项目
- 启动后端服务:在后端目录下,运行以下命令启动 Express 服务器:
bash nodemon server.js
- 启动前端项目:在项目根目录下,运行以下命令启动 React 项目:
bash npm start
项目访问
打开浏览器,访问 http://localhost:3000
进入询职聊天室系统。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】