链接
github仓库地址: https://github.com/dajavv/DjangoBolg
视频参考
使用工具
- PyCharm 2023.1
- python3.10 版本
Hexo框架
在使用了一段时间的Hexo博客后,对该框架的感受:
优势
- 具有很多的主题,每一款都非常好看
- 强大的模板语法
- 生态完善,具有大量插件,比如:bilibili视频的小卡片、全局搜索、评论模块
劣势
- 部署不便,要使用命令导入静态文件后部署到github,国内登入网络不稳定(痛点)
- 维护较为困难
- 加载缓慢
- 缺少后端进行管理
- 无法对整体文章进行搜索(可以通过插件实现,比较麻烦,不考虑)
- 缺少与访客的互动
- 缺少对访客数据的记录
解决问题
对于这些问题我决定对博客进行重构,让博客具有更强的功能,我计划对Hexo框架所创建的博客进行重构。
在重构的同时对django框架进行学习
功能
计划
- (√)导航栏
- (√)白天黑夜切换
- (√)分类
- (√)归档
- (√)标签分类
- (√)最新文章
- (√)后台发布公告
- (√)后台发布文章
- (√)后台管理
- (×)代码高亮
新计划
- (×)访客数据统计
- (×)全站搜索
- (×)音乐盒
流程
- 使用PyCharm创建Django项目,conda创建虚拟环境python3.10,导包
- 创建app命名为post
- settings中添加post应用
- 对原html静态文件进行导入拆分,制作基础模版
- 配置路由,创建视图函数,
- 检查是否能正常运行显示
- 配置数据库,创建数据表,对需要进行动态更新的数据创建数据表
- 将要管理的数据表添加到admin文件中
- 使用django的模版语法将要动态改变的数据放到html中
- 完善功能(分页、分类、归档、标签归类、最新文章……)
- 对网页进行测试
- 完成
开始
创建应用
打开控制台
(可以使用使用ctrl+alt+R快捷键打开manage专属控制台)
django-admin startproject 项目名
cd 项目名
python manage.py startapp app名
在settings.py文件INSTALLED_APPS配置项中添加post应用
INSTALLED_APPS = [
...
'post' #添加app
]
创建基础模板
对博客网页进行拆分
组件化拆分利于更新与维护,
- 基础模版
- 横幅
- 导航栏
- 侧边栏
- 介绍卡片
- 公告
- 分类
- 标签
- 归档
- 最新文章
- 底部页脚
- 内容模块
- 分类
- 归档
- 标签
- 文章选项卡
- 关于
基础模板
在基础模版中,多为静态不需要改动的页面部分,将他们封装在根目录的templates模版文件夹中
{% include 'banner.html' %} #横幅
<div id="main-grid" class="shadow">
{% include 'head.html' %} #导航栏
{% include 'right.html' %} #侧边栏
{% block main %} <!--与app中的index相连--> #文章选项卡片
{% endblock %}
{% include 'footer.html' %} #底部页脚
<div class="back-to-top-wrapper"><!--回到顶部按键-->
<button id="back-to-top-btn" class="back-to-top-btn" onclick="topFunction()"> #回到顶部的按钮
<span class="material-symbols-rounded">keyboard_arrow_up</span>
</button>
</div>
</div>
Django模版语法
{% include 'banner.html' %} #引入一部分html代码
{% block main %}...{% endblock %} #页面的动态部分,后面写的会覆盖同名的代码块,在基础模版中用于占位
{% extends 'base.html' %} #继承基础模版中的静态部分
{% block title %}网页标题{% endblock %} #指定该网页的标题
{% for i in 传递过来的相应数据 %}...{% endfor %} #和python中的for相似
{% if 判断条件 %}{% elif 判断条件 %}{% else %}{% endif %} #条件加载
静态文件路径配置
在settings配置文件中添加STATICFILES_DIRS配置
这里是模版的配置,设置优先在根目录中寻找templates模版文件夹
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates']
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'post.mycontextprocessor.getRightInfo' # 引入分类,路径是app中的类中的函数
],
},
},
]
路径配置
只有配置了静态文件在html文件中才能正确找到静态的文件
在settings配置文件中
STATIC_URL = 'static/' #根目录下的static文件夹
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static', 'css'), # BASE_DIR根目录,这条配置会指定对寻找文件的路径,这里我让他去寻找static文件夹中的css文件夹
os.path.join(BASE_DIR, 'static', 'js'),
os.path.join(BASE_DIR, 'static', 'fontawesome'),
]
在html中
<link rel="stylesheet" href="/static/style.css">
其中的href路径,相当于
static/css/style.css
<script src="/static/bundle.js"></script>
路由配置
在项目名的文件夹中的urls文件中进行配置
在这里我将路由导向了app中的urls文件
urlpatterns = [
path('admin/', admin.site.urls), #django自带的后台管理面板
path('', include('post.urls')), # 将路由导向app中的urls文件,核心路由配置
]
app中的路由配置
导入视图类来自app中的views文件
导入路由url配置类
from post import views #app中的视图类
from django.urls import path, re_path #
在这里的路由配置方法主要有两种
as_view的作用
as_view()是Django中用于将类视图转换为可调用的视图函数的方法。
在Django中,类视图是基于类的视图的一种方式。类视图通过继承Django提供的一些基类,可以更清晰、灵活地定义视图逻辑,并提供了许多便捷的方法和属性。但在URL配置中,我们需要将视图映射到具体的URL路径上,这就需要将类视图转换为可调用的函数形式。
.as_view()方法就是用来实现这个转换的。当在URL配置中定义一个类视图时,我们通常会使用.as_view()
方法将其转换为可调用的视图函数,并将其作为参数传递给URL配置。
path(常用):
<>中会匹配一个具体的数据,这个数据将会作为参数传递到视图函数当中
path('page/<int:num>/', views.IndexViex.as_view(), name='页面'), #路由配置
#参数一:路由将要拼接的url
#参数二:指定路由的视图函数
#参数一:别名
#views视图函数
def get(self, request,num=1): #num设置了默认值
re_path(使用正则表达式进行匹配):
用r’’来标识正则表达式的文字,
^$匹配开头导结尾
(page/.?/)? page/后面匹配任意文本(除换行符),匹配多次,?可有可无,()?该段文本可有可无
post/ 必须存在的路径
(?P
<>中匹配一个数据,这个数据将会作为参数传递到视图函数当中
re_path(r'^(page/.*?/)?post/(?P<postid>\d+)/$', views.DetailViex.as_view(), name='文章'),
视图函数的创建
在viexs文件中创建与视图一一应的视图类,同时必须继承View视图类
get方法,因为是类方法索引必须有self,同时,必须有一个名为request消息的参数,这个参数承载了请求者的信息,我们可以对他进行响应处理,在这个方法中将会接收访问该URL时候的get请求,get请求会在进入url时发起(
get请求也可以手动发起),多用于获取数据
class IndexViex(View):
def get(self, request):
return render(request, 'index.html', {})#向浏览器返回视图,响应数据
#第一个参数是请求消息
#第二个参数是指定所要显示的页面,这里是名为index的html网页文件返回到浏览器,(这里会在前面我们在settings中配置的模版文件夹中自动寻找,当根目录中的模版文件夹中没有该html文件时才会来到app的模版文件夹中寻找)
#第三个参数是响应数据,一般为将要加载到网页中的动态数据,会在html中使用django模版语法进行加载
启动程序
若前面的配置的没有问题,这时候已经可以启动项目查看网页的大体形态了
这时候的页面还是静态的
打开控制台输入启动命令,启动程序
cd 项目文件夹
python manage.py runserver --post=8000
动态数据
数据库配置
在settings文件中设置数据库
默认数据库SQLite,SQLite 是一个轻量级的关系型数据库管理系统,它以文件形式存储数据库,并且不需要独立的数据库服务器进程。这使得
SQLite 在开发和测试阶段非常方便,因为它不需要额外的数据库服务器安装和配置。
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3', # 数据库引擎
'NAME': BASE_DIR / 'db.sqlite3', # 路径
}
}
mysql数据库的配置方法
使用mysql需要额外导入一个包
pip install mysqlclient
导入后对settings中的DATABASES进行配置
DATABASES = { # 配置数据库
'default': {
'ENGINE': 'django.db.backends.mysql', # mysql数据库引擎
'NAME': 'boke1', # 数据库名
'USER': 'root', # 账号
'PASSWORD': '123456', # 密码
'HOST': '127.0.0.1', # url
'PORT': '3306', # 端口号
}
}
迁移文件
完成数据库的配置后,输入命令创建数据库的迁移文件,执行迁移文件
python manage.py makemigrations #创建迁移文件
python manage.py migrate #执行迁移文件
这时候在根目录下就会生成一个db.sqlite3数据库文件
下载驱动,对数据库进行连接
后台管理系统
这里使用django自带的管理系统
在应用的admin文件夹中配置
from __future__ import unicode_literals
from django.contrib import admin
from .models import *
# Register your models here.
admin.site.register(Category) # 注册到admin控制面板中
admin.site.register(Tag)
admin.site.register(Post)
admin.site.register(AdminUser)
添加管理用户
对数据库中的auth_user表添加默认管理员账户(我用的是PyCharm右侧的数据库栏手动添加的数据)
登入管理页面http://127.0.0.1:8000/admin/
输入你所设置的后台管理账户
对数据库添加基础测试数据