多客户端云会议系统（vue+spring boot）

多客户端云会议系统

一.项目介绍

本项目采用vue+spring boot的方式开发，是一个网页版的多客户端云会议系统

二.架构及技术介绍

2.1 架构图

如下图所示是系统的整体架构，从前端页面请求，到后端持久层数据库；通过采用微服务部署的思路，以及结合日志收集，运维报警等模块，使得项目整体更加完善。

2.2 前端技术

2.2.1 Vue框架

1.了解Vue框架

Vue 是一款用于构建用户界面的JavaScript框架。它基于标准HTML，CSS和JavaScript构建，并提供了一套声明式的，组件化的编程模型，帮助开发者高效地开发用户界面。

2.Vue框架原理

Vue对象将页面中 要改变的元素 和 data中变量 进行绑定，绑定后它会一直监听data中变量值的改变，当值发生改变时，会自动找到与其绑定的元素并且让元素跟着发生改变，改变元素的过程不需要人工干预，提高了开发效率，而且这个过程不需要像 JavaScript 那样频繁DOM操作去改变页面结构，只是监听一片区域，提高了执行效率。

3. MVC设计模式

把一个业务实现分成三部分：
Model：模型，数据模型是服务器获取到数据的部分代码
View：视图，页面部分代码
Controller：控制器，把数据模型中的数据通过实现 展示到页面中

4.创建一个vue项目

为项目配备环境，在idea中，为项目编辑运行配置，选择npm，脚本填写为serve，点击确定
在界面创建完成后创建一个route文件夹，建立一个js文件来为每个页面添加路由，以及一些路由跳转限制

import Vue from 'vue';
import VueRouter from 'vue-router';
import Login from '@/views/login.vue';

Vue.use(VueRouter);

const routes = [
  {
   
    path: '/',
    name: 'login',
    component: Login,
  },
  {
   
    path: '/login',
    name: 'login',
    component: Login,
  },
  {
   
    path: '/home',
    name: 'home',
    component: () => import('../views/home.vue'),
  },
  {