react + node 前后端同时开发的项目（交友聊天的H5）- （附前后端源码）

最新推荐文章于 2024-07-31 10:09:59 发布

码上登堂

最新推荐文章于 2024-07-31 10:09:59 发布

阅读量1k

点赞数 2

分类专栏： websocket html5 ES6 文章标签： node.js javascript reactjs postman less

本文链接：https://blog.csdn.net/weixin_44675537/article/details/112062841

版权

html5 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

websocket

2 篇文章 0 订阅

订阅专栏

ES6

1 篇文章 0 订阅

订阅专栏

一、项目介绍：

此项目为一个前后台分离的交友的SPA,包括前端应用和后端应用。主要页面有：注册、登录、信息完善、用户列表、聊天、个人中心、搜索等

二、技术栈：

前端技术栈：React全家桶 + ES6 + Webpack + axios + socket.io + Cookie + antd- mobile等技术

后端技术栈：Node + express + mongodb + socketIO等技术

三。项目效果展示：

帅哥用户的展示的美女列表：

美女页面和大神几乎一样，只是展示的帅哥列表

四、技术选型：

前端路由思维导图：

五：接口展示：

// 封装了很多接口请求的函数模块
// 注册接口
import ajax from './ajax'
export const reqRegister=(user)=>ajax('/register',user,'POST')

// 登录接口
export const reqLogin=({username,password})=>ajax('/login',{username,password},"POST")

// 更新用户接口
export const reqUpdataUser=(user)=>ajax('/update',user,'POST')

// 获取用户信息
export const reqUser=()=>ajax('/user')

// 获取用户列表
export const reqUserList=(type)=>ajax('/userlist',{type:type},"POST")

// 获取当前用户的聊天消息列表
export const reqChatMsgList=()=>ajax('/msglist')

// 修改指定消息为已读
export const reqReadMsg=(from)=>ajax('/readmsg',{from},"POST")

// 按需搜索用户
export const reqSearchPeo=({type,xueliArrays})=>ajax('/searchPeopel',{type,xueliArrays},"POST")

六、页面逻辑简单介绍：

注册页面：前端：使用antd-mobile快速搭建UI页面，密码使用MD5加密，进行非空判断、密码确认判断，进行注册接口请求，注册成功cookie将保存在本地，24小时内是免登录状态。后端：首先判断此用户是否已经注册过，如果有提醒直接登录，如果没有向数据库进行数据添加（登录成功），将登录信息返回到前台。
登录页面：前端：使用antd-mobile快速搭建UI页面，密码使用MD5加密，进行非空判断，进行登录接口请求。后端：通过用户名和密码进行数据库查询，查询有数据，登录成功，将成功信息返回给前台；无数据，提醒用户名或者密码错误。
信息完善页面：前端：使用antd-mobile快速搭建UI页面，将填写的信息通过接口发送给后台；后端：将数据添加到数据库。这里头像如果没有选择，下次登录之后还是会跳转到信息完善页面，在页面中有判断。
美女/帅哥主界面：信息完善页面完成之后就会进入主界面，这个页面主要是用户列表展示。前端：使用antd-mobile快速搭建UI页面，在此页面生命周期函数中请求获取用户列表的接口（参数：用户类型），将获得数据展示出来即可；后端：根据type类型（美女/帅哥）进行数据库查询，将结果返回给前端进行展示。
消息列表页面：前端：使用antd-mobile快速搭建UI页面，将从后台查询的数据进行展示，接口是根据当前登录用户id进行查询；后端：只要查询和当前用户的id相关的所有的聊天信息。将查询的结果返回给前台。
个人中心：前端：使用antd-mobile快速搭建UI页面，将后台返回的数据进行展示；后端：根据前台传入的用户id进行数据库查询，将结果返回给前台。
聊天页面：前端：使用antd-mobile快速搭建UI页面，使用socketIO建立长链接和后台进行通讯；后端：搭建socketIO服务，和前端建立通讯，进行双向通讯。
搜索页面：只是实现了根据学历进行搜索，通过当前登录用户的type取反，和学历的关键字进行查询，然后展示到主界面；后端:根据前端的参数进行查询，将结果返回前台

七、项目代码GitHub地址

前后端源码可以直接去https://download.csdn.net/download/weixin_44675537/14894665 下载

如果本篇博客对您有帮助，请在girHub上点亮星星 start，后续会更新基于Vue + node 的项目，持续关注，精彩不断。

前端项目GitHub地址：https://github.com/liufei01/makeFriends/tree/master

后端项目Github地址：https://github.com/liufei01/my-reactServer/tree/master

八、想要安装mongodb数据库的可以参考我的另一篇博客，专门介绍mongodb在windows和linux服务器上安装的步骤

mongodb博客地址：https://blog.csdn.net/weixin_44675537/article/details/112074014