【视频列表页面】利用模板引擎动态渲染数据

其他 2020-01-02 13:50:49 阅读次数: 0

项目需求:自适应页面，兼容安卓，IOS和PC。要求页面显示视频列表，点击列表中的图片和标题就可以播放视频，视频列表每页5条，能翻页。

clipboard.png

clipboard.png

本项目由于是需要大量的数据渲染以及后期的数据填充，所以决定使用模板引擎。
同时使用了boostrap作为部分UI框架。
使用Layer作为视频弹窗。

先说模板引擎及渲染

1.头部tab切换按钮如下：

        <!--导航栏start-->
        <nav class="container">
            <ul class="country">
                <li class="active selected" id="Americia">美国</li>
                <li  id="England">英国</li>
                <li  id="Canada">加拿大</li>
                <li  id="Austrilia">澳大利亚</li>
                <li  id="NewZealand">新西兰</li>
                <li  id="Europe">欧洲</li>
                <li  id="Asia">亚洲</li>
            </ul>
        </nav>

2.模板引擎引用的是腾讯的art_Template.

<script src="lib/template-web.js"></script>

模板引擎结构如下：

<!--模板引擎start-->
                <script id="template" type="text/html">
                    <div class="item clearfix">
                        <div class="reload pull-left">
                            <div class="playreload">
                                <img class="reloadimg" src="<%=items.imgsrc%>" alt="" />
                                <div class="mengban"></div>
                                <img class="play" src="img/play.png" alt="" />
                            </div>
                        </div>
                        <div class="info pull-left">
                            <div class='top'>
                                <span class="classify"><%=items.classify%></span>
                                <span class="title">&nbsp;<%=items.title%></span>
                                <span class="time">
                                    <span class="glyphicon glyphicon-time "></span>
                                <span class="pubdate "><%=items.pubdate%></span>
                                </span>

                            </div>
                            <p class='intro text-overflow'>
                                <%=items.intro%>
                            </p>
                            <div class="bot">
                                <span class="jia">嘉</span>
                                <span class="name"><%=items.name%></span>
                                <span>
                                    &nbsp;
                                </span>
                                <span class="zhi">职</span>
                                <span class="position"><%=items.position%></span>
                                <span class="click-rite"></span>
                            </div>
                        </div>
                    </div>
                </script>
                <!--模板引擎end-->

该模板引擎很好的保证了页面原结构，即使我这样的初学者也可以使用它。
注意它的官方如下：art-template官方文档

标准语法：

`{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}`

原始语法：

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

直接按照原来的结构然后按照模板的语法进行修改就是了。

3. JS处理：

window.onload = function() {
    var data;
    $.ajax({
        dataType: 'json',
        url: 'data.json',
        data: data,
        type: 'get',
        success: function(data, key) {
            //转化为js对象
            var jsArr = data;
            //遍历JSON对象，将JSON对象转化为数组
            for(var key in jsArr) {};
            //点击国家按钮显示指定内容
            $("body").on("click", ".country>li", function(e) {
                $(this).addClass('active').siblings().removeClass('active');
                //获取当前tab中鼠标停在的table栏的索引  
                var index = $(this).index();
                //根据这个索引切换，下面的展示  
                $("li").eq(index).addClass("selected").siblings().removeClass("selected");
                //获取当前点击项目的ID
                var indexId = $(this).attr('id');
                //新建数组，将当前点击项的id赋值给当前要显示的数组作为KEY值，就获取的当前显示项的数据
                var jsArri = jsArr[this.id];
                if(jsArri === undefined || jsArri.length == 0) {
                    $('.medialist').html('<img class="no-content" style="" src="img/no_content.png" alt="" />');
                    $('#page').hide();
                } else {
                    $('#page').show();
                }
                // 分页
                $('#page').html("");
                var pageData = jsArri.length;
                $(function() {
                    var count = pageData; //设置总条数
                    var pageSize = 5; //每页显示的条数
                    var pageCount = Math.ceil(count / pageSize); //能显示几页
                    var currentPage = 1; //默认显示第一页
                    //做个分页按钮
                    for(var i = 1; i <= pageCount; i++) {
                        var pageN = '<span class="pageName"  selectPage="' + i + '">' + i + '</span>'
                        $('#page').append(pageN);
                    }
                    //默认显示第一页
                    $('.medialist').html('');
                    for(i = (currentPage - 1) * pageSize; i < pageSize * currentPage; i++) {
                        var obj = {
                            items: jsArri[i]
                        };
                        var result = template('template', obj);
                        $('.medialist').append(result);
                        $('#page span:first-child').addClass('choosed')
                    };
                    //显示选择页的内容  
                    $('.pageName').click(function() {
                        var selectPage = $(this).attr('selectPage');
                        $('#page').children('span').removeClass('choosed');
                        $('#page').children('span').eq(selectPage - 1).addClass('choosed');
                        $('.medialist').html('');
                        //  判断是否是最后一页
                        if(selectPage == pageCount) {
                            for(i = (selectPage - 1) * pageSize; i < pageData; i++) {
                                var obj = {
                                    items: jsArri[i]
                                };
                                var result = template('template', obj);
                                $('.medialist').append(result);
                            }
                        } else {
                            for(i = (selectPage - 1) * pageSize; i < pageSize * selectPage; i++) {
                                var obj = {
                                    items: jsArri[i]
                                };
                                console.log(obj);
                                var result = template('template', obj);
                                console.log(result);
                                $('.medialist').append(result);
                            }
                        }
                    });
                })
                //点击预览图显示弹窗
                $(".reload,.title").on("click", function() {
                    //取得当前点击的预览图的下标
                    var indexB = $(this).parent().parent().parent().index();
                    //将预览图的下标作为当前显示的国家数据的中的urlpc值
                    var urlpc = jsArri[indexB].urlpc;
                    var title = jsArri[indexB].title;
                    if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
                        //Layer弹窗开始
                        layer.open({
                            type: 2,
                            title: title,
                            area: ['320px', '240px'],
                            shade: 0.6,
                            closeBtn: 0,
                            shadeClose: true,
                            content: urlpc,
                        });
                    } else {
                        //Layer弹窗开始
                        layer.open({
                            type: 2,
                            title: title,
                            area: ['640px', '360px'],
                            shade: 0.6,
                            closeBtn: 0,
                            shadeClose: true,
                            content: urlpc,
                        });
                        layer.msg('点击任意处可关闭', function() {
                            time: 500
                        })
                        //Layer弹窗结束
                    }
                });
            });
            //加载第一项美国
            $("#Americia").trigger("click");
        }
    })

JS这里的思路解析

JS是重点项目，在这里遇到了很多问题。

1.需要PHP对JSON进行转换【注意：这段方法可以用js代替，所以可把这段php文件删除】
代码就这一行：

<?php
   echo file_get_contents("data.json")
?>

还需要注意，使用PHP必须要开虚拟机，因为php是后台语言。否则浏览器会报json格式错误。
这里的file_get_contents()方法只是获取数据，加上echo是输出的意思。

2.然后再AJAX中，就可以直接引入php文件：【注意：这段方法可以用js代替】

url: 'artTemp.php',

一般用get方式

type: 'get',

Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求.通常我们请求数据用get,保存密码用post.

数据请求成功后对数据进行处理：

success：function()
{ ...... }

【1、2中用JS代替的方法】
这里如果要用PHP的话，需要用到虚拟机，以及对php有基本的了解；其实可以用jquery来代替，让ajax直接获取data.json:

                        var data;
                        $.ajax({
                            dataType:'json',
                            url:'data.json',
                            data:data,
                            type: 'get',
                            success: function(data, key) {
                                //转化为js对象
                                var jsArr = data;

这里要注意首先需要在ajax之前var 一个data变量，然后再ajax获取到data.json后将值传入data变量：

data:data,

同时，在success中的：var jsArr =JSON.parse(data)就可以直接换成var jsArr = data。因为
JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。
在这里还需设置dataType:json;因为在jquery文档中有这么一句：

clipboard.png
这样就不需要在用JSON.parse()方法了。关于这一点，这篇文章有说明：
How to Use JSON Data with PHP or JavaScript

这里马上说的JSON.parse就可以不用了↓↓↓↓

3.将data数据转化为JSON对象

使用JSON.parse()方法：

var jsArr = JSON.parse(data);

4.将JSON对象转化为数组
然后再遍历JSON对象，将JSON转化为数组：

for(var key in jsArr) {
            console.log(jsArr[key])
            };

5.点击国家按钮显示对应内容
然后是点击事件，点击指定的国家显示相应的视频内容列表：

//此处使用的是事件委托，将li的点击委托给body.

$("body").on("click", ".country>li", function(e) {

//给当前点击项添加active样式，先给自己添加样式，再干掉其他人的样式。

    $(this).addClass('active').siblings().removeClass('active');

//获取当前tab中鼠标停在的table栏的索引

    var index = $(this).index();

//根据这个索引切换，下面的展示 $("li").eq(index).addClass("selected").siblings().removeClass("selected");

//获取当前点击项目的ID

    var indexId = $(this).attr('id');

//【重要】新建数组，将当前点击项的id赋值给当前要显示的数组作为KEY值，就获取的当前显示项的数据

    console.log(jsArr[this.id])
    var jsArri = jsArr[this.id];

//此处由于json中的数据不完整，还导致我看错了，一直点击没有数据的按钮，然后提示undefind....

接下俩还需要根据请求到的数据，如果 数据为空，就显示提示图片：没有内容；如果有数据，显示内容。
判断：

if(jsArri === undefined || jsArri.length == 0) {
                    $('.medialist').html('<img class="no-content" style="" 
                       src="img/no_content.png" alt="" />');
                    $('#page').hide();
                } else {
                    $('#page').show();
                }

然后是对内容进行分页显示
此处稍微复杂，我用的是自己编写的分页工具，应为各种插件和需求不相符。

                首先对分页工具进行清空 
                $('#page').html("");
                设置变量pagedata，将当前请求到的国家内的 数据长度赋值给它，就求到了请求到的数据有几条
                var pageData = jsArri.length;
                进行分页：
                $(function() {
                    var count = pageData; //设置总条数
                    var pageSize = 5; //每页显示的条数
                    var pageCount = Math.ceil(count / pageSize); //能显示几页
                    var currentPage = 1; //默认显示第一页
                    //做个分页按钮
                    for(var i = 1; i <= pageCount; i++) {
                        var pageN = '<span class="pageName"  selectPage="' + i + '">' + i + '</span>'
                        $('#page').append(pageN);
                        这样就显示出基本的分页列表了。
                    }
                    //默认显示第一页
                    清空视频列表
                    $('.medialist').html('');
                    由于数据index从0开始算，所以要用i=当前显示的数字-1.
                    for(i = (currentPage - 1) * pageSize; i < pageSize * currentPage; i++) {
                        var obj = {
                            items: jsArri[i]
                        };
                        在循环中渲染模板引擎
                        var result = template('template', obj);
                        $('.medialist').append(result);
                        给第一页分页添加样式
                        $('#page span:first-child').addClass('choosed')
                    };
                    
                    //显示选择页的内容  
                    $('.pageName').click(function() {
                        选取到当前被点击的分页数字
                        var selectPage = $(this).attr('selectPage');
                        给其他分页数字去掉选中样式
                        $('#page').children('span').removeClass('choosed');
                        给当前选中的分页数字添加样式
                        $('#page').children('span').eq(selectPage - 1).addClass('choosed');
                        清空
                        $('.medialist').html('');
                        //  判断是否是最后一页
                        如果是最后一页，只需要渲染最后几条数据：
                        if(selectPage == pageCount) {
                            for(i = (selectPage - 1) * pageSize; i < pageData; i++) {
                                var obj = {
                                    items: jsArri[i]
                                };
                                var result = template('template', obj);
                                $('.medialist').append(result);
                            }
                        } else {
                        //如果不是最后一页，就是中间的页面，就直接计算出是那几条数据进行渲染。
                            for(i = (selectPage - 1) * pageSize; i < pageSize * selectPage; i++) {
                                var obj = {
                                    items: jsArri[i]
                                };
                                console.log(obj);
                                var result = template('template', obj);
                                console.log(result);
                                $('.medialist').append(result);
                            }
                        }
                    });
                })

至此，已经完显示了json中的数据。

还有一点，由于渲染数据是由点击上面的按钮实现的，所以在页面加载后默认的第一项美国是不显示的，所以需要美国的内容显示，就要在页面加载完毕后模拟点击事件，此处使用trigger()方法：

$("#Americia").trigger("click");

这样就可以页面加载后第一页显示默认的国家栏目的数据啦，如果想第一页显示其他国家的数据，直接替换ID即可。

接下来的部分会演示如何利用Layer插件播放视频。

4.点击视频预览图播放视频
首先当然是要给预览图的标签注册点击事件：
这里可以用事件委托

$(".title").on("click", function()  { ...... }

然后再在点击事件中获取当前点击项的index：

var indexB = $('.item').find('img').index($(this));

也可以这么写：

var indexB = $(this).parent().parent().index()

这个更容易理解，找当前被点击元素的父元素的父元素，再取他的index，因为每个父元素都有唯一一个img，所以就得到了index！

5.实现点击图片和标题均可播放视频：

要想实现点击图片和标题都可以播放视频，那么必须给他们绑定同一个事件。

jquery为多个选择器绑定同一个事件方法：

("#start,#end").on("click",function(){
　　　　alert("The paragraph was clicked.");

            });

所以此处可以使用这个方法：

$(".reload,.title").on("click",function() {    }

但是在接下来的取indexB值的时候遇到了问题：$('.reloadimg')和 $('.title')他们的路径不一样，如何然他们取得index值相同呢？

这里就必须要对元素进行相对定位，找出他们的共同祖先元素，让我们往模板的结构里看：

<div class="item clearfix">
                        <div class="reload pull-left">
                        
                                <img class="reloadimg" src="<%=items.imgsrc%>" alt="" />
                                <div class="mengban"></div>
                                <img class="play" src="img/play.png" alt="" />
                    
                        </div>
                        <div class="info pull-left">
                            <div class='top'>
                                <span class="classify"><%=items.classify%></span>
                                <span class="title">&nbsp;<%=items.title%></span>
                                <span class="time">
                                    <span class="glyphicon glyphicon-time "></span>
                                <span class="pubdate "><%=items.pubdate%></span>
                                </span>

                            </div>
                            <p class='intro text-overflow'>
                                <%=items.intro%>
                            </p>
                            <div class="bot">
                                <span class="jia">嘉</span>
                                <span class="name"><%=items.name%></span>
                                <span>
                                    &nbsp;
                                </span>
                                <span class="zhi">职</span>
                                <span class="position"><%=items.position%></span>
                                <span class="click-rite"></span>
                            </div>
                        </div>
                    </div>

从这里可以看出他们的公共祖先元素自然就是$(".item")啦，所以，怎样让他们用一行代码就同时找到他们的公共祖先元素？而且是点击他们中的任意一项都能找到？我们自然想到了刚才的这种办法：

var indexB = $(this).parent().parent().index()

这里的$(this)指代的是当前项，既可以表示$(".img")，又可以表示$(".title")，但是从结构上看，$(".img")只用向上找两层就可以找到item,但是$(".title")却需要往上找三层才可以找到item,怎么办？

我们可以给$(".img")再套一个div:

<div class="item clearfix">
                        <div class="reload pull-left" >
                            <div class="playreload">
                                <img class="reloadimg" src="<%=items.imgsrc%>" alt="" />
                                <div class="mengban"></div>
                                <img class="play" src="img/play.png" alt="" />
                            </div>
                        </div>
                        <div class="info pull-left">
                            <div class='top'>
                                <span class="classify"><%=items[i].classify%></span>
                                <span class="title"><%=items[i].title%></span>
                                <span class="pubdate pull-right"><%=items[i].pubdate%></span>
                                <span class="glyphicon glyphicon-time pull-right"></span>
                            </div>
                            <p class='intro text-overflow'>
                                <%=items[i].intro%>
                            </p>
                            <div class="bot">
                                <span class="jia">嘉</span>
                                <span class="name"><%=items[i].name%></span>
                                <span class="zhi">职</span>
                                <span class="position"><%=items[i].position%></span>
                                <span class="glyphicon glyphicon-eye-open"></span>
                                <span class="click-rite">888</span>
                            </div>
                        </div>
                    </div>

这样他们是不是就在同一层级了？

然后用：

var indexB = $(this).parent().parent().parent().index();

就可以获取到当前点击项和另一项的共同index啦！

然后将预览图的下标作为当前显示的国家数据中的urlpc值

var urlpc = jsArri[indexB].urlpc;
var title = jsArri[indexB].title;

最后使用layer插件：

在此奉上 layer弹出层插件官方演示文档

这里还需要判断客户端：

        if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) {
                        //Layer弹窗开始
                        layer.open({
                            type: 2,
                            title: title,
                            area: ['320px', '240px'],
                            shade: 0.6,
                            closeBtn: 0,
                            shadeClose: true,
                            content: urlpc,
                        });
                    } else {
                        //Layer弹窗开始
                        layer.open({
                            type: 2,
                            title: title,
                            area: ['640px', '360px'],
                            shade: 0.6,
                            closeBtn: 0,
                            shadeClose: true,
                            content: urlpc,
                        });
                        layer.msg('点击任意处可关闭', function() {
                            time: 500
                        })
                        //Layer弹窗结束
                    }

OK，已经可以实现点击预览图显示对应的视频了！

同时别忘了给美国追加click事件，不然第一页的数据不显示，因为显示隐藏是通过click操作的：

    //加载第一项美国
            $("#Americia").trigger("click");

至此已经完成业务逻辑的重要部分，css移动端就不用说了，套boostrap就是，有疑问请评论。

猜你喜欢

转载自www.cnblogs.com/homehtml/p/12132425.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022