1108. 博客小案例

一、数据库数据渲染到模板

基本操作流程：

二、案例的功能介绍

1. 主页index.html 展示添加博客和博客列表的文字，实现页面跳转

2. 添加页add.html 输入文章标题及内容，并将内容交到数据库中

3. 列表页list.html 将数据库中所有博客展示到数据中，点击文章标题可以查看文章的详情，附带编辑和删除的功能

4. 详情页detail.html 显示文章的标题及内容

三、功能的实现

1. 创建一个博客项目（参考1101.基础介绍及环境搭建），并在里面新建一个blog的app

2. 将setting.py文件中的信息，以及项目中的url分配设置好。

setting.py文件需要配置项目：

添加blog app

templates html文件路径

数据库接口信息

根据需要配置修改以下信息：

时区以及时间

html需求调用的css/js/image等文件信息路径配置

3. 将提供的html页面存放到templates目录的blog下

4. models.py文件中创建模型并映射到数据库

from django.db import models


# 添加页的模型类
class BlogModel(models.Model):
    title = models.CharField(max_length=50, blank=True)   # 标题  表单标签 默认不允许为空，True 允许为空
    content = models.TextField()  # 文章内容  文本类型

    def __str__(self):
        return f'title={self.title}, content={self.content}'

Tools>Run manage.py Task... 进入界面执行makemigrations [blog] > migrate [blog]

或直接在虚拟环境下项目目录下执行python manage.py makemigrations [blog] > python manage.py migrate [blog]

5. 先渲染出模板，视图里的逻辑后面再补全

from django.shortcuts import render, redirect, reverse, HttpResponse
from .models import BlogModel

# 博客首页
def demo_index(request):
    return render(request, 'blog/demo_index.html')
# 博客添加页
def demo_add(request):return render(request, 'blog/demo_add.html')
# 博客列表页
def demo_list(request):return render(request, 'blog/demo_list.html')
# 博客详情页
def demo_detail(request, blog_id):    # 来自于列表页中的字段id
    return render(request, 'blog/demo_detail.html')
# 博客修改功能
def update(request, blog_id):
    return render(request, 'blog/update.html')

# 博客删除功能 
def delete(request, blog_id): # 同样获取来自于列表页中的字段id
　　return render(request, 'blog/delete.html')    # 删除后重定向博客列表页，与上行效果一致

6. 先定义base.html页面信息，而对于主页，只需要添加url跳转的实现

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
            Base页面
        {% endblock %}
    </title>
</head>
<body>
    {% block body1 %}
        Base页面项目1
    {% endblock %}
</body>
</html>

index.html

{% extends 'blog/demo_base.html' %}

{% block title %}
    index博客主页
{% endblock %}

{% block body1 %}
    <p><a href="{% url 'demo_add' %}">添加博客</a></p>
    <p><a href="{% url 'demo_list' %}">博客列表</a></p>
{% endblock %}

7. /templates/blog/add.html，我们需要加上提交的地址，csrf_token标签的作用是防御csrf攻击

{% extends 'blog/demo_base.html' %}

{% block title %}
    add博客添加页面
{% endblock %}

{% block body1 %}
    <h1>添加新文章</h1>
    {# 如果是提交则跳转至博客列表页，如果非提交则仍在博客添加页 #}
    <form action="{% url 'demo_add' %}" method="post"> {% csrf_token %}     {# csrf_token为防御csrf攻击，即防止跨域请求 #}
        标题<input type="text" id="title" name="title" placeholder="请输入文章标题"><br>
        内容<textarea name="content" id="content" cols="30" rows="10" placeholder="请输入文章内容"></textarea><br>
        <button type="submit">发布文章</button><br>
        <button type="reset">重置文章</button><br>
    </form>
    <p><a href="{% url 'demo_index' %}">返回首页</a></p>
{% endblock %}

8. /blog/views.py

from django.shortcuts import render, redirect, reverse, HttpResponse
from .models import BlogModel

# 博客首页
def demo_index(request):
    return render(request, 'blog/demo_index.html')

def demo_add(request):
    if request.method == 'GET':
        return render(request, 'blog/demo_add.html')
    elif request.method == 'POST':
        # 标题以及内容获取
        title = request.POST.get('title')   # 通过get获取POST提交的数据
        content = request.POST.get('content')
        # 存放数据至数据库
        BlogModel.objects.get_or_create(title=title, content=content)
        # 存储后可在进行获取数据,获取所有blog数据
        b_list = BlogModel.objects.all()
        return render(request, 'blog/demo_list.html',
                      context={
                          'b_list': b_list,
                      })

# 博客列表页
def demo_list(request):
    # 获取数据库中的博客数据
    b_list = BlogModel.objects.all()
    return render(request, 'blog/demo_list.html',
                  context={
                      'b_list': b_list,
                  })

# 博客详情页
def demo_detail(request, blog_id):    # 来自于列表页中的字段id
    blog = BlogModel.objects.get(id=blog_id)  #根据来自列表的id获取对应博客信息
    return render(request, 'blog/demo_detail.html',
                  context={
                      'blog': blog,
                  })

# 博客修改功能
def update(request, blog_id):
    blog = BlogModel.objects.get(id=blog_id)
    if request.method == 'GET':
        return render(request, 'blog/update.html',
                      context={
                          'blog': blog,
                      })
    elif request.method == 'POST':
        title = request.POST.get('title')
        content = request.POST.get('content')
        blog.title = title
        blog.content = content
        blog.save()
        return redirect(reverse('demo_list'))
    else:
        return HttpResponse("该文章不存在，无法编辑！")

# 博客删除功能
def delete(request, blog_id):    # 同样获取来自于列表页中的字段id
    blog = BlogModel.objects.get(id=blog_id)
    if blog:
        blog.delete()      # 当匹配当对应blog时，进行删除
        # return render(request, 'blog/demo_list.html')  # 删除后回到博客列表页
        return redirect(reverse('demo_list'))    # 删除后重定向博客列表页，与上行效果一致

9. /blog/urls.py 文件中路由设置

from django.urls import path
from . import views

urlpatterns = [
    path('demo_index/', views.demo_index, name='demo_index'),  # 博客首页
    # path('demo_base/', views.demo_base, name='demo_base'),  # 博客主页
    path('demo_add/', views.demo_add, name='demo_add'),  # 博客添加页
    path('demo_detail/<blog_id>', views.demo_detail, name='demo_detail'),  # 博客详情页
    path('demo_list/', views.demo_list, name='demo_list'),  # 博客列表页
    path('delete/<blog_id>', views.delete, name= 'delete'),   # 删除博客内容
    path('update/<blog_id>', views.update, name= 'update'),   # 编辑更新博客内容
]

10. detail.html详情页页面

{% extends 'blog/demo_base.html' %}

{% block title %}
    博客详情页面
{% endblock %}

{% block body1 %}
    <h1>{{ blog.title }}</h1><br>
    <p>{{ blog.content }}</p><br>
    <p><a href="{% url 'demo_list' %}">返回列表</a></p>
{% endblock %}

11. list.html 列表页的页面

{% extends 'blog/demo_base.html' %}

{% block title %}
    博客列表页面
{% endblock %}

{% block body1 %}
    <h1>博客列表</h1>
    <table>
        <tr>
            <th>标题</th>
            <th>内容</th>
        </tr>
        {% for b in b_list %}
            <tr>
                <td><a href="{% url 'demo_detail' b.id %}">
                    {{ b.title }}
                </a></td>
                <td>
                    <a href="{% url 'update' b.id %}">编辑</a>
                    <a href="{% url 'delete' b.id %}">删除</a>
                </td>
            </tr>
        {% endfor %}
    </table>
    <p><a href="{% url 'demo_index' %}">返回首页</a></p>
{% endblock %}

四、模型补充内容

1. update.html将数据展示

{% extends 'blog/demo_base.html' %}

{% block title %}
    博客修改页面
{% endblock %}

{% block body1 %}
    <h1>修改博客</h1>
    {# 需要调整至update页面以便信息进行更新变更 #}
    <form action="{% url 'update' blog.id %}" method="post"> {% csrf_token %}     {# csrf_token为防御csrf攻击，即防止跨域请求 #}
        标题<input type="text" id="title" name="title" placeholder="" value={{ blog.title }}><br>  {# 因是修改博客，可不需在提示属于内容，而是直接调用需要修改的博客标题以及内容 #}
        内容<textarea name="content" id="content" cols="30" rows="10" placeholder="">{{ blog.content }}</textarea><br>
        <button type="submit">发布文章</button><br>
        <button type="reset">重置文章</button><br>
    </form>
    <p><a href="{% url 'demo_index' %}">返回首页</a></p>
{% endblock %}