一、实现步骤
1.静态布局
1.1写出想要的页面架构和样式
2.ajax请求数据
2.1引入JQ文件
2.2设置请求方法、地址、参数、返回信息
2.3引入模板
2.4渲染
3.art-template渲染
3.1引入文件
3.2定义模板
二、事前准备
JQ文件下载：https://jquery.com/
art-template模板引擎下载
网抑云API:http://musicapi.leanapp.cn/
三、静态布局
静态根据自己需求写就好，这里给参考
<!-- 版心 -->
<div id="typearea">
<!-- 标题 -->
<h1>热门歌手</h1>
<!-- 分割线 -->
<div id="separate"></div>
<ul>
<!-- 图片与姓名 -->
<li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
<li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
<li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
<li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
<li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
</ul>
</div>
<style>
* {
margin: 0;
padding: 0;
}
#typearea {
margin: 0 auto;
width: 1200px;
}
#typearea h1 {
font-weight: 400;
}
#typearea #separate {
border-top: 3px solid #c20c0c;
}
#typearea ul {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
#typearea ul li {
box-sizing: border-box;
padding-right: 10px;
padding-top: 10px;
flex: 20%;
list-style: none;
}
#typearea ul li img {
width: 100%;
border: 1px solid #d2d2d0;
}
</style>
效果
四、ajax请求数据
注意：需要引入JQ文件
<script>
$.ajax({
// type: 'get',//请求方式,默认get可以不写
url: 'http://musicapi.leanapp.cn/toplist/artist', //地址
// data: { },//有就写,没有忽略
//dataType自动识别服务端返回的数据,默认JSON,可不写
//success:请求成功返回的信息
//res:返回的数据参数
success: function (res) {
// template('art-template模板的id', 数据)，作用：把数据拼接到模板
const ranking = template('template', res.list)
$('ul').html(ranking); //渲染到ul
// console.log(ranking); //出现each后的数据
// console.log(res); //所有数据
// console.log(res.list.artists[0].img1v1Url); //试着打印可以获取图片地址\名字
}
})
</script>
网抑云文档写着请求方式get、post都可以，这里用get。
地址为（网抑云地址）http://musicapi.leanapp.cn/+接口，需要什么功能就找对应的接口，参照API。
拿到的数据格式,可以打印试试
五、art-template渲染
注意：需要引入art-template文件
效果
总结:
1.样式自己写出满意的即可,然后在需要引入数据的地方挖坑引入数据
2.拼接数据时候,要注意循环数据在数组的第几层,这里示例的是第二层,如果是一层的可以直接res.
附上总代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/jquery-1.12.2.js"></script>
<script src="./lib/template-web.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#typearea {
margin: 0 auto;
width: 1200px;
}
#typearea h1 {
font-weight: 400;
}
#typearea #separate {
border-top: 3px solid #c20c0c;
}
#typearea ul {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
#typearea ul li {
box-sizing: border-box;
padding-right: 10px;
padding-top: 10px;
flex: 20%;
list-style: none;
}
#typearea ul li img {
width: 100%;
border: 1px solid #d2d2d0;
}
</style>
<!-- 模板引擎 -->
<!-- 必须写id,ajax那个步骤引用,type选写,主要高亮效果 -->
<script id="template" type="text/html">
<!-- each:循环 -->
<!-- artists:循环的数组 -->
<!-- item相当于$value的别名 -->
<!-- $index:数组的下标 $value表示循环的对象 -->
{ { each artists item index}}
<!-- 这里把刚刚写静态的那步搬过来,之前的静态就注释掉 -->
<!-- 需要动态变更数据的就用花括号包裹,正常引用数据即可 -->
<!-- 这里是数组包含对象,用.语法 -->
<li><img src="{ {item.img1v1Url}}" alt=""><span>{ { item.name}}</span></li>
{ { /each}}
<!-- 必须要结尾 -->
</script>
</head>
<body>
<!-- 版心 -->
<div id="typearea">
<!-- 标题 -->
<h1>热门歌手</h1>
<!-- 分割线 -->
<div id="separate"></div>
<ul>
<!-- 图片与姓名 -->
<!-- <li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
<li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
<li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
<li><img src="./lib/3.jpg" alt=""><span>山竹</span></li>
<li><img src="./lib/3.jpg" alt=""><span>山竹</span></li> -->
</ul>
</div>
<script>
$.ajax({
// type: 'get',//请求方式,默认get可以不写
url: 'http://musicapi.leanapp.cn/toplist/artist', //地址
// data: { },//有就写,没有忽略
//dataType自动识别服务端返回的数据,默认JSON,可不写
//success:请求成功返回的信息
//res:返回的数据参数
success: function (res) {
// template('模板的id', 数据)
const ranking = template('template', res.list)
$('ul').html(ranking); //渲染到ul
// console.log(ranking); //出现each后的数据
console.log(res); //所有数据
// console.log(res.list.artists[0].img1v1Url); //试着打印可以获取图片地址\名字
}
})
</script>
</body>
</html>
