Django搭建博客_3：视图和 URL 配置

迈不过友情╰ 2023-07-24 13:15 40阅读 0赞

### 文章目录 ###

*   *  1 页面展示
     *  2 URL 配置
     *  3 查看文章内容
     *   *  3.1 设置超链接
         *  3.2 文章详情页
     *  4 404页面
     *  5 总结

## 1 页面展示 ##

在blog/views.py文件中，编写一个视图函数，（当然也可以写到任何其他名称的文件中）。

from django.shortcuts import render
    from .models import BlogArticles
    
    def blog＿title(request):  # ①
        blogs = BlogArticles.objects.all()   # ②
        return render(request, "blog/titles.html", { "blogs" : blogs})  # ③

在语句①中，函数的参数是request，这个参数负责响应所接收到的请求且不能缺少，并总是位于第一的位置。除这个不可或缺的参数外，还可以根据需要在其后增加别的参数。  
语句②利用前面在交互模式中使用的语句，得到BIogArtcs对象实例。  
语句③以return结束当前函数，并返回结果。

render()方法的作用是将数据渲染到指定模板上，其中出现的blog.titles.html就是标题列表的前端展示页面，被称为“模板”。  
在每个应该中都可以有一个专门的模板目录，在blog目录中创建名为templates目录。  
templates目录是Django默认的存放本应用所需模板的目录，如果不用自定义的方式指定模板位置，Django会在运行时自动来这里查找render()方法中所指定的模板文件。

在模板目录中，有一个base.html文件，这个文件是将所有模板中公共的部分抽取出来，在其他文件中只需要编写个性部分的代码。也就是说，Django的模板文件中，是可以有“继承”功能的。  
在templates文件夹下依次建立base.html，blog文件夹和blog/titles.html文件，层级如下

├── templates
    │   ├── base.html
    │   └── blog
    │       └── titles.html

base.html代码如下：

<!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>{%block title%}{%endblock%}</title>
    	<link rel="stylesheet" href="http://necolas.github.io/normalize.css"> 
    	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
    	<div class="container">
    	{%block content%}
    	{%endblock%}
    	</div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>

titles.html代码如下：

{% extends "base.html"%}
    
    {% block title %}blog titles{% endblock%}
    
    {%block content %}
    <div class="row text-center vertical-middle-sm">
    	<h1>我的博客</h1>
    </div>
    <div class="row">
    	<div class="col-xs-12 col-md-8">
    	<ul>
    	{% for blog in blogs %}
    		<li>{
       {blog.title}}</li>
    	{% endfor %}
    	</ul>
    	</div>
    	<div class="col-xs-6 col-md-4">
    	<h2>广告</h2>
    	<p>csdn：https://blog.csdn.net/tt75281920</p>
    	
    	</div>
    </div>
    {% endblock %}

## 2 URL 配置 ##

函数和模板都编写好之后，要想通过网页访问，还需要进行URL配置，在./mysite/urls.py中配置项目的各个应用。

from django.conf.urls import url
    from django.contrib import admin
    
    urlpatterns = [
        url(r'^admin/', admin.site.urls),
        url(r'^blog/', include('blog.urls', namespace='blog', app_name='blog')),
    ]

上述代码中，将URL配置转向blog应用的urls.py文件，因此还需要创建blog/urls.py文件，并添加如下代码：

from django.conf.urls import url
    from . import views
    
    urlpatterns = [
        url(r'^$', views.blog_title, name="blog_title"),
    ]

配置完成后，访问 http://127.0.0.1:8000/blog/ 即可查看页面  
\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L1aFGGWI-1586615941260)(evernotecid://B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59/appyinxiangcom/9699651/ENResource/p2812)\]

## 3 查看文章内容 ##

需要完成，点击文章标题，就能查看文章详情页面，因此需要将文章标题做成超链接形式。

### 3.1 设置超链接 ###

修改titles.html文件中如下代码：

{% for blog in blogs %}
    	<li><a href="{ {blog.id}}">{
       {blog.title}}</a></li>
    {% endfor %}

刷新页面后查看，发现标题都有了超链接，但点击后，还不能展示其详情，还需要编写详情页模板文件。  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVr1a2G8-1586615941262)(evernotecid://B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59/appyinxiangcom/9699651/ENResource/p2813)\]][img-uVr1a2G8-1586615941262_evernotecid_B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59_appyinxiangcom_9699651_ENResource_p2813]

### 3.2 文章详情页 ###

*  首先在./blog/views.py文件中，增加响应文章详情请求的函数blog\_article()。

def blog_article(request, article_id):
    	article = BlogArticles.objects.get(id=article_id)
    	pub = article.publish
    	return render(request, "blog/content.html", { "article" : article, "publish": pub})

*  然后编写与之对应的模板，创建 ./templates/blog/content.html文件，代码如下：

{% extends "base.html"%}
    
    {% block title %}blog article{% endblock%}
    
    {%block content %}
    <div class="row text-center vertical-middle-sm">
    	<h1>{
       { article.title}}</h1>
    </div>
    <div class="row">
    	<div class="col-xs-12 col-md-8">
    	<p class="text-center"><span>{
       { article.author.username }}</span><span style="margin-left:20px">{
       { publish }}</span></p>
    	<div>{
       { article.body }}</div>
    </div>
    	<div class="col-xs-6 col-md-4">
    		<h2>广告</h2>
    		<p>csdn：https://blog.csdn.net/tt75281920</p>
    		
    	</div>
    </div>
    {% endblock %}

*  最后配置URL，在./blog/urls.py文件中增加新的URL路径。

from django.conf.urls import url
    from . import views
    
    urlpatterns = [
        url(r'^$', views.blog_title, name="blog_title"),
        url(r'(?P<article_id>\d)/$', views.blog_article, name="blog_detail"),
    ]

配置完成后，即可打开文章详情页面  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7moshUWt-1586615941262)(evernotecid://B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59/appyinxiangcom/9699651/ENResource/p2814)\]][img-7moshUWt-1586615941262_evernotecid_B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59_appyinxiangcom_9699651_ENResource_p2814]

## 4 404页面 ##

目前后台只有两篇博客，因此当访问不存在的文章id时，便会请求异常。  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W6MuIxva-1586615941263)(evernotecid://B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59/appyinxiangcom/9699651/ENResource/p2815)\]][img-W6MuIxva-1586615941263_evernotecid_B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59_appyinxiangcom_9699651_ENResource_p2815]  
通常这种情况，对于请求不存在的地址时，就显示404错误页面。所以，修改./blog/views.py中的blog\_article()函数。

from django.shortcuts import render, get_object_or_404
    from .models import BlogArticles
    
    def blog_article(request, article_id):
    	#article = BlogArticles.objects.get(id=article_id)
    	article = get_object_or_404(BlogArticles, id=article_id)
    	pub = article.publish
    	return render(request, "blog/content.html", { "article" : article, "publish": pub})

当请求不存在时，会抛出DoseNotExit异常。对于这个异常，可以使用try/except捕获，在except中可以使用raise Http404()来处理。这里面引入了get\_object\_or\_404(klass, \*args, \*\*kwargs)方法，这个方法能够简化对请求网页不存在时的异常处理。  
参数说明：

*  klass：一般是数据模型中的一个类（Model类）。
 *  \*args 和 \*\*kwargs：查询是的条件参数。

刷新页面后，就显示404错误了。  
![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sHpeXMtM-1586615941264)(evernotecid://B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59/appyinxiangcom/9699651/ENResource/p2816)\]][img-sHpeXMtM-1586615941264_evernotecid_B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59_appyinxiangcom_9699651_ENResource_p2816]

## 5 总结 ##

当用户通过浏览器请求某个URL时，Django会根据请求路径依次在URLConf中查询，并将**第一个符合**条件的映射关系作为查询结果。  
例如，访问http://127.0.0.1:8000/blog/1/，其访问过程如下：  
1、127.0.0.1:8000：是主域名部分，不进行查询。  
2、/blog/：首先在./mysite/urls.py中查询，遇到符合条件的URL映射（url(r’^blog/’, include(‘blog.urls’, namespace=‘blog’, app\_name=‘blog’)),），根据此映射中的描述，到blog.urls中查询。  
3、/1/：在./blog/urls.py中有URL（url(r’(?P<article\_id>\\d)/$’, views.blog\_article, name=“blog\_detail”),）配置，请求的路径正好符合这里的正则表达式，从而确定了最终访问的视图函数 views.blog\_article。

这种URL的配置方法显然在多应用的项目中是比较合适的。如果是单应用的项目，可以直接在./mysite/urls.py中配置即可。

[img-uVr1a2G8-1586615941262_evernotecid_B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59_appyinxiangcom_9699651_ENResource_p2813]: /images/20230528/36ecf72cbeff41929cecb6cac6f2b1a6.png
[img-7moshUWt-1586615941262_evernotecid_B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59_appyinxiangcom_9699651_ENResource_p2814]: /images/20230528/bd453b83dbea4d88bd3424cb35c5a974.png
[img-W6MuIxva-1586615941263_evernotecid_B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59_appyinxiangcom_9699651_ENResource_p2815]: /images/20230528/07b5a547ab52482b8b01998146da7322.png
[img-sHpeXMtM-1586615941264_evernotecid_B1C45E84-DAD5-4A3E-8F09-F042CE8BEC59_appyinxiangcom_9699651_ENResource_p2816]: /images/20230528/23017fa7308e4412a53e905980c92038.png