201804问题总结

mock数据

项目：《华智数联官网-拟定方案模块》
时间： 2018年4月1日
问题：mockjs造 数据，因为使用了[{}],所以[]内得是一个对象 ，是属性名：属性值的形式，想去掉属性名，就不要对象形式就好了
错误代码：
var data = Mock.mock('cityList', {
  'cityList|4': [{
    'name': () => Mock.mock(Random.region()),
    'id|10000-20000': 100,
    'cityArr|20': [{//此处是生成一个数组，数组内元素均为对象，{key: value}形式
      city: () => Mock.mock(Random.city())//生成后为{city: '北京', city: '南京'}不想要此数组下的city键名，便去掉"city:"后提示错误，所以将外层{}去掉就可以了
    }]
  }]
})

正确代码：
var data = Mock.mock('cityList',{//接口名
  'cityList|4': [{//接口内数据的总名称，数据为4个
    'name': () => Mock.mock(Random.region()),//此处要使用箭头函数，保证生成的数据不是全部一样的
    'id|10000-20000': 100,//生成的id在10000-20000范围内
    'cityArr|20': [//生成一个数组cityArr
      () => Mock.mock(Random.city())// 元素为随机城市 cityArr: ['北京', '天津']
    ]
  }]
})

为单选按钮设置初始值

项目：《华智数联官网-拟定方案模块》
时间： 2018年4月2日
场景：为单选按钮选中默认选项

问题1：单选按钮不能实现切换
computed: {
  regionRadio1:{
    get(a) {
      return 0
    },
    set(newValue) {
      this.regionRadio1 = newValue
    }
  }
},
分析：return 0不能切换，因为每次都返回0,每次都把数据设置为0处的状态，get里应该返回的是data里的值
解决办法：在data中定义初始值，返回初始值，或者直接在接口返回数据后赋值
关键代码：
<v-model="regionRadio1">
data: {
  return {
    regionRadio: 0
   }
}
computed: {
  regionRadio1:{

    get(a) {
      return this.regionRadio
    },
    set(newValue) {
      this.regionRadio1 = newValue
    }
  }
},

问题2：在接口处赋值时不起作用
分析：
给地区默认值时，地区RegionArr是从RegionList中取出来的，因为RegionList是从接口取出，所以在data中为regionArr = regionList[0]赋值会提示regionList为空，刚开始想要计算属性，后来想到在接口取得数据后赋值，即this.regionArr = this.regionList[0].name
因为this.regionArr为一个所选地区的数组，所以里边的元素均为<el-group-radio></el-radio :label="item.name">中的:label处绑定的值，此处为“华东，华南”等地名的Name值，当然也有可能是id为"01 02"等的值，所以要将regionList中的name值赋值给regionArr,达到赋初始值的目的

验证表单

项目：《华智数联官网-拟定方案模块》
时间： 2018年4月3日
场景：页面中有一个单选按钮是选择地区，要不就选择不限地区，要不就选择地区+城市，最后和表单中别的选项（日期、金额）等一起验证有无空项

问题1：验证地区处表单项是否完全
// 如果不限地区，则rFlag为0
  if (this.regionRadio === 0) {
    var rFlag = 0
  } else {
    // 如果选择地区，将region和city作为属性存入rFlag对象中
    rFlag = {}
    rFlag.region = this.regionArr
    rFlag.city = this.cityArr || []
  }
  // console.log(typeof(rFlag.region));
  if (rFlag !== 0 ||if ( rFlag.region === '' && rFlag.city.length === 0  ) {
    console.log('no');
    return false
  } else {
    console.log('yes');
  }

  分析：选择地区后虽然 rFlag.region === '' && rFlag.city.length === 0两条件都为false，但rFlag !== 0 也是成立的，所以还是会执行if语句，不会执行else语句，但并不能把rFlag !== 0 || rFlag.region === '' && rFlag.city.length === 0改成rFlag !== 0 && rFlag.region === '' && rFlag.city.length === 0，因为不选择地区的话rFlag 就为0
  所以此处选择用if嵌套语句，
  if{rFlag !== 0} {
    if ( rFlag.region === '' || rFlag.city.length === 0  ) {
      // 只要地区和城市有一个没选都返回false
      return false
    } else {
      // 或的反是与，此处意为两者都选后返回true
      return
    }
  } else {
    // rFlag = 0 即为地区不限
    return true
  }

  问题2：与其他项一起验证时规则不正确

  表单验证时一开始先判断单个未知选项（地区不限或选择地区)，再判断已知选项集(金额，终端等)，这时就会出现4种情况：
  let regionFlag = this.handleRegion()//此函数检验地区选择是否正确

  if (regionFlag) {// 如果选择了地区
    // 判断已知选项集，只要有一个没填就显示错误
    if (this.startDate == '' || this.endDate == '') {
      console.log(‘请完善信息’)
    } else {
      // 都填了正确
      todoSomething()
    }
  } else {//如果没有选择地区
    if (this.startDate == '' || this.endDate == '') {
      // 选项集也不完善就提示错误信息
      console.log(‘请完善信息’)
    } else {//选项集完全也提示错误信息
      console.log(‘请完善信息’)
    }
  }

  这样代码繁琐还不易懂，所以改为先判断已知选项集，再判断地区
  if (this.startDate == '' || this.endDate == '') {//只要有一个没选就提示错误
    console.log(‘请完善信息’)
  } else {//如果都选了去判断地区
    if (regionFlag) {
      todoSomething()
    } else {
      console.log(‘请完善信息’)
    }
  }

遍历用户选中信息

项目：《华智数联官网-拟定方案模块》
时间： 2018年4月3日
场景： 把age:1,sex:male等用户选择的不确定信息显示在页面中，所以需要把用户选中的信息单独存起来再遍历
问题1：json格式为[age: 1, sex: male],需要分别把key与value显示在页面中，vue中可直接遍历key,value值，不需要把key遍历出来放到一个数组中循环，单独放到数组中导致了页面中先把key循环完再显示循环value，不是一对一的key与value

问题2: 页面使用v-for显示key与value时不成功，打印要循环的json发现此处是一个数组，并不是对象，所以不存在obj.key与obj.value
分析：给json赋的初始值是[]，所以json就是一个数组，应赋值为json:{}

问题3：给json存值,直接使用json[key]=val就可以，放在循环中依次把key:value存入json

问题4:遍历key值
for (keys in obj){
}

使用date方法时，看是否需要转换成对象

项目：《华智数联官网-拟定方案模块》
时间： 2018年4月3日
场景：把datePicker选择后的日期格式“Wed Apr 04 2018 17:35:07 GMT+0800 (中国标准时间)”转换成"2018/4/17"
问题：封装函数，用date参数接收，使用date.getFullYear等函数提示"date.getFullYear is not a function"
分析：不是一个函数，证明date不能使用这个函数，用typeof(date)发现结果是"string"，所以传过来的date并不是一个对象，一开始，datePicker中的日期是使用"startDate: new Date(),endDate: new Date(),"来赋的初始值，所以并没有什么问题，但当datePicker中的值发生变化后，返回的值类型也是一个string，所以需要转换成date对象
解决办法：
let myDate = new Date(date)

v-for的key属性

项目：《华智数联官网-拟定方案模块》
时间： 2018年4月4日
问题： 在使用v-for时给出警告"component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info."
分析：为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制。
解决办法： <div v-for = "item in arr" :key = "item"></div>

在jquery事件里调用event对象

项目：《云乐道运营后台-新建媒资-调取百度地图api返回关键字结果》
时间：2018年4月16日
问题：在事件里调用event对象，直接调用函数传递event参数，不起作用
问题代码：
  $("#model-input").click(stop(e))

  function stop(ev) {
    console.log(111111111)
    ev.stopPropagation()
  }
分析：应该将函数调用语句写在回调函数里


    $("#model-input").click(function(ev) {
      stop(ev)
    })
    function stop(ev) {
      console.log(111111111)
      ev.stopPropagation()
    }
   相当于
    $("#model-input").click(function(ev) {
      ev.stopPropagation()
   })

vuePress需要注意的问题

项目：《使用vuePress搭建个人博客》
时间： 2018年4月24-25日
问题1：侧边栏sidebar写成了slidebar
问题2： sidebar配置也是主题配置，应该写到themeConfig里边
问题3：.vuepress写到docs下，所有关于vuePress的配置

jquery的attr prop

项目：《云乐道运营后台-新建媒资-查找楼盘将坐标回显在页面中》
时间：2018年4月25日
问题：选中地区后页面坐标不能回显示在页面中
分析：坐标可以打印出来，在chorme中element页面中发现input中value属性已有值，但不显示，用val()函数获取也获取不到
解决办法: 使用jquery的prop设置的元素原生属性，
相关知识： 
attr:
attr使用setAttribute方法实现，使用的是dom属性节点多设置自定义属性，
document.getElementById('div1').setAttribute('name','one');
prop"：
而设置元素的原生属性（如name、value、checked等)使用prop，porp使用'.'或'[]'实现，是转化为js对象的属性，减少访问dom节点的频率。
document.getElementById('div1').name = 'one'; //或者
document.getElementById('div1')['name'] = 'one';

fatal: The remote end hung up unexpectedly5.00 KiB/s

项目：《自学vuepress》
时间：2018年4月28
问题：使用git push推送项目的时候提示错误 

$ git push -f git@github.com:MOMO-0902/MOMO-0902.github.io.git master:gh-pages
Counting objects: 88, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (86/86), done.
Connection to github.com closed by remote host. KiB/s
fatal: The remote end hung up unexpectedly5.00 KiB/s
fatal: sha1 file '<stdout>' write error: Broken pipe
error: failed to push some refs to 'git@github.com:MOMO-0902/MOMO-0902.github.io.git'

分析：发生在push命令中，有可能 是push的文件过大导致，超过了git默认可以传输文件的大小
解决办法： 
1.在.git/config文件中加入
[http]
postBuffer = 524288000
2.执行命令
git config http.postBuffer 524288000

fatal: ‘origin’ does not appear to be a git repository

项目：《自学vuepress》
时间：2018年4月28
问题：使用git push origin master推送项目的时候提示错误 
描述： 
fatal: 'origin' does not appear to be a git repository

以及fatal: Could not read from remote repository.

解决办法： 执行git remote add origin git@github.com:`<USERNAME>`/`<REPO>`.git