【九月打卡】第21天 SpringBoot+Vue3 项目实战（12）

课程名称：运行项目工程

课程章节：前后端项目分析（3）

主讲老师：神思者

前端项目

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
                    });
                }
            }
        }
    })
}

今日学习收获：能够活学活用的才是适合的好的技术，加油！！！