Django 搭建博客项目（1）-项目需求介绍
2020-08-16 本文已影响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>
<p>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
