wechat

3/12/2022 mobileSPAvue3project

# 源码

GitHub

# 目录

# 项目介绍

类型:移动端,单页应用
简介:前端基于vue3,nutui,后端基于nodejs,mongoDB的聊天工具,支持信息,文件的收发,登录注册,好友添加。
这是一个偏向后端的项目,后端写得比较简单

# 项目演示

在线地址 (opens new window)

测试账号:17434194830
密码:123456

# 目录结构

wechat
├─ .browserslistrc
├─ .env.development
├─ .env.production
├─ .gitignore
├─ README.md
├─ babel.config.js
├─ package-lock.json
├─ package.json
├─ public
│  ├─ favicon.ico
│  ├─ index.html
│  ├─ spark-md5.min.js
│  └─ webWorker.js
├─ src
│  ├─ App.vue
│  ├─ assets
│  │  ├─ add.jpg
│  │  ├─ custom_theme.scss
│  │  ├─ error.png
│  │  ├─ loading.gif
│  │  └─ q.png
│  ├─ components
│  │  ├─ Footer.vue
│  │  ├─ Popover.vue
│  │  ├─ PostForm.vue
│  │  ├─ ShowImg.vue
│  │  ├─ Swiper.vue
│  │  └─ common
│  ├─ js
│  │  ├─ ajax.js
│  │  ├─ captrue.js
│  │  ├─ eventSource.js
│  │  ├─ suoyin.js
│  │  └─ utils.js
│  ├─ main.js
│  ├─ pages
│  │  ├─ Dialog.vue
│  │  ├─ DialogMsg.vue
│  │  ├─ DialogPopup.vue
│  │  ├─ FriendApplyFor.vue
│  │  ├─ FriendList.vue
│  │  ├─ FriendMsg.vue
│  │  ├─ FriendNew.vue
│  │  ├─ Login.vue
│  │  ├─ MsgList.vue
│  │  ├─ MsgListList.vue
│  │  ├─ Search.vue
│  │  ├─ Self.vue
│  │  └─ SelfMsg.vue
│  ├─ router
│  │  └─ index.js
│  └─ store
│     ├─ handleStore.js
│     ├─ index.js
│     └─ state.js
└─ vue.config.js

# 依赖项

"@nutui/nutui": "^3.1.16",
"axios": "^0.25.0",
"core-js": "^3.6.5",
"dayjs": "^1.10.7",
"vue": "^3.0.0",
"vue-awesome-swiper": "^4.1.1",
"vue3-lazy": "^1.0.0-alpha.1",
"vuex": "^4.0.2",
"vuex-persistedstate": "^4.1.0"

# 数据结构

vuex的store.state

{
    selfMsg: null,//个人信息
    friendList: [],//好友列表
    dialogMsgs: {},//对话信息,key为好友id
    messageList: [],//对话列表
    imageConfig:{
        urls:[],
        index:null
    },//图片展示组件对应的结构
    refresh:0,//触发本地存储
    search:null,//搜索到的好友
    newFriends:[]//新好友
}
1
2
3
4
5
6
7
8
9
10
11
12
13

# 学习收获

  • 文件上传,若需要进度条可以在 onUploadProgress 的回调中获取上传进度,显示在ui上。
  • 文件上传前,计算哈希值,避免重复上传
上次更新: 4/9/2022, 10:40:06 PM