前端开发经验0527

1、开发注意事项

1.接口的.then.catch处理逻辑写的周全一点，不能只考虑接口成功的情况，接口调用成功但是返回数据中出错或者接口调用失败，都有可能会有相关的处理逻辑：返回警告信息
2.Tabs组件的第二个tab页，只有在进页面的时候才调接口拿数据，没有别的情况再刷新数据了，所以在Tabs组件加了on-click事件在切换tab的时候刷新数据用
3.所有的查询、新建保存、编辑保存、删除确认，调用了接口后最好给出个loading的显示，不然如果接口返回慢了或者网络卡了，就页面上来看是不是用户点了个按钮，但是看上去啥都没发生，这样的交互体验就不好：v-loading的作用：在请求到数据之前，显示加载中的效果，当请求到数据之后加载效果消失。
4.分页和查询按钮都存在时，点击按钮后，记得把当前页码重置为1，如果不重置的话，比如有几十条数据，当前在第2页，然后去搜索框输入值再点击查询按钮，这时候实际上传参的页码是第二页，后端接口按搜索值是有结果的，但是因为是第2页可能所有返回结果就是空的
5.tab栏点击事件时，默认触发当前页面的获取参数和name；iview
6.组件的props写的时候注意类型，比如pagetotal应该是个Number，结果初始值你设置的是’'，开发模式下会报warning，这些warning能解决的都解决了
7.一些废弃掉的逻辑代码，该删的就删掉，免得影响现有的逻辑
8.比较表达式用三个等号 === 尽量不要用两个等号
9.

2、代码总结

2.1时间戳转换函数

export default function timestampToTime(timestamp) {
    const date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    let Y = date.getFullYear() + '-'
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    let strDate = Y + M + D + h + m + s
    return strDate
}

2.2全选按钮组件

<template>
  <div>
    <Dropdown trigger="click" :class="size">
      <div>
        <Input suffix-icon="el-icon-arrow-down" v-model="state" icon="arrow-down-b" readonly></Input>
      </div>
      <Dropdown-menu slot="list" class="list">
        <div>
          <Checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange">
            <Checkbox class="menu" :datavalue="item" v-for="item in data" :key="item.value" :label="item.label"></Checkbox>
          </Checkbox-group>
          <div class="change" v-show="all">
            <Checkbox class="checkbox" :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
          </div>
        </div>
      </Dropdown-menu>
    </Dropdown>
  </div>
</template>

<script>
<SelectCom
 :value="timeframe2"
 :data="timeframeday2"
 :default="default2"
 size="zhong"
 @childCompoentData="getmonitorPerioddata2"
 v-show="warn.timeGranularity === 1"
></SelectCom>

import { Checkbox } from 'element-ui'
export default {
  components: {
    'el-checkbox': Checkbox
  },
  name: 'LegendDropdown',
  props: {
    value: {
      type: String
    },
    default: {
      type: String
    },
    data: {
      type: Array
    },
    size: {
      type: String
    },
    all: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value: {
      handler(curVal, oldVal) {
        this.init()
      }
    }
  },
  data() {
    return {
      checkAll: false,
      state: '',
      indeterminate: true,
      checkAllGroup: this.data.map((item) => item.label)
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.state = this.value
      this.checkAllGroup = []
    },
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false

      if (this.checkAll) {
        this.state = this.default
        this.checkAllGroup = this.data.map((item) => item.label)
      } else {
        this.checkAllGroup = []
        this.state = []
        this.$Message.error('请选择监控时段')
      }
      this.$emit('childCompoentData', this.state)
    },
    checkAllGroupChange(data) {
      console.log(data)
      if (data.length === this.data.length) {
        this.indeterminate = false
        this.checkAll = true
        this.state = this.default
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
        this.state = data
        if (this.state.length >= 3) {
          this.state = this.suoxie(this.state)
        }
      } else {
        this.indeterminate = false
        this.checkAll = false
        this.state = []
        this.$Message.error('请选择监控时段')
      }
      this.$emit('childCompoentData', this.state)
    },
    suoxie(val) {
      var num
      for (var i = 0; i < this.data.length; i++) {
        if (this.data[i].label === val[0]) {
          num = i
          break
        }
      }
      // console.log(num)
      for (var j = 0; j < val.length; j++) {
        if (val[j] == this.data[num].label) {
          // console.log(val[j])
          // console.log(this.data[num].label)
          num = num + 1
        } else {
          // console.log(val)
          return val
        }
      }
      let name = val[0] + '-' + val[val.length - 1]
      console.log(name)
      return name
    }
  }
}
</script>

<style lang="less" scoped>
.zhong {
  width: 215px;
  background-color: #f7f8f9;
}
.xiao {
  width: 120px;
  background-color: #f7f8f9;
}
.list {
  overflow: scroll;
  width: 100%;
  max-height: 200px;
  background-color: #f7f8f9;
  .menu {
    padding-left: 12px;
    background-color: #f7f8f9;
    display: block;
  }
  .change {
    border-top: 0.5px solid rgb(147, 155, 172);
    display: block;
    margin: 4px 12px;
    padding: 2px;
    .checkbox {
      float: left;
    }
    .sure {
      background-color: #409eff;
      font-size: 14;
      text-align: center;
      float: right;
    }
  }
}
</style>
}

2.3 代码的使用

let data1 = this.monitorPerioddata1 || this.timeframe1 || this.default1

<Button size="small" class="con" @click.capture="ChangeVisitNums('bar')" v-show="this.PageGroupingVisitNum !== ''">
 <Icon type="stats-bars"></Icon>
</Button>