python开发电影查询系统（二）—Django展示

其他 2018-09-16 14:49:12 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/MTbaby/article/details/77253344

上篇博客讲了python爬取电影信息的后台数据处理，现在我们将Django前端显示。

这里写图片描述

如果对Django还不熟的朋友可以先找资料熟悉一下。
这里我们直接讲。
1.安装好Django后，找到你的工作目录，创建好一个项目find_film：

django-admin startproject find_film

2.在find_film目录下，即与manage.py文件同级目录下,创建一个app ,就叫FFilm吧

python manage.py startapp FFilm

3.将上篇博客创建的PaChong.db数据库复制到与manage.py同级目录下。
4.在FFilm目录下创建模板文件Templates

一、首先我们将本地数据库同步到FFilm/models.py文件中：
打开find_film目录下的cmd，输入命令

python manage.py inspectdb>FFilm/models.py

这里写图片描述

二、在settings.py中添加FFilm；

这里写图片描述

在settings.py中更改数据库；

这里写图片描述

三、在views.py中添加请求函数：

先看看我们的要求，其实就是要做三个入口页面，两个结果页面，所以这里需要五个请求函数；

我们分别定义

# -*- coding: utf-8 -*-
# Create your views here.
from __future__ import unicode_literals
from django.db.models import Q
from django.http import HttpResponse
from . import models
from django.shortcuts import render

#定义主函数，即首页展示
def home(request):
    return render(request,'home.html')

#定义ID查询入口函数，即ID入口页面
def ID_search(request):
    return render(request,'ID_home.html')

#定义ID查询结果函数
def ID_result(request,film_id):
    if str(film_id) == "0":
        return render(request, 'ID_home.html')
    try:
        film = models.Film.objects.get(pk = film_id)
        return render(request,'ID_result.html',{'film':film})
    except:
        s = "编号%s不在数据库中"%film_id
        return s

#定义根据电影名查询入口函数，即电影名查询入口页面
def NAME_search(request):
    name = models.Film.objects.all()
    return render(request,'NAME_home.html',{'name':name})

#根据电影名查询结果展示
def NAME_result(request):
    kw = request.GET['kw']
    films_name = models.Film.objects.filter(Q(name__icontains=kw) | Q(othername__icontains=kw))
    return render(request,'NAME_result.html',{'films_name':films_name, 'kw':kw})

四、配置urls.py文件：

from django.conf.urls import url,include
from FFilm import views
from django.conf.urls.static import static
from django.conf import settings
from django.conf.urls import url
from django.contrib import admin
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^home/$',views.home),
    url(r'^home/IDsearch/$',views.ID_search),
    url(r'^home/NAMEsearch/$',views.NAME_search),
    url(r'^home/IDsearch/(?P<film_id>[0-9]+)/$',views.ID_result,name='ID_result'),
    url(r'^home/query',views.NAME_result),
]

五、接下来，我们要写每个页面对应的html文件
在Templates文件夹下，分别创建home.html，ID_home.html，ID_result.html，NAME_home.html，NAME_result.html五个文件。

这里写图片描述

1.home.html
首先home.html是所有查询的入口页面，我这里加了css的样式，看着好看点，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<style type="text/css">
body{
background-color:#ccc;
margin:0;
padding:0;
text-align:center;
}
.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;

    text-shadow: 1px 1px 1px rgba(255,255,255, .22);

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

/* Green Color */

.green {
    color: #3e5706;

    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}

/* Blue Color */

.blue {
    color: #19667d;

    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* W3C */
}

/* Big Button Style */

.big {
    padding: 0 60px;
    padding-top: 40px;
    height: 60px;
    text-transform: uppercase;
    font: bold 35px/22px Arial, sans-serif;
}

.big span {
    display: block;
    text-transform: none;
    font: italic normal 20px/28px Georgia, sans-serif;
    text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}

a{
color:black;
text-decoration:none;
}
a:hover{
font-size:33px;
}
</style>
</head>
<body style="background-image:url('http://img1.imgtn.bdimg.com/it/u=1641239669,2780739600&fm=26&gp=0.jpg');background-size:cover;">
<div class="button big green" style="margin-top:230px;">
    <a href="http://127.0.0.1:8000/home/NAMEsearch/">电影名<span>Search</span></a>
</div>
<br/>
<br/>
<div class="button big blue">
    <a href="http://127.0.0.1:8000/home/IDsearch/">电影ID<span>Search</span></a>
</div>
</body>
</html>

展示效果：
这里写图片描述

2.ID_home.html

<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
    var num=document.getElementById("search_text").value;
    var urlname = "http://127.0.0.1:8000/home/IDsearch/"+num;
    window.location.href=urlname;
}
 document.onkeydown = function(event_e){
        if(window.event) {
            event_e = window.event;
        }

        var int_keycode = event_e.charCode||event_e.keyCode;
        if( int_keycode == '13' ) {
            //your handler function,please.
            copyText();
            return false;
        }
    }
</script>


<meta http-equiv="Content-Type" charset='utf-8'>
<style type = "text/css">
body{
background-color:#ccc;
margin:0;
padding:0;
text-align:center;
}
.nav {
    background: #232323;
    height: 60px;
    display: inline-block;
}
.nav li {
    float: left;
    list-style-type: none;
    position: relative;
}
.nav li a {
    font-size: 16px;
    color: white;
    display: block;
    line-height: 60px;
    padding: 0 26px;
    text-decoration: none;
    border-left: 1px solid #2e2e2e;
    font-family: Montserrat, sans-serif;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
    background-color: #2e2e2e;
}
#settings a {
    padding: 18px;
    height: 24px;
    font-size: 10px;
    line-height: 24px;
}
#search {
    width: 357px;
    margin: 4px;
}
#search_text{
    width: 297px;
    padding: 15px 0 15px 20px;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    border: 0 none;
    height: 52px;
    margin-right: 0;
    color: white;
    outline: none;
    background: #1f7f5c;
    float: left;
    box-sizing: border-box;
    transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: darkgray;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: white;
}
#search_text:focus {
    background: rgb(64, 151, 119);
}
#search_button {
    border: 0 none;
    background: #1f7f5c url(search.png) center no-repeat;
    width: 60px;
    float: left;
    padding: 0;
    text-align: center;
    height: 52px;
    cursor: pointer;
}
#options a{
    border-left: 0 none;
}
#options>a {
    background-image: url(triangle.png);
    background-position: 85% center;
    background-repeat: no-repeat;
    padding-right: 42px;
}
.subnav {
    visibility: hidden;
    position: absolute;
    top: 110%;
    right: 0;
    width: 200px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background: #232323;
}
.subnav li {
    float: none;
}
.subnav li a {
    border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}
.txtCenter{
    text-align:center;
}

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;

    text-shadow: 1px 1px 1px rgba(255,255,255, .22);

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.blue {
    color: #19667d;

    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* W3C */
}

</style>

<body style="background-image:url('http://img1.imgtn.bdimg.com/it/u=1641239669,2780739600&fm=26&gp=0.jpg');background-size: cover;">
<div align= center>
<h1>Welcome to MTbaby's Website!</h1>
<h2>在这里开启你的电影之旅吧~~</h2>
<ul class="nav">
    <li id="search">
        <form class = "txtCenter"  method="post">
            <div id="some">
            <input  type="text" name="search_text" id="search_text"  maxlength="100" placeholder="请输入电影编号" autocomplete="off"/>
            <input type="button" name="search_button" id="search_button" >
            </div>
        </form>

    </li>
    <li id="options">

        <a onclick="copyText()">MT搜</a>
    </li>

</ul>
</div>
<div class="button blue" style="margin-top:23px;">
    <a href="http://127.0.0.1:8000/home/">返回首页</a>
</div>
<script src="prefixfree-1.0.7.js" type="text/javascript"></script>
</body>
</head>
</html>

效果展示

这里写图片描述
3.ID_result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影信息</title>
</head>
<style type="text/css">
body{
background-color:#ccc;
margin:0;
padding:0;
text-align:center;
}
.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;

    text-shadow: 1px 1px 1px rgba(255,255,255, .22);

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.blue {
    color: #19667d;

    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* W3C */
}
.green {
    color: #3e5706;

    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
    /* Big Button Style */

.big {
    padding: 0 40px;
    padding-top: 20px;
    height: 40px;
    text-transform: uppercase;
    font: bold 30px/25px Arial, sans-serif;
}
</style>
<body style="background-image:url('http://127.0.0.1:8000/media/upload/0.jpg');background-size: cover;">
<form action="" method="post">

    {% csrf_token %}
    {% if film %}
        <h3 style="color: red;margin-left: -1200px"">【{{ film.id }}】的搜索结果:</h3>
        <table width='80%' align="center" border="1px" cellspacing="1px" bordercolor="#6699ff">
        <caption><h3>电影信息</h3></caption>
                <tr>
                    <td rowspan="17"><img src="{{ film.postlink }}" border="0" title="海报详情"></td>
                </tr>
                <tr>
                    <td></td>
                    <th>电影名</th>
                    <td>{{ film.name }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th>下载链接</th>
                    <td><a href="{{ film.url }}" title = "点击进行下载"/>下载地址</td>
                </tr>
                <tr>
                    <td></td>
                    <th>导演</th>
                    <td>{{ film.director }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th width="50px">编剧</th>
                    <td>{{ film.edit }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th width="110px">主演</th>
                    <td>{{ film.star }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th width="50px">类型</th>
                    <td>{{ film.type }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th width="50px">地区</th>
                    <td>{{ film.region }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th width="50px">语言</th>
                    <td>{{ film.language }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th width="10dpx">上映日期</th>
                    <td>{{ film.date }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th width="50px">片长</th>
                    <td>{{ film.length }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th>又名</th>
                    <td>{{ film.othername }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th>IMDB链接</th>
                    <td>{{ film.IMDblink }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th nowrap>简介</th>
                    <td>{{ film.brief }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th>豆瓣评分</th>
                    <td>{{ film.douban }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th>IMDB评分</th>
                    <td>{{ film.IMDB }}</td>
                </tr>
                <tr>
                    <td></td>
                    <th nowrap>摘要</th>
                    <td>{{ film.summery }}</td>
                </tr>



    </table>

    {% endif %}

</form>
<div class="button big blue" style="margin-right:23px;">
    <a href="http://127.0.0.1:8000/home/IDsearch/">返回查询页面</a>
</div>
<div class="button big green" style="margin-top:23px;">
    <a href="http://127.0.0.1:8000/home/">返回首页</a>
</div>
</body>
</html>

效果展示

这里写图片描述

4.NAME_home.html

<!DOCTYPE html>
<html>
<head>
<script>
function copyText()
{
    var kw=document.getElementById("search_text").value;
    var urlname = 'http://127.0.0.1:8000/home/query.html?kw='+kw;
    window.location.href=urlname
}
 document.onkeydown = function(event_e){
        if(window.event) {
            event_e = window.event;
        }

        var int_keycode = event_e.charCode||event_e.keyCode;
        if( int_keycode == '13' ) {
            //your handler function,please.
            copyText();
            return false;
        }
    }
</script>


<meta http-equiv="Content-Type" charset='utf-8'>
<style type = "text/css">
body{
background-color:#ccc;
margin:0;
padding:0;
text-align:center;
}
.nav {
    background: #232323;
    height: 60px;
    display: inline-block;
}
.nav li {
    float: left;
    list-style-type: none;
    position: relative;
}
.nav li a {
    font-size: 16px;
    color: white;
    display: block;
    line-height: 60px;
    padding: 0 26px;
    text-decoration: none;
    border-left: 1px solid #2e2e2e;
    font-family: Montserrat, sans-serif;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
    background-color: #2e2e2e;
}
#settings a {
    padding: 18px;
    height: 24px;
    font-size: 10px;
    line-height: 24px;
}
#search {
    width: 357px;
    margin: 4px;
}
#search_text{
    width: 297px;
    padding: 15px 0 15px 20px;
    font-size: 16px;
    font-family: Montserrat, sans-serif;
    border: 0 none;
    height: 52px;
    margin-right: 0;
    color: white;
    outline: none;
    background: #1f7f5c;
    float: left;
    box-sizing: border-box;
    transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color: darkgray;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: white;
}
#search_text:focus {
    background: rgb(64, 151, 119);
}
#search_button {
    border: 0 none;
    background: #1f7f5c url(search.png) center no-repeat;
    width: 60px;
    float: left;
    padding: 0;
    text-align: center;
    height: 52px;
    cursor: pointer;
}
#options a{
    border-left: 0 none;
}
#options>a {
    background-image: url(triangle.png);
    background-position: 85% center;
    background-repeat: no-repeat;
    padding-right: 42px;
}
.subnav {
    visibility: hidden;
    position: absolute;
    top: 110%;
    right: 0;
    width: 200px;
    height: auto;
    opacity: 0;
    transition: all 0.1s;
    background: #232323;
}
.subnav li {
    float: none;
}
.subnav li a {
    border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
    visibility: visible;
    top: 100%;
    opacity: 1;
}
.txtCenter{
    text-align:center;
}

.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;

    text-shadow: 1px 1px 1px rgba(255,255,255, .22);

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.blue {
    color: #19667d;

    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* W3C */
}

</style>

<body style="background-image:url('http://img1.imgtn.bdimg.com/it/u=1641239669,2780739600&fm=26&gp=0.jpg');background-size: cover;">
<div align= center>
<h1>Welcome to MTbaby's Website!</h1>
<h2>在这里开启你的电影之旅吧~~</h2>
<ul class="nav">
    <li id="search">
        <form class = "txtCenter"  method="post">
            <div id="some">
            <input  type="text" name="search_text" id="search_text"  maxlength="100" placeholder="请输入关键字" autocomplete="off"/>
            <input type="button" name="search_button" id="search_button" >
            </div>
        </form>

    </li>
    <li id="options">
        <a onclick="copyText()">MT搜</a>
    </li>

</ul>
</div>
<div class="button blue" style="margin-top:23px;">
    <a href="http://127.0.0.1:8000/home/">返回首页</a>
</div>
<script src="prefixfree-1.0.7.js" type="text/javascript"></script>
<div  align= center>
    {% for line in name %}
        <h4>{{ line.name }}</h4>
        <h3><a href="{{ line.url }}" title="点击下载"/></h3>
    {% endfor %}
</div>
</body>
</head>
</html>

效果展示

这里写图片描述

5.NAME_result.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
body{
background-color:#ccc;
margin:0;
padding:0;
text-align:center;
}
.button {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    font: bold 12px/25px Arial, sans-serif;

    text-shadow: 1px 1px 1px rgba(255,255,255, .22);

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
    box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);

    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    -ms-transition: all 0.15s ease;
    transition: all 0.15s ease;
}

.blue {
    color: #19667d;

    background: #70c9e3; /* Old browsers */
    background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* IE10+ */
    background: linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* W3C */
}
    /* Green Color */

.green {
    color: #3e5706;

    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
    /* Big Button Style */

.big {
    padding: 0 40px;
    padding-top: 20px;
    height: 40px;
    text-transform: uppercase;
    font: bold 30px/25px Arial, sans-serif;
}

</style>
<h3 style="color: red;margin-left: -1000px">【{{ kw }}】的搜索结果:</h3>
<body style="background-image: url('http://127.0.0.1:8000/media/upload/0.jpg');background-size: cover;">
<table width='80%' align="center" border="1px" cellspacing="1px" bordercolor="#6699ff">
        <tr>
            <th>电影ID</th>
            <th>电影名</th>
            <th>别名</th>
            <th>详情</th>
        </tr>
    {% for film in films_name %}
        <tr>
            <td width="8%">{{ film.fid }}</td>
            <td width="40%">{{ film.name }}</td>
            <td width="40%">{{ film.othername }}</td>
            <td width="12%"><a href="http://127.0.0.1:8000/home/IDsearch/{{film.id }}">查看详情</a></td>
        </tr>
    {% endfor %}

</table>
<div class="button big blue" style="margin-top:23px;">
    <a href="http://127.0.0.1:8000/home/NAMEsearch/">返回查询页面</a>
</div>
<div class="button big green" style="margin-top:23px;">
    <a href="http://127.0.0.1:8000/home/">返回首页</a>
</div>
</body>
</html>

效果展示

这里写图片描述

这里，点击“查看详情”，会跳转到对应ID的电影信息，与ID查询结果相关联。
最终效果图：

这里写图片描述

话不多说，赶快去试试吧~~~

猜你喜欢

转载自blog.csdn.net/MTbaby/article/details/77253344
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022