前端日常遇到的bug整理

使用封装的分页组件或element-ui分页组件删除当前页最后一条数据没有跳转到上一页显示暂无数据的问题
解决方案1:

  // 删除当前页面最后一条数据后之前数据不显示
      //pConfig是我的分页组件  table是我的列表
      let totalPage = Math.ceil(
        this.$refs.table.totaled / this.$refs.table.pConfig.pageSize
      )
      let pageNum =
        this.$refs.table.pConfig.pageNum > totalPage
          ? totalPage
          : this.$refs.table.pConfig.pageNum
      this.$refs.table.pConfig.pageNum = pageNum < 1 ? 1 : pageNum
      //手动跳转为方式一
      

解决方案2:
分页组件中v-show和v-if的使用导致
在这里插入图片描述

  • key值为index导致删除功能出问题:
    数组的key值,尽量不要用index,尤其是有删除功能的时候,这样会出问题:
    index是区分数组里的每一个子元素的,用index作为key值,在删除的时候,比如删除了第一项,但是后续index改变,为0的是其它子元素(导致删除的可能是第二个子元素),(就是说index随着数组长度改变而改变,不像id之类的不会随之改变

  • 思考问题的时候,多换个思路思考,比如安装代码失败,有版本号的话,直接复制版本号放到package.json文件里面,再install一下,不要一直死扣为什么下载不了,命令行是哪的问题,换个角度思路,能够很快的解决问题!

  • git报错 报错显示,git的一个swp后缀名文件已经存在导致的报错,简单快速解决方案是删除该交换文件:rm .git/.COMMIT_EDITMSG.swp
    参考链接:http://www.voidcn.com/article/p-nhueqgyz-bwh.html
    参考链接:https://blog.csdn.net/qq_32452623/article/details/78395832

  • input输入框在IOS手机上,由于placeholder字体小于输入框字体,导致placeholder字体偏上显示。
    解决方案:placeholder属性,设置line-height: normal; padding-top: 0.4rem(2px)。就可以。
    类似支付宝还花呗-提前还款页面。input输入框问题。
    input::-webkit-input-placeholder
    padding-top .4rem
    line-height normal
    注意:父级元素不要设置diaplay: flex属性。更不要设置align-items为baseline,显示会出问题

  • 组件注册命名出错。(首字母必须大写命名!!!)
    参考链接:
    https://cn.vuejs.org/v2/guide/components-registration.html(官方文档)
    https://blog.csdn.net/soul7y/article/details/108508657(报错解决博客)
    组件命名有两种方式:
    1.使用 kebab-case;2.使用 PascalCase(首字母大写命名)
    报错原因:组件命名时候 写成了:msgPushCenter,没有大写。
    报错内容:msgPushCenter is not PascalCase。
    改成:MsgPushCenter就好了。
    没事了多看文档,文档上好多细节都不知道!

  • a标签如果导入的href,是第三方链接,或者前后端分离的后端接口,那么download属性将不会生效。

  • 对于按钮设置为router-link包裹的,按钮禁用,router-link也不允许要跳转的话,设置pointer-events:none
    它的作用是阻止用户的点击产生任何效果。
    router-link(:class=“{ ‘stopclick’: ‘变量’/scope.row.status === 1 }”)

  • select改为多选属性,onchange事件报错
    报错内容:Invalid prop: type check failed for prop “value”. Expected String, Number, got Array。
    原因:relateuserCount在该change事件中有赋值,该属性本身是string类型,prop也是该属性。但是现在复制强制改成数组类型,但是prop并不支持prop为数组类型,prop对应值只能是string或者number。导致报错。

  • select 多选、远程搜索都有,参考官方示例。
    如果el-option是v-for循环出来的,需要指定key,并且key值具有唯一性,不能使用index,会出问题。
    如果想保留搜索结果,加reserve-keyword属性,(多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词)。

  • 接口401导致频繁跳登陆页
    可能接口未配置网关 也可能账号有问题 并非当前环境对应的账号密码 导致登陆不上去

  • 字符串前面加了个+号
    JS中一个字符串中只有数字,如果该字符串前面加了个加号,这个数值就变成了number类型。

  • 超好用的选择器
    p标签下的奇数行与偶数行
    p:nth-child(odd){} //奇数行
    p:nth-child(even){} //偶数行
    :last-child最后一个子元素
    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

  • 子传父清晰图解

在这里插入图片描述

  • 封装个垂直水平局中
    allCenter()
    position absolute
    top 50%
    left 50%
    transform: translateX(-50%) translateY(-50%)
    设置特定宽高
    width:calc(100% - 300px);

  • pre和jira上的代码有冲突
    git fetch vfe
    git checkout pre-common
    git pull
    git merge 本地分支
    git add .
    git commit -m ‘合并pre’
    git push

  • vue的is怎么用
    is
    可以直接传递一个组件
    :is
    是查找父组件中的一个赋值,然后找到相应的组件
    **

  • git 需要fork库时常用操作
    删除远程分支: git push origin --delete [branchname]
    删除本地分支:git branch -d
    合并commit

  1. rebase -i HEAD~3
    ( 删除不需要的commit。要保留第一个commit 否则会报错)
  2. git rebase —continue 然后编辑要保存的commmit 最后强制推送,每一次解决完冲突都要使用 git rebase --continue
  3. 按照VIM操作)按ESC键 再按 shift + : 然后输入wq(w是保存,q是退出) 按回车键。 保存: :wq 不保存: q!
    小提示:
    查看远程仓库地址:git remote -v

撤销上一次的git commit 把暂存放到修改
git reset --soft HEAD~把暂存放到修改
查看主库和自己的仓库地址:
git remote -vv
查看是否符合eslint规范
npm run lint
配置: 找到hosts 文件进行编辑
127.0.0.1 suuibian.vipkid-qa.com.cn
本地启动项目就用suibian.vipkid-qa.com.cn
加端口号访问

  • pre和jira上的代码有冲突
    git fetch 远程仓库别名
    git checkout pre分支名
    git pull
    git merge 本地分支
    git add .
    git commit -m ‘合并pre’
    git push

  • fork库进行开发流程
    git fetch 远程仓库别名
    git rebase 远程仓库别名 /master
    git push -f
    git checkout -b dev
    git commit -m ‘xxx’
    git push (用git 提示的提交)
    git add xxx
    git commit --amend
    git push -f 本地分支名:远程仓库分支名(强制提交到自己的远程仓库的分支)
    开发完了,需要提测。(需要过新代码检查,所以要合最新的远程仓库的master)
    git checkout master->git fetch 远程仓库别名 ->git rebase 远程仓库别名/master->git push -f(保证你的fork的库是最新的)-》git checkout dev -> git merge master->git push -f

  • 想要本地和远程之间有互动
    git init
    当在本地克隆好一个项目之后,想要本地和远程之间有互动第一步就是要初始化本地仓库。git init就是完成这件事情,创建一个空的git仓库或者重新初始化一个现有的仓库。
    执行git init之后会生成.git的目录,该目录下有branches, hooks,info,objects,refs目录和config, description,HEAD文件。

  • npm遇到的问题
    安装某个依赖安装不上 升级node版本

  • 缩小字体
    如何实现小于12px的字体效果(transform: scale( )缩小元素)

  • 不需要走eslint规范的代码
    这个报错 或者手机页面白屏可以 npm run bulid 从新打包一下 因为有的es6没有转为es5
    在这里插入图片描述

在这里插入图片描述

  • vue通过下标取值的时候有可能会出现报错。图片可以渲染出来,但是页面会报错。

原因是渲染速度的问题,刚进来的时候html先渲染,list[0].coverPath 就是undefined啊,

针对这一个解决办法,可以给父标签一个 v-if=“list[0]” ,等有这个元素后才显示,就不会报错了。

前端提测的时候,如果项目涉及new Date()的方法,一定要同步测试增加时区测试
持续更新中…

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端bug每次都比后端多可能的原因有以下几点: 1. 前端开发难度相对较低:相比于后端开发,前端开发的技术门槛相对较低。前端开发主要使用HTML、CSS和JavaScript这些基础的Web技术,相比于后端开发需要掌握的编程语言和数据库操作等更多的知识,前端开发相对容易入门。因此,在团队中,可能有更多的人从事前端开发,从而使前端bug数量相对较多。 2. 复杂的浏览器兼容性问题:前端开发需要兼顾各种不同的浏览器和平台,不同的浏览器对于同一份代码的解释和渲染可能存在差异,这就导致了在前端开发过程中需要处理各种各样的兼容性问题。而后端开发则相对独立于浏览器环境,更偏向于服务器端的逻辑处理,所以遇到的兼容性问题相对较少。 3. 客户需求和设计变更频繁:在前端开发过程中,客户的需求和设计往往比较灵活和变化频繁。由于前端开发涉及到用户界面和用户体验的呈现,所以在需求和设计的变化下往往需要频繁进行调整和修改,这就为前端引入了更多的bug的可能性。 4. 缺乏严格的自动化测试:相比于后端开发,前端开发在测试方面相对薄弱。由于前端涉及到交互和视觉效果,很多bug需要通过人工的方式进行测试和验证。而后端开发往往可以通过严格的自动化测试来检测和排查潜在的问题,减少bug的出现。 因此,前端bug每次都比后端多可能是因为前端开发相对容易入门、面临复杂的浏览器兼容性问题、客户需求和设计变更频繁以及缺乏严格的自动化测试等多个因素的综合结果。为了减少前端bug的数量,团队中可以加强前端开发人员的培训和技术提升,加强与设计和需求方的沟通和协作,加强前端自动化测试等。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值