【菜鸡入门：django从零搭建论坛系列-Windows】之第三天：视图的初步实现与模板

最新推荐文章于 2021-03-09 19:39:39 发布

qq_36114959

最新推荐文章于 2021-03-09 19:39:39 发布

阅读量365

点赞数

分类专栏： django python Mysql

本文链接：https://blog.csdn.net/qq_36114959/article/details/102781321

版权

python 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

django

3 篇文章 0 订阅

订阅专栏

Mysql

3 篇文章 0 订阅

订阅专栏

启动服务报错

今天刚开始就遇到前几天没遇到的问题：python manage.py runserver的时候直接挂掉，报错:

RuntimeError:cryptography is required for sha256_password or cashing_sha2_password

解决办法:

python -m pip install PyMySQL[rsa] --ignore-installed

至于网络提供的另一个解决方案:mysql报错RuntimeError: cryptography is required for sha256_password or caching_sha2_p - p_xiaobai的博客 - CSDN博客

抱歉，我没有成功，各种报错，但是可能不同人有不同的解决方案，也贴出来，以供参考。

VS CODE开发django

由于命令行实在是不怎么顺手和不方便调试管理，所以我们接下来准备采用vs code来管理我们的django项目Note1

引用资料:

使用 vs code 创建 Django 项目 - LuckyZLi - 博客园

如何使用Visual Studio Code开发Django项目 — vscoderecipe 0.1 - 201702 文档

windows系统如何使用vscode调试django项目 - DOUZHENG8433的博客 - CSDN博客

使用 Visual Studio Code（VSCode）搭建简单的Python+Django开发环境的方法步骤_python_脚本之家

使用Cmder替换cmd，让开发更高效 - 简书

初步使用HOME模板

templates/home.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Boards</title>
  </head>
  <body>
    <h1>Boards</h1>

    {% for board in boards %}
      {{ board.name }} <br>
    {% endfor %}

  </body>
</html>

在上面的例子中，我们混入了原始HTML和一些特殊标签 {% for ... in ... %} 和 {{ variable }} 。它们是Django模板语言的一部分。上面的例子展示了如何使用 for遍历列表对象。{{ board.name }}会在 HTML 模板中会被渲染成版块的名称，最后生成动态HTML文档。

现在我们可以更新home视图：

boards/views.py

from django.shortcuts import render
from .models import Board

def home(request):
    boards = Board.objects.all()
    return render(request, 'home.html', {'boards': boards})

生成的HTML：

我们可以用一个更漂亮的表格来替换，改进HTML模板：

templates/home.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Boards</title>
  </head>
  <body>
    <h1>Boards</h1>

    <table border="1">
      <thead>
        <tr>
          <th>Board</th>
          <th>Posts</th>
          <th>Topics</th>
          <th>Last Post</th>
        </tr>
      </thead>
      <tbody>
        {% for board in boards %}
          <tr>
            <td>
              {{ board.name }}<br>
              <small style="color: #888">{{ board.description }}</small>
            </td>
            <td>0</td>
            <td>0</td>
            <td></td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </body>
</html>

前端框架Bootstrap的引入

静态文件是指 CSS，JavaScript，字体，图片或者是用来组成用户界面的任何其他资源。

实际上，Django 本身是不负责处理这些文件的，但是为了让我们的开发过程更轻松，Django 提供了一些功能来帮助我们管理静态文件。这些功能可在 INSTALLED_APPS 的 django.contrib.staticfiles 应用程序中找到（译者：Django为了使得开发方便，也可以处理静态文件，而在生产环境下，静态文件一般直接由 Nginx 等反向代理服务器处理，而应用工服务器专心负责处理它擅长的业务逻辑）。

市面上很多优秀前端组件框架，我们没有理由继续用简陋的HTML文档来渲染】。我们可以轻松地将Bootstrap 4添加到我们的项目中。Bootstrap是一个用HTML，CSS和JavaScript开发的前端开源工具包。

在项目根目录中，除了 boards, templates 和myproject文件夹外，我们之前已经创建了一个名为static的新文件夹，现在让我们在static文件夹内创建另一个名为css的文件夹：

myproject/
 |-- myproject/
 |    |-- boards/
 |    |-- myproject/
 |    |-- templates/
 |    |-- static/       <-- here
 |    |    +-- css/     <-- and here
 |    +-- manage.py
 +-- venv/

转到getbootstrap.com并下载最新版本：

下载编译版本的CSS和JS

在你的计算机中，解压 bootstrap-4.0.0-beta-dist.zip 文件，将文件 css/bootstrap.min.css 复制到我们项目的css文件夹中：

myproject/
 |-- myproject/
 |    |-- boards/
 |    |-- myproject/
 |    |-- templates/
 |    |-- static/
 |    |    +-- css/
 |    |         +-- bootstrap.min.css    <-- here
 |    +-- manage.py
 +-- venv/

现在我们必须在模板中加载静态文件（Bootstrap CSS文件）：

templates/home.html

{% load static %}<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Boards</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  </head>
  <body>
   <h1>Boards</h1>

<table border="1">
    <thead>
    <tr>
        <th>Board</th>
        <th>Posts</th>
        <th>Topics</th>
        <th>Last Post</th>
    </tr>
    </thead>
    <tbody>
    {% for board in boards %}
        <tr>
            <td>
                {{ board.name }}<br>
                <small style="color: #888">{{ board.description }}</small>
            </td>
            <td>0</td>
            <td>0</td>
            <td></td>
        </tr>
    {% endfor %}
    </tbody>
</table>
</body>
</html>

首先，我们在模板的开头使用了 Static Files App 模板标签 {% load static %}。

模板标签{% static %}用于构成资源文件完整URL。在这种情况下，{% static 'css/bootstrap.min.css' %}将返回 /static/css/bootstrap.min.css，它相当于 http://127.0.0.1:8000/static/css/bootstrap.min.css。

{% static %}模板标签使用 settings.py文件中的 STATIC_URL 配置来组成最终的URL，例如，如果您将静态文件托管在像 https://static.example.com/ 这样的子域中，那么我们将设置 STATIC_URL=https://static.example.com/ ，然后 {% static 'css/bootstrap.min.css' %}返回的是 https://static.example.com/css/bootstrap.min.css

如果目前这些对你来说搞不懂也不要担心。只要记得但凡是需要引用CSS，JavaScript或图片文件的地方就使用{% static %}。稍后，当我们开始部署项目到正式环境时，我们将讨论更多。现在都设置好了。

刷新页面 http://127.0.0.1:8000 ，我们可以看到它可以正常运行：

现在我们可以编辑模板，以利用Bootstrap CSS：

{% load static %}<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Boards</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  </head>
  <body>
    <div class="container">
      <ol class="breadcrumb my-4">
        <li class="breadcrumb-item active">Boards</li>
      </ol>
      <table class="table">
        <thead class="thead-inverse">
          <tr>
            <th>Board</th>
            <th>Posts</th>
            <th>Topics</th>
            <th>Last Post</th>
          </tr>
        </thead>
        <tbody>
          {% for board in boards %}
            <tr>
              <td>
                {{ board.name }}
                <small class="text-muted d-block">{{ board.description }}</small>
              </td>
              <td class="align-middle">0</td>
              <td class="align-middle">0</td>
              <td></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </body>
</html>

显示效果：