Python Web开发项目教程（Django版）（AI助学）（微课版） 课件 项目4 初识Django模板_第1页
Python Web开发项目教程（Django版）（AI助学）（微课版） 课件 项目4 初识Django模板_第2页
Python Web开发项目教程（Django版）（AI助学）（微课版） 课件 项目4 初识Django模板_第3页
Python Web开发项目教程（Django版）（AI助学）（微课版） 课件 项目4 初识Django模板_第4页
Python Web开发项目教程（Django版）（AI助学）（微课版） 课件 项目4 初识Django模板_第5页
已阅读5页，还剩35页未读， 继续免费阅读

下载本文档

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

文档简介

项目4

初识Django模板掌握如何向模板传递数据掌握如何将Bootstrap添加到网站中掌握如何添加搜索框学习目标理解Django模板掌握如何将搜索数据发送到另一个页面任务4.1

创建与应用Django模板4.1.1 配置Django模板过渡页4.1.1 配置Django模板图4-1带templates模板文件夹的movie应用目录结构4.1.1 配置Django模板将以下粗体代码配置在/movie/views.py中：fromdjango.shortcutsimportrenderfromdjango.httpimportHttpResponsedefmoviehome(request): returnrender(request,'moviehome.html')在/movie/templates/中创建一个新文件moviehome.html：<!DOCTYPEhtml><html><head> <title>MoviesApp</title></head><body><h1>欢迎来到movie应用首页</h1><h2>这是整个movie应用的首页</h2></body></html>4.1.1 配置Django模板4.1.1 配置Django模板图4-2movie应用新首页4.1.2 再次配置模板过渡页将以下粗体代码配置在/movie/views.py中：fromdjango.shortcutsimportrenderfromdjango.httpimportHttpResponsedefhome(request): returnrender(request,'home.html')4.1.2 再次配置模板4.1.2 再次配置模板在/movie/templates/中创建一个新文件home.html：<!DOCTYPEhtml><html><head> <title>MiniDouban</title></head><body><h1>欢迎来到MiniDouban首页</h1><h2>这是整个MiniDouban项目的首页</h2></body></html>4.1.2 再次配置模板图4-3项目新首页4.1.3 向模板传递数据过渡页将以下粗体代码配置在/movie/views.py中：…defhome(request): returnrender(request,'home.html',{'name':'OSYouth'})…4.1.3 向模板传递数据将以下粗体代码配置在home.html中：…<body><h1>欢迎来到MiniDouban首页，{{name}}</h1><h2>这是整个MiniDouban项目的首页</h2></body>…4.1.3 向模板传递数据图4-4带名字的项目新首页4.1.3 向模板传递数据4.1.4 结合使用Bootstrap过渡页图4-5Bootstrap官网首页4.1.4 结合使用Bootstrap图4-6引导CSS和JS的CDN链接4.1.4 结合使用Bootstrap将以下粗体代码配置在home.html中：…<head>…<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></body>…4.1.4 结合使用Bootstrap将以下粗体代码配置在home.html中：…<body><divclass="container"><h1>欢迎来到MiniDouban首页，{{name}}</h1><h2>这是整个MiniDouban项目的首页</h2>…</div></body>…4.1.4 结合使用Bootstrap图4-7应用样式后的项目首页4.1.4 结合使用Bootstrap任务4.2

使用Bootstrap处理表单4.2.1 添加搜索表单过渡页4.2.1 添加搜索表单图4-8Bootstrap表单示例代码在/movie/templates/moviehome.html引入Bootstrap的CSS和JS文件之后添加以下内容：<divclass="container"><formaction=""><divclass="mb-3"><labelclass="form-label">搜索电影:</label><inputtype="text"name="searchMovie"class="form-control"/></div><buttontype="submit"class="btnbtn-primary">搜索</button></form></div>4.2.1 添加搜索表单4.2.1 添加搜索表单图4-9带有表单的电影应用主页4.2.1 添加搜索表单将以下粗体代码配置在/movie/views.py中：…defmoviehome(request):

searchTerm=request.GET.get('searchMovie’) returnrender(request,'moviehome.html',{'searchTerm':searchTerm})…在/movie/templates/moviehome.html添加以下粗体代码：…<formaction="">...</form>

搜索{{searchTerm}}</div>…4.2.1 添加搜索表单4.2.1 添加搜索表单图4-10完成表单后的电影应用主页4.2.2 将表单发送到另一个页面过渡页将以下粗体代码配置在urls.py中：…urlpatterns=[path('admin/',admin.site.urls),path("moviehome",views.moviehome),path('',views.home),path('signup/',views.signup,name='signup'),]4.2.2 将表单发送到另一个页面将以下粗体代码配置在urls.py中：…urlpatterns=[path('admin/',admin.site.urls),path("moviehome",views.moviehome,name='moviehome'),path('',views.home,name='home'),path('signup/',views.signup,name='signup'),]4.2.2 将表单发送到另一个页面将以下粗体代码配置在/movie/views.py中：…defsignup(request):email=request.GET.get('email')returnrender(request,'signup.html',{'email':email})4.2.2 将表单发送到另一个页面4.2.2 将表单发送到另一个页面在/movie/templates/home.html中替换添加以下粗体代码：…<divclass="container"><h2>提交邮箱信息</h2><formaction="{%url'signup'%}"><divclass="mb-3"><labelfor="email"class="form-label">邮箱地址:</label><inputtype="email"class="form-control"name="email"/></div><buttontype="submit"class="btnbtn-primary">注册</button></form></div>…4.2.2 将表单发送到另一个页面在/movie/templates/中新创建一个signup.html页面：<!DOCTYPEhtml><html><head><title>MoviesApp</title><linkhref="/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"crossorigin="anonymous"></head><body><divclass="container"> <h2>{{email}}已注册成功</h2></div></body></html>4.2.2 将表单发送到另一个页面图4-11填写注册表单的页面4.2.2 将表单发送到另一

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论