版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
项目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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- T/CI 1355-2025清远(麻)鸡全产业链标准体系
- T/CAAMTB 203-2024新能源汽车用电流传感器
- T/AATSD 001-2024安徽省跨境电子商务产业园区运营服务规范
- 网络运维理论考核试题题库与答案
- DB32/T 1802-2025地理标志产品 海门山羊肉
- 经济数学微积分课件 1.3常用的经济函数介绍
- 汽车贴膜施工操作指南(2025版)
- 酸碱平衡紊乱课件
- 汽车检测技术2章5发动机点火系统的故障诊断
- 2026年秋招:河南交通投资集团面试题及答案
- 2025年湖北卷化学-加标签(精校版)(无答案)
- 2026秋新教材统编版四年级上册语文第一单元教案(大单元教学设计)
- 5.2 必须长期坚持的指导思想 课件(25张幻灯片)+内嵌视频
- 室内设计 课件 模块三 办公空间设计
- 2026年高考全国一卷数学试题真题及答案详解(精校打印)
- 2026年四川省拟任县处级领导干部理论(任职资格考试)全真模拟试题及答案
- 1.2 地球与地球仪 第3课时课件(共20张) 七年级地理上学期人教版
- 终身学习:中学教师专业成长与实践路径
- 2026年上海安全员A证考试题库(附答案)
- 常州大学怀德学院教师招聘考试真题及答案
- 火锅店服务员培训课件
评论
0/150
提交评论