项目上线问题技术问题总结

galyguo

已于 2022-10-17 15:41:18 修改

阅读量551

点赞数 2

文章标签：前端 javascript 大数据

于 2022-08-20 17:35:19 首次发布

本文链接：https://blog.csdn.net/galyguo/article/details/125660456

版权

一、异步函数里的同步方法

关键点：async await

        async nextStep() {
            var that = this;
            // 将已选配数据传回后端
            that.transferOption = [];
            console.log(that.optionvalData);
            // 是否执行下一步
            var isNextValue = that.isComplyNext();
            if (isNextValue) {
                that.backbtns = false;
                await that.getTransferOption(); // 获取回传值遍历所有选配项
                await that.getOptionData(0); //拉取选配项
            } else {
                this.$message({
                    type: 'error',
                    message: '选配项不能为空',
                    offset: 380
                });
            }
        },

二、vue中的数据监控：关键点，watch监听，isInsertOver为data中定义的属性变量isInsertOver,

根据数据的变化，执行后续的操作

       // 监听插入模型
        isInsertOver(ad) {
            if (ad) {
                console.log('监听插入成功数据变化，到达执行模型替换，纹理替换节点');
                if (this.allNode.length > 0) {
                    this.replaceModel(); //替换模型
                }
                if (this.allTextures.length > 0) {
                    console.log(this.allTextures);
                    setTimeout(() => {
                        this.replaceTextures();
                    }, 4000);
                    //替换纹理
                }
            }
        },

三、localStorage缓存机制的运用

例如用户信息，登录成功后，可根据接口返回数据，设置缓存key,value

定义

     localStorage.setItem('ms_username', this.param.accountNo);
     localStorage.setItem('userId', res.userInfo.userId);
     localStorage.setItem('username', res.userInfo.username);
     localStorage.setItem('moblie', res.userInfo.moblie);
     localStorage.setItem('account', res.userInfo.account);

使用

 this.userId = localStorage.getItem('userId');
 this.usertype = localStorage.getItem('usertype'); //用户类型获取

四,接口请求超时全局设置、单独设置

全局设置

const httpService = axios.create({
    
 baseURL:'http://localhost:9088/wzmarket',

    // 请求超时时间
    timeout: 120000, // 需自定义
    withCredentials: true
});

单独定义某类接口

export function post3 (url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            responseType: "text",
            timeout: 8000,
            data: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

//输出
export default {
    get3,
  };

四，input 赋值后，不能编辑的问题

关键参数 @input="changeFn"

     <template v-for='(item,index) in aItem.value'>
                  <el-form-item :label='item.codeValue'
                                :prop='item.codeValue'
                                :key='index'>
                    <el-input v-model='digitList[item.codeValue]'
                              :placeholder="item.minValue+'~'+item.maxValue"
                              size='mini'
                              @input="reEdit"
                              @change='((value)=>{handleChange(item.codeValue,value,item.minValue,item.maxValue)})'
                              oninput="value=value.replace(/[^0-9.]/g,'')">
                      <template slot='suffix'>{{ item.unit }}</template>
                    </el-input>
                  </el-form-item>
        </template>

//方法
  // input回显后不能编辑问题修复
        reEdit() {
            this.$forceUpdate();
        },

五、查询数组中当前位置

 //数据
_this.stepList=["已提交", "已审核", "已排产", "已入库", "运输中", "已作废"]
var status='已排产'
//方法
_this.currentNode = _this.stepList.findIndex(item => item === status) + 1;

六、ant design vue 与elementui中input 表单等获取输入完成后的数值方法

//elementui 

<el-input v-model="input" placeholder="请输入内容" @change="getValue"></el-input>

//方法
getValue01(value){
  let value=value
}

// ant design vue
<a-input placeholder="请输入内容" @blur="getValue02" />

//方法
getValue02(e){
  let value=e.target.value
}

七、ant design vue 表格自定义显示参数\图片等

//html 
<span slot="pic" slot-scope="text,record">
          <img :src="`${staticDomainURL}`  + '/' +record.journalismPhoto"
               height="60px"
               alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;" />
        </span>
        <span slot="zy"  slot-scope="text,record">
          <template v-if="record.journalismAbstract.length>30">{{record.journalismAbstract.slice(0,28)}}...</template>
          <template v-else>{{record.journalismAbstract}}</template>
        </span>

//comumn设置

显示图片
 columns: [
       {
          title: '图片',
          align: 'center',
          dataIndex: 'journalismPhoto',
          scopedSlots: { customRender: 'pic' }
        },
          {
          title: '关键字',
          align: 'center',
          dataIndex: 'journalismKeyword',
          scopedSlots: { customRender: 'zy' }
        },
]

八、map,filtermap用法

 var taskData = [
        { taskName: '001', planEtime: '2020-01-14', planStime: '2020-11-20' },
        { taskName: '002', planEtime: '2020-02-25', planStime: '2021-08-31' }
      ]

//map用法，返回数组内某个属性组成的数组
  that.tabData =taskData.map(item => {
              return item.itemText
            })// ['001','002']
//flatMap，返回多条件组成的数组
 var allDate = taskData.flatMap(item => {
        return [item.planEtime, item.planStime] // ['2020-01-14','2020-11-20','2020-02-25','2021-08-31']

九 jeecgboot 框架左侧菜单点击后，新打开窗口显示

1. 设置菜单路由

config>router.config.js编写路由参数

 {
    path: '/screenShow/cockpitIndex',
    name: 'cockpitIndex',
    meta: { title: '驾驶舱' },
    component: () => import('@/views/zzy/screenShow/cockpitIndex.vue')
  },
  {
    path: '/screenShow/projectPreview',
    name: 'projectPreview',
    meta: { title: '项目看板' },
    component: () => import('@/views/zzy/screenShow/projectPreview.vue')
  },
  {
    path: '/screenShow/collaboratePreview',
    name: 'collaboratePreview',
    meta: { title: '协同看板' },
    component: () => import('@/views/zzy/screenShow/collaboratePreview.vue')
  },
  {
    path: '/screenShow/operationView',
    name: 'operationView',
    meta: { title: '远程运维' },
    component: () => import('@/views/zzy/screenShow/operationView.vue')
  },
  {
    path: '/404',
    component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
  },

2. 系统设置--菜单管理设置

3. 关键步骤来了

src》components>menu>Contextmenu.vue

十、jeecgboot切换账户，登录后选中tab页签还是上次账户登录的页签问题

修复文件--src\permission.js

关键代码

十一、ant design vue 嵌套表格，展开行，父表格新增和子表格length一样的空白行，解决办法

官网说法

修改children为child或其他名称

十二。路由传对象

   //传递
  this.$router.push({
                        path: '/register',
                        query: { record: encodeURIComponent(JSON.stringify(res.data.result)) }
                                        });
//接收
console.log(JSON.parse(decodeURIComponent(this.$route.query.record)));

十三：获取对象所有属性

var obj={title:'01',name:'晓萌',age:14,status:'0'}
 
//获取obj所有属性
Object.keys(obj)//打印 ['title', 'name', 'age', 'status']

十四，接口返回数据直接赋值失效问题解决

   //  直接赋值失效（丢失了响应性），采用push方法
that.columns[0].options=res.result//失效
//使用方法
            for (const key in obj) {
              let a = { title: obj[key], value: obj[key] }
              that.columns[0].options.push(a)
            }

十五，以字段开头数组获取属性的方法

接口返回

动态获取接收方法

getCoreTask() {
      getAction(this.url.coreTaskList, { projectId: this.$route.query.id })
        .then(res => {
          if (res.success) {
            this.allData = res.result
            this.data = this.allData[this.tabData[0]]//获取与tab选项卡数据一致的epc数据
            console.log(this.data)
            // 有数据时设置图表显示
            if (this.allData[this.tabData[0]] != undefined && this.allData[this.tabData[0]].length > 0) {
              this.echartShow = true
              this.setEchatsData()
            } else {
              this.echartShow = false
            }
          }
        })
        .catch(error => {
          console.log('接口错误：' + JSON.stringify(error))
          alert(JSON.stringify(error.message))
        })
        .finally(() => {
          this.loading = false
        })
    },

十六，递归更改tree字段

      var that = this
      const result = []
      array.map(item => {
        const a = {
          title: item.name,
          key: item.id,
          children: item.children,
          slots: {
            icon: 'pic'
          }
        }
        if (item.children) {
          a.children = that.getTreeKeys(item.children)
        }
        result.push(a)
      })
      return result