Django2.2 页面之间进行跳转，功能补充

最新推荐文章于 2023-10-04 16:18:58 发布

ZT黄

最新推荐文章于 2023-10-04 16:18:58 发布

阅读量2.7k

点赞数 2

分类专栏： Python

本文链接：https://blog.csdn.net/weixin_44055272/article/details/100100070

版权

Python 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

1. 主页与详细页面之间进行跳转
- 1.1 写DTL代码，通过链接标签的方式进行跳转
- 1.2 用DTL的功能进行跳转。
2. 博客新建功能、博客修改功能

1. 主页与详细页面之间进行跳转

1.1 写DTL代码，通过链接标签的方式进行跳转

（1）播客主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>主页</h1>
{% for article in articles %}
<!--一个用于跳转到博客详细信息页面的链接-->
    <a href="" style="font-size:36px">{{ article.title }}</a>
    <br/>
{% endfor %}
<a href="">新建文章</a>
</body>
</html>

（2）博客详细页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>{{ article.title }}</h1>
<p>{{ article.content }}</p>
<a href="">修改文章</a>
<!--一个用于返回主页的链接-->
<a href="">返回主页</a>
</body>
</html>

1.2 用DTL的功能进行跳转。

（1）在项目urls.py里指定某个一级url的命名空间。

path('blog/', include(('blog.urls',"blog"),namespace="blog")),

（2）在app的urls.py里指定在本app命名空间下的某个url名称。blog命名空间下index表示主页，detail表示详细信息页面。

 # 主页面
    path("index/",views.index,name="index"),
    # 每个博客的详细页面
    re_path("(?P<article_id>[0-9]+)",views.detail,name="detail"),

（3）在DTL使用这个url名称来唯一确定一个url。
<1>可以通过{% url ‘命名空间:名称’ 参数 %}的方式唯一确定项目里的url地址。
<2>在博客主页里这样指定，指定跳到特殊id的博客详细信息页面。blog:detail可以确定在blog命名空间下的detail这个url，并且为他提供参数article.id。

    <a href="{% url 'blog:detail' article.id %}" style="font-size:36px">{{ article.title }}</a>

<3>在博客详细信息页面这样指定，跳转到主页。

<a href="{% url 'blog:index' %}">返回主页</a>

2. 博客新建功能、博客修改功能

2.1 博客新建功能

（1）新建博客的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="">
    <label>开始新建文章</label><br/>
    <!--用来防止某种网站csrf攻击-->
    {% csrf_token %}
        <label>
            文章标题
            <input type="text" name="title" value="">
        </label><br/>
        <label>
            文章内容
            <input type="text" name="content" value="{{ article.content }}">
        </label><br/>
        <input type="submit" value="提交">
</form>
</body>
</html>

（2）配置url和view视图

# 博客新建页面
    path("new_blog/",views.new_page,name="new_bloge")

def new_blog(request):
    return render(request, "blog/new_blog.html")

（3）在首页的新博客连接上提供连接到这个url的link。

<a href="{% url 'blog:new_blog' %}">新建文章</a>

（4）通过http://127.0.0.1:8000/blog/new_page/ 或者点击首页上新建可以看到页面。但是点击提交以后提交不到数据库里。在这里插入图片描述

2.2 实现向数据库的提交

（1）点击提交以后可以实现向数据库的提交思路：
<1>点击以后调用跳转到主页，可以向主页提交一个表单，主页收到表单把获得内容创建一个对象存到数据库里
<2>此时需要对主页的视图函数进行重写，根据是否传入HTTP的POST提交的表单信息判断是否需要对表单信息进行
(2)把填写的表单以post方式提交到主页上。action表示提交的地址，method表示提交的方式。在表单首部这样填写表示把表单以post方式提交到主页上。

<form action="{% url 'blog:index' %}" method="post">

（3）在主页的视图函数上对接收到表单进行响应。表示
<1>如果接收到了post提交上来的表单，就会把表单信息填入到数据库里。
<2>如果没有收到post提交上来的表单，表示正常的访问主页，则不用往数据库里添加新的东西
<3>无论如何到最后都必须在主页上显示所有的博客信息

https://www.jianshu.com/p/be25373eb5eb

def index(request):
    if request.POST.get('title','')!='':
        #如果接收到了POST请求
        title = request.POST["title"]
        content = request.POST["content"]
        Article.objects.create(title=title, content=content)
    articles=Article.objects.all()
    return render(request,'blog/index.html',{"articles":articles})

（4）效果图，提交页面，提交后到主页上。
在这里插入图片描述

2.3 博客修改页面分析过程

（1）博客修改页面要求和新建页面效果一样，但是有默认的题目和内容，表示原本博客的内容。因此只需要向模板里传入一个当前博客对象就可以了。
（2）可以和新建博客使用同一个DTL，判断这个博客对象是否存在，存在就在输入框显示原本的内容，否则不显示内容。
（3）修改完成后向主页提交，需要判断这是不是新建的博客，如果是新建的博客需要新创建一个对象并且存到数据库里。如果不是新建的，需要提供这是哪一个博客，博客的编号，把这个博客从数据库里提取出来，修改其中某些值，然后存回到数据库里。

2.4 实操

（1）修改new_blog的url，要求他接受一个数字。

    path("new_blog/(?P<article_id>[0-9]+)/",views.new_blog,name="new_blog")

（2）修改new_blog的view，对这个数字进行判断，如果是0不向模板里传博客对象。如果不是0向模板里传博客对象。

def new_blog(request,article_id):
    if article_id=='0':
        return render(request, "blog/new_blog.html")
    else:
        article = Article.objects.get(pk=article_id)
        return render(request, "blog/new_blog.html",{"article":article})

（3）修改new_blog.html
下面是改进后的new_blog.html页面。如果文章存在，会像主页提交的表单里有文章的id，否则会提交一个0用于分别是新建文章还是修改文章。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% if article %}
<form action="{% url 'blog:index' %}" method="post">
    <label>开始修改文章</label><br/>
    {% csrf_token %}
        <input type="hidden" name="id" value="{{ article.id }}">
        <label>
            文章标题
            <input type="text" name="title" value="{{ article.title }}">
        </label>
        <br/>
        <label>
            文章内容
            <input type="text" name="content" value="{{ article.content }}"}>
        </label>
        <br/>
        <input type="submit" value="提交">
</form>
{% else %}
<form action="{% url 'blog:index' %}" method="post">
    <!--用来防止某种网站csrf攻击-->
    {% csrf_token %}
        <label>
            文章标题
            <input type="text" name="title" value="">
        </label><br/>
        <label>
            文章内容
            <input type="text" name="content" value="{{ article.content }}">
        </label><br/>
        <input type="submit" value="提交">
</form>
{% endif %}
</body>
</html>

（4）修改在主页指向新建博客的href和在详细页面指向修改博客的href。
index.html里

<a href="{% url 'blog:new_blog' 0 %}">新建文章</a>

detai.html里

<a href="{% url 'blog:new_blog' article.id %}">修改文章</a>

（5）现在可以通过点击链接或者直接访问的方式到达修改页面了。

2.5 博客修改实现向数据库的提交

（1）在views.py里修改新建博客的视图函数。

def index(request):
    if request.POST.get('title','')!='':
        # 如果接收到了POST请求
        id=request.POST['id']
        title = request.POST['title']
        content = request.POST['content']
        if id=='0':
            #如果新建博客
            Article.objects.create(title=title, content=content)
        else:
            # 如果是修改博客，从数据库里取出来，并且修改后存到数据库里
            edited_article = Article.objects.get(pk=id)
            edited_article.title = title
            edited_article.content = content
            edited_article.save()
    # 展示所有数据
    articles=Article.objects.all()
    return render(request,'blog/index.html',{"articles":articles})

（2）可以通过点击链接直接访问了。

ZT黄

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
Django2.2 页面之间进行跳转，功能补充

文章目录1. 主页与详细页面之间进行跳转1.1 写DTL代码，通过链接标签的方式进行跳转1.2 用DTL的功能进行跳转。2. 博客新建功能、博客修改功能2.1 博客新建功能2.2 实现向数据库的提交2.3 博客修改页面分析过程2.4 实操2.5 博客修改实现向数据库的提交1. 主页与详细页面之间进行跳转1.1 写DTL代码，通过链接标签的方式进行跳转（1）播客主页<!DOCTYPE ...
复制链接

扫一扫