Récemment, je suis au chômage et j'ai encore beaucoup de temps, alors j'ai décidé de faire quelque chose comme ça.

Télécharger

BBS-SPA C'est ici → https://github.com/syousei/bbs-spa

Fonctionnalité

BBS-SPA est un exemple de SPA (Single Page Application). Angular2 + Bootstrap est utilisé côté client, et App Engine / Python + webapp2 est utilisé côté serveur.

une fonction

Enregistrement / authentification de l'utilisateur (connexion / déconnexion) * L'authentification JWT (JSON Web Token) est adoptée
Publier un sujet
Commentaires sur les sujets

installer

supposition

Veuillez d'abord configurer les éléments suivants.

Python 2.7
Google Cloud SDK / Python
Node.js et npm
Angular CLI
- npm install -g @angular/cli

Si cet article vous intéresse, je pense que ce domaine est principalement fait.

Configuration du BBS-SPA

Extrayez le BBS-SPA téléchargé à partir de ce qui précède dans un dossier de travail approprié. Ensuite, vous verrez deux dossiers, bbs-spa-client et bbs-spa-server.

Comme vous pouvez l'imaginer, bbs-spa-client a des fichiers côté client créés avec Angular2 + Bootstrap, et bbs-spa-server a un côté serveur (API) créé avec App Engine / Python + webapp2. ) Les fichiers sont stockés respectivement.

Ouvrez maintenant un terminal (invite de commande), allez dans bbs-spa-client et exécutez la commande npm start. Si le message suivant s'affiche, il n'y a pas de problème.

キャプチャ1.PNG

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **

(réduction)

webpack: Compiled successfully.

Ouvrez ensuite le shell du SDK Google Cloud, accédez à bbs-spa-server et exécutez la commande dev_appserver.py app.yaml. Si le message suivant s'affiche, il n'y a pas de problème.

キャプチャ2.PNG

Starting module "default" running at: http://localhost:8080
admin_server.py:116] Starting admin server at: http://localhost:8000

Installation de pytz et pyjwt

Créez un dossier appelé lib directement sousbbs-spa-server et installez pytz et pyjwt.

Si vous n'êtes pas sûr, téléchargez-les simplement à partir des URL suivantes, décompressez-les et jetez les dossiers nommés pytz et pyjwt dans bbs-spa-server / lib.

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

Ceci termine la configuration.

Ouvrons http: // localhost: 4200 dans votre navigateur. Je pense que vous pouvez utiliser le babillard avec le système d'inscription des membres.

Si vous souhaitez modifier ou supprimer les informations de l'utilisateur enregistré ou le contenu publié, la console de gestion App Engine (version locale) s'ouvre à l'adresse http: // localhost: 8000.

À propos du fonctionnement

À l'origine, le script côté serveur et le script client sont placés sur le même hôte, mais comme le serveur de développement Angular 2 et le serveur de développement App Engine doivent être démarrés séparément pour s'exécuter localement, ils sont stockés dans des dossiers séparés. Je vais.

Si vous souhaitez réellement effectuer un déploiement sur App Engine, définissez la destination de compilation de bbs-spa-client sur le dossier de bbs-spa-server qui stocke les fichiers statiques (par exemple, / static_files / dist). J'ai besoin de le donner.

Nous espérons que vous comprendrez cela et que vous l'utiliserez pour apprendre. Veuillez commenter si vous avez des questions.

De plus, comme j'ai utilisé Angular2 et TypeScript pour presque la première fois pour faire cela, je pense qu'il y a plusieurs points délicats. Si vous avez des questions, je vous serais très reconnaissant de bien vouloir me donner des conseils dans les commentaires.

c'est tout.

Exemple d'apprentissage SPA (Angular2 + Bootstrap / App Engine / Python + webapp2)