admin管理员组文章数量:1666235
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 项目前言
- 一、前期准备
- 二、开发展示
- 三、开发过程
- 1.环境配置
- 2.源码目录
- 3.运行
- 4.部署上线
- 总结
项目前言
场景:实现多人视频会议。
功能:登录、注册、多人音视频(创建房间,进入房间)、会议(音频、视频、共享屏幕)。
一、前期准备
编辑器:vscode 地址。
多人视频会议开源框架:腾讯TUIroom 地址。
登录注册功能框架:vue+node+mysql 登录注册 地址
上述代码都fork在我的github仓库。
二、开发展示
腾讯的TUIroom是不包含登录注册的,我们的目的是开发出一套完备的包含登录注册的多人音视频会议。界面如下所示:
登录界面
注册界面
主页面
会议房间
三、开发过程
本章会详述,怎么跑通代码,并对代码进行二次开发。
1.环境配置
- 下载编辑器VScode
- 安装node.js(注意,不要安装新版本,和代码不兼容),下载node-v14.21.1-x64.msi版本,下载地址。
- 利用phpstudy配置后端mysql数据库。
1.下载phpstudy软件(百度直接搜)
2.开启数据库-新建数据库
3.输入数据库名字,账号和密码
4.运行数据库
注意:数据库的名字,账号和密码要和源码目录中service问价夹中的db.js文件保持一致,也就是说你的数据库信息,要在db.js中重新配置一下。
此外:你要在数据库里建立一个表user,表中设有三个字段:username, email, password,这是因为源码执行数据库增加和查询操作。
2.源码目录
- dist文件是打包之后形成的文件,把源码打包之后,可以生成dist文件夹,部署的时候,把dist文件上传到服务器即可。
- node_modules是依赖包,里面是项目需要各种插件和依赖项,在源码中执行
nom install
命令自动生成。 - service 是后端配置服务器文件,本源码中主要通过node.js实现前端和后端的交互。
- src是前端的所有组件,我们主要在这个文件夹中进行修改。
- 其他的配置文件一般是不需要修改的,本项目中暂时不做修改(已经配置好了)。
3.运行
- 把项目导入vscode中
- 在vscode点击终端-新建终端
- 在终端中输入
cd service
进入后端文件夹中,执行node app.js
执行后端程序
- 重新在新建终端,输入
npm run serve
执行整个项目
5.在浏览器中输入http://localhost:8080/
即可访问主页。
6.新建终端,执行npm run build
打包命令,就能生成一个dist文件夹,把dist文件夹进行部署就行。
4.部署上线
因为在测试阶段,我们直接简单部署就可以了
1.开一个windows系统的云服务器
2.安装node.js
3.安装phpstudy,并开启数据库
4.下载一个Navicat Premium 16管理数据库
5.给数据库进行配置
6.把源码上传服务器,在命令行进入service文件,执行`node app.js`开启后端服务器(测试可以暂时这样操作)(PS:在真实的部署环境中,我是直接利用node serve.js开启的后端服务,因为我配置了https协议,所以进行了修改)
7.把dist部署到phpstudy上就行(dist有个index文件是访问入口)
总结
项目整体部署就行这样,但是对项目的二次开发,还是需要对源码进行解析。主要需要在src文件中进行修改。项目采用的是vue2+node+mysql的全栈操作,可以参考vue2的书和资料。
版权声明:本文标题:vue2+node实现全栈多人视频会议 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1730064924a1221286.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论