DjangoBlog实战手札：从零搭建一个校园博客系统

第4章 第32-33-34课

DjangoBlog实战手札：从零搭建一个校园博客系统

---

课程目标与简介

作为写过3个技术博客的老司机，这次带大家用Django开发完整的博客系统。目标很明确：

• ✅ 掌握核心能力：文章管理 + 用户系统 + Markdown支持
• ✅ 解决实际问题：课程笔记共享/社团活动记录/技术博客搭建
• ✅ 就业优势：互联网公司内容后台开发通用能力

# 举个校园场景：
# 计算机系学生想共享学习笔记
# 传统方式：发PDF到微信群 → 文件过期/无法检索
# 用DjangoBlog：在线编辑+永久存储+分类检索 (๑•̀ㅂ•́)و✧

---

项目简介：DjangoBlog校园博客

核心模块图解（以课程博客为例）：

graph LR A[文章管理] --> B[发布Python学习笔记] A --> C[修改实验报告错误] A --> D[删除过时资料] E[用户系统] --> F[用学号登录] E --> G[上传社团头像] E --> H[找回密码] I[内容格式] --> J[用Markdown插入代码块]

技术栈定位：

前端：Bootstrap5 + 轻量级JS
后端：Django 4.0 + SQLite（教学级）/ MySQL（生产级）
特色：Markdown编辑器 / 用户分级 / 响应式布局

---

项目实战五步走

步骤1：项目环境搭建 → 避免版本地狱

# 最佳实践：创建独立环境
python -m venv blog_venv# 新建虚拟环境
source blog_venv/bin/activate# Linux/Mac激活
.\blog_venv\Scripts\activate# Windows激活
pip install django==4.0 markdown# 核心依赖
django-admin startproject campus_blog# 创建项目

步骤2：MTV框架实现 → 理解Django骨骼

# 文件结构解读
campus_blog/
├── settings.py# 全局配置（关键！）
├── urls.py# 路由总控
└── wsgi.py
apps/
├── blog/# 文章APP
│├── models.py# 定义数据表
│├── views.py# 业务逻辑
│└── templates/# 前端模板
└── users/# 用户APP

步骤3：文章功能开发 → 核心业务实现

# models.py（文章数据结构）
from django.db import models

class Article(models.Model):
title = models.CharField("标题", max_length=100)# 如《Django入门指南》
content = models.TextField("内容")# Markdown原始文本
created_by = models.ForeignKey(User, on_delete=models.CASCADE)# 关联用户
created_at = models.DateTimeField(auto_now_add=True)# 自动记录时间

# views.py（增删改查逻辑）
def article_detail(request, pk):
article = Article.objects.get(pk=pk)# 根据主键查找
return render(request, 'detail.html', {'article': article})

步骤4：文章功能拓展 → Markdown渲染

# 转换Markdown为HTML（views.py）
import markdown

def article_detail(request, pk):
article = Article.objects.get(pk=pk)
# 关键转换！
article.content = markdown.markdown(
article.content,
extensions=['fenced_code']# 支持代码高亮
)
return render(request, 'detail.html', {'article': article})

# 前端展示（detail.html）
<div class="content">
{{ article.content|safe }}<!-- 关闭HTML转义 -->
</div>

步骤5：用户账号体系 → 安全与体验平衡

# 用户注册（users/views.py）
from django.contrib.auth.forms import UserCreationForm

def register(request):
if request.method == 'POST':
form = UserCreationForm(request.POST)
if form.is_valid():
form.save()# 自动创建用户
return redirect('login')
else:
form = UserCreationForm()
return render(request, 'register.html', {'form': form})

# 头像上传（models.py添加）
class Profile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
avatar = models.ImageField("头像", upload_to='avatars/')# 自动存储到media

# 前端表单（关键安全措施）
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="avatar">
<button>上传头像</button>
</form>

---

技术难点突破

场景1：密码重置 → 避免账号流失

# 配置邮件服务（settings.py）
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.qq.com'# 以QQ邮箱为例
EMAIL_HOST_USER = 'your_email@qq.com'
EMAIL_HOST_PASSWORD = '授权码'# 非登录密码
EMAIL_USE_TLS = True

# 使用内置密码重置视图（urls.py）
from django.contrib.auth import views as auth_views

urlpatterns = [
path('reset_password/',
auth_views.PasswordResetView.as_view(
template_name="password_reset.html"
),
name="reset_password"),
]

场景2：用户权限控制 → 保护文章安全

# 修改/删除文章前的权限校验（views.py）
from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin

class ArticleUpdateView(LoginRequiredMixin, UserPassesTestMixin, UpdateView):
model = Article
fields = ['title', 'content']

# 关键：验证当前用户是否为作者
def test_func(self):
article = self.get_object()
return article.created_by == self.request.user

场景3：Markdown扩展优化 → 提升写作体验

# 支持表格/目录等扩展（views.py改进）
article.content = markdown.markdown(
article.content,
extensions=[
'fenced_code',
'tables',# 支持 | 表格 |
'toc'# 自动生成目录
]
)

# 前端添加目录锚点（detail.html）
<div class="toc">
{{ article.toc|safe }}<!-- 显示Markdown生成的目录 -->
</div>

---

学长避坑指南

1. 文件上传404问题

# settings.py 必须配置媒体路径
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')# 项目根目录创建media文件夹

# urls.py 添加开发环境路由
from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

2. 用户系统深度集成技巧

# 在base.html中全局获取用户信息
{% if user.is_authenticated %}
<a href="{% url 'profile' %}">
<img src="{{ user.profile.avatar.url }}" width="30">
你好,{{ user.username }}！
</a>
{% else %}
<a href="{% url 'login' %}">登录</a>
{% endif %}

3. 生产环境升级清单

# 替换SQLite为MySQL（settings.py）
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'blog_db',
'USER': 'root',
'PASSWORD': 'your_password',
}
}

# 添加安全配置
SECURE_SSL_REDIRECT = True# 强制HTTPS
SESSION_COOKIE_SECURE = True

---

项目总结：校园应用场景

1. 课程学习

• 计算机系：保存代码作业 + 实验报告
• 文学院：现代诗创作集

2. 社团应用

• 摄影社：活动照片墙（配合图床扩展）
• 辩论队：比赛记录归档

3. 毕业设计

• 基础框架 + 定制需求（例如：

# 添加协同编辑功能
class Article(models.Model):
collaborators = models.ManyToManyField(User)# 允许多人协作

）

完整代码已托管Gitee（搜索 Campus-Blog-Django），包含测试数据和部署文档。遇到卡点欢迎在Issues提问 —— 写博客的本质是传递知识，而分享是程序员最美的浪漫 (•‾̑⌣‾̑•)✧˖°

# 启动命令（开发环境）
python manage.py runserver