美文网首页
项目中遇到的问题

项目中遇到的问题

作者: 我就是666666 | 来源:发表于2017-11-13 19:32 被阅读0次
    时间:2017年09月25日
    项目:《金银屋官网》
    问题:表单样式在 iOS 手机上不兼容
    描述: 按钮和 input 输入框在 iOS 上有默认样式,没有去掉
    
    时间:2017年09月25日
    项目:《金银屋官网》
    问题:代码意图和逻辑没理清楚
    
    (function bottonm(){
        if($(document).height()<$(window).height()){
            $('.model-close').css({'position':'fixed','bottom':'20px'});
            $(document).height($(window).height()+'px');
        }
    })();
    
    $('.model-close') 是关闭弹出框表单的按钮,不会直接显示在页面,这段代码在 js 文件加载完就立即执行,没有任何意义,反而导致 JS 报错
    
    时间:2017年09月25日
    项目:《金银屋官网》
    问题:不注意代码风格,没有遵守编码规范;有的代码加了分号有的没加;不该缩进的地方有缩进;同时使用了双引号和单引号;
    
    问题代码 1:
    
    success: function(resp) {
      if (resp.retcode === 2000000) {
        successshow.show()
        event.stopPropagation()
      } else {
        util.Alert('提示', resp.msg)
      }
    },
    error:function(xhr,type) {
      failshow.show()
      event.stopPropagation();
    }
    
    问题代码 2 (同时使用了双引号和单引号):
    $("#applycode").on('keyup',function(e){
    
    时间:2017年09月25日
    项目:《金银屋官网》
    问题:提交信息写错,deploy 写成 delply
    
    commit 018461f1029d44543e69ce9f902d77170b1939e0
    Author: MOMO-0902 <329053928@qq.com>
    Date:   Mon Sep 25 06:54:29 2017 +0800
    
        修改delply以及部分样式
    
    时间:2017年09月25日
    项目:《金银屋官网》
    问题:移动端line-height也不能实现准确垂直居中,字体整体靠上
    描述:移动端与pc端解析方式不一样,导致line-height出现偏差
    解决办法:使用display:table解决问题
    
    问题2:使用display:table后本来不一样的两个元素变的一样高
    描述:这是因为display:table是将子元素变成单元格一样的显示方式,所以是等高的
    解决办法:给高度较小的盒子外边套一层,再使用vertical-align:center 实现垂直居中
    //父元素
    .step{
      display: table;
      height: 20px;
    }
    //子元素1显示数字
    .stepnum {
      display:table-cell;
      vertical-align: middle;
    }
    //子元素2显示文字
    .stepword {
      display:table-cell;
      vertical-align: middle;
      font-size: 14px;
    }
    //显示数字,是stpmnum的子元素
    .number {
      font-size: 12px;
      height: 16px;
    }
    
    
    时间:2017年09月26日
    项目:《金银屋官网》
    问题:未选择房产和金额的时候点击提交按钮,报错 Cannot read property 'value' of undefined
    
    let houseoptions = $(".select-house option").not(function(){ return !this.selected })
    var house = houseoptions[0].value
    
    这段代码是想获取 select选中的option,然后再获取 option的value值,给select设置没有默认选中项,所以当没有手动选择一项就点提交,option的value值也是没有的
    
    解决办法:使用select.val()来获取select选中项的value值
    
    时间:2017年09月26日
    项目:《金银屋官网》
    问题:未正确分清select option的value和text值
    描述:使用select.val()获取 选中项的value值
          option的value值是要发送到服务器的值
          select.text()获取所有option的值
          option的text值是option的显示内容
    
    
    
    时间:2017年09月26日
    项目:9.14-9.19一周学习分享
    问题:使用click与tap事件报错
    描述:由于zepto的touch.js版本过低,导致引入后页面发生事件报错
    
    
    时间:2017年09月26日
    项目:9.14-9.19一周学习分享
    问题1:写ajax格式出错
    描述:$.ajax({}) 写成了 $(ajax).({})
         $(“html元素”),$相当于Jquery,意思是选取,查询,或创建页面中的一个或者一类html元素,并对它们进行操作
         $.ajax({}) $.each({}) $.map({})  $作为功能函数的前缀,意为调用(.)jquery对象($)的方法(ajax), $(ajax)是利用选择器获取元素,所以并不能在后边加"."
    
    问题2:使用ajax传送数据与接收参数类型搞错
    描述:向服务器传送数据应该是data,不是dataType,dataType是期待服务器返回类型,contentType是发送到服务器类型一般为"application/json"
    $.ajax({
      url: "http://www.baidu.com",
      data: {"username":username, "password":password},
      dataType: "json",
      contentType: "application/json",
      timeout: 3000,
      content: "$("body"),
      success: function() {},
      error: function() {}
      })
    
    时间:2017年09月27日
    项目:《wiki》写笔记
    问题:第二个##没有h2的样式
    描述:没有给h2下边加一空行,导致h2跟正文样式一样
    
    
    问题:网页文档加载后的事件不执行
    时间:2017.09
    描述:第一次写的时候丢了function,这段代码的意思是当页面加载完成后执行此函数里边的函数,所以function(){}不能丢
    解决办法:
    $(document).ready(function(){
    function Func(){}
    })
    
    
    问题:使用$('option[selected]')不能获取slection选中的option值
    描述:zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性
    解决办法:使用$('option').not(function(){ return !this.selected })
    比如:jq:$this.find('option[selected]').attr('data-v') * 1
    zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1
    但是获取有select中含有disabled属性的元素可以用$this.find("option:not(:disabled)")因为disabled是标准属性
    
    时间:2017年10月08日
    项目:《钱隆归来》
    问题:使用display: inline-block后一行元素之间存在间距,导致给定宽度后一行占不下挤到下一行。
    描述:元素间留白间距出现的原因是标签段之间的空格,因此去掉html中的空格就可以去除间距。
    解决办法:
    <div class="investTabs tac">
      <span class="investUser dib">用户</span
      ><span class="investMoney dib">购买金额(元)</span
      ><span class="investTime dib">时间</span>
    </div>
    
    
    时间:2017年10月08日
    项目:《钱隆归来》
    问题:使用table布局后,再使用border:0只能去除表格并不能去除表格以及单元格的边框
    解决办法:给table加 cellspacing="0" cellpadding="0"
    
    <table class="investTabs" border="0" cellspacing="0" cellpadding="0">
    
    
    时间:2017年10月13日
    项目:《钱隆归来》
    问题:在写计算属性的时候提示该属性已被定义
    描述:先在data里定义后再写的计算机属性,计算属性是被处理经过运算后的值,可以直接用在页面中显示中,不能先定义
    computed: {
      rateWidth: function() {
        return parseInt(`${this.data.sale_rate*100}%`)
      }
    },
    
    
    时间:2017年10月13日
    项目:《钱隆归来》
    问题:为元素写行内样式时不生效
    描述:未用vue重构前,行内样式写法是<div style="width: 8px"></div>
          用vue重构后,此行内样式的值为计算属性中处理后的值,不能用html的文本插值来显示
    解决办法:为元素绑定自定义样式。
    1.直接引用单个的属性值
    //单位要用引号引起来
    <div :style = {width: rateWidth + '%'}></div>
    <div :style = {width: rateWidth + 'px'}></div>
    <div :style = {width: rateWidth + 'rem'}></div>
    2.绑定一个对象样式
    //此处注意样式写法,可以用驼峰也可以用短横线分隔,但短横线分隔要用引号引起来
    <div :style = "styleObject"></div>
    data: {
      styleObject: {
        'background-color': '#fff';
        fontSize: '12px'
      }
    }
    
    问题: 验证码倒计时操作Props报错
    项目:《钱隆归来》
    描述: vue中父组件如果使用props向子组件传递数据后,一般不对props值作操作或改变,因为虽然父组件向子组件传递是单向数据流,但如果Props是一个数组或者对象时,共同引用同一个地址,在子组件改变props值会影响父组件的状态
    解决办法: 在data中定义一个局部变量,用Props的值初始化它,操作这个变量,然后再在页面中显示出来
    ### js:
    
    props: [
      'btnname',
    ],
    data (){
      return {
        showName: this.btnname,
      }
    },
    function() {
      this.showName = `${time}秒后重新获取短信验证码`
    }
    
    ### html :
    
    <button>{showName}</button>
    
    
    问题: vue路由传递参数时传不过去
    项目:《钱隆归来》
    描述:使用<router-link :to="{ path: '/signup', params: {userPhone: myphone}}"><u>快速注册</u></router-link>传递参数错误,应该给router一个name,链接到命名路由,接收params参数,这是使用vue-router传递参数的第一种办法
    解决办法:
    //router.js
    {
      path: '/login',
      name: 'login',
      component: Login,
    }
    //login.tpl 实现从登录页跳转到注册页把手机号传过去,此方法要把 to 写成 :to
    <router-link :to="{ name: 'signup', params: {userPhone: myphone}}"><u>快速注册</u></router-link>
    
    //signup.tpl 可直接显示此参数
    {{$router.params}}
    
    
    问题:注册页to属性来接收路由传递的参数后未能正常显示在组件中
    项目:《钱隆归来》
    描述:因注册页是引用input组件,所以要将路由传递的参数通过props传到input子组件中,而在input子组件中使用value值接收v-model传递的参数,所以要将value显示赋值给子组件中input中显示的初始值myvalue.(myvalue是经过运算的props -- value值)
    解决办法:
    //signup.js
    props: [
      'value',
    ]
    data() {
      return {
        myvalue: this.value,
      }
    }
    
    问题:使用url传递参数的办法来传递路由时,跳转的路由不对
    项目:《钱隆归来》
    描述:路由中定义参数格式错误,写成了
    {
      path: '/signup: phone',
      component: Login
    }
    解决办法: 路径中参数前应该有"/"
    {
      path: '/signup/:phone',
      component: Login,
    }
    此为使用路由传递参数的第二种方法,登录页处a标签应为
    <router-link to="/signup/18713575939">快速注册</router-link>
    
    
    问题: 直接在<router-link> :to 属性中使用url传递参数时,没有传递变量值而是传递变量名了
    项目:《钱隆归来》
    描述:使用<router-link :to="/signup/myphone"></router-link>,:to后边传递的属性值默认传成了字符串,显示的是"/signup/myphone"
    解决办法:属性值用"+"连接
    <router-link to="'signup/'+myphone"></router-link>
    
    
    问题: 使用url传递参数时,如果省略参数则找不到正确的路由
    项目:《钱隆归来》
    描述:定义url时没有在参数后边加?,代表此参数是可省的
    解决办法:
    {
      path: '/login/:phone?',
      component: Login,
    }
    
    
    问题:checkbox不能实现正确切换
    项目:《钱隆归来》
    描述:checkbox要实现的功能是选中背景绿色,未选中无背景色,所以我
    1.在checkbox外加了一个div,使用v-on:class="{active: isActive}"为div加背景图(选中状态时),控制背景图的显示隐藏,使用v-model="toggle"来控制是否选中
    2.把chekbox隐藏
    3.可以实现背景图的显示隐藏,但并没有绑定checkbox.
    4.所以应为checkbox添加v-model="toggle"来控制是否选中才对。
    5.为checkbox添加@click事件来切换状态
    分析:
    6.但因为checkbox这时已隐藏并不能实现成功点击click,而且checkbox初始状态为false
    7.checkbox状态切换就是v-model的值,v-model初始值为true才可以实现加载时就选中,而div的背景图也要为true才显示
    解决办法:
    为checkbox和v-model绑定同一个值,实现选中就显示,不选中就隐藏
    而click事件就可以绑定在div上了,其实实现的只是简单切换功能。
    
    //chekbox
    <div :class="{active: isActive}" @click="isChecked">
      <input type="checkbox" v-model="isActive">
    </div>
    //js
    data() {
      return {
        isActive: true,
      }
    },
    methods: {
      isChecked() {
        this.isActive = !this.isActive
      }
    }
    
    问题:登录页注册页设置密码页等页面进行相互跳转时,如果不带参数,报错“Uncaught TypeError: Cannot read property 'length' of undefined”
    项目:《钱隆归来》
    描述:因为在引用的子组件中使用了"length"属性进行了判断,当跳转页面后如果没带参数的话,那么input的value值(路由带过来的)就是undefined,所以应该加上判断,当value值不是undefined时再使用length属性。
    解决办法:1.使用时直接判断当this.myvalue值不为undefined,并且长度大于0时,再显示
    if(this.myvalue !== undefined && this.myvalue.length > 0) {
      this.deltoshow = true;
    }
    
    2.不使用this.value.length来判断,直接把定义文本框输入文本的长度,如果是undefined就赋值为o
    data() {
      return {
        valueLength: this.value === undefined ? 0: this.value.length
      }
    }  
    问题2:此操作还是有问题,因为 valueLength 赋值为0后valueLength不能改变一直是0,所以图标一直不显示,应该要使valueLength的值实时改变,刚开始想要监听valueLength的值,但没起作用
    描述:watch是给变化的数据作监听,但valueLength并不是变化的数据,而myvalue才是变化的数据
    watch: {
      valueLength(value) {
        this.valueLength = this.value.length
      }
    }
    解决办法:监听myvalue的值,当myvalue值发生改变时,去改变valueLength的值
    watch: {
      myvalue(val) {
        this.$emit('input', val)
        this.valueLength = this.myvalue.length
      }
    }
    
    
    问题:所有文本框type都变成了password
    项目:《钱隆归来》
    描述:判断inut的type时如果是password就显示可见密码图标和删除图标,但把"type == password"定成了"type = password"相当于赋值
    
    问题: markdown不能正确解析
    描述: 在<>包含的属性两边没有加``,在markdown中,使用 "&"、" <"、 ">"会被文本默认为html语句,导致尖括号本身及尖括号中的内容都不会被显示
    解决办法:
    1.使用``代码来标记行内代码
    @ font-face {  
       ` font-family: <YourWebFontName>`;   
        `src: <source>[<format>][,<source>[<format>]] *` ;   
        `[font-weight:<weight>]`;   
        `[font-style: <style>]`;  
    }
    2、使用``来包含<>
    @ font-face {  
        font-family: `<YourWebFontName>`;   
        src: `<source>` [<format>][,`<source>` [`<format>`]] * ;   
        [font-weight: `<weight>`];   
        [font-style: `<style>`];  
    }
    3.使用代码区块```code```来包含这段代码&lt;activity&gt;
    
    ```@font-face {  
        font-family: <YourWebFontName>;   
        src: <source> [<format>][,<source> [<format>]] * ;   
        [font-weight: <weight>];   
        [font-style: <style>];  
    }```
    
    4.使用转义字符,使用"&lt;"代替"<",使用"&gt;"来替代">"
    @font-face {  
        font-family: &lt;YourWebFontName&gt;;   
        src: &lt;source&gt;[&lt;format&gt;][,&lt;source&gt; [&lt;format&gt;]] * ;   
        [font-weight: &lt;weight&gt;>];   
        [font-style: &lt;style&gt;];  
    }
    
    
    问题:使用git rebase 时报错,再使用git checkout branch也报错error: cannot stat filename: Permission denied
    ,说没有权限
    描述:可能在windows下试图应用一个补丁的时候阻止git修改文件,也可能是编辑器锁定了该文件
    解决办法:将编辑器,命令行全部重启
    

    相关文章

      网友评论

          本文标题:项目中遇到的问题

          本文链接:https://www.haomeiwen.com/subject/adqtvxtx.html