Mixi 3/12/2022 mobileSPAvue3project
# 源码
# 目录
# 项目介绍
类型:移动端,单页应用
简介:前端基于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
2
3
4
5
6
7
8
9
10
11
12
13
# 学习收获
- 文件上传,若需要进度条可以在 onUploadProgress 的回调中获取上传进度,显示在ui上。
- 文件上传前,计算哈希值,避免重复上传