Django 搭建博客项目（1）-项目需求介绍

作者: 零星瓢虫 | 来源:发表于2020-08-16 21:15 被阅读0次

本系列文章通过 Django 的框架搭建一个博客项目，在此之前，需要熟悉做出以下的准备工作：
1 熟悉 python 语言的使用。
2 熟悉 django 常用的搭建后台操作流程。
3 熟悉 django 连接数据库 mysql 的一些操作。
4 熟悉一些前端 h5、css、js 的基础知识。

工具使用：
1 Pycharm 开发工具。
2 Mysql 服务器。
3 Sqlyog 可视化数据库。
4 Redis 进行缓存。

在开发博客项目之前，先对项目需求进行简单分析：

效果图_1

上图所示即为博客项目的首页面。

根据首页面的展示情况，可以将该博客项目划分几大重要需求的功能区：

首页展示
帖子分类
帖子归档
近期文章
关于博主
全文搜索
发布帖子

在上述几大功能点之中，也会有一些细分的功能。在后续文章详情中也会一一进行讲解。

对基本需求分析完成，接下来我们就创建一个 blog 的项目，并先完成首页的内容展示：

效果图_2

blog 项目创建完成之后，继续新建 post 模块处理发帖相关的功能。

python manage.py startapp post

效果图_3

对 post 模块进行相关配置。
setting.py 文件配置 post 模块：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'post',
]

主模块下进行 urls 的路由跳转配置：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('post.urls'))
]

在 post 模块下新建 urls.py 文件：

# coding=utf-8
from django.conf.urls import url
from post import views

urlpatterns = [
    url('^$', views.queryAll)
]

首页需要查询博客发帖数据，定义 queryAll 方法进行查询：

post 模块下新建 views.py 文件，处理 url 的请求：

# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render


# Create your views here.
# 渲染主页面
def queryAll(request):
    return render(request, 'index.html')

以上完成首页请求的相关配置基本。

效果图_4

对首页 index.html 模块展示进行分析。
继续回到文章开头到首页展示效果图：

效果图_5

首页可以分成四个部分：
header、left、right、footer。

在主工程下定义 templaters 目录，存放基础的前端资源文件。templates 目录下创建相关的 html 文件，首先创建 base.html 包含上述四个部分的模块。

base.html

<!DOCTYPE html>
<!-- saved from url=(0035)http://hello123.pythonanywhere.com/ -->
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" type="text/css" href="/static/style.css">
        {% block headerjs %}
        {% endblock %}
    </head>

    <body>
        <div id="container">
                <div id="wrap">
                    {% include 'header.html' %}
                    <div class="outer">
                        {% block left %}
                        {% endblock %}
                        {% include 'right.html' %}
                    </div>
                    {% include 'footer.html' %}
                </div>
            </div>
    </body>
</html>

base.html 定义了 title 和 left 供继承者去填充，同时包含了 header.html 、right.html 和 footer.html 定义网页右边和下边的布局。base.html 文件同时引入了 css 文件。

新建 static 目录存储 css 等资源文件：

效果图_6

因为我们要把 static 里面资源分类，所有的 css 文件都会放在 css 的目录下面。后面可能会增加 js 等前端资源目录。而我们刚刚在 base.html 中用的 href="/static/style.css" 进行引用，则要在 setting.py 中对配置 static 对应的路径。

模块下的 static 目录和主工程下的 /static/css目录都可以通过 /static/资源名进行访问。
配置完成首页的主框架，简单看下 head.html、right.html 、footer.html 文件：

head.html

<header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-inner" class="inner">
      <nav id="main-nav">
          <a class="main-nav-link" href="http://hello123.pythonanywhere.com/">首页</a>
          <a class="main-nav-link" href="http://hello123.pythonanywhere.com/archive/">归档</a>
          <a class="main-nav-link" href="http://hello123.pythonanywhere.com/aboutme" target="_blank">关于</a>
      </nav>
        <div class="d1">
    <form method="get" action="http://hello123.pythonanywhere.com/search/">
      <input type="text" name="q" placeholder="搜索">
    </form>
  </div>
    </div>
  </div>
</header>

right.html

<aside id="sidebar">
    <!--分类-->
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list">
                <li class="category-list-item">
                    <a class="category-list-link" href="http://hello123.pythonanywhere.com/category/1">android</a>
                    <span class="category-list-count">4</span>
                </li>

                <li class="category-list-item">
                    <a class="category-list-link" href="http://hello123.pythonanywhere.com/category/2">ios</a>
                    <span class="category-list-count">3</span>
                </li>

                <li class="category-list-item">
                    <a class="category-list-link" href="http://hello123.pythonanywhere.com/category/3">h5</a>
                    <span class="category-list-count">1</span>
                </li>
            </ul>
        </div>
    </div>

    <!--归档-->
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list">
                <li class="archive-list-item">
                    <a class="archive-list-link" href="http://hello123.pythonanywhere.com/archive/2020/06">2020年06月</a>
                    <span class="archive-list-count">6</span>
                </li>
                <li class="archive-list-item">
                    <a class="archive-list-link" href="http://hello123.pythonanywhere.com/archive/2020/05">2020年05月</a>
                    <span class="archive-list-count">1</span>
                </li>

                <li class="archive-list-item">
                    <a class="archive-list-link" href="http://hello123.pythonanywhere.com/archive/2020/04">2020年04月</a>
                    <span class="archive-list-count">1</span>
                </li>
            </ul>
        </div>
    </div>

    <!--近期文章-->
    <div class="widget-wrap">
        <h3 class="widget-title">近期文章</h3>
        <div class="widget">
            <ul>
                <li>
                    <a href="http://hello123.pythonanywhere.com/post/8" target="_blank">python 连接mysql数据库</a>
                </li>
                <li>
                    <a href="http://hello123.pythonanywhere.com/post/7" target="_blank">ios 升级13遇到的问题</a>
                </li>
                <li>
                    <a href="http://hello123.pythonanywhere.com/post/4" target="_blank">android 界面绘制的全过程</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="widget-wrap">
        <h3 class="widget-title">友情链接</h3>
        <div class="widget">
            <ul>
                <li>
                    <a href="http://www.csdn.com/" target="_blank">csdn</a>
                </li>
                <li>
                    <a href="http://www.jianshu.cn/" target="_blank">简书</a>
                </li>
            </ul>
        </div>
    </div>
</aside>

footer.html

<footer id="footer">
  <div class="outer">
    <div id="footer-info" class="inner">
      © python面面观<br>
      Powered by <a href="http://hello123.pythonanywhere.com/#" target="_blank">harusty</a>
      Theme by <a href="http://hello123.pythonanywhere.com/#" target="_blank">harusty</a>
    </div>
  </div>
</footer>

base.html 已经搭建完毕，post 模块下继续新建 templates 目录用于存放与 post 模块相关的资源文件。templates 下继续创建 index.html 集成自 base.html。

index.html

{% extends 'base.html' %}
{% block title %}首页{% endblock %}
{% block headerjs %}
    <style>
        form {
            position: relative;
            width: 150px;
            margin: 0 auto;
        }
        .d1 {
            float: right;
            line-height: 67px;
        }
        .d1 input {
            width: 100px;
            height: 30px;
            border: 2px solid darkred;
            border-radius: 5px;
            outline: none;
            background: white;
            color: #1e242a;
        }
</style>
{% endblock %}
{% block left %}
    <div id="main">
        <article class="article article-type-post">
            <div class="article-meta">
                <a class="article-date">
                    <time>2020-06-12 16:58:24</time>
                </a>
                <div class="article-category">
                    <a class="article-category-link" href="#" target="_blank">android</a>
                </div>
            </div>
            <div class="article-inner">
                <header class="article-header">
                    <h1 itemprop="name">
                        <a class="article-title" href="#" target="_blank">Activity 和 Window 的关系</a>
                    </h1>
                </header>
                <div class="article-entry" itemprop="articleBody">
                    <h2>前言</h2>
                    <hr>
                    &lt;p&gt;Activity
                    <p class="article-more-link">
                        <a href="/post/8" target="_blank">阅读全文</a>
                    </p>
                </div>
                <footer class="article-footer">
                    <a data-url="存放文章的url" class="article-share-link">分享</a>
                    <ul class="article-tag-list">

                        <li class="article-tag-list-item">
                            <a class="article-tag-list-link" href="#">android</a>
                        </li>
                    </ul>
                </footer>
            </div>
        </article>
        <nav id="page-nav">
            <span class="page-number current">1</span>
            <a class="page-number" href="/page/2">2</a>
            <a class="page-number" href="/page/3">3</a>
            <a class="page-number" href="/page/4">4</a>
            <a class="page-number" href="/page/5">5</a>
            <a class="page-number" href="/page/6">6</a>
            <a class="page-number" href="/page/7">7</a>
            <a class="page-number" href="/page/8">8</a>
            <a class="extend next" rel="next" href="/page/2">Next »</a>
        </nav>
    </div>
{% endblock %}

index.html 继承 base.html ，同时自定义了 title、header.js 和 left 模块。

效果图_7

index.html 所涉及到的相关配置以及资源已经准备完成，我们运行项目并在浏览器访问就可以看到开头首页的展示效果。

效果图_8

欢迎关注公众号，在聊天对话框回复「博客」获取源码地址以及其他 python 相关知识。

python面面观.jpg

Django 搭建博客项目（1）-项目需求介绍

base.html

head.html

right.html

footer.html

index.html

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读