一、實作步驟
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/137887.html
標籤：其他