[置顶] python开发电影查询系统(二)—Django展示
2017-08-17 10:50
405 查看
上篇博客讲了python爬取电影信息的后台数据处理,现在我们将Django前端显示。
如果对Django还不熟的朋友可以先找资料熟悉一下。
这里我们直接讲。
1.安装好Django后,找到你的工作目录,创建好一个项目find_film:
2.在find_film目录下,即与manage.py文件同级目录下,创建一个app ,就叫FFilm吧
3.将上篇博客创建的PaChong.db数据库复制到与manage.py同级目录下。
4.在FFilm目录下创建模板文件Templates
一、首先我们将本地数据库同步到FFilm/models.py文件中:
打开find_film目录下的cmd,输入命令
二、在settings.py中添加FFilm;
在settings.py中更改数据库;
三、在views.py中添加请求函数:
先看看我们的要求,其实就是要做三个入口页面,两个结果页面,所以这里需要五个请求函数;
我们分别定义
四、配置urls.py文件:
五、接下来,我们要写每个页面对应的html文件
在Templates文件夹下,分别创建home.html,ID_home.html,ID_result.html,NAME_home.html,NAME_result.html五个文件。
1.home.html
首先home.html是所有查询的入口页面,我这里加了css的样式,看着好看点,代码如下:
展示效果:
2.ID_home.html
效果展示
3.ID_result.html
效果展示
4.NAME_home.html
效果展示
5.NAME_result.html
效果展示
这里,点击“查看详情”,会跳转到对应ID的电影信息,与ID查询结果相关联。
最终效果图:
话不多说,赶快去试试吧~~~
如果对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查询结果相关联。
最终效果图:
话不多说,赶快去试试吧~~~
相关文章推荐
- [置顶] python开发电影查询系统(一)—python实现后台数据
- 用python+django+twistd 开发一个属于自己的运维系统
- 用python+django+twistd 开发一个属于自己的运维系统
- 触摸屏多媒体查询展示自主设计系统开发过程
- win+pycharm+django+mysql开发(win系统pythonweb开发)(一)
- Python+Django监控系统开发中
- win+pycharm+django+mysql开发(win系统pythonweb开发)(二)
- python3开发进阶-Django框架的Form表单系统和基本操作
- python+django开发的运维工具——游戏内测服更新系统
- python3开发进阶-Django框架中的ORM的常用操作的补充(F查询和Q查询,事务)
- 在Ubuntu系统上进行SAE+Python+Django开发记录—1.环境搭建
- 基于Django1.11和Python3开发一个简单的投票系统
- Python利用 Django完整的开发一个博客系统
- python3+django2开发一个简单的人员管理系统
- python3.6+django2.0开发一套学员管理系统
- Python采用Django开发自己的博客系统
- Python学习笔记(3)——Django开发Web系统
- python3开发进阶-Django框架学习前的小项目(一个简单的学员管理系统)
- win+pycharm+django+mysql开发(win系统pythonweb开发)(三)
- 使用python+django+twistd 开发自己的操作和维护系统的一个