欢迎访问我的博客:小羊驼的部落阁
前端模板页面有很多,大家可以从网上下载,也可以使用我的前端模板页面,页面托管在我的github上,此模板是我从网上拷贝的
博客前端模板托管在GitHub:blog_templates
创建视图函数
django中后端的控制都是在视图函数中进行的,也就是view.py,每创建一个app,该app目录下都会有一个view.py,我们主要就是在这里进行后端代码的书写的。
myblog/views.py
from django.views import View
class IndexView(View):
"""
首页
"""
def get(self, request):
return render(request, 'index.html')
通过url将视图函数与模板关联起来
现在我们有了index.html页面了,也有了视图函数IndexView,但是怎么才能通过127.0.0.1:8000访问到这个页面呢?django中是通过url将这个页面与视图函数关联起来,也就是前后端的API接口。
在url.py中编写:
from myblog.views import IndexView
urlpatterns = [
path(r'^admin/', admin.site.urls),
path('', IndexView.as_view(), name='index'), #首页的url
]
当我们访问127.0.0.1:8000这个页面时,django会解析这个url,从而判断出该url连接到哪个视图函数,我们这里对应的就是IndexView。然后在IndexView中, 将index.html传递给前端,并通过浏览器展示给用户。
首页样式的加载
但是在刷新首页时,我们发现并没有样式,样式文件我们放在static文件夹中了,而index.html并没有定位到该目录。需要配置下
setting.py中添加,STATICFILES_DIRS:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
index.html中,在第二行添加:
{% load staticfiles %}
然后将代码中的css、js以及image路径指定到static文件夹中对应的文件,比如:
<link href="{% static '/css/main.css' %}" rel="stylesheet" type="text/css"/>
最后再刷新下页面, 发现我们的博客首页便出现了
视图函数中获得数据库中数据并传递给前端
但是现在我们展示的还只是静态页面,首页中博客的内容是我之前做测试时随便添加的,为了将我们自己从后台添加的博客展示到前端,我们还需要对视图函数进行进一步完善。
view.py
from myblog.models import Blog, Category, Tag
class IndexView(View):
def get(self, request):
all_blog = Blog.objects.all().order_by('-id')
return render(request, 'index.html', {
'all_blog': all_blog,
})
我们将models.py创建的三个表import进来,然后获取所有的博客queryset,并将其通过render传递到前端。
index.html
{% for blog in all_blog %}
<article>
...
</article>
{% endfor %}
对博客queryset进行for循环,article对象只需要保留一个就行了,其它的都可以删掉。
然后对article对象中的内容进行更改如下:
{{ blog.title }} # 博客的标题
{{ blog.create_time|date:'Y-m-d' }} # 博客的发表时间,用装饰器date指定显示格式
{{ blog.category.name }} # 博客的分类
{{ blog.content }} # 博客的内容
然后我们再次刷新首页,即可看到我们之前在后台添加的一篇博客,并且只有这一篇,我们可以再次登录admin,再添加几篇博客,看一看效果。