65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Flask 和 Angular 4|5 的单页应用教程系列。

Ahmed Bouchefra
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2018年4月9日

CPOL

5分钟阅读

viewsIcon

14610

使用 Flask 和 Angular 4|5 的单页应用教程系列。

引言

在本教程系列中，我们将使用 Python、Flask、SQLAlchemy 和 Angular 5 来构建一个现代的 RESTful Web 应用程序，其架构包括一个 Angular 5 前端应用程序和一个使用 Flask 的后端 REST API。

我们将构建的应用程序是一个简单的 CRUD（创建、读取、更新和删除）系统，用于管理客户。通过实现更多的用例，可以将其进一步扩展为一个功能齐全的客户管理系统。

第一个教程将介绍如何设置后端和前端应用程序以及如何安装必要的依赖项。

系列教程

  • 介绍和设置 Flask 和 Angular（本教程）
  • 使用 SQLAlchemy ORM 创建数据库模型
  • 使用 Angular Router 进行路由和导航
  • 使用 ngrx 进行 Angular 状态管理
  • 将 Angular 与 Flask 集成
  • 使用 Flask 构建 REST API
  • 使用 Angular HttpClient 消费 REST API
  • 添加 JWT 认证
  • 准备生产环境和部署

在深入实际步骤之前，让我们先简要回顾一下本教程中将使用的技术。

Flask：一个用于构建 Web 应用程序的 Python 微框架，以轻量级和可扩展而闻名。Flask 具有许多特性，例如：

  • 易于设置和上手。
  • 拥有活跃的社区。
  • 拥有良好的文档。
  • 比 Django 轻量，对于许多项目来说，可以作为 Django 的一个轻量级替代方案。
  • 易于扩展。

Angular 5 是 Angular 的最新版本，它是最流行的用于使用 TypeScript 构建前端应用程序的客户端框架。Angular 由 Google 创建、使用和支持。

SQLAlchemy 是一个 Python ORM（对象关系映射器）和 SQL 工具包，它允许 Python 开发人员使用基于 SQL 的数据库（用于数据持久化和检索），而无需了解或处理 SQL，而是使用 Python 对象和方法。

背景

在本节中，我们将学习如何安装 Flask 和 Angular 来设置我们的开发环境。

首先，要完成本教程，您将需要：

  • 已安装 **Python 3**。您可以从官方网站安装。
  • pipenv 用于管理依赖项（pip install pipenv）
  • 可选地，docker 用于快速设置数据库系统。否则，只需在您的系统上安装 **PostgreSQL**，因为我们将需要它来持久化数据（我们将使用 **SQLAlchemy** ORM 进行数据持久化，因此任何数据库管理系统都可以工作，但为了遵循本教程中的确切说明，您需要 **PostgreSQL**）。
  • **Node.js** 和 **NPM** 已安装。您可以从官方网站安装它们。请注意，Angular CLI 要求 Node 6.9.0 或更高版本，以及 NPM 3 或更高版本。

步骤 1 — 创建 PostgreSQL 数据库

安装 Docker 后，只需在终端中运行以下命令即可创建 PostgreSQL 数据库：

 data-lang="bash">docker run --name crmdb \
    -p 5432:5432 \
    -e POSTGRES_DB=crmdb \
    -e POSTGRES_PASSWORD=p4ssw0rd \
    -d postgres

如果您已在系统上安装了 PostgreSQL 并想使用它而不是 docker，请运行以下命令：

 data-lang="bash">createdb crmdb

步骤 2 — 安装 Angular CLI

现在您需要安装Angular CLI，所以回到您的终端并运行以下命令：

 data-lang="bash">npm install -g @angular/cli

根据您的 npm 配置，您可能需要在命令前添加 sudo。

步骤 3 — 引导 Flask 应用程序

现在我们已经设置好了 PostgreSQL 数据库和 Angular CLI。让我们使用 Python 和 Flask 来引导后端应用程序。

首先，使用以下命令创建项目所需的文件夹：

 data-lang="bash">mkdir flask-crm
>cd flask-crm
mkdir backend

回到 flask-crm 的根目录，然后使用 pipenv 初始化一个新的 Python 3 环境，该环境将用于隔离我们项目与系统范围的包的包。

 data-lang="bash">pipenv --three

将在 flask-crm 中创建一个 Pipfile。

您现在可以安装我们项目的 Python 依赖项，即：

  • flask：Flask 框架的包
  • marshmallow：用于 JSON 对象序列化和反序列化的包
  • sqlalchemy：SQLAlchemy ORM 的包
  • 以及 psycopg2-binary：SQLAlchemy ORM 的 PostgreSQL 驱动程序

回到您的终端并运行以下命令：

 data-lang="bash">pipenv install flask marshmallow sqlalchemy psycopg2-binary

安装 Python 依赖项后，让我们创建一个 Flask 应用程序。

创建基本的 Flask 应用程序

回到您的终端，导航到 backend 文件夹内，创建一个 main.py 文件，然后添加以下代码，仅用 Flask 说“hello”。

data-lang="python">from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello World!'

我们首先从 flask 包导入 Flask 类，然后创建该类的一个实例（__name__ 参数是指应用程序模块，因此我们传递它来告诉 flask 在哪里可以找到应用程序的其他文件）。

接下来，我们创建一个简单的 Python 函数，该函数仅返回字符串 Hello World!。此函数使用 @app.route('/') 装饰器进行装饰，该装饰器告诉 Flask 在用户访问 / 路径或主 URL 时调用此函数并显示其结果。

要运行此应用程序，您需要在终端中运行以下命令：

 data-lang="bash">pipenv shell
>cd backend
>export FLASK_APP=main.py
flask run

首先，我们激活虚拟环境，导航到 backend 文件夹内，然后导出 FLASK_APP 并运行应用程序服务器（导出 FLASK_APP 会告诉 flask 要运行哪个文件，在本例中是 main.py 文件）。

您的应用程序服务器将在 http://127.0.0.1:5000/ 上运行。如果您在浏览器中访问此地址，您将看到一个 Hello World! 显示出来。

创建基本后端应用程序后，让我们创建前端。

步骤 4 — 创建 Angular 5 前端应用程序

在上一步中，我们安装了 Angular CLI。现在让我们使用它来创建一个基本的 Angular 5 应用程序。回到您的终端，确保您位于 flask-crm 文件夹内，然后运行以下命令来生成前端并启动它：

 data-lang="bash">ng new frontend
>cd frontend
ng serve

您的应用程序将在 https://:4200/ 上运行。

结论

在本教程中，我们介绍了我们将通过 Python、Flask 和 Angular 5 在这些系列中构建的 RESTful 应用程序。

我们还安装了后端和前端依赖项，引导了将用作我们应用程序前端（用于消费 REST API 和提供 UI 界面）的 Angular 5 应用程序，以及负责公开 REST API 端点并连接底层 PostgreSQL（或您选择的任何基于 SQL 的数据库管理系统）数据库的 Flask 应用程序。

在下一教程中，您将了解 SQLAlchemy ORM，我们将使用它来为我们的后端应用程序创建数据库模型，敬请期待！

历史

  • 2018 年 4 月 9 日：初始版本
© . All rights reserved.