1. Pasos de implementación
1. Diseño estático
1.1 Escriba la estructura y el estilo de página deseados
2. Datos de solicitud Ajax 2.1 Importar archivo JQ 2.2 Establecer método de solicitud, dirección, parámetros, información de devolución 2.3 Plantilla de importación 2.4 Renderizar
3. renderizado de plantillas de arte
3.1 introducir archivos
3.2 definir plantillas
2. Preparación previa
Descarga de archivo JQ: https://jquery.com/
art-template descarga del motor de plantilla
API Netease Cloud: http://musicapi.leanapp.cn/
Tres, diseño estático
Simplemente escriba estáticamente de acuerdo con sus propias necesidades, aquí como referencia
<!-- 版心 -->
<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>
efecto
Cuatro, datos de solicitud de ajax
Nota: Necesita importar archivos 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>
El documento en la nube nety establece que el método de solicitud puede ser get o post. Aquí, se usa get.
La dirección es (Netyin Cloud Address) http://musicapi.leanapp.cn/+interface, busque la interfaz correspondiente para cualquier función que necesite y consulte la API.
Puede imprimir el formato de datos que obtenga
Cinco, renderizado de plantilla de arte
Nota: es necesario introducir el archivo de plantilla de arte
efecto
para resumir:
1. Escriba el estilo con el que está satisfecho y luego excave hoyos para introducir datos en los que necesita introducir datos
2. Al empalmar datos, preste atención a qué nivel de los datos de bucle está en la matriz, aquí está el segundo nivel, si es uno La capa puede ser directamente res.
Adjunte el código total:
<!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>