在本系列中，您将学习如何使用Python、Flask和Angular创建现代web应用程序。您将使用这个堆栈来构建一个SPA和一个后端API来公开考试和问题，这样用户就可以测试他们关于不同技术的知识。在这个GitHub存储库中，您可以找到本系列第三部分（本部分）中创建的最终代码。到目前为止，本系列包括三个部分：第1部分包括引导Flask应用程序、使用SQLAlchemy ORM管理实体以及引导角度应用程序等主题。第2部分包括保护烧瓶应用程序、处理角度表单和保护角度应用程序等主题。第3部分（本部分）包括配置角度材质、处理授权和使用Alembic迁移数据库等主题。你要建造什么在本系列中，您将使用Python、Flask和Angular来构建基于现代体系结构的web应用程序。使用Angular，大数据分析方法，您将构建一个SPA（单页应用程序），允许用户浏览考试和问题。这些用户在经过身份验证后，将能够通过选择问题公开的多个选项中的一个来测试他们对特定主题的知识。然后，当你的用户提交他们的答案，你的后端将检查他们是对还是错，记录结果，并把这个结果发送给用户。在本系列的这一部分中，您将从安装和配置Angular Material开始，以便轻松地为您的应用程序添加一个漂亮的界面。然后，您将使用角度材质组件，如按钮、卡片、对话框和工具栏来增强应用程序的外观。之后，您将重构前端和后端应用程序，以支持更多功能，如问题管理。在整个过程中，您将了解如何利用角色来限制某些类型的用户可以执行的操作。例如，尽管让社区帮助添加新的考试和问题可能是个好主意，但是您需要限制哪些用户可以更新和删除现有的考试和问题。"我正在用Angular、Flask和Python构建现代webapps！"在推特上留言安装和配置角材官方网站包含一些关于如何安装、配置和使用角度材料的好的文档。然而，对于新来者来说，这些信息可能看起来有点分散。在这篇文章中，用户需要尽可能快地使用这个界面。因此，物联网企业，首先需要安装一些依赖项：#确保将光标移到前端目录cd前端#使用NPM安装依赖项npm i@角度/材料@角度/cdk hammerjs您需要上面命令中的前两个库，@angular/material和@angular/cdk，才能在任何应用程序中使用angular material。您还将安装第三个库hammerjs，为您的应用程序添加手势支持。安装这些依赖项后，需要更新索引.html文件。此文件的新版本将添加两个其他外部依赖项（Roboto字体和材质图标），并将使Angular Material默认样式应用于应用程序上的所有原生元素：在在在然后，您需要更新样式.css文件以应用角度材质主题（在本例中为靛蓝粉色）并删除浏览器在body元素上应用的边距：@导入"~@angular/material/prebuild themes/indigo-粉红色.css";身体{余量：0；}此外，在进入添加角度材质组件的过程之前，需要更新主.ts要应用的文件锤子.js:导入'hammerjs'；// ... 其他的。。。有了这些更改，就可以在应用程序中正确地安装和配置了Angular Material。所以，现在是节省工作的好时机：git添加。&&git commit-m"安装和配置角度材料"使用角度材质组件现在您已经完成了角度材质的配置，大数据需要学什么，您可以继续前进并利用第一个组件来构建一个吸引人的UI。更准确地说，您将首先使用工具栏和按钮组件将导航栏添加到应用程序的顶部。要使用这些组件，您需要将它们添加到AppModule中。所以，打开应用程序模块.ts归档并更新如下：从"@angular/platform browser/animations"导入{NoopAnimationsModule}；从"@angular/material"导入{matoolbarmodule，MatButtonModule}；// ... 其他进口。。。// ... const批准@NG模块({// ... 声明。。。进口：[// ... 其他进口。。。NoopAnimationsModule，Mattoolbar模块，MatButton模块，],// ... 提供程序和引导。。。})// ... 导出类AppModule。。。注意：在上面的代码片段中，您使用的是NoopAnimationsModule，以避免向您的项目添加另一个依赖项。如果您对使用动画感兴趣，请检查此URL。然后，可以重构AppComponent类以使用这些组件。所以，打开应用程序组件.ts文件并将其代码替换为以下代码：从"@angular/core"导入{Component，OnInit}；从'Auth0 web'导入*为Auth0；@组件({selector:'应用根'，模板：`在线考试关于登录注销`,样式URL:['/app.component.css']})导出类AppComponent实现OnInit{authenticated=false；signIn=Auth0.signIn；signOut=Auth0.signOut；恩戈尼尼特（）{const self=这个；Auth0.subscribe（（已验证）=>(自我认证=认证）；}}此文件的新版本通过四个按钮将mat toolbar元素添加到页面顶部：在线考试：您将使此按钮将用户重定向到主页。About：您将创建一个名为About的视图，并使此按钮将用户重定向到那里。登录：您添加了此按钮以允许访问者登录到您的应用程序。注销：您添加了此按钮以允许用户关闭当前会话。这些更改的有趣之处在于，由于AppComponent还定义了其他视图的显示位置（通过router outlet元素），mat toolbar元素将对所有视图可见。注意，您还使用了Angular Material框架提供的Button组件，方法是向Button元素添加mat Button指令。除此之外，您还向工具栏添加了一个span元素，该元素使用一个名为fill remaining space的类。这个类的目标是使这个元素填充导航栏中所有未使用的空间。由于尚未定义此类的规则，请打开app.component.css文件并添加以下代码：.填充剩余空间{/*这将使用flexbox填充剩余空间。每个工具栏行都使用flexbox行布局。*/灵活：11自动；}现在，移动物联网，当您将"登录"和"注销"按钮移动到AppComponent时，您可以从ExamComponent中删除它们和相关代码。所以，打开考试.component.ts文件并将其代码替换为：从'Auth0 web'导入*为Auth0；从'@angular/core'导入{Component，大数据数据处理，OnDestroy，OnInit}；从'rxjs/Subscription'导入{Subscription}；从""导入{Exam}/考试.模型';从'./ExamsApiService}导入{ExamsApiService}-api.服务';@组件({selector:'考试'，模板：`

新检查