前言:本专栏所有代码都已上传至 GitHub 。https://github.com/yejue/django.git
功能分析
本实例制作的博客将有四个页面:
- 博客主页:提供两个页面的链接
- 文章添加页:用于添加文章与修改文章
- 博客列表:用于展示数据库中所有文章
- 文章浏览页:展示每篇文章的内容
模板准备
- models.py Blog 表
# 博客表
class Blog(models.Model):
blog_title = models.CharField(max_length=50)
blog_content = models.TextField()
def __str__(self):
return 'blog_title:{}'.format(self.blog_title)
- base.html (基类模板,被四个页面继承),可以定制 title、link、body 内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}页面{% endblock %}</title>
{% block link %}
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
- index.html (主页),继承base模板,使用了 /little_blog.css,使用 url 标签进行跳转
{% extends 'little_blog/base.html' %}
{% load static %}
{% block title %}
博客主页
{% endblock %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/little_blog.css' %}">
{% endblock %}
{% block body %}
<div class="top-nav">
<div>
<a href="{% url 'blog_add' %}"><span>写文章</span></a> | <a href="{% url 'blog_list' %}"><span>博客列表</span></a>
</div>
</div>
{% endblock %}
- blog_add.html (文章添加页面),同时作为添加和编辑的页面,通过判断edit是否为True来决定进入edit页面还是add页面。当进入edit页面时,将携带指定的文章标题与文章内容,修改后跳转至文章列表页。当进入add页面时,title与content都为空,添加完成后跳转回添加页面。
{% extends 'little_blog/base.html' %}
{% load static %}
{% block title %}
博客列表
{% endblock %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/little_blog.css' %}">
{% endblock %}
{% block body %}
{% include 'little_blog/msg.html' %}
<div class="blog_list_main_box">
<h2>博客列表</h2> <br>
{% for blog in blog_lists %}
<div class="blog_list_articles">
<a href="{% url 'blog_detail' blog.id %}">
<span>{{ blog.blog_title }}</span>
</a>
<div class="blog_list_operate">
<a href="{% url 'edit' blog.id %}"><span>编辑</span></a> | <a href="{% url 'delete' blog.id %}"><span>删除</span></a>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
- blog_llist.html (文章列表页),通过对应视图函数取得数据库所有的文章并展示。在对应文章行中,提供了编辑与删除的功能。使用编辑功能跳转至上面的添加页面,使用删除功能将在删除后重新定向回本页面。
{% extends 'little_blog/base.html' %}
{% load static %}
{% block title %}
博客列表
{% endblock %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/little_blog.css' %}">
{% endblock %}
{% block body %}
<div class="blog_list_main_box">
<h2>博客列表</h2> <br>
{% for blog in blog_lists %}
<div class="blog_list_articles">
<a href="{% url 'blog_detail' blog.id %}">
<span>{{ blog.blog_title }}</span>
</a>
<div class="blog_list_operate">
<a href="{% url 'edit' blog.id %}"><span>编辑</span></a> | <a href="{% url 'delete' blog.id %}"><span>删除</span></a>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
- blog_detail.html (文章详情页),文章的标题与内容展示。
{% extends 'little_blog/base.html' %}
{% load static %}
{% block title %}
{{ blog_title }}
{% endblock %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/little_blog.css' %}">
{% endblock %}
{% block body %}
{% include 'little_blog/msg.html' %}
<h1>{{ blog_item.blog_title }}</h1>
<p>{{ blog_item.blog_content }}</p>
{% endblock %}
- msg.html (包含标签的小模板),主要对某些视图函数返回的成功信息做了处理。在context中如果含有 msg 参数,则将其 alert() 出来。在需要的页面中使用 {% include ‘little_blog/msg.html’ %} 引入。
{% if msg %}
<script>alert('{{ msg }}')</script>
{% endif %}
四个基本页面函数
from django.shortcuts import render, redirect
from .models import Blog
# Create your views here.
# 主页视图
def index(request):
return render(request, 'little_blog/index.html')
# 添加页面
def blog_add(request):
if request.method == 'GET':
return render(request, 'little_blog/blog_add.html')
elif request.method == 'POST':
blog_title = request.POST.get('article_title')
blog_content = request.POST.get('article_content')
Blog.objects.get_or_create(blog_title=blog_title, blog_content=blog_content)
return render(request, 'little_blog/blog_add.html', context={
'msg': '添加成功',
})
# 列表页面
def blog_list(request):
blog_lists = Blog.objects.all()
return render(request, 'little_blog/blog_list.html', context={
'blog_lists': blog_lists,
})
def blog_detail(request, blog_id):
blog_item = Blog.objects.filter(id=blog_id)
return render(request, 'little_blog/blog_detail.html', context={
'blog_item': blog_item[0],
})
# 删除
def delete(request, blog_id):
Blog.objects.filter(id=blog_id).delete()
return redirect('blog_list')
# 编辑
def edit(request, blog_id):
if request.method == 'GET':
blog_item = Blog.objects.filter(id=blog_id)
return render(request, 'little_blog/blog_add.html', context={
'edit': True,
'blog_item': blog_item[0],
})
elif request.method == 'POST':
blog_title = request.POST.get('article_title')
blog_content = request.POST.get('article_content')
Blog.objects.filter(id=blog_id).update(blog_title=blog_title, blog_content=blog_content)
return redirect('blog_detail', blog_id=blog_id)
新点速提
request,HttpRequest请求对象在django.http木块定义的API。在这里用到了以下功能
- 通过 request 来判断用户通过哪种方法进行访问,if request.method == ‘GET’
- 通过 request 来获取 form 表单提交的数据 blog_title = request.POST.get(‘article_title’)
模板预览
主页
文章添加页与编辑页
博客列表页
文章内容页
附录:为了好看一丢丢用的CSS
/*主页*/
a{
text-decoration: none;
color: #000;
}
a:hover{
color: #6390ff;
}
.top-nav{
position: relative;
margin: auto;
width: 1280px;
height: 70px;
box-shadow: 0 0 5px;
}
.top-nav div{
position: absolute;
top: 0;left: 0;bottom: 0;right: 0;
margin: auto;
width: 180px;
height: 33px;
text-align: center;
}
/*博客添加页面*/
.article-add-main-box{
font-family: 楷体;
position: relative;
top: 50px;
margin: auto;
width: 689px;
min-height: 434px;
box-shadow: 0 0 3px;
text-align: center;
}
.article-add-main-box input{
position: relative;
width: 669px;
height: 40px;
border: 1px solid #cccccc;
margin: auto;
top: 10px;
font-size: 30px;
}
.article-add-main-box textarea{
position: relative;
top: 20px;
width: 669px;
min-height: 263px;
font-size: 15px;
color: #424242;
}
.article-add-main-box .submit{
position: relative;
width: 675px;
height: 40px;
border: 1px solid #cccccc;
margin: auto;
top: 30px;
font-size: 30px;
}
.article-add-main-box .submit:hover{
background: #ff0207;
color: #cccccc;
transition: all 0.7s;
}
/*文章列表*/
.blog_list_main_box{
position: relative;
width: 518px;
min-height: 668px;
box-shadow: 0 0 5px;
margin: auto;
text-align: center;
}
.blog_list_main_box h2{
margin: auto;
}
.blog_list_articles{
width: 460px;
text-align: left;
margin: 3px auto auto;
padding: 3px;
}
.blog_list_articles:hover{
box-shadow: 0 0 2px;
background: #eaffbd;
}
.blog_list_operate{
position: relative;
float: right;
}