Python Flask：如何建立一个博客站点
Python Flask：如何建立一个博客站点
如果您尝试自己解决问题，那很好。如果您能够自己成功构建整个应用程序，那么恭喜您。如果你做不到，那没关系，你可以跟着我从这篇文章开始，我们将从设计一个数据库开始，在本文的其余部分，我们将构建整个应用程序。
文章结构：
- 设计数据库
- 设计端点
- 构建应用程序前端
- 用户注册和登录
- 创建和查看博客文章
- 编辑和删除博客文章
设计数据库
让我们从设计数据库开始。让我们将我们的数据库称为 flog_db，它代表 Flask 和博客。由你决定。您可以为您的应用程序指定任何名称。在设计数据库时，我们需要确定应用程序的核心参与者。我们在这个应用程序中有两个参与者。第一个参与者是写博客的用户，第二个参与者是博客本身。所以这些将是我们数据库中的表。我们来看看这两个actor应该包含什么；我们需要的第一个表是用户表，用户表应包含的字段如下所示。
第一个字段应该是用户 ID。这是一个唯一标识每一行的字段。现在，如果您熟悉数据库，您应该熟悉主键。主键是您的表独有的东西，您可以使用它来获取整行，这是一个需要在每一步自动递增的字段。现在，如果您不知道该怎么做，请不要担心。当我们在 MySQL 服务器中创建数据库时，我将向您展示，它需要具有的下一个字段是名字，它是一个 varchar。接下来是姓氏，它是一个 varchar。接下来是用户登录时使用的用户名，类型为 varchar，但它也是唯一的，这意味着两个用户不能拥有相同的用户名。类似地，下一个字段将是电子邮件，用户可以没有。相同的电子邮件。用户表的最后一个字段是密码，它将包含存储的哈希密码。
接下来是博客表的字段。现在博客表类似于我们的用户表应该包含第一个字段作为博客 ID 作为我们可以获取博客的主键。它应该包含的下一个字段是类型为 varcher 的博客标题。接下来它应该包含写博客的作者，它是 varcher 类型的。最后，我们需要拥有 varcher 类型的博客正文。
现在我们已经了解了数据库需要具有的表以及表需要具有的字段，让我们转到我们的 MySQL 服务器并创建这些表。让我们在您所在的任何操作系统上启动一个 MySQL 服务器。让我们首先创建一个数据库。创建数据库的命令是 CREATE DATABASE 和数据库名称。我们在这里给出的数据库名称是 flog_db。接下来我们使用这个数据库，也就是USE flog_db。现在我们需要在这个数据库中创建表。我们在这个数据库中有两个表，用户表和块表。让我们首先创建用户表，即 CREATE TABLE 用户，现在我们需要提供我们之前读过的用户表的字段。第一个字段是用户 ID，这是整数类型，需要自动递增。因此，只需添加“自动递增”的语句即可。现在这将确保每次插入此表时，此字段都会自动递增。因此，对于第一个插入用户 ID 将具有值 1，第二个插入用户 ID 将具有值 2，依此类推。接下来让我们有第二个字段，它是 varchar 类型的名字，大小为 20。接下来是 varchar 的姓氏，大小也是 20。接下来是 varchar 类型的用户名，大小为 20，这是每行唯一的字段，因此没有两个用户可以拥有相同的用户名。因此，让我们将其标记为唯一。接下来我们需要的是类型为 varchar 大小 30 的电子邮件，这也是唯一的。最后我们有一个 varchar 类型的密码字段，大小为 100，因为我们将以散列格式（加密密码）存储它。最后我告诉你，user-id 是这个表的主键，所以让我们标记它，这是主键，然后我们传入字段的名称，即 user-id。因此，这将 user-id 标识为表的主键，我们可以访问表中的任何行。现在已经创建了用户表。
Be wary of ‘auto_increment’ and you can have your field as ‘first-name’ but instead ‘first_name’.
现在让我们为博客创建一个表，这就是创建表博客。该字段的名称是 blog_id ，它是整数，这也是一个 auto_increment 字段。接下来是博客标题，其类型为 varchar，大小为 100。接下来是博客的作者，其类型为 varchar，大小为 40。最后我们有博客正文，其类型为 varchar，大小为 1000。最后，我们需要将博客ID标记为主键，所以我们在字段名称中传递的主键是blog_id。 “避免在增量拼写中出现拼写错误”。
We have now designed a database for our application.
设计端点
问题：我们需要加载应用程序的主页，现在这个主页应该包含所有指向博客的链接，点击应该加载博客文章的链接。我们的应用程序需要具备的下一点是 /about 页面。现在这个页面应该包含我们的应用程序的描述。接下来我们在 /register 上执行一个 get 请求，这应该加载一个表单供用户注册，当我们在 /register 上执行一个 post 请求时，它应该验证用户提交的表单详细信息并在数据库中创建一个新用户。同样，当我们在 /login 上执行 get 请求时，应该加载一个表单供用户输入他的详细信息，并且在 login 上执行 post 请求时应该验证用户输入的凭据，然后应该登录用户。当我们在 /write blog 上执行 get 请求时，应该显示用户写博客的表单，当我们在 /write 块上执行 post 请求时，应该在数据库中创建新的 blog 帖子。当我们在 /blog/id 上执行 get 请求时，应该加载带有 blog_id 提及的博客文章。当我们在 /my_blogs 上执行 get 请求时，该请求应列出当前登录用户的所有博客的链接。当我们在 /edit_blog/ id 上执行应该引导用户编辑他之前编写的博客页面时。所以这应该加载一个表单，其中包含他之前写过的博客文章，并且他可以从那里进行更改，当我们在同一条路线上发出帖子请求时，应该更新数据库中的博客文章。接下来，当我们在 /delete blog/id 上执行一个帖子请求时，它应该从数据库中删除带有提到的博客 ID 的块帖子，最后当我们在 /logout 上执行一个 get 请求时，应该注销当前登录的用户，就是这样用于我们博客站点所需的端点。
导航栏；
构建应用程序前端
打开 VScode 文本编辑器并创建一个新文件，将其保存为“app.py”，这将是我们的服务器文件。让我们把它放到一个新目录中，让我们把它称为 flog，我正在我的桌面上创建它。为我们的应用程序创建一个虚拟环境。这就是 python3 -m venv 虚拟环境的名称，我将其命名为 venv。接下来我们需要做的是激活这个虚拟环境。因此，如果您使用的是 Mac 或 Linux，则需要输入源空间 venv 正斜杠 bin 正斜杠激活，如果您使用的是 Windows，则需要输入 venv\Scripts\activate。所以现在我们的虚拟环境已经被激活，让我们安装我们的应用程序的依赖项。我们的应用程序的第一个依赖项是烧瓶模块。这就是'pip3 install flask'。我们的应用程序现在需要的下一个依赖项，因为我们正在构建前端，我们需要安装 Flask 引导程序，即“pip3 install flask-bootstrap”。现在已经安装了这两个依赖项，现在让我们将它们导入到我们的应用程序中，即'from flask import Flask'；带有大写 F 和 'from flask under score bootstrap import bootstrap'。现在让我们创建应用程序对象，即'app =flask(name)' 并传入名称。让我们引导这个名为“Bootstrap(app)”的应用程序。现在让我们为我们的应用程序创建一个 base.html。因此，让我们从项目的根目录创建一个名为“templates”的目录，用于模板化 HTML 文件，在模板中，让我们创建 base.html。由于我们正在使用引导程序，我们的 base.html 应该首先扩展引导程序，即“扩展 'bootstrap/base.html'”。接下来，让我们有一个名为 Title 的块。让标题为 Flog，这是她的应用程序的名称，结束这个块。然后它有一个名为 content 的块，在其中我们将拥有所有其他 HTML 文件的内容。所以让我们把它放在另一个块中。这就是块子内容，结束子内容块，我们结束内容块。现在，如果您对其中任何一个有任何困惑，请回到我们讨论引导程序的文章。
好的，所以在我们的应用程序中，让我们创建一条路线。我们需要创建的第一个路由位于应用程序的根目录，它由 '/' 标识，让我们在它下面有一个方法，调用它 index 并返回 render_template 一个名为 index.html 的文件，所以当你渲染一个模板，我们还需要导入该模块，以便从烧瓶中渲染模板。现在让我们在模板中创建一个名为 index.html 的新文件。请注意，这应该从我们的 base.html 扩展，所以这是“扩展 'base.html'”，现在它将具有将在 base.html 文件中替换的块子内容。因此，我们在其中放置一些文本，例如在 h1 标记中并将文本放置为任何内容，结束此块并保存我们所有的文件。让我们运行应用程序，看看它是否按预期工作，如果我们的 name== 'main_'。然后是app.run。现在让我们保存这个文件，回到终端并运行这个应用程序，即 py space app.py。现在让我们打开一个 Web 浏览器并导航到 localhost:5000，您会看到正在加载该索引。好的，现在这个应用程序可以工作了。现在让我们向我们的应用程序添加其他路由。根据我们在上一篇文章中阅读的内容，我们需要添加的下一个路由是“/about”路由。让我们有一个名为 about 的函数。让我们返回一个名为 about.html 的 HTML 文件。现在让我们在模板中创建这个文件。让我们称它为 about.html，让我有一些占位符文本。好的，现在让我们回到我们的程序并添加一条新路线。这次我们需要添加'/blogs'路由，我们需要在我们的程序中访问博客，所以是/blogs/blog_id，所以是整数和ID。让我们有一个名为 blogs 的函数，因为它接受一个整数 ID，所以我们也将它添加到参数中。为此，我们只返回一个调用 blogs.html 的模板，并同时传递 blog_id，即 blog_id=blog_id。现在，在模板中，让我们创建。博客.html。我们需要的下一个路由是 /register 路由，所以让我们编写它，并且 register 将同时具有 get 请求和 post 请求。所以让我们在路由的方法中使用它，然后让我们返回一个名为 register.html 的模板，在模板下，让我们创建一个名为 register.html 的新文件。接下来让我们创建一个新的登录路径，所以让我复制它。再粘贴一次。这次将是斜线登录。现在 login 也会有 GET 和 POST 请求，这次让我们返回 login.html。所以让我们创建一个新模板，命名为 login.html。我们正在创建所有路线，以便我们的开发更加容易。所以我们需要创建的下一个路由将是 write_blog，这也将有 get 请求和 post 请求。让我们返回一个名为 write_blog.html 的模板。因此，让我们在其中创建一个新模板。让我们将其命名为 write_blog.html，与 edit_blog、delete_blog 和 my_blogs 一样。
用户注册和登录
我已经继续编写了所有需要的代码，因为要编写很多代码，我将逐行向您解释。
从注册表开始。这也使用了引导程序，首先我们有一个用户注册标题，然后我们有一个表单，其中包含所有表单参数来注册用户。表单中的第一个字段是输入用户的名字，现在这也有一些用于装饰的引导类。我们给这个输入字段的名字是名字。同样，我们还有另一个字段称为姓氏，赋予该字段的名称是姓氏。下一个是用户名，给它的名称是用户名。接下来我们拥有的是电子邮件类型的电子邮件，而不是文本类型的电子邮件。接下来我们有一个密码字段，它的类型为密码，我们将其命名为密码，最后我们有一个确认密码字段，它也是密码类型，并且该字段的名称是确认密码。要提交所有这些表单详细信息，我们有一个提交按钮。现在，在点击此表单的提交按钮时，正在启动一个发布请求，该请求正在由我们的烧瓶应用程序处理。现在让我们运行这个程序，看看我们的表单是什么样子的。因此，让我们打开终端并输入 py space app.py，打开网络浏览器并导航到 localhost：5000/register/。
这就是我们现在将其作为用户注册标题的注册表单，我们拥有的所有字段都是名字、姓氏、用户名、电子邮件、密码和确认密码。现在让我们输入所有表单详细信息。现在点击提交按钮，这些细节被传递到烧瓶应用程序。让我们回到应用程序，看看里面发生了什么。
Modules….
我已经导入了所有必要的模块。我们有一个用于 flash 的模块，用于闪烁消息。我们有一个会话模块来存储会话数据，我们有来自烧瓶模块的请求和重定向模块。那么让我们看看 /register 中发生了什么。我们检查 request.method 是否是一个 post 请求。现在，如果它是一个 post 请求，这意味着表单已经提交，我们在一个名为 user details 的变量中使用所有表单详细信息。因此，用户详细信息从请求中获取所有详细信息，因此我们所有的名字、姓氏、用户名，现在都可以在此用户详细信息中使用。然后我们检查用户详细信息密码是否不等于确认密码字段。我们需要确认密码和密码字段相同。如果它们不匹配，我们会闪现一条消息，指出密码不匹配，并且我们还会传入闪现消息的“危险”类型，即危险。如果您对这条闪烁的消息有任何困惑，我建议您在以下位置阅读它们： 烧瓶闪烁消息 他们讨论了闪烁的消息，然后我们再次返回了注册页面。请注意，如果密码确实匹配，那么我们需要将它们存储在数据库中。现在我已经使用了 db.yaml 文件，就像我们在之前的提交表单项目中所做的那样，并且我也提供了所有参数。所以现在如果您的密码匹配，我们需要将表单详细信息存储到数据库中，那么我们在数据库中的表名是什么？它是名称用户。因此，在名字、姓氏、用户名、电子邮件和密码的用户表中，我们存储了从表单中获取的详细信息，因此从表单中，我们拥有这个变量中的所有值，称为用户详细信息。因此，我们以相同的顺序存储名字、姓氏、用户名、电子邮件，并以哈希格式存储密码。如果您在设置散列密码时感到困惑，请访问 如何存储散列密码 .并存储散列密码。因此，一旦我们将所有详细信息输入数据库，我们就提交数据库并关闭它。接下来，我们会闪烁一条消息，说明注册已成功。请登录，然后我们将重定向登录页面。所以现在让我们回到浏览器并提交一个表单，点击提交按钮后，您将被重定向到登录页面，所以下一个登录页面。
我们有一个名为用户登录的标题，它有两个字段。第一个字段是名为 username 的用户名，第二个字段是名为 password 的密码字段，它是密码类型，并且有一个提交按钮，用于提交此表单。
现在，一旦提交表单，就会在 /login/ 这条路线上发出 post 请求。因此，如果请求方法是 post，那么我们会从表单中获取所有详细信息。一旦获取了所有详细信息，就从表单中获取用户名，然后使用该用户名查询数据库并获取所有详细信息。
现在如果结果已经匹配，这意味着如果这个用户名确实存在于数据库中，那么我们将获取用户详细信息。接下来我们检查传递的密码是否与散列密码匹配。因此，哈希密码正在被解密，并且正在检查这两个密码是否匹配。如果是，则表示登录成功。所以我们利用会话并存储少量参数。我们首先标记用户已登录，然后我们存储用户的名字，我们存储用户的姓氏，然后我们向用户发送一条消息，说明用户已登录。现在以防万一密码不匹配，在这种情况下，我们会显示一条消息，提示密码不匹配，在数据库中找不到用户名。我们闪烁一条消息说找不到用户，然后我们重定向回主页。所以现在让我们回到浏览器并提交表单，看看我们的输出结果如何。您已成功登录，我们将被重定向到应用程序的根目录。
创建和查看博客文章
当用户导航到 /write_blog/ 时，需要向用户提供用于撰写博客文章的表单。现在这个表单将有两个字段。第一个字段是用户输入博客文章标题的标题字段。第二个字段是正文字段，用户在其中输入博客文章的正文，点击提交按钮后，将发出一个文章请求，并将此表单提交到数据库中。让我们看看我们的烧瓶应用程序中发生了什么。
因此，当我们编写 /write_blog/ 时，当它是一个 get 请求时，我们正在向用户提供一个表单。因此，当您的 request.method 是一篇文章时，详细信息将被加载到一个名为 blog post 的变量中，然后我们将标题加载到一个变量中。博客文章和正文中的所有标题都放入一个名为“正文”的变量中。接下来我们存储作者姓名，我们之前在会话变量中保存了名字和姓氏。因此，通过使用会话变量，我们将名字和姓氏连接起来，并将其保存为作者姓名。接下来我们要做的是启动 MySQL 游标，然后将标题、正文和作者姓名插入名为 blog 的表中，以及从表单中获取的详细信息。完成后，我们提交数据库，关闭光标，然后我们闪烁一条消息，说成功发布了新博客，表明已经创建了新的博客文章，然后我们将重定向到应用程序的根目录。现在，当我们重定向到应用程序的根目录时，我们希望这些块的链接显示在那里，让我们看看它是如何工作的。
因此，在应用程序的根目录中，我们首先从数据库中获取所有博客。所以我们启动一个 MySQL 游标，我们获取所有博客，如果这个值大于零，则意味着数据库中存在一些博客。在这种情况下，我们获取所有已检索到的博客，然后关闭光标，然后将所有从数据库中获取的博客传递到 index.html 页面。现在，如果没有从数据库中获取块，那么我们将博客标记为无。所以现在让我们去 index.html 看看发生了什么。
所以我们首先检查现在是否有任何博客。如果没有博客存在，那么我们会打印一条消息，说明尚未编写任何博客。现在，如果有博客，那么我们将循环遍历所有博客并显示每个块的标题。这个块的标题将在href Link，这意味着一旦你点击标题，它应该向你展示博客的内容。让我们看看它是如何工作的。因此，在单击博客标题时，您将被重定向到页面调用 /blogs/blog_id/。让我们回到应用程序，看看那条路线。
所以它是/blogs/blog_id/。所以在这里我们需要做的是从数据库中获取带有博客 ID 的特定块。因此，我们启动一个 MySQL 游标，然后从数据库中获取该博客，如果结果值大于零，我们获取该块，然后将该块传递给名为 blog.html 的页面。现在以防结果值不大于零。这意味着找不到该博客。所以在 blogs.html 中我们显示了博客的所有内容。我们有块标题，我们有块体，我们还有作者姓名。现在让我们运行这个应用程序，看看它是什么样子的，所以让我们打开终端，py app.py。现在让我们打开一个 Web 浏览器并导航到 Localhost: 5000。
If no user has written any blog post before, message No Blog post yet get display
所以这里我们有所有已写博客文章的输出。所以让我们登录一个用户，一个已经注册的用户。我们将被重定向到写博客页面，所以让我们写一篇博文。
所以这里有两个字段。第一个字段是标题字段，第二个字段是正文字段。正文字段需要有一个漂亮的文本编辑器，用户可以使用它来写博客文章。我们有一个名为 CKEDITOR 的开源模块，可用于此目的。导入CKeditor。然后我们需要将应用程序名称传递给这个编辑器。这就是 CKeditor 与应用程序一起传递的。
所以我们的应用程序现在启用了 CKeditor。但是接下来我们还需要加载CKeditor。所以在 write_blog.html 中我们需要有一个 head 标签，所以在 block head 中让我们加载 CKeditor。这就是CKeditor.load，你什么时候CKeditor.load之前所有的bootstrap头值都被禁用了。我们也需要它们。所以在括号内我们需要有 super() ，这样可以确保我们拥有引导类的现有功能以及我们正在加载 CKeditor。让我们结束这个块。我们还需要在 body 标记中包含 CKeditor。因此，在名为 body 的文本区域的右侧博客中，我们需要输入类作为 ckeditor 才能启用此功能。
这就是我们拥有漂亮的博客文章编辑器的方式。
编辑和删除博文
登录后，我们将获得所有这些选项，例如撰写新博客、查看现有博客等等。为了编辑或删除一个块，用户应该首先列出他们写的博客。因此，如果您单击查看我的博客，这将列出已由登录用户撰写的博客。因此，对于特定的博客，您可以对其进行编辑或删除。
现在不要担心代码。我会告诉你背后发生了什么，但现在让我们了解它是如何工作的。单击编辑后，它将带您到可以编辑此块的链接。所以让我们点击这个编辑；
所以现在你有了这个博客，它正在加载以前的内容。因此，您现在可以添加一些新内容。假设这个世界是一个美丽的地方，到处都是美丽的人。现在让我们点击提交按钮。所以现在当我们点击提交按钮时。现有的博客文章正在更新，现在我们有了新的博客。
所以现在如果你去查看我的博客，你现在可以根据需要删除这个博客。因此，如果您单击删除博客按钮，则该博客处于远程状态，当您单击查看我的博客时，您会收到一条消息，显示没有博客。已由您撰写，如果您导航到主页，则显示尚未撰写任何博客。现在让我们看看代码是如何工作的。
在这个特定的路径 my_blogs 中，我们首先需要加载作者写过的所有博客。现在作者姓名是名字，是从会话中加载的姓氏，然后我们打开一个 MySQL 游标，然后我们运行一个查询从博客表中选择所有行，其中我们有给定的作者姓名如果用户写了任何博客，我们会获取所有博客并将其传递给名为 my blogs.html 的文件，以防用户没有写博客。我们将我的博客的价值视为无。现在我们检查是否有用户写的博客。如果没有博客，那么我们会打印一条消息说您没有写过博客，如果用户写过任何博客，我们会为每个博客提供一个指向博客的链接和两个用于编辑和删除的按钮块。现在单击编辑按钮将带您到路线编辑博客、博客 ID，然后单击删除按钮将您带到路线。删除博客，博客ID。让我们看看编辑博客路由中发生了什么。
所以在edit blog 路由中，当edit_blog 上发出get 请求时，我们首先需要用现有数据加载表单。所以我们现在有了博客 ID，我们从博客表中获取所有博客，从获取的博客中获取博客标题和博客正文，并将其传递给名为 edit_blog.html 的 HTML 文件。 edit_blog.html 类似于 write_blog.html。它有两个字段，一个用于标题，一个用于正文。唯一的区别是值被预先写入该字段。现在，由于我们正在编辑它，我们希望该值按照以前的记录存在。所以我们在这个字段中有一个值字段，对于文本区域，我们在这个字段中有一个值。现在让我们看看删除博客时会发生什么。
因此，当您删除博客时，控制权会传递给此特定路由。现在我们在这里所做的就是从数据库中删除这个博客。所以这是从链接中给出博客 ID 的博客中删除，一旦完成，我们将更改提交到数据库并向用户发送一条消息。
最后我们有一条退出的路线。因此，如果我们回到我们的应用程序并单击注销，我们会收到一条消息，指出您已注销并且所有会话变量都将被删除。
至此，我们结束了这篇文章。我希望我们熟悉使用 Flask 执行 CRUD 操作，并且我知道这个博客应用程序远非完美，没有采取任何安全措施，并且存在很多缺陷，但主要目的是启发您如何我使用烧瓶环境构建我的博客文章。
在 git hub 上查看完整的源代码： https://github.com/Zcamm7417/blog
感谢您一直关注到本文的最后！
在 Linkedln 上与我联系 ： https://www.linkedln.com/mwlite/in/alaro-abdulroqeeb
中等在 ： https://medium.com/@abdulroqeebalaro5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
