IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> [开源] 即时通讯项目 客户端+服务端+后台管理 -> 正文阅读

[JavaScript知识库][开源] 即时通讯项目 客户端+服务端+后台管理

CrazyChat 即时通讯项目

项目主要技术依赖

客户端(vue2+VantUI)+服务端(nodejs+soketio+express)+后台系统(vue3+elementPlus)

写在前面

  • 服务端依赖了邮件发送模块 nodemailer模块

  • 因开源前对代码进行整理 把此模块的发送消息的配置修改了

  • 在跑起来此项目前你需要对 nodemailer有一些了解 并进行相关配置

  • 网上相关教程:https://blog.csdn.net/d1sappearry/article/details/103953201

  • 相关需要替换的内容我会用 《替换》 这个来代替 对应替换即可

  • 在这里插入图片描述

  • 特别提醒:第一次使用后台系统会有权限验证需要手动将数据库的账号中__v改为1

  • 在这里插入图片描述

项目目录及运行

客户端 (8080端口)
cd crazy-chat
npm run serve

在这里插入图片描述

服务端(依赖mongodb 连接到27017/justkang ) (8800端口和8801端口【socket服务】)
cd crazy_chatNodeServer
nodemon index.js  或者 node index.js

在这里插入图片描述

后台系统 (3000端口)
cd vue-manage-system
npm run dev

在这里插入图片描述

项目预览

客户端(部分页面)

在这里插入图片描述

后台系统

在这里插入图片描述

数据库预览(studio 3T)

  • 登录后台系统需要手动将__v改为1
    在这里插入图片描述

总体总结

  • 除了解三个文件启动方式外 还需要修改邮箱模块的一些配置 位置(crazy_chatNodeServer/db/DAO/email/sendEmail)
  • 后台接口:所有后台接口成功都是返回200,失败是401,402
  • 接口文档 baseURl: 本地8800接口
    • /login 登录 POST 携带参数:{password,username} 返回:{code:“200”,msg:“登陆成功”,token:‘’} ||{code:“401”,msg:“”}
    • /getEmailCode 获取验证码 POST 携带参数:{email} 返回:{code: ‘200’, msg: ‘邮件发送成功,请查收’} || {code:“401”,msg:“”}
    • /register 注册 POST 携带参数:{password,username,email,emailCode} 返回:{code: ‘200’, msg: ‘注册成功’} || {code:“401”,msg:“”}
    • /myInfo 获取个人数据 POST 携带参数:headers:‘crazytoken’:token 返回:{code: ‘200’, data:{}} || {code:“401”,msg:“”}
    • /friendList 获取朋友列表 POST 携带参数:headers:‘crazytoken’:token 返回:{code: ‘200’, data:{}} || {code:“401”,msg:“”}
    • /findUser 搜索好友列表 POST 携带参数:data:{username},headers:‘crazytoken’:token 返回:{code: ‘200’, data:{}} || {code:“401”,msg:“”}
    • /updateUser 修改个人信息 POST 携带参数:data:{username || tel || sing},headers:‘crazytoken’:token 返回:{code: ‘200’, msg:‘修改成功’} || {code:“401”,msg:“”}
    • /fileImg 上传头像 POST 携带参数:data:{base64:图片的base64},headers:‘crazytoken’:token 返回:{code: ‘200’, msg:‘修改成功’} || {code:“401”,msg:“”}
    • /addFriend 添加好友 POST 携带参数:data:{friendId},headers:‘crazytoken’:token 返回:{code: ‘200’, msg:‘添加成功’} || {code:“401”,msg:“”}
    • /findFriendInfo 查找朋友信息 POST 携带参数:data:{friendId},headers:‘crazytoken’:token 返回:{code: ‘200’, msg:‘添加成功’} || {code:“401”,msg:“”}
    • /updateFriendState 更新朋友状态 POST 携带参数:data:{friendId,state:1[添加]||2[拒绝]},headers:‘crazytoken’:token 返回:{code: ‘200’, msg:‘’} || {code:“401”,msg:“”}
    • /getChatList 获取聊天列表 POST 携带参数:data:{Fid},headers:‘crazytoken’:token 返回:{code: ‘200’, msg:‘’} || {code:“401”,msg:“”}
    • /findPassword 找回密码 POST 携带参数:data:{password,emial,emailCode},headers:‘crazytoken’:token 返回:{code: ‘200’, msg:‘’} || {code:“401”,msg:“”}
    • admin模块
    • /adminLogin 管理员登录 POST 携带参数:data:{email,password} 返回:{code: ‘200’,data:{token} || {code:“401”,msg:“”}
    • /userNumAndchatNum 返回用户个数及聊天个数及组成好友个数 POST 携带参数:headers:{crazytoken} 返回:{code: ‘200’, msg:‘’} || {code:“401”,msg:“”}
    • /adminfindAlluser 查找用户 POST 携带参数:headers:{crazytoken} 返回:{code: ‘200’, data:{}} || {code:“401”,msg:“”}
    • /adminfindAlluser 查找用户 POST 携带参数:headers:{crazytoken} 返回:{code: ‘200’, data:{}} || {code:“401”,msg:“”}
    • /adminChangeUser 修改用户信息 POST 携带参数:data:{crazyId,changeData:{username,viaUrl,tel,__v}},headers:{crazytoken} 返回:{code: ‘200’, data:{}} || {code:“401”,msg:“”}

写在最后

  • 第一次做开源练习项目,让我们共同进步
  • 最后感谢我的好友与我共同完成 他的gitee:https://gitee.com/zyangitee QQ:1296126021
  • 如果你想加入我们一同打造更多好玩更有意思的开源项目 QQ:246620179
  • 如果觉得有帮助记得starss
  • 项目开源地址:
    • github:https://github.com/justkang666/crazy-chat-open-source
    • gitee:https://gitee.com/justkang/crazy-chat-open-source/
    • 视频介绍:https://www.bilibili.com/video/BV15A4y1S7Zj?spm_id_from=333.999.0.0
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-13 11:40:51  更:2022-05-13 11:42:37 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 19:41:58-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码