vue开发笔记

213 阅读3分钟

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()