net::ERR_FILE_NOT_FOUND的意思是:网:错误_文件_没有找到,也就是说绑定数据源文件有问题。这时要检查是否是拼写错误、路径错误,或者是逻辑问题。
我的控制台报错如下:
我的页面显示如下:
从这里可以看出,大致思路没问题,只是数据问题。
首先怀疑是否没有获取到数据,在绑定数据的函数中console.log(data)
发现控制台输出了数据(如下图),证明路径和拼写无误,那么就是逻辑问题了。
此时代码为:
再从头顺一遍逻辑:
1.获取要绑定数据的位置
2.定义一个实名函数bindData,传递实参(lesson.online),lesson为对象,对象中有个数组online。lesson中不止有online一个数组
3.将bindData的返回值给到页面中。
4.编辑bindData,形参为data。定义空字符串str用来字符串拼接。最后返回str。
此时发现data为一个数组,用data直接点不能直接获得相应的属性,所以需要循环。
更改后的代码为:
function bindData(data){
console.log(data)
//定义空字符串
var str = "";
//字符串拼接
//同步课程
str += `<li> <div class="top">
<span class="rj">${data.cont}</span>
<img src="${data.src}" alt="" class="m">
<p>${data.isFree ? `${data.num}人在学习`:` <span>${data.num}人已考试</span><span>${data.time}</span>`}</p>
</div>
<div class="bottom">
<div class="left">
${data.isFree ? `<span>${data.title}</span>
<span class="time">${data.time}课时</span>`:` <span>${data.title}</span>`}
</div>
<div class="right">免费学习</div>
</div></li>`
return str;
}
lesson.online数据为:
// 课程区域数据
var lesson = {
online: [
{
title: '行政管理专业班1',
src: './img/index/banner1.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100
}, {
title: '行政管理专业班2',
src: './img/index/banner2.png',
cont: '沪教版',
time: 23,
isFree: true,
num: 1100
}, {
title: '行政管理专业班3',
src: './img/index/banner3.png',
cont: '人教版',
time: 23,
isFree: true,
num: 1100
}, {
title: '行政管理专业班4',
src: './img/index/banner4.png',
cont: '人教版',
time: 22,
isFree: true,
num: 1100
}, {
title: '行政管理专业班5',
src: './img/index/banner5.png',
cont: '沪教版',
time: 33,
isFree: true,
num: 1100
}, {
title: '行政管理专业班7',
src: './img/index/banner7.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100
}, {
title: '行政管理专业班6',
src: './img/index/banner6.png',
cont: '人教版',
time: 33,
isFree: true,
num: 1100
}, {
title: '行政管理专业班8',
src: './img/index/banner8.png',
cont: '人教版',
time: 44,
isFree: true,
num: 1100
}]
}
版权归原作者 三月.' 所有, 如有侵权,请联系我们删除。