【Vue+Django】Training Management Platform Axios并发请求 - 20230703

news/2025/1/11 8:40:19/

需求陈述

由于API是特定单位/特定类别/特定教学方式的数据，故汇总数据需要循环请求不同单位/不同类别/不同教学方式。

技术要点

1.axios并发请求
2.JS for循环
3.Vue数组中出现 ob :Observer无法取值问题的解决方法
4.将数据转化为数组
5.一次请求所有数据后，再分页
6.设置loading状态
7.js向对象中添加元素(对象,数组)
8.分情况显示数据
9.前端下载数据(json转excel)
10.v-if=“mySystem === ‘TRS’||mySystem === ‘CSOD’”
11.修改XLSX个样式

1.axios并发请求

关键点1：myDLTMultiData()方法来循环请求 SearchData()。
关键点2：axios.all([Array_A])中的Array_A是请求的列表。

    //Array_A来保存【请求的队列】SearchData(myDate_start,myDate_end,myuserId,trainingMethodId,pageNum,skillcode){axios({timeout:3000,method:"post",url:"https://dltapi.wis***.com/dlt/org/trainingrecord/search",data:{startDate: myDate_start ||'2012-01-01',endDate: myDate_end ||'2050-06-01',trainingMethodId: trainingMethodId || 1,currentPage: pageNum || 1,userId:myuserId,// courseCode: "K01002003CM",// courseName:'EC/batch/try run流程（课程）',orgSkillCode:skillcode || "SPK011",pageSize: 1000000,},headers:{'Content-Type': 'application/json','Authorization': sessionStorage.getItem('UserPermission'),},}).then((response) => {// console.log('response',response)//拼数组for (let j = 0; j < response.data.trainingRecords.length; j++) {this.DLT_data.push(response.data.trainingRecords[j])}// return response.data.trainingRecords}).catch(function (err) {// 请求失败处理console.log('请求失败！',err)// alert('请求失败！',err)})},myDLTMultiData(myDate_start,myDate_end,myuserId){this.DLT_data = []let Array_A = []let skillcodeRange = ["SPK001","SPK002","SPK003","SPK004","SPK005","SPK006","SPK007","SPK008","SPK009","SPK010","SPK011","SPK012","SPK013","SPK014","SPK015","SPK016","SPK017","SPK018","SPK019","SPK020","SPK021","SPK022","SPK024","SPK025","SPK026","SPK027","SPK028","SPK029","SPK030","SPK031","SPK032","SPK033","SPK034","SPK035","SPK036","SPK037","SPK038","SPK039","SPK040","SPK04","SPK042","SPK043"]// let skillcodeRange = ["SPK036","SPK037","SPK038","SPK039","SPK040","SPK041","SPK042","SPK043"]//循环for (let s = 0; s < skillcodeRange.length; s++) {for (let m = 1; m < 3; m++) {// 页码需从1开始,100000笔，搜索一次就好for (let i = 1; i < 2; i++) {Array_A.push(this.SearchData(myDate_start,myDate_end,myuserId,m,i,skillcodeRange[s]))}}}setTimeout((Array_A)=>{axios.all([Array_A]).then((response)=>{//Vue数组中出现__ob__:Observer无法取值问题的解决方法，把值转为DLT_data_allthis.DLT_data_all = JSON.parse(JSON.stringify(this.DLT_data))// console.log('DLT_data',JSON.parse(JSON.stringify(this.DLT_data)))console.log('DLT_data_all',this.DLT_data_all)}).catch(e=>{ // 失败的时候则返回最先被reject失败状态的值console.log("error",e)})},3000)},

2.JS for循环

将请求循环push到Array_A

      //循环for (let s = 0; s < skillcodeRange.length; s++) {for (let m = 1; m < 3; m++) {// 页码需从1开始,100000笔，搜索一次就好for (let i = 1; i < 2; i++) {Array_A.push(this.SearchData(myDate_start,myDate_end,myuserId,m,i,skillcodeRange[s]))}}}

3.Vue数组中出现 ob :Observer无法取值问题的解决方法

https://blog.csdn.net/wanshuai12138/article/details/124809122
setTimeout()方法去除Observer

vue 怎么拿到{ ob: Observer}里面的值？https://blog.csdn.net/weixin_49522520/article/details/125522547

      setTimeout((Array_A)=>{axios.all([Array_A]).then((response)=>{//Vue数组中出现__ob__:Observer无法取值问题的解决方法，把值转为DLT_data_allthis.DLT_data_all = JSON.parse(JSON.stringify(this.DLT_data))}).catch(e=>{ // 失败的时候则返回最先被reject失败状态的值console.log("error",e)})},3000)

4.将数据转化为数组

将每次并发请求的数据重组为数组，保存在DLT_data里面。

//拼数组
for (let j = 0; j < response.data.trainingRecords.length; j++) {this.DLT_data.push(response.data.trainingRecords[j])
}

5.一次请求所有数据后，再分页

DLT_data_all来保存所有数据，pageNum来做切片。

  computed: {DLT_data_filter(){//return this.DLT_data_all.slice(0,10)if(this.pageNum==1){return this.DLT_data_all.slice(0,10)}else{return this.DLT_data_all.slice((this.pageNum-1)*10,this.pageNum*10)}}},methods: {handlenextClickDLT(val) {//把回调参数val给pageNumconsole.log("当前页码：", val);this.pageNum = val},}

在这里插入图片描述

在这里插入图片描述

6.设置loading状态

参考链接https://element.eleme.cn/#/zh-CN/component/loading
设置loading层的位置在最外层

<div class="container-fluid" v-loading="loading"  style="width: 100%">

设置初始状态 loading:false

  data() {return {loading:false,

设置this.loading=false

    GoQuery(myDate, mySystem, category, EmployeeID, courseName, pageNum) {this.loading=true;if (mySystem == "TRS") {this.$store.dispatch("getTrsTrainingTestData", {myDateS: myDate[0],myDateE: myDate[1],mySystem: mySystem,category: category,EmployeeID: EmployeeID,courseName: courseName,pageNum: pageNum,});//设置载入状态,()箭头函数选择VCsetTimeout(()=>{console.log('this',this)this.loading=false},500)}

7.js向对象中添加元素(对象,数组)

https://blog.csdn.net/embelfe_segge/article/details/123190656

对象名[“属性名”] = 值

            for (let j = 0; j < response.data.trainingRecords.length; j++) {let the_record = response.data.trainingRecords[j]the_record['DLTcategory']="技能等级认证训"this.DLT_data.push(the_record)}

8.分情况显示数据

通过向对象添加DLTcategory后，可利用DLTcategory进行分情况展示（符合条件就展示，不符合就不展示）。

            <trv-for="item in DLT_data_filter":key="item.listId"valign="middle"style="color: Black; border-color: #e0e0e0; font-size: 15px"v-if="item.DLTcategory==='入职训'"><td class="col">{{ item.DLTcategory }}</td><td class="col"></td><td class="col"></td><td class="col">{{ item.userId }}</td><td class="col">{{ item.userCname }}</td><td class="col">{{ item.trainingMethod }}</td><td class="col">{{ item.trainingDate.split("T")[0] }}</td><td class="col"></td><td class="col"></td><td class="col"></td></tr>

9.前端下载数据(json转excel)

参考https://blog.csdn.net/qq_42618566/article/details/107253501
根据不同模块下载不同内容，放进去theArray。

		DLTtoExcel(myDate,mySystem,category,EmployeeID,courseName){let excel_array = []for (let n = 0; n < this.DLT_data_all.length; n++) {let theData = this.DLT_data_all[n];let theArray = {};if(theData.DLTcategory=='技能等级认证训'){theArray = {DLTcategory: theData.DLTcategory+'-'+theData.orgLevel.orgSkillCode+'-'+theData.orgLevel.orgSkillName,plantCode: theData.plantCode,deptId: theData.deptId,userId: theData.userId,userName: theData.userName,courseName: theData.course.courseName,trainingDate: theData.trainingDate.split("T")[0],startTime: theData.startTime,trainingSite: theData.trainingSite,lecturerCname: theData.lecturer.lecturerCname,};}else if(theData.DLTcategory=='入职训'){theArray = {DLTcategory: theData.DLTcategory,plantCode: '',deptId: '',userId: theData.userId,userName: theData.userCname,courseName: theData.trainingDays,trainingDate: theData.trainingDate.split("T")[0],startTime: theData.trainingDate.split("T")[1],trainingSite: '',lecturerCname: '',};}else if(theData.DLTcategory=='通识训'){theArray = {DLTcategory: theData.DLTcategory,plantCode: theData.plantCode,deptId: theData.deptId,userId: theData.userId,userName: theData.userName,courseName: theData.course.courseName,trainingDate: theData.trainingDate.split("T")[0],startTime: theData.startTime,trainingSite: theData.trainingSite,lecturerCname: theData.lecturer.lecturerCname,};}else if(theData.DLTcategory=='技能认证训'){theArray = {DLTcategory: theData.DLTcategory,plantCode: theData.plantCode,deptId: theData.deptId,userId: theData.userId,userName: theData.userName,courseName: theData.course.courseName,trainingDate: theData.trainingDate.split("T")[0],startTime: theData.startTime,trainingSite: theData.trainingSite,lecturerCname: theData.lecturer.lecturerCname,};}excel_array.push(theArray)// console.log('n',n)}console.log('excel_array',excel_array)const fileName = "TrainingRecord.xlsx";const sheetName = "Sheet1";const excel = XLSX.utils.book_new();const data = XLSX.utils.json_to_sheet(excel_array);XLSX.utils.book_append_sheet(excel, data, sheetName);XLSX.writeFile(excel, fileName);}

10.v-if=“mySystem === ‘TRS’||mySystem === ‘CSOD’”

https://zhuanlan.zhihu.com/p/48877695

v-if="mySystem === 'TRS'||mySystem === 'CSOD'"

11.修改XLSX个样式

https://blog.51cto.com/u_15997490/6497653

我的实例

		DLTtoExcel(myDate,mySystem,category,EmployeeID,EmployeeDept,courseName){let excel_array = []for (let n = 0; n < this.DLT_data_all.length; n++) {let theData = this.DLT_data_all[n];let theArray = [];if(theData.DLTcategory=='技能等级认证训'){theArray = [theData.DLTcategory+'-'+theData.orgLevel.orgSkillCode+'-'+theData.orgLevel.orgSkillName,theData.plantCode,theData.deptId,theData.userId,theData.userName,theData.course.courseName,theData.trainingDate.split("T")[0],theData.startTime,theData.trainingSite,theData.lecturer.lecturerCname,];}else if(theData.DLTcategory=='入职训'){theArray = [theData.DLTcategory,'','',theData.userId,theData.userCname,theData.trainingDays,theData.trainingDate.split("T")[0],theData.trainingDate.split("T")[1],'','',];}else if(theData.DLTcategory=='通识训'){theArray = [theData.DLTcategory,theData.plantCode,theData.deptId,theData.userId,theData.userName,theData.course.courseName,theData.trainingDate.split("T")[0],theData.startTime,theData.trainingSite,theData.lecturer.lecturerCname,];}else if(theData.DLTcategory=='技能认证训'){theArray = [theData.DLTcategory,theData.plantCode,theData.deptId,theData.userId,theData.userName,theData.course.courseName,theData.trainingDate.split("T")[0],theData.startTime,theData.trainingSite,theData.lecturer.lecturerCname,];}excel_array.push(theArray)// console.log('n',n)}console.log('excel_array',excel_array)const fileName = "TrainingRecord.xlsx";const sheetname = "Sheet1";const excel = XLSXS.utils.book_new();const color = '72baa7'const fontSize = 11const fontBond = trueconst header = [[{v: 'DLTcategory',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},{v: 'plantCode',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},{v: 'deptId',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},{v: 'userId',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},{v: 'userName',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},{v: 'courseName',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},{v: 'trainingDate',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},{v: 'startTime',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},{v: 'trainingSite',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},{v: 'lecturerCname',s: {font: {bold: fontBond,sz: fontSize,},fill: {fgColor: { rgb: color },}},},],]excel_array.unshift(...header);// 将定义好的表头添加到 body 中const sheet = XLSXS.utils.aoa_to_sheet(excel_array);const cols = [{ wch: 30 },{ wch: 15 }, { wch: 15 },{ wch: 15 },{ wch: 15 },{ wch: 30 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, { wch: 20 }, ];sheet['!cols'] = cols; // 添加到sheet中XLSXS.utils.book_append_sheet(excel, sheet, sheetname);XLSXS.writeFile(excel, fileName);},

在这里插入图片描述


http://www.ppmy.cn/news/768223.html

相关文章

职场情绪控制管理的重要性

职场情绪控制管理的重要性

工作是我们生活中必不可少的一部分&#xff0c;它不仅为我们带来了经济上的收益&#xff0c;更为我们赋予了成就感和自尊心。然而&#xff0c;工作中也不可避免地会遇到各种各样的挑战和困难&#xff0c;这些因素往往会影响我们的情绪稳定。 对于我们程序员来说&#xff0c;似乎…
阅读更多...
秋招面试（10）- 中国联通北京

秋招面试（10）- 中国联通北京

我们航行在生活的海洋上&#xff0c;理智是罗盘&#xff0c;感情是大风。 面试时间&#xff1a; 2020-11-6 视频面试 zoom 一个主持人 三个面试官 1. 自我介绍 2. 情景问题&#xff08;大概意思就是要召开一个5g峰会&#xff0c;让你做负责人&#xff0c;然后另一个负责人向…
阅读更多...
中国远程继续教育计算机考试,中国远程继续教育网

中国远程继续教育计算机考试,中国远程继续教育网

在这个网站上 一、网络查询方式&#xff1a; 1、查询时间&#xff1a;2008年5月26日。 2、登录“中国现代远程与继续教育网”(&#xff0c;使用“网院考生入口或电大考生入口”进入&#xff0c;输入登录用户名和密码进入查看&#xff0c;可以看到成绩是否合格。 二、短信查询方…
阅读更多...
java-正则表达式判断移动联通电信手机号

java-正则表达式判断移动联通电信手机号

1 package com.linbilin.phone; 2 3 import java.util.regex.Matcher; 4 import java.util.regex.Pattern; 5 6 public class CheckPhone { 7 8 /** 电话格式验证 **/ 9 private static final String PHONE_CALL_PATTERN "^(\\(\\d{3,4}\\)|\\d{3,4}-…
阅读更多...
java简介(Java简介英文)

java简介(Java简介英文)

什么是java Java是由Sun微系统公司所发展出来的程序语言&#xff0c;它本身是一种对象导向(Object-Oriented)的程序语言。JAVA目前在手机上应用最多的就是JAVA游戏。 Java也号称是能跨平台使用的语言&#xff0c;这主要是因为Java本身被编译之后&#xff0c;并不是直接产生可执…
阅读更多...
最佳实践 ｜ 联通数科基于 DolphinScheduler 的二次开发

最佳实践 ｜ 联通数科基于 DolphinScheduler 的二次开发

点击上方 蓝字关注我们 ✎ 编 者 按 数据时代下&#xff0c;井喷的数据量为电信行业带来新的挑战。面对每日数百 TB 的新增数据&#xff0c;稳定可靠的调度系统必不可少。 中国联通旗下的联通数字科技有限公司&#xff08;以下简称“联通数科”&#xff09;&#xff0c;其数据…
阅读更多...
Unicode编码完全探究（三）之联通乱码

Unicode编码完全探究（三）之联通乱码

一、文章来由 这个乱码问题很早以前就发现了&#xff0c;其实就是编码的问题导致~~~ 二、现象 新建一个文本文档&#xff0c;输入“联通”二字(不带引号)&#xff0c;然后保存、关闭&#xff0c;再重新打开。你发现了什么&#xff1f;没错&#xff0c;“联通”二字已经变成了…
阅读更多...
【每日面试】2021北京联通Java一面

【每日面试】2021北京联通Java一面

作者&#xff1a;牛客825106274号 链接&#xff1a;https://www.nowcoder.com/discuss/784026?source_iddiscuss_experience_nctrack&channel-1 来源&#xff1a;牛客网 1. 说一下你项目失败的经历&#xff1f;&#xff08;我随便说了一个大学时候的&#xff0c;面试官&am…
阅读更多...
最新文章

Copyright @ 2022~2023