1、node版本过高,所以因此出现了此错误
解决:
set NODE_OPTIONS=--openssl-legacy-provider
2、树层级处理上万条数据优化
项目中,部门数超万,导致页面加载卡顿怎么办?使用若依自带解析树的方法再本地运行没有任何问题,但是一发布倒服务器就显示加载超时。
仔细一看,原来是加载时间超过了10秒,所以就超时了,于是,我们就想了个笨办法,让客户多等会儿,把最大超时时间设置成30秒,哈哈哈哈~
但是,这肯定不是个万全之策,得另想其法。
解决方法
思路就是,先查询最外面的父节点,也就是全国所有省,目前库中有38个,然后在点击前面的展开箭头时,再去查询该节点中的子节点,也就是通过懒加载的方式,减轻服务器压力,从而提升系统的性能。
使用到的vue组件:<treeselect>,html中的代码如下:
<el-form-item label="归属部门" prop="deptId">
<treeselect
v-model="form.deptId"
:options="deptOption"
:load-options="loadOptions"
placeholder="请选择归属部门"
/>
</el-form-item>
当然,需要提前在data中声明deptOption变量,然后在methods中编写查询父节点的方法以及懒加载的方法:loadOptions
//所属部门的树状
getDeptByAddUser(){
listDeptAll(this.paramDeptQuery).then((response) => {
let list = [];
let data = response.data;
data.forEach(element => {
element['id'] = element.deptId;
element['label'] = element.deptName;
element['children'] = null; //要设置为空,才能触发:load-options="loadOptions"动用
});
this.deptOption = data;
});
},
最后部署在服务器上,完美解决问题。
3、vue中各种传参处理
axios.defaults.headers["Content-Type"] = "multipart/form-data";
调接口的时候用event_log包裹对象
let requestData = { dateTime: new Date(),//当前时间 eventType: 'IDCardInfoEvent',//(默认值) eventState: "active",////(默认值) IDCardInfoEvent: { subEventType: 105,////(默认值) similarity: 92,// faceMatchThreshold1V1: 90, picture: '',//人脸识别 cardPic: idCardList.cardPicUrl,//身份证图片 IDCardInfo: { name: idCardList.name,//身份证姓名 sex: idCardList.sex,//性别 birth: idCardList.birth,//出生日期 IDCardNo: idCardList.ID,//身份证号 startDate: idCardList.startDate,//开始时间 endDate: idCardList.endDate,//结束时间 nation: idCardList.nation,//国家 addr:idCardList.addr,//住址 } } } let event_log = new FormData(); event_log.append("event_log",JSON.stringify(requestData));
**enctype属性:**规定了form表单在发送服务器时候编码方式。
Content-Type的几种传参方式总结:
1、multipart/form-data(一种POST数据提交的方式)
====指定传输数据为二进制类型,比如图片、mp3、文件
multipart/form-data是用来传输数据的特殊类型,主要就是我们上传的非文本的内容,比如图片或是mp3等等
当我们采用["Content-Type"] = "multipart/form-data"会意request payload提交数据
2、application/x-www-form-urlencoded
*******默认的编码方式。但是在用文本的传输和MP3等大型文件的时候,使用这种编码就显得效率低下
application/x-www-form-urlencoded;charset=UTF-8是默认值,作用是设置表单传输的编码
AJAX中 xmlHttp.setRequestHeader("Content-Type","application/x-www-form- urlencoded");
form表单里是可以不写enctype=application/x-www- form-urlencoded,因为默认的HTML表单就是这种传输编码类型的。
3、text/plain
******纯文本的传输。空格转换成“+”加号,淡不对特殊符号编码
是纯文本传输的意思,在法邮件的时候要设置这种编码类型,否则会出现接收时编码混乱的问题。网络上经常text/plain和text/html做比较,其实这两个很好区分,前者用来传输纯文本文件,后者则是传递html代码的编码类型,在发送头文件时才用得上。只有multipart/form-data才能完整的传递文件数据
4、vue中在html文本
1、style中加样式
<van-row class="bar-item" :style="{ height: `${height}px` }"></van-row>
2、加class样式
<van-row class="bed-item1" :class="{ 'select': selectidx === index }"
5、rules校验,父组件调用子组件的定义的方法
<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> </el-form> </div></template><script>export default { methods: { // 在子组件定义一个检验rules方法,方便在子组件调用 saveReviewInfomation() { this.$refs["rulesForm"].validate((valid) => {}); }, },};</script><!-- 父组件中使用 父组件中调用子组件的方法--><Check ref="commonchild"></Check>this.$refs.commonchild.saveReviewInfomation()