Python Web开发项目教程(Django版)(AI助学)(微课版) 课件 项目8 项目优化与模板拓展_第1页
Python Web开发项目教程(Django版)(AI助学)(微课版) 课件 项目8 项目优化与模板拓展_第2页
Python Web开发项目教程(Django版)(AI助学)(微课版) 课件 项目8 项目优化与模板拓展_第3页
Python Web开发项目教程(Django版)(AI助学)(微课版) 课件 项目8 项目优化与模板拓展_第4页
Python Web开发项目教程(Django版)(AI助学)(微课版) 课件 项目8 项目优化与模板拓展_第5页
已阅读5页,还剩53页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

项目8

项目优化与模板拓展了解如何优化项目结构了解Django的多应用URL路由分发掌握模板继承的概念项目目标掌握基础模板的创建与应用方法掌握让导航链接生效的方法掌握添加页脚的方法掌握配置静态文件服务的方法掌握集成分页模板的方法项目目标了解Django模板语言任务8.1

结构优化与多应用URL路由分发任务8.1结构优化与多应用URL路由分发图8-1URL路由分发原理任务8.1结构优化与多应用URL路由分发在根路由文件/MiniDouban/urls.py添加粗体代码:fromdjango.urlsimportpath,include…urlpatterns=[…path('movie/',include('movie.urls')),path('book/',include('book.urls')),]任务8.1结构优化与多应用URL路由分发在movie应用中创建一个urls.py,并在该文件中添加如下代码:fromdjango.urlsimportpathfrom.importviewsurlpatterns=[path("moviehome",views.moviehome,name='moviehome'),]任务8.1结构优化与多应用URL路由分发在根路由文件/MIniDouban/urls.py删除粗体代码:…urlpatterns=[…path(moviehome/',views.moviehome,name='moviehome'),…]在book应用中创建一个urls.py,并在该文件中添加如下代码:fromdjango.urlsimportpathfrom.importviewsurlpatterns=[path('bookhome',views.bookhome,name='bookhome'),]任务8.1结构优化与多应用URL路由分发在根路由文件/MIniDouban/urls.py删除粗体代码:…frombookimportviewsasbookviews…urlpatterns=[…path('bookhome',bookviews.bookhome,name='bookhome'),…]任务8.1结构优化与多应用URL路由分发图8-2项目结构优化后的movie应用首页任务8.1结构优化与多应用URL路由分发图8-3结构优化后的book应用首页任务8.1结构优化与多应用URL路由分发任务8.2

创建与应用基础模板8.2.1 创建基础模板过渡页8.2.1 创建基础模板在/movie/templates/home.html中添加粗体代码:<!DOCTYPEhtml><html><head>…

<metaname="viewport"content="width=device-width,initial-scale=1"/></head><body><navclass="navbarnavbar-expand-lgnavbar-lightbg-lightmb-3"><divclass="container"><aclass="navbar-brand"href="#">首页</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavAltMarkup"aria-controls="navbarNavAltMarkup"aria-expanded="false"aria-label="Togglenavigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapsenavbar-collapse"id="navbarNavAltMarkup"><divclass="navbar-navms-auto"><aclass="nav-link"href="#">电影</a><aclass="nav-link"href="#">读书</a><aclass="nav-link"href="#">登录</a><aclass="nav-link"href="#">注册</a></div></div></div></nav>…</body></html>8.2.1 创建基础模板图8-4带有导航栏的项目首页8.2.1 创建基础模板图8-5缩小浏览器窗口宽度的项目首页8.2.1 创建基础模板在/templates/base.html中添加粗体代码:<!DOCTYPEhtml><html><head><title>MiniDouban</title><linkhref="/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"crossorigin="anonymous"><scriptsrc="/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"crossorigin="anonymous"></script><metaname="viewport"content="width=device-width,initial-scale=1"/></head><body><navclass="navbarnavbar-expand-lgnavbar-lightbg-lightmb-3"><divclass="container"><aclass="navbar-brand"href="#">首页</a><buttonclass="navbar-toggler"type="button"data-bs-toggle="collapse"data-bs-target="#navbarNavAltMarkup"aria-controls="navbarNavAltMarkup"aria-expanded="false"aria-label="Togglenavigation"><spanclass="navbar-toggler-icon"></span></button><divclass="collapsenavbar-collapse"id="navbarNavAltMarkup"><divclass="navbar-navms-auto"><aclass="nav-link"href="#">电影</a><aclass="nav-link"href="#">读书</a><aclass="nav-link"href="#">登录</a><aclass="nav-link"href="#">注册</a></div></div></div></nav><divclass="container">{%blockcontent%}{%endblockcontent%}</div></body></html>8.2.1 创建基础模板为了防止Django项目无法自动识别到base.html基础模板,我们最好在/MiniDouban/settings.py中的TEMPLATES属性中的DIRS添加新的templates文件夹路径:TEMPLATES=[{"BACKEND":"django.template.backends.django.DjangoTemplates","DIRS":[os.path.join(BASE_DIR,'movie/templates'),os.path.join(BASE_DIR,'book/templates'),os.path.join(BASE_DIR,'templates'),],"APP_DIRS":True,…},},]8.2.2 应用基础模板过渡页8.2.2 应用基础模板在/movie/templates/home.html中将header标签和导航栏的部分替换为粗体代码:{%extends'base.html'%}{%blockcontent%}<divclass="container">…</div>{%endblockcontent%}8.2.2 应用基础模板同样在/movie/templates/moviehome.html中将header标签和导航栏的部分替换为粗体代码:{%extends'base.html'%}{%blockcontent%}<divclass="container">…</div>{%endblockcontent%}8.2.2 应用基础模板图8-6带有导航栏的movie应用首页任务8.3

完善基础模板8.3.1 让导航链接生效过渡页8.3.1 让导航链接生效在/templates/base.html替换粗体代码:<navclass="navbarnavbar-expand-lgnavbar-lightbg-lightmb-3"><divclass="container"><aclass="navbar-brand"href="{%url'home'%}">首页</a> …<divclass="collapsenavbar-collapse"id="navbarNavAltMarkup"><divclass="navbar-navms-auto"><aclass="nav-link"href="{%url'moviehome'%}">电影</a><aclass="nav-link"href="{%url'bookhome'%}">读书</a><aclass="nav-link"href="#">登录</a><aclass="nav-link"href="#">注册</a></div></div></div></nav>8.3.1 让导航链接生效在/MiniDouban/urls.py根路由文件中,定义home:…urlpatterns=[path("admin/",admin.site.urls),path('',views.home,name='home'),path('signup/',views.signup,name='signup'),path('movie/',include('movie.urls')),path('book/',include('book.urls')),]…8.3.1 让导航链接生效在movie应用的子路由文件/movie/urls.py中定义moviehome:…urlpatterns=[path("moviehome",views.moviehome,name='moviehome'),]在book应用的子路由文件/book/urls.py中定义bookhome:…urlpatterns=[path('bookhome',views.bookhome,name='bookhome'),]8.3.2 添加页脚过渡页8.3.2 添加页脚在/templates/base.html文件中,添加以下粗体内容:…<divclass="container">{%blockcontent%}{%endblockcontent%}</div><footerclass="text-centertext-lg-startbg-lighttext-mutedmt-4"><divclass="text-centerp-4">©Copyright-<aclass="text-resetfw-boldtext-decoration-none"target="_blank"href="/OSYouth/">OSYouth</a></div></footer></body></html>8.3.2 添加页脚图8-7带有页脚的项目首页8.3.3 配置静态文件服务过渡页8.3.3 配置静态文件服务静态文件默认配置:…#Staticfiles(CSS,JavaScript,Images)#/en/5.1/howto/static-files/STATIC_URL="static/"…8.3.3 配置静态文件服务在/templates/base.html替换粗体代码:…<navclass="navbarnavbar-expand-lgnavbar-lightbg-lightmb-3"><divclass="container"><aclass="navbar-brand"href="{%url'home'%}">{%loadstatic%}<imgsrc="{%static'images/logo.jpg'%}"alt=""width="30"height="30"class="d-inline-blockalign-text-top"/>

首页

</a>…8.3.3 配置静态文件服务在/MiniDouban/settings.py添加以下代码:…STATICFILES_DIRS=[os.path.join(BASE_DIR,'static'),]…图8-8带Logo图片的导航栏8.3.4 集成分页模板过渡页8.3.4 集成分页模板在/movie/views.py替换粗体代码:…fromdjango.core.paginatorimportPaginator#Createyourviewshere.defmoviehome(request):searchTerm=request.GET.get('searchMovie')ifsearchTerm:

movie_list=Movie.objects.filter(title__contains=searchTerm)else:movie_list=Movie.objects.all()

paginator=Paginator(movie_list,2)page_number=request.GET.get('page',1)movies=paginator.page(page_number)returnrender(request,'moviehome.html',{'searchTerm':searchTerm,'movies':movies})…8.3.4 集成分页模板在/templates文件夹中创建pagination.html模板文件:<divclass="pagination"><spanclass="step-links">{%ifpage.has_previous%}<ahref="?page={{page.previous_page_number}}">上一页</a>{%endif%}<spanclass="current">{{page.number}}/{{page.paginator.num_pages}}页

</span>{%ifpage.has_next%}<ahref="?page={{page.next_page_number}}">下一页</a>{%endif%}</span></div>8.3.4 集成分页模板在/movie/templates/moviehome.html添加粗体代码:{%extends'base.html'%}{%blockcontent%}<divclass="container">…</div><divclass="d-flexjustify-content-centeralign-items-center">{%include"pagination.html"withpage=movies%}</div>{%endblockcontent%}8.3.4 集成分页模板图8-9带有分页的moviehome首页任务8.4

页面展示优化与详情页交互设计8.4.1 Django模板语言与过滤器过渡页8.4.1 Django模板语言与过滤器在/movie/templates/moviehome.html添加粗体代码:{%extends'base.html'%}{%blockcontent%}<divclass="container">…<divclass="rowrow-cols-1row-cols-md-3g-4">…<pclass="card-text">{{movie.description|truncatechars:40}}</p>…{%endblockcontent%}8.4.1 Django模板语言与过滤器图8-10使用truncatechars截断字符串过滤器后的movie应用首页8.4.2 创建详情页面过渡页8.4.2 创建详情页面在/movie/urls.py添加粗体代码:fromdjango.urlsimportpathfrom.importviewsurlpatterns=[path("moviehome",views.moviehome,name='moviehome'),

path('<int:movie_id>',views.moviedetail,name='moviedetail'),]8.4.2 创建详情页面在/movie/views.py添加视图函数moviedetail:…fromdjango.shortcutsimportget_object_or_404…defmoviedetail(request,movie_id):movie=get_object_or_404(Movie,pk=movie_id)returnrender(request,'moviedetail.html',{'movie':movie})8.4.2 创建详情页面在/movie/templates/文件夹中创建moviedetail.html文件:{%extends'base.html'%}{%blockcontent%}<divclass="cardmb-3"><divclass="rowg-0"><divclass="col-md-4"><imgsrc="{{movie.image.url}}"class="img-fluidrounded-start"alt=""></div><divclass="col-md-8"><divclass="card-body"><h5class="card-title">{{movie.title}}</h5><pclass="card-text">{{movie.description}}</p><pclass="card-text">{%ifmovie.url%}<ahref="{{movie.url}}"class="btnbtn-primary">

电影资源链接

</a>{%endif%}</p></div></div></div></div>{%endblockcontent%}8.4.2 创建详情页面图8-11movie应用的详情页示例8.4.2 创建详情页面在/book/urls.py添加粗体代码:fromdjango.urlsimportpathfrom.importviewsurlpatterns=[path('bookhome',views.bookhome,name='bookhome'),

path('<int:book_id>',views.bookdetail,name='bookdetail'),]8.4.2 创建详情页面在/book/views.py添加视图函数bookdetail:…fromdjango.shortcutsimportget_object_or_404…defbookdetail(request,book_id):book=get_object_or_404(Book,pk=book_id)returnrender(request,'bookdetail.html',{'book':book})8.4.2 创建详情页面在/book/templates/文件夹中创建bookdetail.html文件:{%extends'base.html'%}{%blockcontent%}<divclass="cardmb-3"><divclass="rowg-0"><divclass="col-md-4"><imgsrc="{{book.image.url}}"class="img-fluidrounded-start"alt=""></div><divclass="col-md-8"><divclass="card-body"><h5class="card-title">{{book.title}}</h5><pclass="card-text">{{book.description}}</p><pclass="card-text">{%ifbook.url%}<ahref="{{book.url}}"class="btnbtn-primary">

电子书链接

</a>{%endif%}</p></div></div></div></div>{%endblockcontent%}8

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论