SPA学习样本（Angular2 + Bootstrap / App Engine / Python + webapp2）

2 年 ago
逸, 科
2 minutes

最近我失业了，有很多闲暇时间，所以我尝试做了这个东西。

下载

论坛-SPA

这里可以找到→https://github.com/syousei/bbs-spa

特点 (paraphrase: “特點”)

BBS-SPA是一个SPA（单页应用）的示例。
客户端使用Angular2 + Bootstrap，服务器使用App Engine/Python + webapp2。

功能 (Paraphrased in Chinese)

    • ユーザー登録・認証（ログイン/ログアウト）※JWT（JSON Web Token）認証を採用

 

    • トピックの投稿

 

    トピックへのコメント

安装

前提 (Qiantí)

请先设置以下内容。

    • Python 2.7

 

    • Google Cloud SDK / Python

 

    • Node.jsとnpm

 

    • Angular CLI

npm install -g @angular/cli

如果您对这篇文章感兴趣，我认为您大致上已经了解了这个领域。

论坛SPA的设置

将从上述地方下载的BBS-SPA解压到一个适当的工作文件夹中。
然后，会出现两个文件夹，名为bbs-spa-client和bbs-spa-server。

如您所想，bbs-spa-client包含由Angular2 + Bootstrap创建的客户端文件，而bbs-spa-server包含由App Engine/Python + webapp2创建的服务器端（API）文件。

请打开终端（命令提示符），进入bbs-spa-client目录，并执行npm start命令。
如果显示以下消息，则表示没有问题。

キャプチャ1.PNG
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **

（省略）

webpack: Compiled successfully.

请打开Google Cloud SDK Shell，然后进入bbs-spa-server目录，并执行命令”dev_appserver.py app.yaml”。如果出现以下消息，则表示没有问题。

キャプチャ2.PNG
Starting module "default" running at: http://localhost:8080
admin_server.py:116] Starting admin server at: http://localhost:8000

安装pytz和pyjwt。

请在bbs-spa-server文件夹下创建一个名为”lib”的文件夹，并安装pytz和pyjwt。

如果不太清楚的话，可以从以下的URL中下载，解压后会出现名为pytz和pyjwt的文件夹，将它们放到bbs-spa-server/lib文件夹中即可。

    • pytz: https://pypi.python.org/pypi/pytz

pyjwt: https://pypi.python.org/pypi/PyJWT

以上就完成了设置。

让我们打开浏览器并尝试访问http://localhost:4200。我认为你现在可以使用一个会员注册制的留言板。

SAMPLE.gif

如果您想编辑或删除已注册用户信息或帖子内容，可以在http://localhost:8000上打开App Engine的管理控制台（本地版本）。

关于行动

通常情况下，服务器端脚本和客户端脚本被放置在同一主机上。但是，为了在本地运行，必须分别启动Angular2的开发服务器和App Engine的开发服务器，因此将它们存储在不同的文件夹中。

如果您想要实际部署到App Engine上，需要将bbs-spa-client的构建目标设置为存储在bbs-spa-server内的静态文件文件夹（例如/static_files/dist等）。

希望您能够理解这一点，并将其用于学习。如果有任何问题，请在评论中提出。

另外，由于这是我几乎第一次使用Angular2和TypeScript来制作这个项目，所以可能会有不太完美的地方。
如果你有任何意见或建议，请在评论中告诉我，我会非常高兴。

以上是一种选择。

参考文件

    • How-to Guides  |  App Engine standard environment for Python  |  Google Cloud Platform

 

    • Welcome to webapp2! — webapp2 3.0.0b1 documentation

 

    • Angular – QuickStart

 

    • Angular 2/4 User Registration and Login Example & Tutorial | Jason Watmore’s Blog

 

    • JWT Authorization in Python, Part 1: Practise.

 

    • Bootstrap · The world’s most popular mobile-first and responsive front-end framework.

 

    • Angular2でComponentをまたがったデータのやり取り – Carpe Diem

 

    • Angular の基礎 – Angular 入門

 

    • 必ず覚えておきたい！ Angular2でコンポーネントの子要素を参照する方法 – イソップブログ

 

    Angular2のLifecycle Hooksを理解する – イソップブログ
✖
广告
将在 10 秒后关闭
bannerAds