上篇博客讲了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: n