每天都要开心哦!!!
1.Uncaught(捕获不到) ReferenceError(引用错误)
问题:
access(访问), initialization(初始化), 未捕获的引用错误, 在初始化之前访问不到”a”.
<script>
consloe.log(a);
let a;
a = 1;
</script>
解决:
在变量声明的时候就赋值, 先声明在调用; 尽量的使用ES6新增的关键字let, 避免var的变量提升的问题.
2.Write after end (结束了还在执行)
问题:
因为当if条件成立之后已经res.end了, 已经结束了; 但是这样写下面的res.end(‘hello world’)依然会执行, 那么服务器就会”死”掉.
解决:
(1) 可以将res.end('hello world')使用else语句包含起来.
(2) 在if判断条件成立之后, 使用return结束即可.
3.当前监听的端口已被占用
问题:
已经有启动了一个终端, 又启动同一个端口的终端.
解决:
将所有的终端全部关闭, 重新启动服务.
4.数据的隐式转换
问题:
当有 "+" 号的前后有字符串数据类型的话, 那么就会触发隐式转换; 结果输出的是[object object]
解决:
将 "+" 变成 "," 号连接即可.
5.当前模块没有被找到
问题:
使用multer模块, 但是执行的时候, 被告知multer没有被定义.
解决:
使用npm命令下载multer模块, 使用require方法导入即可.
6.变量名没有被定义
问题:
因为一时疏忽, 将变量名写错.
解决:
找到错误的位置, 将出错的变量名修改正确即可.
7.跨域
问题:
当前访问的协议和端口号都相同, 但是域名不相同.
解决:
(1)给需要的请求加上响应头res.setHeader("Access-Control-Allow-Origin", "*");
(2)npm i cors包, require应用模块, 变量名.use(cors())即可.
8.传入后端的数据格式不对
问题:
终端告诉我们找到了一个不知道的符号 " ] " 在JSON中的第48行.
解决:
看完全部的报错信息, 发现下面提示的所有文件中都没有自己写的文件; 所以顺藤摸瓜, 大概率可能是自己传入的数据写错了.
所以找到传入的参数, 修改正确即可.
9.response.send方法只能执行一次
问题:
node编写路由的时候, 当用户调用"/api/getBooks"接口的时候, 会触发后面的回调; 但是send方法被执行了多次, 导致报错.
//编写路由
app.get('/api/getBooks', (req, res) => {
console.log('当前的参数是', req.query);
//对象的结构赋值
let { id } = req.query;
//变量接收数据
const obj = {
"status": 200,
"msg": "获取图书列表成功",
"data": [
{
"id": 1,
"bookname": "西游记",
"author": "吴承恩",
"publisher": "北京图书出版社"
},
{
"id": 2,
"bookname": "红楼梦",
"author": "曹雪芹",
"publisher": "上海图书出版社"
},
{
"id": 3,
"bookname": "三国演义",
"author": "罗贯中",
"publisher": "北京图书出版社"
}
]
};
//错误的写法:
//只要当前的id值符合条件, 就会输出一次send
// obj.data.findIndex(item => {
// if (item.id == id) {
// res.send(item);
// } else {
// res.send(obj);
// }
// });
//正确的写法:
//遍历数据, 查找符合的id值
const index = obj.data.findIndex(item => item.id == id);
//如果能找到就返回下标值对应的数据
if (index > -1) return res.send(obj.data[index]);
//否则返回全部的数据
res.send(obj.data);
解决:
使用上述的正确写法, 方法有很多, 只是其中的一种.
10.后端的数据不是字符串类型
问题
解决:
它的提示是:'捕获不到的语法错误, 不明白的标识符'
要记得, 后端传回来的数据一定要是字符串的格式, 正确方法之一如下:
//定义路由
app.get('/getJSONP', (req, res)) => {
const data = JSON.stringify({arr: [112, 456], age: 20});
res.send(`fn(${data})`);
}
11.后端的代码问题
解决:
它报错的问题是说fn这个函数没有被定义, 所以我们就找此fn有没有被定义; 但是后端的数据最好是一个字符串的形式.
res.send(`fn(data)`);
12.函数的返回值问题, 无法调用then方法
问题
解决:
它的报错信息就是undefined无法调用then方法. 所以当我们在调用函数的时候, 一定要关注函数的参数,返回值和作用.
function sleep(time) {
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, time);
})
return p;
}
sleep(2000).then(() => {
console.log('后续操作');
});
console.log(2);
13.webpack配置文件属性名写错
问题
解决:
问题就是配置文件的属性应该是output, 但是却写成了outout了. 配置文件属性名是一个都不能写错的, 写错就会报错.
14.vue中template中出现data以外的属性
问题
解决:
删除或者在data中定义一下就可以了.
15.vue中属性用法错误
问题
解决:
因为在插值表达式中使用data中的数据, 这种写法已经被废除了; 建议使用v-bind指令.
<img v-bind:src = "imgUrl" alt = ""> 或者 <img :src = "imgUrl">
16.v-for中key值重复
问题
解决:
既然使用框架, 就必须遵守规则; 要求是key值是不可以重复的, 所以想办法设置一个不重复的即可.
17.vue中template没有设置根元素
问题
解决:
要么删除span, 要么加上根元素包裹起来.
18.同一个ul中使用v-for在两个li中使用, 出现相同的key值
问题
解决:
报错信息提示到, 有相同的key出现; "1"这个key值重复了.
虽然是两个li互不干扰, 但是实在同一个ul中; 并且id值有相同的部分, 所以报错.
我们就可以把两个li拆开, 再使用另外一个ul将下面的li包裹, 就不会出错了.
19.在v-for中定义了一个变量, 但是没有使用
问题
解决:
这个错误不属于语法层面的报错, 只是vue框架觉得你定义了变量就必须使用; 用一下就可以了.
20.vue计算属性没有设置set()方法的情况下, 修改了计算属性
问题
解决:
使用计算属性的完整写法, 设置set()方法.
21.vue中父传子props中属性名写错
问题
解决:
浏览器报错的信息是"你忘记传入必传属性 "obj"
然后就可以根据报错核实一下, 可能会报错的地方
22.vue中props校验时, type类型出错
问题
解决:
报错信息是 "类型检测失败, 希望得到的是一个数组, 但是实际得到的是一个对象"
根据报错的地方修改type属性值
23.vue中, 视图更新陷入无限循环, 发出警告
问题
解决:
报错信息说 "在组件渲染函数中，你可能会有一个无限更新循环"
因为每次保存一次都会执行一次reverse, 数据更新视图也会更新; 一直这样就陷入一个无限循环
24.vue中一个属性在data中出现了, computed中又出现了
问题
解决:
报错提示是 "isAll已经在计算属性中被定义了"
所以去掉data中的isAll即可.
25.vuex配置项中的方法名和组件调用中时不不一样
问题
解决:
报错信息是, mutation中没有 "modName111"这个方法名
26.vuex中key值重复
问题
解决
报错信息是 "getter中的totalBooksprice重复了"
可以在modules配置项中设置namespaced: true
