英雄联盟列表页案例总结

一、项目介绍

• 点击左侧英雄列表栏显示相应的英雄资料和背景图片

二、技术分析

• ajax
• art-template模板引擎
• 动画
• 委托事件

三、布局分析

• 左侧为英雄列表为ul中的li组成，数据为动态加载
• 右侧为一个大盒子有一大背景图，英雄头像、故事、英雄定位等信息介绍
• 有一大盒子装有动态图覆盖整个页面，默认是显示状态

四、具体实现

• index.html

<div id="box">
        <div class="nav">
            <span>英雄列表</span>
        </div>
        <div class="content">
            <!-- 人物列表 -->
            <ul class="list">

            </ul>
            <!-- 人物详情 -->
            <div class="info">
                <!-- <div class="bg"
                    style="background:url(http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg) no-repeat">
                    <div class="name" style="color:red">英雄姓名:塞拉斯</div>
                    <div class="img">
                        <img src="https://ossweb-img.qq.com/images/lol/img/champion/Sylas.png" alt="">
                    </div>
                    <p style="color:red">英雄外号：解脱者</p>
                    <div class="tags">
                        <h5 style="color:red">英雄特征：法师 刺客</h5>
                    </div>
                    <div class="story">
                        <h5>英雄故事：</h5>
                        <p>作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。
                        </p>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
    <div id="loading">
        <img src="./loading.gif" alt="">
    </div>

• index.js

<script>
        /*需求分析 
        1.页面一加载：发送ajax请求所有英雄数据，显示到左侧列表
        2.点击左侧列表,右侧盒子显示对应英雄数据
         */
        //  声明全局变量储存数据库返回的数据
        let heroArr = [];
        // 加载数据
        $.ajax({
            url: 'https://autumnfish.cn/api/lol/search',
            type: 'get',
            dataType: 'json',
            success: function (backData) {
                // console.log(backData);
                $('.list').html(template('hero_list', backData))
                heroArr = backData.data;
                // 默认触发第一个点击事件
                $('.list>li').eq(0).trigger('click');
                setTimeout(function () {
                    $('#loading').hide();
                }, 1000);
            }
        });

        //因为数据是动态加载的所以需要注册委托事件
        $('body').on('click', '.list>li', function () {
            // 获得英雄id
            let id = heroArr[$(this).index()].id;
            console.log(id);
            // ajax请求数据
            $.ajax({
                url: 'https://autumnfish.cn/api/lol/info',
                type: 'get',
                data: {
                    id: id
                },
                dataType: 'json',
                success: function (backData) {
                    console.log(backData);
                    $('.info').html(template('hero_info', backData));
                }
            });
        });
    </script>

• 英雄列表模板

	<script id="hero_list" type="text/html">
        {{each data v}}
        <li class="item"> {{v.name}} </li>
        {{/each}}
    </script>

• 英雄信息模板

 <!-- 英雄信息模板 -->
    <script id="hero_info" type="text/html">
        <div class="bg" style="background:url( {{data.img}} ) no-repeat">
            <div class="name" style="color:red">英雄姓名: {{data.name}} </div>
            <div class="img">
                <img src=" {{data.iconUrl}} " alt="">
            </div>
            <p style="color:red">英雄外号：{{data.title}} </p>
            <div class="tags">
                <h5 style="color:red">英雄特征： {{data.roles.join(' ')}} </h5>
            </div>
            <div class="story">
                <h5>英雄故事:</h5>
                <p> {{ data.story.replace('<h5>英雄故事:</h5>','') }} </p>
            </div>
        </div>
    </script>

五、总结

• 模板引擎输出 : 支持对象取值，数组取值，算术运算，逻辑运算，三元运算等

  • 当返回的数据与所需数据不一致时，可以调用数组方法、字符串方法
    

• 数组join方法

	<h5 style="color:red">英雄特征： {{data.roles.join(' ')}} </h5>

• 字符串方法replace

 <p> {{ data.story.replace('<h5>英雄故事:</h5>','') }} </p>

• ajax加载数据前加载等待动画，加载完毕后隐藏动画，而且不能马上加载所以需加一定时器
• 数据动态加载，需注册委托事件