那些年,遇到过的bug,你肯定也会遇到过吧!

403 阅读4分钟
只有在苦难中,才能认识自我.---希尔蒂

bug1:文件路径书写错误:代码如图

const fs = require('fs')
// 调用api
try {
  let rs = fs.readFileSync('./22222js', 'utf-8')
} catch (err) {
  console.log(err)// 就是读出来的内容
}

报的错误: image.png

bug2.因为直接写的(03.读文件) 没有加前缀node

正确写法-> node 03.读文件

image.png

bug3:端口号重复开启:代码如图

image.png

解决:修改端口号再次就可实现'多开'

bug4:对象数据多写了个,例如:{ a: 1, b: 2,} :代码如图

image.png

bug5:什么原因导致了跨域错误:代码如图

image.png

分析原因:

跨域错误:不同源ajax请求===>报跨域的错误 发送ajax请求的那个页面的地址 和 ajax接口地址 不在同一个域中

image.png

解决:可以下载一个包:npm i cors

再CV两行代码即可: (当做express中的中间件,注意代码应该放在顶部)

var cors = require('cors')

app.use(cors())

bug6:什么原因导致:-->由于没有进行JSON.stringify()格式转换代码如图:

image.png

方法1:直接将 req.body--> res.send(req.body)写到send里

(推荐)方法2:进行格式转换:const res1 = JSON.stringify((req.body)) res.send(req.body)

bug7:什么原因导致:再次回顾跨域错误的说明:

-->由于浏览器会检测是否有特殊的请求头,不安全就会报错 image.png

方案1:通过在被请求的路由中设置header头,可以实现跨域。

  • 这种方案无需客户端作出任何变化(客户端不用改代码),就当跨域问题不存在一样。
  • 服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头
    app.get('/get', (req, res) => {
      // * 表示允许任何域名来访问
      res.setHeader('Access-Control-Allow-Origin', '*')
      // 允许指定源访问
      // res.setHeader('Access-Control-Allow-Origin', 'http://www.xxx.com')
      res.send(Date.now().toString())
})

(推荐)方案2:安装一个包:cors

  1. 它是一个npm包,要单独下载使用 npm 包 cors
    npm i cors
  2. 当做express中的中间件,注意代码应该放在顶部
        var cors = require('cors')
        app.use(cors())

bug8:入口文件写错

entry: './src/js/main.js', // 入口文件 入口文件写错

报错: image.png 报错的小黑窗: image.png 改正后执行(小黑窗): image.png

bug9:没有下载loader 包

错误原因:没有下载loader 包

image.png

bug10:v-for="(value, idx)in obj" :key="idx"

错误: v-for="(value, idx)in obj" :key="idx">

正确: v-for="(value, idx) in obj" :key="idx">

image.png

bug11:计算属性sum的值被修改了,但是它没有setter,就报错了,应该set()一下

image.png

bug12:vue 过滤器

image.png

bug13.子传父--->自定义事件的函数名书写错误(-想好了再写-)

报错原因及个人分析:

image.png

解决:修改函数名,此处个人理解不单单是函数名书写错误这个"马虎问题",更多得是没吃透这个子传父组件原理.除了勤练习别无他法

image.png

bug14.父传子--->props接受传递数据类型不符

image.png 例如:

应在props:{ aaa:{ type:Array }, bbb:{ type:number }, ccc:{ type:string requried:true } }

bug15.路由守卫

此处无需跳转 image.png 修改:->应当为空

image.png

bug16.vuex-mutations

错误:此处函数名写错

image.png

17.计算属性sum值被修改,找不到setter

解决办法就是:写计算属性的完整写法

image.png

18.报这个错误吧这个文件删掉重新启动

image.png

19.# 使用ng命令时提示无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\ng.ps1*

如下图所示: image.png 解决方法:1.右键开始菜单找到Windos PowerShell(管理员),如下图所示:

image.png

2.打开之后执行set-ExecutionPolicy RemoteSigned命令,输入A即可,如下图所示:

image.png 3、再次执行ng命令即可

20.当你遇到Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘tr’. (" //无法绑定到“ngforof”,因为它不是“tr”的已知属性。

解决方法:找到你对应的moudles, 当前错误原因是没有绑定ngforof,在@ngmodule()中添加browsermodule到imports:[],如果它是根模块(appmodule),则为commonmodule。简而言之,就是根部app.module有没有导入这个基础模块,检查一下

image.png

解决完成:此时再运行

image.png

21.当你遇到使用ng-zorro中的走马灯无法展示的时候

image.png

解决方法:引入 import {CommonModule} from '@angular/common';

解决完成:

image.png > 附上一句如果连背景盒子都无法显示就直接给其取一个类名然后赋予高度宽度即可,不要用他原本的类名

22.无论是使用Sourcetree还是自己在外面文件夹clone代码提交都失败等等

image.png

将C:\Windows\System32\drivers\etc中的hosts文件添加140.82.114.3 github.com

添加失败就拉到桌面添加在复制进去

23.angular修改form表单中的input值

 this.validateForm.get('value')?.setValue(null)