仿大麦音乐网目录案例(artTemplate模板引擎)

文章目录

• 前言
• 操作步骤
  • 1.引入库
  • 2.操作内容
• 总结

---

前言：在大麦音乐网目录中，我们选择城市或者音乐类型，页面上会跳出相应的界面。

---

提示：以下是本篇文章正文内容，下面案例可供参考

操作步骤

1.引入库（引入jq和模板引擎库）

  <script src="./js/artTemplate.js"></script>//引入模板引擎库
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>//引入jq库

2. 操作内容

 ①页面布局

<ul class="city">
        <li>城市：</li>
        <!-- 使用script标签，定义模板，注意：type属性值是text/html -->
        <script id="city" type="text/html">
            {{each $data item index}}
            {{if index===0}}
            <li class="active">{{item.city}}</li>
            {{else}}
            <li>{{item.city}}</li>
            {{/if}}
            {{/each}}
        </script>
    </ul>
    <ul class="type">
        <li>分类：</li>
        <script id="type" type="text/html">
            {{each $data item index}}
            {{if index===0}}
            <li class="active">{{item.type}}</li>
            {{else}}
            <li>{{item.type}}</li>
            {{/if}}
            {{/each}}
        </script>
    </ul>
    <div class="show">

    </div>
 <!-- 模板必须要用script标签定义，type属性值必须是text/htm，模板必须要设置id属性，
        id属性一定要确保唯一。模板里面的语法，需要记一下。
        模板必须要写在插值表达式中，{{}}就是插值表达式，each表示循环，if表示判断，$data表示传给模板的数据 -->

 ②jq操作

  // 请求城市信息
        $.get('./data/city.json', res => {
            // template()是artTemplate模板引擎提供的方法，
            // 该方法需要传两个参数，分别是：模板的id 和 传给模板的一份数据
            // 注意：在模板中的$data,接收的就是这里的第二个参数。
            // template()方法，会根据模板，以及传给模板的数据，返回一个html内容
            // 所以，template()方法，就是用于将一个模板根据一份数据生成一段html内容。
            let html = template("city", res)
            // 将生成的html内容，添加到对应的ul容器中
            $('.city').append(html)
        })

        // 请求分类信息
        $.get('./data/type.json', res => {
            // 根据默认生成html内容，并添加到对应的容器中
            $('.type').append(template("type", res))
        })

        //定义请求数据的方法
        function getData() {
            // 加载数据之前，先清空show里面的内容
            $('.show').empty()
            // 请求演唱会数据
            $.get('./data/show.json', res => {
                //获取城市信息
                let city = $('.city li.active').text()
                // 如果传了城市信息，根据城市筛选
                if (city && city != '全部') {
                    res = res.filter(r => r.city === city)
                }
                // 获取分类信息
                let type = $('.type li.active').text()
                // 如果传了分类信息，根据分类筛选
                if (type && type != '全部') {
                    res = res.filter(r => r.type === type)
                }
                // 根据默认生成html内容，并添加到对应的容器中
                // 调用template()方法，将res数据传给show模板，生成对应的html内容
                let html = template("show", res)
                // 将生成后的html内容，添加到对应的容器中  
                $('.show').append(html)
            })
        }
        // 调用请求数据的方法
        getData()

        // 给城市下面的li注册点击事件
        // 注意:li是后添加的，所以，事件要委托给它的父级定义
        $('.city').on('click', 'li:gt(0)', function () {
            $(this).addClass('active').siblings('.active').removeClass('active')
            // 调用请求数据的方法
            getData()
        })

        // 给分类下面的li注册点击事件
        $('.type').on('click', 'li:gt(0)', function () {
            $(this).addClass('active').siblings('.active').removeClass('active')
            // 调用请求数据的方法
            getData()
        })
    </script>

---

总结

提示：我们用模板引擎操作以后可以节省很多的时间，不懂得同学可以看看注释。