前后端项目分析

目录

一、数据表分类

二、了解后端项目

1. 封装分页数据

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

3. 整合多项第三方技术

三、了解前端项目

使用JQuery

使用WebSocket

导入echarts库

封装全局Ajax函数

---

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

一、数据表分类

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

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

        右击数据表 〉设计表 〉查看字段注释。

        MySQL5.7 以上，支持 JSON 格式。

二、了解后端项目

        后端项目基于SpringBoot框架构建的，整合了Spring、SpringMVC、MyBatis，就是一个SSM架构的项目。除了SSM框架之外，还向后端项目里整合了一些第三方框架和技术。

1. 封装分页数据

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

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

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

        在项目中我创建了 R 类用来封装返回给前端的数据，也就是说，所有 Controller 中的 Web 方法都统一返回 R 对象，业务数据也好，异常信息也罢，都往 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项目相同。

使用JQuery

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

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

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

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

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

使用WebSocket

import VueNativeSock from "vue-native-websocket-vue3";

app.use(VueNativeSock, "ws://localhost:8090/emos-api/socket", {
    "format": "json"
})

导入echarts库

import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts

封装全局Ajax函数

let baseUrl = "http://localhost:8090/emos-api/"

app.config.globalProperties.$baseUrl = baseUrl

app.config.globalProperties.$http = function(url, method, data, async, fun) {
    $.ajax({
        url: baseUrl + url,
        type: method,
        dataType: 'json',
        contentType: "application/json",
        xhrFields: {
            withCredentials: true
        },
        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
                    })
                }
            }
        }
    })
}