Django学习(五)---模板扩展,开发博客页面
(一)博客主页面开发
1.模板中可使用for循环,语法格式为:
{% for xs in xxs %}
HTML语句
{% endfor %}
2.更改app下的views.py, 获取后台models Article类下的数据列表集合
思路:1)取出数据库中所有文章对象 2)将文章对象们打包成列表返回到前端
from django.shortcuts import render
from . import models
# Create your views here.
def index(request):
articles = models.Article.objects.all()
return render(request,'blog/index.html',{'articles':articles})
3.修改html文件:
<!DOCTYPE html>
<html>
<head>
<title>第一个Template</title>
</head>
<body>
<h1><a href="">添加新文章</a></h1>
{% for article in articles %}
<a href="">{{ article.title }}</a>
<br/>
{% endfor %}
</body>
</html>
效果如下:

(二)博客文章页面开发
1.在app下views.py中添加响应函数page(对应文章内容页面)
2.点击博客主页面的文章链接会跳转到文章内容页面,实际上传递了点击的文章的唯一标识(主键 也就是django自己添加的id)
3.因此,在page方法里面添加参数article_id来传递主键id
4.获取文章对象,渲染到HTML
views.py如下:
from django.shortcuts import render
from django.http import HttpResponse
from . import models
# Create your views here.
def index(request):
articles = models.Article.objects.all()
return render(request,'blog/index.html',{'articles':articles})
def page(request,article_id):
article = models.Article.objects.get(pk=article_id)
return render(request,'blog/page.html',{'article':article})
5.创建templates下的page.html(文章内容页面)
<!DOCTYPE html>
<html>
<head>
<title>my page</title>
</head>
<body>
<h1>{{ article.title }}</h1>
<br/>
<h3>{{ article.content }}</h3>
<br/><br/>
<a href="#">修改文章</a>
</body>
</html>
6.app中的urls.py中配置如下:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^index/$',views.index),
url(r'article/(?P<article_id>[0-9]+)/$',views.page),
]
关键:URL参数传递
每个响应函数对应一个URL
上面的page响应函数多了一个参数,要在URL中体现出来
不同文章对应不同id localhost:8000/blog/article/1 ....article/2 对应不同文章
(?P<article_id>[0-9]+) 正则表达式匹配到的数字以article_id作为组名去匹配 组名必须和响应函数中的参数名保持一致。
使用(?P<>\d+)的形式捕获值给<>中的参数,比如(?P<article_id>\d+),当访问/index/article/1时,会将1捕获给article_id,这个值会传到views.py的page函数中的参数article_id,这样就可以判断展示哪个article的内容
Django学习(五)---模板扩展,开发博客页面的更多相关文章
- [python][django学习篇][9]设计正在博客视图(3)
需求: 真正的首页视图函数,当用户访问我们的博客首页时,他将看到我们发表的博客文章列表,就像 演示项目 里展示的这样.t https://docs.djangoproject.com/en/1.10/ ...
- [python][django学习篇][10]再次修改博客首页模板
目前我们看到的只是模板中预先填充的一些数据,我们得让它显示从数据库中获取的文章数据.下面来稍微改造一下模板: 删除所有article标签,然后添加以下内容,将从数据库读取到的内容填充到模板变量{{ p ...
- [python][django学习篇][12]继续设计博客首页,点击博客标题能显示文章的详情
回顾一下开发流程:配置url, 编写视图函数,编写对应模板 配置URL 首页视图匹配的 URL 去掉域名后,是一个空的字符串.每篇文章的详情有着不同的 URL,因此可以设计文章详情页面URl:< ...
- Django开发博客- 页面美化
css是一种用来描述某种标记语言写的web站点的样式语言.这里我们并不想展开讨论,关于CSS我在这里推荐一个很不错的资源: Codeacademy HTML & CSS course 不想从头 ...
- Django----使用模板系统渲染博客页面、实现列表和详情页的跳转、前后跳转功能
.模板写法同Flask,可以参考之前的FLask-模板 .将之前的BootStrap静态页面中的数据使用模板写 <!DOCTYPE html> <html lang="en ...
- 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客?
前言 OK,我也来造轮子了 博客系统从一开始用WordPress,再到后来用hexo.hugo之类的静态博客生成放github托管,一直在折腾 折腾是为了更好解决问题,最终还是打算自己花时间搞一个好了 ...
- django开发博客(1) 入门
现在正式开始博客开发 1.安装django1.4 如果你使用的是fedoraDVD版,安装时选择了web开发组建,这一步可以省略,因为它自带django环境 django下载地址 https://ww ...
- 纯django开发博客系统
企业级教程:纯django开发博客系统 1.视频教程 https://www.duanshuilu.com/ 2.教程文档 https://www.duanshuilu.com/ 0.课程简介1.简价 ...
- 基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(五)
系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
随机推荐
- javascript中break和continue的区别
1.break:跳出循环. 2.continue:跳过循环中的一个迭代.(迭代:重复反馈过程的滑动,其目的是为了逼近所需目标或结果.每一次对过程的重复称为一次"迭代",而每一次迭代 ...
- VR全景智慧城市:开启VR全景逛街新时代~
VR全景,又被称为3D实景,是一种新兴的富媒体技术,其与视频,声音,图片等传统的流媒体大的区别是"可操作,可交互". 对于顾客体验来说,VR确实是对于实体店是一种颠覆性的创新,它既 ...
- 学习Spark——那些让你精疲力尽的坑
这一个月我都干了些什么-- 工作上,还是一如既往的写bug并不亦乐乎的修bug.学习上,最近看了一些非专业书籍,时常在公众号(JackieZheng)上写点小感悟,我刚稍稍瞄了下,最近五篇居然都跟技术 ...
- 正则表达式入门案例C#
---恢复内容开始--- 在网上百度了好多关于正则表达式的,不过好多都是关于语法的,没有一个具体的案例,有点让人难以入门,毕竟我还是喜欢由具体到抽象的认识.所以我就在这先提供了一个入门小案例(学了了6 ...
- maven 创建后报错
<dependency> <groupId>javax</groupId> <artifactId>javaee-api</artifactId& ...
- Kotlin尝试之一:写代码前的准备
Kotlin是一种静态类型的编程语言,可在Java虚拟机上运行,也可以编译为JavaScript源代码. 其主要发展来自位于俄罗斯圣彼得堡的JetBrains程序员团队. 虽然语法与Java不兼容,但 ...
- Xamarin开发笔记—百度在线语音合成
语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为可以听得懂的.流利的口语输出的技术. 技术选型:语音合成初步选择有两个,一是讯飞.二是百度. 因为使用的是X ...
- java环境变量最佳配置
1.打开我的电脑--属性--高级--环境变量 2.新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7. ...
- [原]vue实现全选,反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...
- php练习 租房子
题目要求 1.封装类 <?php class DBDA { public $fuwuqi="localhost"; //服务器地址 public $yonghuming=&q ...