当前位置： 首页 > news >正文

商城网站开发实训报告wordpress主页幻灯片

news 2025/11/6 20:06:30
商城网站开发实训报告,wordpress主页幻灯片,深圳做义工的网站,杭州大的做网站的公司需求陈述 由于API是特定单位/特定类别/特定教学方式的数据，故汇总数据需要循环请求不同单位/不同类别/不同教学方式。 技术要点 1.axios并发请求 2.JS for循环 3.Vue数组中出现 ob :Observer无法取值问题的解决方法 4.将数据转化为数组 5.一次请求所有数据后&…

需求陈述

由于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.yayakq.cn/news/782648/

相关文章：

  • 快速建网站的软件如何网络营销
  • 怎么做网站源码wordpress form
  • 建材网站建设公司提高百度搜索排名工具
  • 郑州市做网站计算机专业哪个专业比较好就业
  • 房地产网站 模板南昌盗网站少优化公司
  • 网站维护中 源码重庆建设工程招标投标网
  • 邗江建设局网站资料下载wordpress编辑导航栏
  • 石河子做网站公司全国哪个县网站做的最好
  • 网站结构布局一个公网ip可以做几个网站
  • 做网站开发的公司哪家好百度网站提交
  • 明年做那些网站致富做旅游网站的目的
  • 广州骏域网站建设专家手机电脑版包头seo推广哪家专业
  • 中国菲律宾关系为什么不好杭州网站优化体验
  • 山东省城乡住房和建设厅网站首页wordpress设置安全
  • seo网站编辑是做什么的企业展厅设计公司推荐
  • 国外做网站卖东西要什么条件鼎承世纪食品有限公司网页制作
  • 网站建设维护和服务合同html项目模板下载
  • 网站制作基本规则网页设计与制作论文6000
  • 食品网站app建设方案陆良县住房和城乡建设局网站
  • 服务网站建设怎么做网站用户可以发表文章
  • 运行网站需要多少钱一小时学做网站
  • 网站流量监控网站建设与管理课程
  • 泉州工作室网站建设站外推广方式有哪些
  • 做公众号的网站游戏网站做代理
  • 知名的家居行业网站制作做权重网站
  • 做网站做得好的公司有服务器方面如何规划建设网站
  • 沥林网站建设马甲比较好山东网站备案网站
  • 建站优化是什么电子商务网站建设与维护项目五
  • 网站文章内容wordpress文章样式出错
  • 2003服务器建设网站宁夏建设工程造价信息网