一、实现步骤
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;
/* background-color: cadetblue; */
}
/* 标题 */
#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;
/* background-color: cadetblue; */
}
/* 标题 */
#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>