数据渲染到页面

原创

AI悦创 2022-03-15 10:48:47 ©著作权

©著作权归作者所有：来自51CTO博客作者AI悦创的原创作品，请联系作者获取转载授权，否则将追究法律责任

准备模型

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

首先第一个，准备一个 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 目录中【可以打开看看，但是千万别改】

数据渲染到页面_数据库

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

数据渲染到页面_数据库_02

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

数据库和管理员

说了半天，数据库在哪？

我们好像都没有配置？

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

前面提了句，django 自带后台管理，就是 urls.py 中的 admin 路径，启动 django 后访问 admin 就可以看到，并且通过后台可以管理数据库，但是需要账号密码。链接：http://127.0.0.1:8000/admin

数据渲染到页面_数据库_03

那我们就需要创建账号，现在来创建一个超级管理员账号，创建账号的命令行是：python manage.py createsuperuser，然后输入账号，邮箱，密码，重复密码就可以了，如下截图：

数据渲染到页面_数据_04

提示：

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

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

数据渲染到页面_html_05

配置后台监管

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

接下来的操作就是把 Article 交给 admin 后台管理。打开 blog 目录下的 admin.py 文件，添加如下代码：

数据渲染到页面_数据库_06

在 admin.py 中，先导入 Article 类，然后使用 admin.site.register(Article) 进行注册，只有注册后的类，admin 后台才可以监控并管理。

数据渲染到页面_html_07

数据渲染到页面_html_08

添加数据

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

请自行添加三篇文章，内容所以，可长可短，有就行。

数据渲染到页面_html_09

数据这块已经完成了，现在来学习下，从数据库查询全部数据，并渲染到 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})

数据渲染到页面_数据_10

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

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

接下来是模板中的修改，如下图：

数据渲染到页面_数据_11

<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 面板，现在改成了 {% %} 和 {{ }} 的组合。