上节课是页面的静态展示到浏览器,比较简单。本文学习下数据库后台以及数据展示到网页上。

首先第一个,准备一个 Model 模型。打开你项目中,blog 目录下的 models.py 文件,如下代码:

from django.db import models


# Create your models here.
class Article(models.Model):
    title = models.CharField(max_length=64, verbose_name="标题")
    abstract = models.CharField(max_length=128, verbose_name="摘要")
    content = models.TextField(verbose_name="内容")

    def __str__(self):
        return "{}".format(self.title)

第一行是 models.py 中默认有的,下面是定义了一个 Article 的类,详细介绍下:

  • class 是定义类,类名是 Article,括号内是继承的对象,models.Model,必须有
  • title、abstract 分别是类的两个字段,都是 CharField 字符串类型,声明了最大长度,以及 verbose_name 别名
  • content 是 TextField 文本类型,并申明了别名,内容
  • def 定义一个__str__函数,返回的内容就是当前对象的 title
  • self 是指对象,这个函数是给对象用的,不是给类使用的

定义完成了,这个 Article 就是一个模型,对应数据库中的一张表格。

有了 Model 之后,需要通过两行命令,将模型映射成数据库的表格,命令行分别是:

  • python manage.py makemigrations 读取项目中的所有 Model 模型,映射成中间文件,放在 blog 目录下的 migrations 目录中【可以打开看看,但是千万别改】

image.png

  • python manage.py migrate 读取项目中,所有 migrations 目录下的 py 文件,操作数据库,生成对应的表格。

image.png
没有报错就是正常,那数据库文件就有对应的表格了。

数据库和管理员

说了半天,数据库在哪?
我们好像都没有配置?

django 默认的数据库,是 sqlite3,所以是左侧的 db.sqlite3 这个文件。

前面提了句,django 自带后台管理,就是 urls.py 中的 admin 路径,启动 django 后访问 admin 就可以看到,并且通过后台可以管理数据库,但是需要账号密码。链接:http://127.0.0.1:8000/admin
image.png
那我们就需要创建账号,现在来创建一个超级管理员账号,创建账号的命令行是:python manage.py createsuperuser,然后输入账号,邮箱,密码,重复密码就可以了,如下截图:
image.png
提示:

  • 输入账号,可以看到,然后回车
  • 邮箱可以不输入,直接回车
  • 输入密码,不会展示,你输入完直接回车即可
  • 再次输入密码,将密码再输入一次,回车即可
  • 源码文件夹中,默认的账号密码自行创建一个账号即可。

账号密码搞定了,现在可以登录到 admin 后台查看和管理数据了。
image.png

配置后台监管

但是这个时候,你应该还看不到 Article 数据,不是没有数据的缘故,是因为创建了 Article、生成了表格,还没有把 Article 交给 admin 监管。

接下来的操作就是把 Article 交给 admin 后台管理。打开 blog 目录下的 admin.py 文件,添加如下代码:
image.png
在 admin.py 中,先导入 Article 类,然后使用 admin.site.register(Article) 进行注册,只有注册后的类,admin 后台才可以监控并管理。
image.png
image.png

添加数据

启动 django 服务,进到后台,就可以看到 Article ,并且进入之后,还可以查看有多少文章,新增文章、修改文章等操作。

请自行添加三篇文章,内容所以,可长可短,有就行。
image.png
数据这块已经完成了,现在来学习下,从数据库查询全部数据,并渲染到 index.html 文件中。

View 函数查询数据

这里要打开的文件,是 views.py 和 index.html。views.py 中要做的操作,是查询全部文章,并将文章对象,放到 render 函数中,如下:

from django.shortcuts import render
from .models import Article


# Create your views here.
def index(request):
    articles = Article.objects.all()
    return render(request, 'index.html', {"articles": articles})

image.png
Article.objects.all() 这行代码,是从数据库中,将 Article 模型对应表格中的数据,做个全部的查询,取出全部内容,保存到 articles 变量中。

render() 函数中的第三个参数是字典,这里可以将函数中的变量,传到模板中,然后使用模板语法渲染出来。

接下来是模板中的修改,如下图:
image.png

<div class="col-md">
            {% for article in articles %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    {{article.title}}
                    <a class="btn btn-info btn-xs pull-right" href="article.html">查看</a>
                </div>
                <div class="panel-body">
                    {{article.abstract}}
                </div>
            </div>
            {% endfor %}

框中的部分,之前是默认的 4 个 panel 面板,现在改成了 {% %} 和 {{ }} 的组合。

模板语法介绍

大括号百分号和双大括号的组合,就是 django 的模板语法,前者是语句,后者是渲染值。

在 html 中,articles 是查询的集合,首先用 for 循环取出每个 article 文章对象,然后在标题和摘要的位置,将 article.title 和 article.abstract 两个属性读取出来放在位置上即可。

for 循环需要有 endfor 结束标签,这样就形成了一个闭环。有一个数据,for 和 endfor 之间的 html 代码,渲染一次;有两个数据,for 和endfor 之间的 html 代码,渲染两次;以此类推,数据越多,渲染的 html 也就越多。

效果展示

最后展示下最终效果图:
image.png

模板日志

最后回到 python manage.py runserver 界面上,每次刷新页面,都会有新的请求和响应产生,在这个界面上,就会记录并展示出来,如下图:
image.png
模板文件有两个,一个是 index.html,另一个是 article.html。

下节课程要做的内容,就是从 index.html 中,点击查看,就跳转到 article.html 模板,并展示你点击的那篇文章内容。

点击不同的文章,展示不同的文章内容。

小练习

回顾下,本节课做了哪些操作?请简单记录下来

总结

本节课重点是模型+数据库+渲染,流程如下:

  1. 新建 Model 模型
  2. 通过 makemigrations 和 migrate 命令,将模型映射到数据库中
  3. 新建超级管理员账号,命令是 createsuperuser
  4. 将模型交给 admin 后台管理
  5. 使用超级管理员账号登录后台,在 admin 后台增加几篇文章
  6. view 函数通过 Model 模型查询数据
  7. 将数据渲染到 HTML 网页上
AI悦创·创造不同!
AI悦创 » 数据渲染到页面

发表评论