2-5 前后端项目分析_企业级在线办公系统-慕课网

本门课程的emos-api和emos-vue项目用到了很多技术栈，关于技术架构和重要的配置，我们要做到心中有数，将来在面试中才能把项目介绍清楚。

一、数据表分类

在MySQL的emos逻辑库中有四种类型的数据表：工作流数据表、定时器数据表、业务表、系统表。

序号	类型	特征	备注
1	工作流数据表	以 act_ 开头	存储工作流的各项数据
2	定时器数据表	以 qrtz_ 开头	存储QuartZ定时器数据
3	业务表	以 tb_ 开头	保存业务数据
4	系统表	以 sys_ 开头	保存系统配置信息

二、了解后端项目

1. 封装分页数据

很多前端页面都要显示分页后的数据，那么就需要后端项目能提供分页的数据。这里需要我们统一对分页结果加以封装。

PageUtils类里面有相关的变量用来保存“总页数、“总记录”、“当前页数”、“分页记录”等数据。我们在写Service层代码的时候，遇到要返回分页结果的时候，我们返回PageUtils对象即可。

2. 封装返回给前端的数据

在前后端分离的架构中，后端返回给前端的数据是JSON格式的，我们不限制具体业务数据的内容，但是JSON内部的属性咱们要统一，比如某个属性是状态码，某个属性是异常信息，某个属性是分页数据。

在项目中我创建了R类用来封装返回给前端的数据，也就是说，所有Controller中的Web方法都统一返回R对象，业务数据也好，异常信息也罢，都往R对象里面存放。

@PostMapping("/searchRoleByPage")
@Operation(summary = "查询角色分页数据")
@SaCheckPermission(value = {"ROOT", "ROLE:SELECT"}, mode = SaMode.OR)
public R searchRoleByPage(@Valid @RequestBody SearchRoleByPageForm form) {
    ……
    return R.ok().put("page", pageUtils);  //往R对象中存放分页结果
}

3. 整合多项第三方技术

看过本手册附录的同学都知道我们往SpringBoot项目中整合了很多第三方的技术，整合这些技术用到的各种Java类，都保存在config目录中。

序号	类名	作用
1	XssFilter	拦截Http请求
2	XssHttpServletRequestWrapper	XssFilter拦截请求后会调用这个类做XSS转义
3	CorsConfig	允许跨域请求
4	ExceptionAdvice	拦截异常，并全局处理
5	SpringDocConfig	配置SpringDoc，替代Swagger
6	StpInterfaceImpl	Sa-Token的配置类，用于获取用户权限和角色
7	ThreadPoolConfig	线程池配置类，用于执行异步任务

二、了解前端项目

前端项目是基于Vue3.0构建的，所以目录结构上跟传统的Vue项目相同，下面是项目结构的截图。

序号	资源名称	作用
1	package.json	前端项目构建信息
2	vite.config.js	Vite框架配置文件
3	index.html	所有VUE页面都会被编译到index.html页面中
4	index.css	index页面的样式文件
5	dist目录	存放编译后的各种文件（项目发布前才需要编译）
6	node_modules目录	存放各种依赖库
7	public目录	存放公共文件
8	src目录	存放Vue页面、JavaScript文件、静态资源文件等
9	src/asserts目录	存放静态资源文件
10	src/components目录	存放自定义Vue组件，目前存放的是自定义标签引用SVG图片
11	src/icons目录	存放引入的SVG文件
12	src/router目录	定义的是全局路由
13	src/utils目录	存放公共工具脚本
14	src/views目录	存放各种Vue页面
15	App.vue	加载某个路由页面，最终App.vue的内容被编译到index.html里面
16	main.js	Vue项目的主文件（入口程序）

1. 注意事项

在package.json文件中的各种依赖库版本大家不要随便修改，因为Vue3.0更新较为频繁，如果贸然使用新版本的Vue库，很有肯能会导致前端项目启动失败。如说vue-router库的4.0.5版本，就不能用3.0.3之后的Vue库，否则全局路由会失效，导致无法切换前端页面。

2. 引入ElementUI-Plus组件库

由于前端项目用的是Vue3.0，如果想要使用ElementUI组件库，我们要引入ElementUI-Plus组件库，不能引入老版本的ElementUI，这一点切记！在本项目中各种依赖库我都已经替大家引用好了，咱们来阅读main.js文件中的代码。

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-CN'
……

//使用ElementUI
app.use(ElementPlus, {
    locale
})

3. 使用JQuery

有很多同学对在Vue项目中使用JQuery产生了怀疑：MVVM可以省去我们自己直接操作DOM，为什么你还要引入JQuery？原因很简单，项目中我要使用同步执行的Ajax请求。

很多人以为Ajax就应该是异步执行的，为什么要搞出同步执行的Ajax请求？这只能说明你还没遇上特殊的情况。比如说ElementUI中很多组件的动画效果都有回调函数，我们把JS代码写到这种动画回调函数中，就能在操作控件的时候完成特殊的功能。

例如下面的截图中，表格记录有个“折叠图标”，点击图标我们可以展开或者折叠详情信息。通常情况下，用户展开详情信息的时候，我们才发送Ajax请求查询数据。而不是预先把每个记录的详情信息查询出来，那样做要查询的数据太多，对后端项目和数据库都产生很大的负载。有可能用户只展开几条详情，而你把所有数据的详情都预先查询出来，是不是很不妥？

ElementUI中的动画回调函数里面放置异步执行的代码通常会出严重的BUG，这是因为动画回调函数不会等待异步代码彻底执行完，然后再往下执行。例如我们在动画回调函数中发送Ajax查询数据，但是动画回调函数不会等待Ajax执行完，它自己先提前执行完了，所以导致Ajax代码也跟着退出运行了。你说这算不算是严重的BUG？那怎么解决这个事情呢？很简单，Ajax换成同步执行的。强制让动画回调函数等待Ajax执行完，它自己才能退出。

图片描述
目前来说，只有JQuery的Ajax既支持异步又支持同步，所以我在项目中引入JQuery理所应当。

4. 使用WebSocket

WebSocket是一种长连接的会话技术，用了它之后，前端和后端项目的通信省去了每次都要重新创建HTTP请求的麻烦。而且你也不用担心，长连接会耗光后端服务器的网络资源。因为WebSocket长连接是有过期时间的，比如说我们可以设置超过5分钟，前后端没有通信，就自动切断WebSocket连接。

在支付罚款单的业务中，我们不是在前端采用定时轮询的方式查询付款是否成功，而是后端项目收到腾讯服务器的付款通知以后，再把结果推送给前端页面，这样就省去后端处理很多前端的轮询请求。

在main.js文件中配置了WebSocket相关信息，你可以根据后端项目的IP地址，适当修改一下配置。

//导入WebSocket库
import VueNativeSock from "vue-native-websocket-vue3";
//创建WebSocket连接
app.use(VueNativeSock,"ws://localhost:8090/emos-api/socket",{ 
    "format": "json"
});

5. 导入echarts库

百度开源的echarts库可以动态生成很多图表，比如说在员工罚款模块中，我们用图形的方式统计罚款数据，就要用上echarts技术。

图片描述

//导入echarts库
import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts  //设置全局变量$echarts

6. 封装全局Ajax函数

虽然Ajax代码很容易写，但是遇上执行错误，自己手写异常处理，这种重复的劳动能不能统一封装起来呢？当然可以，我在main.js文件中创建了$http这个全局函数。

//后端项目的URL根路径
let baseUrl = "http://localhost:8090/emos-api/"

app.config.globalProperties.$baseUrl = baseUrl //设置全局变量$baseUrl

//封装全局Ajax公共函数
app.config.globalProperties.$http = function(url, method, data, async, fun) {
    $.ajax({
        url: baseUrl + url,
        type: method,
        dataType: 'json',
        contentType: "application/json",
        xhrFields: {
            withCredentials: true
        },
        headers: {
            "token": localStorage.getItem("token")
        },
        async: async,
        data: JSON.stringify(data),
        success: function(resp) {
            if (resp.code == 200) {
                fun(resp)
            } else {
                ElMessage.error({
                    message: resp.msg,
                    duration: 1200
                });
            }
        },
        error: function(e) {
            if (e.status == undefined) {
                ElMessage.error({
                    message: "前端页面错误",
                    duration: 1200
                });
            } else {
                let status = e.status
                if (status == 401) {
                    router.push({
                        name: 'Login'
                    })
                } else {
                    ElMessage.error({
                        message: e.responseText,
                        duration: 1200
                    });
                }
            }
        }
    })
}