Django搭建个人博客----Template:展现层

Template:展现层

  • template:展现层。负责如何把页面展示给用户(html)。

前面我们学习到了一些简单的文章编写功能。但是我们怎么通过网页展示给用户呢?

这就用到了前面的一些简单的知识。

首先,配置文件

在项目的根目录下,新建Directory,名字必须为templates,static,media',其他的也行,不过这样更规范。

iblog/settings.py中,添加os.path.join(BASE_DIR,'templates')

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],

顺便配置上

# 静态文件存放
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static').replace('\\', '/')
]
# 设置文件上传路径,图片上传、文件上传都会存放在此目录里
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

templates中新建一个名字为index.html的文件,

内容就随便写写,根据个人的设计,可以直接复制Bootstrap的代码,很方便,快速搭建一个首页了。

''''
'''' # 未展示代码部分
''''
<!-- 内容 -->
    <div class="container">

        <div class="row">
            <a href="#" class="text-muted">
                <h5>第一个标题测试</h5>
            </a>
        </div>
        <div class="row">
            <p>
                2020/07/31 created
            </p>
        </div>

'''
'''# 未展示代码部分
'''

像这样建立一个div就行,前端文件 我放在了gitee上面,详细的可以自己去下载。 这里只贴一些需要理解的代码。

写逻辑层

article/views.py

def index(request):
    all_article = Article.objects.all().order_by('-created_time')
    context = {
        'all_article': all_article
    }
    return render(request, 'index.html', context)

这段代码就是获取所有的文章,然后将数据展示到前端。

article/urls.py

    path('', views.index, name='index'),

建议将首页的路径设置为空,那么运行后,就是你想看到的页面了

实际效果如图:

是不是终于看到画面了。

改进前端

  {% for article in all_article %}
        <div class="row ">
            <a href="#" class="text-muted">
                <h5>{{ article.art_title }}</h5>
            </a>
        </div>
        <div class="row">
            <p>
                {{ article.created_time }}
            </p>
        </div>
    {% endfor %}

可以看到我们加了一个for循环,这样数据库里所以的文章都会展示到前端。

我们通过自带的后台增加几篇文章测试一下。

很轻松,数据就这样展示出来了。

是不是把我们的文章数据展示到页面上了,恭喜你,又进步了。




上一篇: Django搭建个人博客----admin后台简答使用
下一篇: Django搭建个人博客----文章详情页面