实现基于vue全家桶+mint-ui+++MongoDB模仿微信的网页即时聊天项目

时间：2024-11-16 20:17:42

 

一、项目介绍

用到的所有工具除了，其他都是第一次接触，没有什么深刻理解，只基于个人边学边做的经验，记录一下此项目，并供同样想实现类似项目的小伙伴们参考。另外分享一下初期入手时很有帮助的vue+vuex基础视频，也是论坛中别人分享的，原链接打不开了，附上我的网盘分享：/s/1z2v4qffxFiYG-Nsav8Sxrg 密码：ajxb

项目体验地址：112.74.53.108/dist （电脑上打开时请按F12然后点击Toggle device mode或ctrl+shift+M）

github：/GaoMinjian/mychat

实现的主要功能：

1.登录与注册

2.群聊与私聊

3.已存在的会话显示在首页，并动态更新显示的最新信息，如图：

4.个人资料如头像、昵称的更改

5.退出登录

ps:如有其它功能添加或修改意见欢迎留言

 

二、所用框架或库介绍

:

    

  1. 

    

    "less": "^3.7.1",
    

    2. 

  2. 

    

    "less-loader": "^4.1.0",
    

    3. 

  3. 

    

    "mint-ui": "^2.2.13",
    

    4. 

  4. 

    

    "mongoose": "^5.2.5",
    

    5. 

  5. 

    

    "": "^2.1.1",
    

    6. 

  6. 

    

    "-client": "^2.1.1",
    

    7. 

  7. 

    

    "style-loader": "^0.21.0",
    

    8. 

  8. 

    

    "uws": "^10.148.1",
    

    9. 

  9. 

    

    "vue": "^2.5.2",
    

    10. 

  10. 

    

    "vue-router": "^3.0.1",
    

    11. 

  11. 

    

    "": "^2.1.1-b",
    

    12. 

  12. 

    

    "vuex": "^3.0.1"
    

    13.

简单介绍：

个人经验，安装插件在命令窗口中直接

#npm install -g xx

在项目中无法使用，需在项目目录下或用软件打开项目后在terminal中输入命令(一定不能少了--save，不然不会写入到中，以后分享源码给别人时别人就无法安装项目所有的插件)：

#npm install --save xxx

 

less：css扩展语言，此项目中只用到一种用法，应该都看得懂。

mint-ui：饿了么开发的框架，包含手机端界面各种组件，虽然有些时候没有自己写用着那么如意，但是能很大地提高效率。官方文档：/docs/#/zh-cn2

mongoose：node中对MongoDB进行操作的API。MongoDB安装最后一步一定要取消勾选左下角的选项，不要试水...(盗图)

socket.io及相关API：实现客户端（就是我们打开项目页面的窗口）与服务端（就是# node 起的服务）实时的请求、广播交互。如客户端设置监听命名为x的广播，服务端发送名为X的广播，客户端便能收到作为参数的数据。在不了解概念的时候会被客户端服务端之类的搞晕，个人查网上文章并尝试了两整天才成功实现最简单的通信（很多网上的方法不适用），想明白了后其实很简单。不管看哪篇文章最好都结合官方文档/docs/

vuex：同级组件间共享数据，此项目中仅仅用来储存数组，其他数据都用sessionStorage储存，没有特殊复杂需求的话如果为了学习一下如何使用可以用一下，不然不如自己写个js文件来储存数据。

 

三、项目的目录结构

其中dist为项目打包后生成的文件夹，mychat为guthub仓库，均与项目本身无关。

node_modules中为项目中所有安装的插件。

src中一般存放项目制作过程所有新建的文件，根据个人习惯，我在assets中存放所有的css,js,图片等静态资源，components放置组件，page中放置主要页面。

router的的功能是将所有的vue页面暴露给路由（vue中所有组件都需暴露后才可被引用），即暴露给中的<router-view>，则挂载到中，页面才得以显示。

则对应了，是对全局的引用，第二步中用到的组件均需在这里引用，代码如下：

    

  1. 

    

    // The Vue build version to load with the `import` command
    

    2. 

  2. 

    

    // (runtime-only or standalone) has been set in  with an alias.
    

    3. 

  3. 

    

    
import Vue from 'vue'

    

    4. 

  4. 

    

    
import MintUI from 'mint-ui'

    

    5. 

  5. 

    

    
import 'mint-ui/lib/'

    

    6. 

  6. 

    

    
import App from './App'

    

    7. 

  7. 

    

    
import router from './router'

    

    8. 

  8. 

    

    
import VueSocketio from ''

    

    9. 

  9. 

    

    
import socketio from '-client'

    

    10. 

  10. 

    

    
import store from './vuex/store'

    

    11. 

  11. 

    

     
    

    12. 

  12. 

    

    
Vue.use(VueSocketio, socketio('http://localhost:3000'))
    

    13. 

  13. 

    

    
Vue.use(MintUI)
    

    14. 

  14. 

    

    
Vue.config.productionTip = false

    

    15. 

  15. 

    

     
    

    16. 

  16. 

    

    /* eslint-disable no-new */
    

    17. 

  17. 

    

    
new Vue({
    

    18. 

  18. 

    

      el: '#app',
    

    19. 

  19. 

    

      router,
    

    20. 

  20. 

    

      store,
    

    21. 

  21. 

    

      components: { App },
    

    22. 

  22. 

    

      template: '<App/>'

    

    23. 

  23. 

    

    })
    

    24.

项目制作过程中根据功能增加的文件（非项目建立时固有文件）：

database中，在服务端的node文件中被引用，相当于在js中模拟mongo数据库中具体的某个表，不管是对某个表的什么操作，都根据schema中定义的数据。mongoose教程（必看）：/card/c/543b2e7788dba02718b5a4bd/1/1/1/

 

四、服务端即Node文件

    

  1. 

    

    
let http = require('http');
    

    2. 

  2. 

    

     
    

    3. 

  3. 

    

    
let user = require('./database/db').user; //mongo model

    

    4. 

  4. 

    

    
let privateHistory = require('./database/db').privateHistory;
    

    5. 

  5. 

    

    
let groupHistory = require('./database/db').groupHistory

    

    6. 

  6. 

    

    
let socketId = [],users = []//用账号对应客户端 储存socket连接

    

    7. 

  7. 

    

     
    

    8. 

  8. 

    

    
let server = http.createServer(function (req, res) {
    

    9. 

  9. 

    

    }).listen(3000);//创建http服务

    

    10. 

  10. 

    

     
    

    11. 

  11. 

    

    
console.log('Server running ');
    

    12. 

  12. 

    

    
var io = require('').listen(server);
    

    13.

node中与服务相关的只有创建一个http服务并监听端口，再让socket监听此服务，3000端口只是我使用的，可以自己更改，但是在中，socket发送请求的端口也要相应更改。

示范一下的用法：

服务器端（js）中监听客户端连接及其他信息：

    

  1. 

    

    .on('connection', (socket) => { //监听客户端连接，返回当前socket
    

    2. 

  2. 

    

      ('链接成功'+ );
    

    3. 

  3. 

    

      ({},function (err,docs) { //在user关联的表中查找所有数据
    

    4. 

  4. 

    

        ('allUsers',docs) //给当前客户端发送广播
    

    5. 

  5. 

    

      })
    

    6. 

  6. 

    

     
    

    7. 

  7. 

    

     
    

    8. 

  8. 

    

    socket.on('login', (data) => { 
    

    9. 

  9. 

    

        ... ...
    

    10. 

  10. 

    

    }
    

    11.

客户端中监听‘allusers’广播：

    

  1. 

    

    sockets: { //所有广播的监听必须写在sockets中
    

    2. 

  2. 

    

        allUsers (docs) {
    

    3. 

  3. 

    

          this.$ = docs //储存到vuex中
    

    4. 

  4. 

    

         }
    

    5. 

  5. 

    

      }
    

    6.

 

五、小结

大概介绍了一下整个项目，尽量使新入门的小伙伴能看得懂，具体的内容可以从github中下载源码。有什么错误或讲解不详细的地方欢迎指正或提出。

另附几张项目界面(发现中的功能都没做)：

                  

相关文章