python開發電影查詢系統（二）—Django展示

原創 MTbaby 2018-09-02 08:41

上篇博客講了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查詢結果相關聯。
最終效果圖：

這裏寫圖片描述

話不多說，趕快去試試吧~~~

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

BD電影搜索-自定義過濾器

實現概要說明 找電影時，發現網站自帶的搜索功能可選項不多，於是乎寫了個腳本，實現按網站標籤結果二次搜索，獲取電影信息。需要注意的是，使用爬蟲腳本需要先用網站標籤搜索功能獲取搜索標籤頁結果的地址，然後把地址保存下來運行腳本。 源

MTbaby 2020-07-03 00:29:31

12306買票系統

目錄項目環境項目原理遇到的問題以及知識點代碼結語獲取更多實戰項目，請關注公衆號'青雲學齋'： 項目環境 本項目基於谷歌瀏覽器83.0.4103.97以及對應的chromedriver（下載鏈接見文末）使用python3.8編寫，所

張青云 2020-06-29 09:14:35

java爬蟲實戰課程，主要內容爲爬蟲技術，接口爬取，頁面爬取，反爬蟲技術繞過，dom解析，網絡請求，講解主要以天氣數據爬取，金融數據，頭條粉絲數據，新聞文章爬取，環境質量數據爬取，蹄片爬取等分別介紹

本欄目主要講java爬蟲實戰課程 主要內容爲爬蟲技術，接口爬取，頁面爬取，反爬蟲技術繞過，dom解析，網絡請求 講解主要以 天氣數據爬取，中國天氣網爲例 金融數據，基金類爲例 頭條粉絲數據，今日頭條爲例 新聞文章爬取，任意新聞網站數據爲例

0行代码写服务 2020-06-22 02:24:07

java+selenium，40行代碼完成支付寶賬單爬取

java+selenium，40行代碼完成支付寶賬單爬取 需要jar selenium-server-4.0.0-alpha-5.jar 需要驅動 chromedriver.exe 驅動需要和瀏覽器版本對應，我用的是chrome

0行代码写服务 2020-06-22 02:23:56

python 實現多線程下載m3u8格式視頻，使用FFmpeg合併

如果你需要下載的m3u8文件被加密 請移步：https://blog.csdn.net/s_kangkang_A/article/details/103163073   電影之類的長視頻好像都用m3u8格式了，這就導致了多線程下載視頻的意

s_kangkang_A 2020-06-21 18:56:01

python 實現多線程下載視頻

賊快 代碼： def thread(url): r = requests.get(url, headers=None, stream=True, timeout=30) # print(r.status_code, r.

s_kangkang_A 2020-06-21 18:56:01

知乎首頁爬蟲

嘗試了一下知乎首頁爬蟲： import re import requests from urllib import parse 首頁鏈接 = [] headers = { 'user-agent': 'Mozilla/

s_kangkang_A 2020-06-21 18:56:01

網易雲思路

https://www.cnblogs.com/brusally/p/11200069.html https://blog.csdn.net/weixin_40444270/article/details/81260638 https:/

s_kangkang_A 2020-06-21 18:56:00

用python將爬取內容寫入csv文件中用excel打開後的亂碼問題

在平時的數據採集中我們經常會將一些數據存入csv文件，但是有時候用excel打開csv文件會發現亂碼。 可能有的人會問爲什麼不直接將數據寫去excel中，而是先寫入csv然後又用excel打開，不嫌麻煩嘛？這就是因爲python

啊啊啊瑞瑞瑞 2020-06-20 13:23:00

python實現貓眼電影評論的爬取

直接上代碼 import xlrd import requests from lxml import etree import random import jsonpath import json import xlwt impo

啊啊啊瑞瑞瑞 2020-06-20 07:23:01

爬取網易雲音樂歌曲評論並生成特定詞雲圖

import requests import json import jsonpath import csv import time import jieba import numpy # 圖片的轉換 from scipy.m

啊啊啊瑞瑞瑞 2020-06-20 07:23:01

用selenium實現淘寶毫秒級自動搶券

淘寶秒殺腳本，掃碼登錄版 from selenium import webdriver import datetime import time def main(): # 打開淘寶登錄頁，並進行掃碼登錄 #http

啊啊啊瑞瑞瑞 2020-06-20 05:21:35

爬蟲實戰之《流浪地球》豆瓣影評分析（三）

4. 分析評論數量及評分與時間的關係 首先導入數據，進行一個初步的統計： import pandas as pd data = pd.read_csv('doubanliulangdiqiu.csv',encoding ='GB1

圣默 2020-06-15 08:53:18

爬蟲實戰之《流浪地球》豆瓣影評分析（二）

3. 分析好評與差評的關鍵信息 依靠繪製詞雲圖，來分析好評與差評的關鍵信息的區別 數據預處理 依靠上一篇爬取到的csv文件，來進行分析，首先導入文件，重點是短評正文的信息。 首先是使用結巴庫來進行分詞，然後去除停用詞（停用詞是網上

圣默 2020-06-15 08:53:18

爬蟲實戰之《流浪地球》豆瓣影評分析（一）

背景與挖掘目標 獲取豆瓣評論數據 分析好評與差評的關鍵信息 分析評論數量及評分與時間的關係 分析評論者的城市分佈情況 1. 背景與挖掘目標 豆瓣（douban）是一個社區網站。網站由楊勃（網名“阿北”） 創立於2005年3月

圣默 2020-06-15 08:53:18