您的位置：首页 > 编程语言 > Go语言

Django 博客 - 4 编写第一个页面-主页

2017-10-21 14:59 337 查看

编写视图

在
blog/views.py
文件里添加

from django.views.generic import ListView
from blog.models import Post

class IndexView(ListView):
model = Post
context_object_name = 'posts'
template_name = 'blog/index.html'


这里是使用的是基于类的视图，由于要主页要展示的是
Post
的列表，所以需要继承
ListView
，用
model
指定要使用的模型，
template_name
指定对应的模板文件，后面再编写，
context_object_name
指定模型列表在模板里的名字，默认是
object_list


对应的视图函数写法是

from django.shortcuts import render
from blog.models import Post

def index(request):
posts = Post.objects.all()
return render(request, 'blog/index.html', {'posts': posts})


编写模板文件

在
blog
目录创建
templates
目录，再创建
blog
目录，新建一个
index.html
，内容如下

<ul>
{% for post in posts %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>


通过
for
标签将
posts
遍历，将
post.title
显示在列表里

这样，最简单的模板就生成了

同时将当前的模板目录添加到设置里，让模板引擎找得到对应的模板文件

修改
web/settings.py
，将
templates
添加到
TEMPLATES
的
DIRS
列表里

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


配置url

在
blog
路径下创建
urls.py
文件，添加

from django.conf.urls import url

from . import views

urlpatterns = [
url(r'^$', views.IndexView.as_view(), name='index'),
]


url
函数第一个参数，是一个正则表达式，这里是
'^$'
，代表为空，所以访问
http://127.0.0.1:8000/
就是这个页面

第二个参数是一个视图函数，由于这里是使用的基于类的视图，所以需要调用
as_view()
来返回一个视图函数

name
参数是一个命名，可以通过
index
这个名字来找到对应的
url


由于默认的
ROOT_URLCONF
是
'web.urls'
，所以需要将
blog/urls.py
配置到
web/urls.py
里面

urlpatterns = [
...
url(r'^blog/', include('blog.urls', namespace='blog')),
]


这里url函数第一个参数是
r'^blog/'
，所以
blog
的
url
都自带一个前缀
blog
，主页的的
url
也变成了
http://127.0.0.1:8000/blog/


namespace
指定了命名空间，必须通过
blog:index
这个名字来找到主页，这是为了避免不同应用
url
冲突

如果为了
http://127.0.0.1:8000/
也可以访问主页，可以在
web/urls.py
里面添加

urlpatterns = [
...
url(r'^$', views.IndexView.as_view())
]


配置完后，启动服务器，浏览器访问
http://127.0.0.1:8000/blog/
，就可以看到博客主页了，目前只是一个博客标题的列表

美化主页

由于主页模板什么样式都没有，所以比较简陋。可以使用自己熟悉的UI框架进行美化，因为我什么UI框架都不熟悉，所以我使用的是UIKit 3，比较容易上手

大部分页面都是有导航栏，并且使用相同的
css
和
js
文件，因此可以编写一个基模板，其他模板继承基模板

新建基模板文件
blog\templates\blog\base.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}Blog{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/css/uikit.min.css"/>
{% block beforehead %}{% endblock %}

</head>
<body>
<div class="uk-navbar-container">
<div class="uk-container uk-container-expand">
<nav class="" uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li><a href="{% url 'blog:index' %}">Blog</a></li>
<li><a href="#">Tag</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Achieve</a></li>
</ul>
</div>
</nav>
</div>
</div>

{% block body %}{% endblock %}
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.30/js/uikit-icons.min.js"></script>
</body>
</html>


修改
blog\templates\blog\index.html


<ul>{% extends 'blog/base.html' %}

{% block body %}
<div class="uk-container">
{% for post in posts %}
{{<article class="uk-article">
<h1 class="uk-article-title"><a class="uk-link-reset" href="{{ post.get_absolute_url }}">{{ post.title }}</a></h1>
<p class="uk-article-meta">Written by {{ post.author.username }} on {{ post.created_time }}, {{ post.views }} views</p>
<p>{{ post.excerpt }}</p>
<div class="uk-grid-small uk-child-width-auto" uk-grid>
<div>
<a class="uk-button uk-button-text" href="#">Read more</a>
</div>
<div>
<a class="uk-button uk-button-text"></a>
</div>
</div>
</article>
{% endfor %}
</ul></div>
{% endblock %}


再打开主页看一下，是不是没那么丑了

至此，主页就基本完成。

扩展阅读

Class-based views

Writing views

Built-in class-based generic views

URL dispatcher

本文相关源码
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航