登录        注册
本站基于Django开发,源码 Github 欢迎 Fork、Star。由于站点升级导致评论区留言信息丢失,欢迎前来发表新的评论

Django个人博客开发八 | 博客首页开发一

Django stormsha 3805浏览 448喜欢 0评论
本渣渣不专注技术,只专注使用技术,不是一个资深的coder,是一个不折不扣的copier

1、添加模板

现在我们进入博客的首页 127.0.0.1:8000, 发现还是欢迎页面,因为我们还没有给博客添加任何模板,也就是前端HTML页面

博客前端模板托管在GitHub:HTML

将项目下载到本地后,内含两个文件夹,static、templates,这两个文件在 Django个人博客开发一 | 抓取网站源码 中获得的,将 static 文件夹整个拷贝到博客项目根目录下,然后在将 templates 文件夹下的 html 文件全部拷贝到到 templates 目录下。里边的 index.html 就是我们博客的首页。

2、创建视图

Django 中后端的控制都是在视图函数中进行的,也就是 view.py,每创建一个 app,该 app 目录下都会有一个view.py,我们主要就是在这里进行后端代码的书写的。

# ---------------------------
__author__ = 'stormsha'
__date__ = '2019/3/15 20:31'
# ---------------------------

from django.views import generic
from django.shortcuts import get_object_or_404, get_list_or_404
from .models import Article, BigCategory, Category, Tag

# Create your views here.
class IndexView(generic.ListView):
    """
        首页视图,继承自ListVIew,用于展示从数据库中获取的文章列表
    """
    # 获取数据库中的文章列表
    model = Article
    # template_name属性用于指定使用哪个模板进行渲染
    template_name = 'index.html'
    # context_object_name属性用于给上下文变量取名(在模板中使用该名字)
    context_object_name = 'articles'

3、配置首页路由

通过 url 将视图函数与模板关联起来

现在我们有了 index.html 页面,也有了视图函数 IndexView,但是怎么才能通过 127.0.0.1:8000 访问到这个页面呢?django中是通过 url 将这个页面与视图函数关联起来,也就是前后端的API接口。

添加 urls.py 文件   blog -> storm

配置页面路由   blog -> storm -> urls.py

from django.conf.urls import url
from .views import IndexView

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

【注意】—— template_name 是指定使用的模板文件,传递给视图,进行数据渲染,后边会详讲路由

配置博客应用路由

blog -> blog -> urls.py

from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    # 后台管理应用,django自带
    url(r'^admin/', admin.site.urls),
    # storm 应用
    url('', include('storm.urls', namespace='blog')),  
]

目前项目结构

.
|-- blog
|   |-- storm               # 博客应用
|   |   |-- migrations      # 数据库映射文件
|   |   |-- __init__.py     # 声明模块,内容默认为空
|   |   |-- admin.py        # 该应用的后台管理系统
|   |   |-- apps.py         # 应用配置,Django-1.9以后自动生成
|   |   |-- models.py       # 数据模块,使用ORM框架
|   |   |-- tests.py        # 自动化测试的模块    
|   |   |-- urls.py         # 应用路由    
|   |   |-- views.py        # 执行响应的代码所在模块,是代码逻辑处理的主要地点,项目中大部分代码在这里编写    
|   |-- blog                # 项目的容器
|   |   |-- __init__.py     # 声明模块,内容默认为空
|   |   |-- settings.py     # 该 Django 项目的设置/配置。
|   |   |-- urls.py         # 该 Django 项目的 URL 声明; 一份由 Django 驱动的网站"目录"。
|   `-- wsgi.py             # 一个 WSGI 兼容的 Web 服务器的入口,以便运行你的项目
|   |-- static              # 静态文件
|   |   |-- css
|   |   |-- fonts
|   |   |-- images
|   |   |-- js
|   |-- templates           # 模板文件
|   |   |-- about.html
|   |   |-- donate.html
|   |   |-- exchange.html
|   |   |-- index.html
|   |   |-- message.html
|   |   |-- project.html
|   |   |-- question.html
|   |   |-- resources.html
|   |   |-- technique.html
|   |   |-- wp-login.html
`-- manage.py

4、修改静态文件路径

访问 127.0.0.1:8000 这个页面时,Django 会通过正则表达式解析这个 url,从而判断出该 url 连接到哪个视图函数,我们这里对应的就是 IndexView。然后在 IndexView 中, 将 index.html 传递给前端,并通过浏览器展示给用户,这样我们便配置好了首页。

首页样式的加载

但是在刷新首页时,我们发现并没有样式,样式文件我们放在 static 文件夹中了,而index.html并没有定位到该目录

20311 配置静态路径

这里静态文件 static 需要在 settings.py 中配置一下路径,templates 已经在 Django个人博客开发五 | 创建第一个APP 中设置过了

blog -> blog -> settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

index.html 中,在第一行添加:

{% load staticfiles %}
  • 修改静态文件路径

前端H5源码:

<link rel='stylesheet' id='l2h_print_style-css'  href='../static/css/print.min.css' type='text/css' media='print' />
<link rel='stylesheet' id='style-css'  href='../static/css/style.css' type='text/css' media='all' />
<script type='text/javascript' src='../static/js/jquery.min.js'></script>

修改静态文件路径为绝对路径

<link rel='stylesheet' id='l2h_print_style-css'  href='/static/css/print.min.css' type='text/css' media='print' />
<link rel='stylesheet' id='style-css'  href='/static/css/style.css' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/jquery.min.js'></script>

把静态路径修改为动态路径

<link rel='stylesheet' id='l2h_print_style-css'  href='{% static 'css/print.min.css' %}' type='text/css' media='print' />
<link rel='stylesheet' id='style-css'  href='{% static 'css/style.css' %}' type='text/css' media='all' />
<script type='text/javascript' src='{% static 'js/jquery.min.js' %}'></script>

以上只是部分示列,要把 index.html文件中的 ../ 按上边的方式全改掉

绝对路径也可以加载静态文件,为什么要配置动态路径,

settings.py 中设置的静态路径,/static/ 这里对应前端模板的 /static/, 如果后台 static 文件夹名称修改了,前端那么多 /static/ 都要修改那不得累死,所以这里给 把静态文件路由固定为 /static/.

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

这样如果修改了 static 静态文件夹的名称,只需要修改一下 os.path.join(BASE_DIR, 'static') 名字即可

(BASE_DIR, 'static') 中的 'static' 名字随便修改

4、查看运行效果

配置好静态路径后,重启项目,查看运行效果

20312

最后再刷新下页面, 发现我们的博客首页已经出现,接下来就是首页渲染数据了。不要感觉这么多步骤很难,对 Django 项目结构进一步了解后也就那么回事,就可以驾轻就熟的搞出自己喜欢的站点了,不要急躁,首页整好后接下来每干一点,都会在前台看到自己的成果,坚持一下,美好即将来临

现在我们展示的还只是静态页面,首页中博客的内容仍然是崔庆才的内容,为了将我们自己的文章从后台添加的文章展示到前端,我们还需要对视图函数进行进一步完善。下节继续~~~

转载请注明: StormSha » Django个人博客开发八 | 博客首页开发一

发表我的评论

表情
(0)个小伙伴在吐槽|0条评论
暂时没有评论,欢迎来尬聊!