项目中遇到的问题（2017.11上旬-2017.12上旬)

项目：《趣学君官网》时间： 2017年11月13日问题：判断ie版本并显示，当ie版本号为8的时候不显示描述：因为ie8的一些兼容问题导致程序报错，所以并不会执行上方所写的判断Ie版本的js语句解决办法：使用条件注释在页面的html部分做判断

项目：《趣学君官网》时间： 2017年11月13日问题：当ie版本过低时使用document.write()实现页面重写，但只有使用window.onload在页面加载完成后才生效，当在浏览器切换ie版本后，页面还一直显示重写的页面描述：因为window.onload()是页面加载完成后的事件，切换浏览器版本相当于刷新页面，还是会触发此事件，所以问题并不出现这里，而是重写页面后是一个新的页面了，并不是之前的页面，而一直是重写后的页面，所以也不会执行浏览器版本判断的语句，更不会切换页面！错误代码:  window.onload = function() {    document.write('<p>浏览器版本过低，请使用高版本浏览器或谷歌浏览器')  }解决办法：此处就不应该在window.onload()里做页面的改变，可改变方法为使用document.write()添加内容到当前页面中，当浏览器版本过低时给页面加一个遮罩层，宽高都为Html的宽高，就可以把原来要显示的（问题）内容覆盖关键代码：<!--[if lt IE 9]>    <script type="text/javascript">      document.write("<div style='position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; width: 100%; height: 100%; padding-top: 200px;  background-color: #fff'><P  style='font-size: 50px; text-align: center'>请使用高版本IE浏览器或者谷歌浏览器！<br><span style='font-size: 30px;'>ie浏览器推荐下载地址：<a style='color: #343434; text-decoration: underline' href='http://rj.baidu.com/soft/detail/14917.html?ald'>http://rj.baidu.com/soft/detail/14917.html?ald</ a></span><br><span style='font-size: 30px;'>谷歌浏览器推荐下载地址:<a  style='color: #343434; text-decoration: underline' href='http://rj.baidu.com/soft/detail/14744.html?ald'>http://rj.baidu.com/soft/detail/14744.html?ald</ a></span></P></div>")    </script>  <![endif]-->

项目：webpack入门练习时间： 2017年11月14日问题1：使用npm install -g webpack 提示错误，应该使用yarn global add webpack来实现全局安装问题2：使用yarn add --save-dev webpack 来安装到项目目录提示错误 ，应该把webpack放在前边，使用 yarn add webpack --save-dev问题3：初步配置好入口文件后执行打包命令提示找不到'app/main.js'描述3：路径写错了，应该是'/app/main.js'

项目：《钱隆归来》时间： 2017年11月15日问题： 当页面中有多个相同样式（即相同class名）时，如何更好的为每个元素动态添加class名描述： 一开始在mothos中判断按钮状态是否应该变化，但页面中几个按钮样式相同时，除非使用多个判断条件改变在data中定义的相对应的变量，否则会变成样式全部改变优化建议：data中定义的初始值一般只放页面展示的数据或经计算的数据等用户关心的变量，而改变样式这些不为用户关心的一般使用其他方法，可在computed中为要添加相同样式的class名“active”使用计算属性，返回逻辑值，再判断是否添加 class名关键代码：<div :class="{active: submit}"></div>computed: {  submit() {    return this.input.length > 5  }}

项目：《钱隆归来》时间： 2017年11月15日问题：点击修改登录密码是空白页描述：最先只使用向后台发送手机号和密码，当返回成功信息后使用this.$router.push()来进行跳转页面，虽然经过了后台的处理已经产生了userId，但这只是前端路由的跳转，所以当前窗口并不会获取到，index.hmtl中的window.USER_ID = '<?=$uid?>'也没有值，所以要跳转后要使用window.location.reload刷新页面，重新从服务器去上下载该文档，才会产生userId，在此页面跳转要使用this.$router.replace()替换当前文档，不会添加记录到history中，避免了使用前进后退按钮时一直重复登录操作。关键代码：loginInfo({  userName: userName,  password: password  }).then((res) => {    if(res.retcode = 2000000) {      alert('登录成功')      this.$router.replace('/')      window.location.reload()    }    })

项目：vue中使用swiper时间： 2017年11月15日问题：引入swiper之后swiper-slide不是并排排列，而是全部竖排在第一页，但可以实现滑动，只不过后边都是空白页描述：因为没有引入css文件，所以样式不起作用，在main.js(应用入口)中引入css就可以了关键代码：import 'swiper/dist/css/swiper.min.css'

项目：《钱隆归来》时间： 2017年11月17日问题：钱隆微信app中加了h5页面的链接跳转后是空白页描述：链接错误,链接中不应该有.html扩展名错误代码：<a href='/web/Credit/Debtsafe.html'>详情</a>

项目：《钱隆归来》时间： 2017年11月21日问题：新增mock数据后提示找不到“api/finance/pay/pay”描述：在返回成功数据后多加了一个大括号，导致json串解析不正确

项目：自学异步编程时间： 2017年11月22日问题：promise的then函数调用，只有第一个有值，后边的全是undefined描述：错误原因是then函数中没有返回值，因为promise的then方法会返回一个新的Promise变量，这个变量取决于onFulFilled回调的返回值，当链接调用的时候每一个onFulFilled的入参，都是上一个onFulFilled的返回值，如果不在then函数中写返回值，那么下一个onFulFilled的入参就是undefined错误代码： mypromise.then(function(message) {    console.log('yee'+message)    return mypromise}).then(function(message){    var message1 = message+ '11'    console.log(message1)}).then(function(message) {    console.log(message+ '2')}).then(function(message) {    console.log('haha' + message)})(结果：yee message      undefined11      message2      hahaundefined)解决办法: 在每一个then方法中添加返回值,两种方法返回值与结果并不一样，此处解决办法只是解决then链式调用的方法。1.直接返回参数let mypromise = new Promise(function(resolve,reject) {    setTimeout(function() {        resolve('成功')    }, 250)})mypromise.then(function(message) {    return 'yee'+message}).then(function(message){    return message+'world'}).then(function(message) {    return message + 'hello'}).then(function(message) {    return 'haha' + message})（结果：hahayeemessageworldhello)2.返回上述定义的mypromise对象mypromise.then(function(message) {    console.log('yee'+message)  return mypromise}).then(function(message){    console.log( message+'world')  return mypromise}).then(function(message) {    console.log(message + 'hello')  return mypromise}).then(function(message) {    console.log('haha' + message)  return mypromise})（结果：yeemessage       messageworld       messagehello       hahamessage)

项目：《钱隆归来》时间：2017年11月24日问题：当投资状态status=0时，投资详情页面返回投资列表页时，弹出框显示undefined描述：投资时填入输入金额但未支付时，投资状态是充值，status=0，每三秒请求一次，因离开本页面时未清掉计时器，所以当返回投资列表页时还会继续执行请求事件，在请求事件中定义了请求参数为当前路由参数，所以离开详情页返回列表页时当前路由并没有所需要的参数，这时再继续请求接口会返回错误“投资类型错误”,而不是因为充值未付款返回这个错误，因为如果充值未付款的话状态就应该一直是0，每次返回数据都应该一样。解决办法：在beforeDestory中，清掉计时器事件，当页面离开时停止计时与请求接口。

项目：《钱隆归来》时间：2017年11月24日问题：在destoryed中清掉计时器不起作用描述：destoryed函数在实例销毁之前调用，在这一步，实例完全可用。在beforeDestory在实例销毁之后调用，在这一步，实例就不可用了。

项目：《钱隆归来》时间：2017年11月24日问题：使用this.timer = null 销毁计时器不管用描述：在data中定义了this.timer = null ，在使用时用this.tiemr = setTimeout(getStatus, 3000)开启计时器，应该使用clearTimeout 来清掉计时器关键代码：window.clearTimeout(this.timer)

项目：《招生宝》时间：2017年11月30日问题：created方法里让div高度等于屏幕高度,报错cannot read property 'sytle' of null描述：空值的style证明没有获取到dom元素，写在created方法里，created生命周期是将编译好的html模板替换掉el属性，此步是去做渲染这件事，但还没有完成，而在mounted生命周期阶段渲染已经完成，可实时监控dom并更新它，所以获取dom应写在这一步关键代码：mounted() {  this.$nextTick(() => {    document.getElementById('noOrder').style.height = window.innerHeight + 'px'  })}

项目：《钱隆归来》时间：2017年11月24日问题：在destoryed中清掉计时器不起作用描述：destoryed函数在实例销毁之前调用，在这一步，实例完全可用。在beforeDestory在实例销毁之后调用，在这一步，实例就不可用了。

项目：《招生宝》时间：2017年11月29日问题2：在filters中使用data中定义的属性报错undefined描述：filters中this为undefined,使用解决办法：可在filters中定义变量再使用关键代码：filters: {  filterBtnTitle(item,args) {    let  btnTitle    console.log(args)    if (item.teacherConfirmStatus) {      if (item.paused === 1) {        // 1是暂停，代表学生发起了撤消请求        btnTitle = '同意撤消'      }      btnTitle = '已确认'    } else {      btnTitle = '确认为我的学生'    }    return btnTitle  }},

项目：《招生宝》时间：2017年11月29日问题：使用filters传多个参数，位置互换返回结果错误描述：使用(item.orderNo, item.paused) | filterBtnTitle方式来传参数错误，filters管道符前边的参数为第一个参数，第二个，第三个参数应该依次在filters方法后边。<div>{{(item) | filterBtnTitle(item.paused)}}</div>

项目：《招生宝》时间：2017年12月4日问题：使用===判断两个对象是否相等，返回false描述：因为一个是写进数组的对象，一个是在页面中点击产生的对象，对象是引用地址方式，两个不同引用地址比较结果肯定是false解决办法：通过比较两个对象中的key来判断是否相等。错误代码：：// 判断指定元素是否在数组中,因为两个数组并不相等，所以一直返回false，但此处复选框没必要去判断元素是否已在数组中，因为点一下添加进数组中，再点一下就删除了isInArray(arr, value){  for(var i = 0; i < arr.length; i++){    // if(value.orderNo === arr[i].orderNo){    //   console.log(11111111);    //   return true;    // }  }  return false;},

项目：《招生宝》时间：2017年12月4日问题：先定义一个对象为它赋值，再定义第二个对象等于第一个对象，再为第二个对象赋值，此时打印第一个对象和第二个对象的值是相等的，因为此时两个对象引用同一地址let obj1=new Object()obj1.name='Frank'let obj2=obj1obj2.name='Muse'console.log(obj1.name);

项目：《招生宝》时间：2017年12月4日问题：// 为数组对象增加删除指定元素的方法  removeByValue(arr, val) {    for(var i=0; i<arr.length; i++) {      if(arr[i] === val) {        arr.splice(i, 1);        break;      }    }  },

项目：《招生宝》时间：2017年12月4日问题：先判断元素是否在数组中，如果在就删除，我用了上述isInArray，removeByValue两个方法先后来操作，但此处可巧妙运用数组的filters方法，直接返回数组中不等于当前选中元素的那一项，就实现了删除相等的那一项关键代码：let arr = arr.filters(item => {  return item.orderNo !== item.orderNo  })

项目：《招生宝》时间： 2017年12月4日问题：在switch分支处语法检查报错 Unreachable code  no-unreachable描述： switch return 和break不能一起用解决办法：将switch返回结果赋值给一个变量，最后再返回这个变量

项目：《招生宝》时间： 2017年12月4日问题：请求接口提交数据格式不正确，描述: 在外边给json赋值后，用的时候又用了{}括起来了，提交数据格式为json时，可以直接用post({key:value}),也可以先赋值再使用错误代码：const params ={}  query.then({params}).then().catch()正确代码：1.queryOrderList({    uname: keywords  })2.const params = {}  params.uname = keywords  queryOrderList(params).then().catch()

项目：《招生宝》时间：2017年12月4日问题1：移动端字体小于12px时使用line-height字体整体靠上解决办法： display:tabel默认是垂直居中，使用display: table来实现垂直居中效果并不是特别明显，所以再配合使用缩放来对元素进行缩放，给要垂直居中的元素外再套一层关键代码：.wrapper {  display: table,  font-size: 20px;  height: 28px;  line-height: 28px;  width: 72px;  transform: scale(0.5),  // transform-origin 设置旋转元素的基点位置，必须与transform一起使用  transform-origin: 100% 100%  span {    display: tabel-cell;    vertical-align: middle;  }}问题2：使用transform:scale可以实现缩放，但还占据着原来的空间，导致元素没有在原本应该的位置上显示解决办法： 使用zoom: 0.5来进行缩放，还不占据空间，zoom: 设置或检索对象的缩放比例

项目：《招生宝》时间：2017年12月4日问题：页面显示数据使用{{btnTitle(item.status, item.no, $event)}}方法来根据数据显示按钮样式，本想用$event来获得当前对象来改变其背景图，但$event为undefined描述：此处用来过滤功能的btnTitle方法并不是一个dom方法，所以并不会真实接受$evnet对象解决办法：在此用一个flag来做标志，如果是特殊样式falg = true,如果不是flag = false，然后当flag= true时添加class名，获取元素方法使用获取元素方法使用refs,给按钮绑定refs关键代码：<a class="confirm-button tac c3e" ref="btns"  @click="handleClick(item.teacherConfirmStatus, item.paused, item.orderNo)" :class="{'confirmed': isconfirm}" v-show="buttonShow === 'all'">{{filterBtnTitle(item.teacherConfirmStatus, item.paused, item.status,key)}}</a>let flag = trueif (status = '同意撤消') {  flag = false}if (flag) {  this.nextTick(() => {    this.$refs.btns[index].className ='confirmed'  })}

项目：《招生宝》时间：2017年12月6日问题：正则表达式不起作用描述：格式错误正则表达式   let newTime = /\d{4}-\d{1,2}-\d{1,2}/g.exec(time)写成了  let newTime = /\d(4)-\d(1,2)-\d(1,2)/g.exec(time)newTime[0].replace(/-/g, '.')写成了newTime[0].replace(\-\g, '.')

项目：《招生宝》时间：2017年12月6日问题：请求mock数据接口时接口状态一直返回失败，描述：状态码2000000写成了“2000000”错误代码： {  "path": "",  "delay": 500,  "name": "",  "description": "",  "isPaging": false,  "datasource": "success.data",  "responseName": "success",  "response": {    "success": {      "retcode": "5000000",      "message": "获取数据成功",      "data": {}    },    "failure": {      "code": "201",      "status": "FAILURE",      "message": "服务异常"    }  }}正确代码 ：{  "path": "",  "delay": 500,  "name": "",  "description": "",  "isPaging": false,  "datasource": "success.data",  "responseName": "success",  "response": {    "success": {      "retcode": 5000000,      "message": "获取数据成功",      "data": {}    },    "failure": {      "code": 201,      "status": "FAILURE",      "message": "服务异常"    }  }}

项目：《招生宝》时间：2017年12月6日问题：向后台 传参数时需要的是数组，但得到的是json描述：因为传参数时传的时候用的{}括起来了，而括号里是一个数组，所以是json格式，并不是数组都是这样默认显示的（数组名，数组值），这明显是json格式。错误代码：  confirmBatch(                {batchArr}              ).then((res) => {                this.$dialog.alert(res.message)                // window.location.reload()              }).catch((err) => {                this.$dialog.alert(err.message)              })              得到的错误结果：{"batchArr": [{"orderNo": "1323"}]}

项目：《招生宝》时间：2017年12月6日问题：做批量确认时，当所选学生订单数量为0时，disabled不可用描述：一直以为是数据判断或者属性绑定方法有错误 ，但经过各种测试都没错，百度才发现disabled是input标签专属的属性！以下摘自w3school：input标签的disabled属性，规定应该禁用input元素！