基于Django与Scrapy的在线视频网站开发 ----关于电影新闻页编写思路

        基于Django与Scrapy的在线视频网站开发，这个项目其实是我毕业设计项目，在这里我将连更一个专题，其实当我写这篇文章的时候，我已经实现了一小部分功能了，可以通过这个连接访问，写这个的目的是为了给一小部分人一些思路，我也不知道我的对不对，希望大家多多指正，提出宝贵意见。开始啦。

1. 现阶段只是实现功能，所以我的所有代码都是独立的，把之前的写好的网站头部先复制过来，大致效果如下：
   

2. 分析需求：从新闻列表到新闻详情之间如何跳转，以及跳转时需要携带的数据信息。
   
   跳转之后需要展示登陆的用户名，所以需要将用户名放到跳转链接中，Django的views中需要有一个函数接收新闻列表页面传出的新闻主键，根据新闻主键查询数据库中对应的新闻详细信息。所以还需要将新闻主键值放在跳转链接中，最终从新闻列表跳转到新闻详情页的链接应该为：href="/newValue?id="+String(name)+"&newId="+String(newId)这种形式，其中name为已登录的用户名，newId为新闻主键值。

3. 点击跳转逻辑。之前创建新闻列表网站时，使用ul标签存储一条完整新闻
   
   用一个for循环遍历每一个ul标签，给每个ul标签定义一个onclick函数，具体代码如下：

for(i=0;i<news.length;i++){
        news[i].onclick=function () {
            var newId=this.getElementsByTagName('li')[3].innerHTML
            window.location.href="/newValue?id="+String(name)+"&newId="+String(newId)
            }
}

点击后成功跳转，若要点击时向某个views中的函数传数据，可使用ajax方式，这里就大致展示一下怎么使用：

$.ajax({
                url:'/newValue/',
                type:'get',
                data:{newId:newId,id:name},
                success(data){
                    window.location.href="/newValue?id="+String(name)+"&newId="+String(newId)
                },
            })

点击每一个ul就可以实现跳转了，跳转的url为：http://127.0.0.1:8090/newValue/?id=root&newId=600，接下来就要编写views中的函数newValue了。

4. 编写后台处理函数。当点击时，向newValue函数以get形式传递了两个值，分别为id=root&newId=600，即id=root,newId=600,newValue函数要接收这两个值，使用request.GET.get()方法，接着我们要根据接收到的newId值查询数据库对应的表（yeximove_newinfo），这里我们使用filter方法去获取对应的数据（关于django操作数据库可以去看一些大佬的文章），因为是使用主键值查找，返回值肯定只有一个django.db.models.query.QuerySet对象，我将返回的对象用list存放，每一个对象具体的值用字典存放，便于后续的处理使用。接着我们就要将查询的值传送给前端，使用render方法。最后newValue函数大致如下：

def newValue(request):
    id = request.GET.get('id')
    newId=request.GET.get('newId')
    new_List=[]
    news=newInfo.objects.filter(id=newId)
    new_List.append({'newTitle':news[0].newTitle[2:-2],'newTime':news[0].newTime.strftime('%Y-%m-%d'),'newText':news[0].newText,'newImg':list(news[0].newImg),'newId':news[0].id})
    if id is None or id == '':
        id = ''
    data={
        'name':id,
        'news':new_List,
    }
    return render(request,'newinfo.html',data)

接下来就要继续编写newinfo.html网页了。

5. 前端网页。主要是js的赋值过程，因为新闻中不止一张图片，但我没有较好的排版方式，所以我使用了比较笨的方式，提前规定格式，两个段落插入一张图片的方式。赋值前，我们需要接收newValue函数传给前端的值，主要是使用news中的数据：

var news = {{ news|safe }} 

接着，定义一个变量获得每一个需要填充文本的li标签，以及每一个需要获得src的img标签，代码如下：

<script>
    var news={{ news|safe }}
    var newIn=document.getElementById('val').getElementsByTagName('li')
    var lue=document.getElementById('lue')
    newIn[0].innerHTML=news[0]['newTitle']
    newIn[1].innerHTML=news[0]['newTime']

    for(i=0;i<news[0]['newText'].length;i++){
        lue.getElementsByTagName('li')[i].innerHTML=news[0]['newText'][i]
    }
    for(j=0;j<news[0]['newText'].length;j++){
        lue.getElementsByTagName('p')[j].getElementsByTagName('img')[0].src=news[0]['newImg'][j]
    }
</script>

这样写下来，最后的效果是这样：

导致了一个问题，图片无法居中对齐，参考了一些网上资料，有人说使用margin: 0 auto;，然而我没成功，然后我采用了较简单但繁琐的方式，给每一个p标签外层套一个span标签，这样在span标签中使用text-align: center就可以完成图片居中的操作了，最后用css 捣腾了一下，最终的效果图：

好啦，电影新闻详情页大致做完了，下一次分享用户喜爱电影功能的实现。