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

需求陈述

由于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);},