使用 Tetra 构建全栈应用程序

大多数全栈应用程序将前端和后端代码分成不同的文件；大多数 Web 框架都是基于这种结构构建的。随着文件和代码行数的增加，它可能会增加代码库的复杂性，从而使调试变得更加困难。通过引入一个名为Tetra的框架，这些单独文件引起的复杂性被最小化。

本教程将向您介绍 Tetra 框架及其组件。您还将学习如何构建一个简单的全栈博客应用程序，该应用程序使用 Tetra 执行 CRUD 功能。

我们将介绍以下内容：

• 什么是利乐？

  • Tetra 组件

• 让我们构建一个 Tetra 博客应用程序

  • 先决条件

• 项目设置

• Tetra 安装和配置

  • 安装 esbuild

• 博文模型

• AddPost组件_

• PostItem组件_

• ViewPosts组件_

• PostDetail组件_

• UpdatePost组件_

• 关于 Tetra 的生产准备情况的说明

什么是利乐？

Tetra是一个全栈框架，在服务器端使用Django和Alpine.js 构建，用于执行前端逻辑。Tetra 允许您将前端和后端逻辑放在一个统一的位置，并降低应用程序中的代码复杂性。它使用称为组件类的类将后端实现与前端连接起来。

Tetra 组件

tetra 组件是一个代码单元，可将其 Python、HTML、CSS 和 JavaScript 逻辑作为单个 Python 文件中的实体来处理。如果您熟悉React 框架，则可以将其组件的行为比作 Tetra 组件，只是 React 组件仅执行前端功能。

组件可以相互依赖或相互独立。这意味着您可以从另一个组件调用一个组件或将其作为独立组件。您可以在此处阅读有关 tetra 组件的更多信息。

让我们构建一个 Tetra 博客应用程序

本教程的其余部分将指导您完成如何在 Django 应用程序中安装 Tetra，以及如何使用 Tetra 构建博客应用程序的分步流程。博客应用程序将从管理员的角度呈现，您可以在其中创建新帖子、更新现有帖子、删除帖子以及查看所有博客帖子。

该应用程序将不包括任何身份验证或授权层。目的是使其尽可能简单，同时专注于 Tetra 的核心功能。

先决条件

• 熟练使用Django构建单体应用程序

• HTML、CSS 和 JavaScript 的工作知识

• 任何合适的 IDE 或文本编辑器

• 您的机器上安装了 Python 3.9 或更高版本

• npm 包管理器安装在你的机器上

项目设置

第一步是为应用程序创建一个虚拟环境。在终端中运行以下命令来设置项目目录和虚拟环境：

mkdir tetra
cd tetra
python -m venv tetra 
cd tetra
Scripts/activate

下一步是安装 Django。由于 Tetra 在 Django 框架上运行，因此需要将 Django 集成到您的应用程序中。

pip install django
django-admin startproject tetra_blog
cd tetra_blog

接下来，创建博客应用程序：

python manage.py startapp blog

将博客应用添加到文件中的INSTALLED_APPS列表中settings.py，如下图：

INSTALLED_APPS = [
    'blog.apps.BlogConfig',
    ...
 ]

在 app 目录中，创建一个components.py文件，该文件将包含您将在项目中构建的所有组件。

Tetra 安装和配置

成功设置 Django 项目后，下一步是在您的应用程序中安装 Tetra 框架。

pip install tetraframework

在settings.py文件中，添加tetra到INSTALLED_APPS列表中，如下图：

INSTALLED_APPS = [
    ...
    'tetra',
    'django.contrib.staticfiles',
    ...
]

确保在元素tetra之前列出。django.contrib.staticfiles

接下来，您需要将其包含tetra.middleware.TetraMiddleware在MIDDLEWARE列表的末尾。这会将组件中的 JavaScript 和 CSS 添加到 HTML 模板中。

MIDDLEWARE = [ 
    ...
    'tetra.middleware.TetraMiddleware'
]

将以下修改应用于根urls.py文件，以通过您的公共方法公开 Tetra 的端点：

from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
​
urlpatterns = [
    ...
 
    path('tetra/', include('tetra.urls')),
  ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

安装 esbuild

Tetra 构建您的 JS/CSS 组件并使用esbuild打包它们。Adobe2022全家桶下载，全套激活直装版无需安装，官方激活版终于搞定了！这使您可以将前端实现中可能发生的任何错误跟踪到源 Python 文件。

npm init
npm install esbuild

如果您使用的是 Windows 操作系统，则必须esbuild在settings.py文件中显式声明构建路径：

TETRA_ESBUILD_PATH = '<absolute-path-to-project-root-directory>/node_modules/.bin/esbuild.cmd'

博文模型

该应用程序将在博客文章上执行 CRUD 功能。该Post模型将包含三个属性：标题、内容和日期。

将以下代码添加到models.py文件中以设置Post模型：

from django.db import models
from django.utils import timezone
from django.urls import reverse


class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now)


    def __str__(self):
        return self.title
    // generate a reverse url for the model
    def get