数据库内容读取并展示到首页上,首页展示了非常多的文章的标题和摘要,如果要查看内容的话,还得点击文章的查看,进到 article.html 中才可以看到。

image.png

那点击操作,如何实现?本节课我们来实现这个功能。

链接的渲染

首先是点击,那个查看按钮,是个 a 标签,点击触发的 href 属性,也就是访问新的链接。

访问新的链接,链接中必须携带当前文章的信息,方便在视图函数层面,查询到具体的文章信息,并渲染到 article.html 中。

传输的信息必须独一无二,不然就会出现。数据库中,每条数据都会自动的携带一个 id,就是数据库的索引,这个信息是独一无二的。

打开 index.html 文件,在 a 标签的 href 属性上,渲染出 article 的 id 属性,如下图:

image.png

渲染效果展示

拼接的 url 是 /article/{{article.id}} ,这个 url 是不存在的,后续我们需要添加。

这样渲染出来的结果,是 /article/1、/article/2、/article/3 这样的内容,每篇文章都是不一样的,符合我们的需求。

效果图如下:

image.png

新建一个对应的请求接收函数

现在打开 views.py ,定义一个新的函数,用于绑定 /article/1 这类的 url。如下代码:

def article_detail(request, id):
    article = Article.objects.get(id=id)
    return render(request, 'article.html', {'article': article})

代码解释:

  • 函数名是 article_detail
  • 接收两个参数,一个是 request,另一个是 id,这个值需要从 url 中解析出来,django 会自动处理这点
  • 根据传入的 id,从数据库中查询到具体的文章对象
  • 然后将对象渲染到 article.html 模板上,并返回响应。

代码截图如下:

image.png

文章页面渲染

以上就是视图层的逻辑代码。接下来打开 article.html 文件,将文章的属性值,渲染上去,如下图:

image.png

    <div class="panel-heading">
                    <h4>{{article.title}}</h4>
                </div>
                <div class="panel-body">
                    {{article.content}}
                </div>

URL 绑定

视图逻辑函数和模板都准备好了,接下来就是 urls.py 中的注册,绑定 url,先上截图:

image.png

图中框中的部分就是将函数和 url 进行进行绑定。这个比较重要,有难度,代码解释:

  • 路径是 article/ ,函数是 article_detail
  • 是申请一类值,int 是数字,id 是参数名,即:是 article 后面跟着的内容,必须是数值且在传入给试图函数的时候,数值传给函数的 id 变量所以函数的括号中,除了 request,还有 id

以上就是 url 的绑定。

效果展示

内容全部完成,启动服务器,来看下效果如何,如下截图:

image.png

【选词填空】练习

参数 id 的类型,是类型,是在中定义了。

  • template
  • int
  • url
  • str
AI悦创·创造不同!
AI悦创 » Django点击交互操作

发表评论