Cette entrée est un article publié par un formateur / tuteur de G's ACADEMY TOKYO . Nous détaillerons les petites questions et questions qui se sont posées en classe, les nouvelles technologies qui intéressent le formateur, etc.

J'ai touché le flacon du framework python.

Je suis Kuribayashi du personnel de J's Academy.

Récemment, le python est populaire dans la G's Academy, alors je voulais le toucher moi-même, alors je l'ai essayé avec un toucher doux.

Cette fois, je voudrais toucher un cadre appelé Flask.

Flask est un framework d'application Web léger pour le langage de programmation Python. On dit que cela s'appelle «microframework» car il réduit au minimum les fonctions fournies en standard.

Lien référencé http://a2c.bitbucket.org/flask/quickstart.html#id2

J'ai été attiré par le titre du plus petit exemple d'application dans le lien ci-dessus et je l'ai essayé. Comme je ne l'ai essayé que sur mon propre PC, cela peut ne pas fonctionner même si je suis la procédure. Dans ce cas, veuillez vous référer à la page liée.

Défions immédiatement. (Je n'ai écrit que la procédure que j'ai faite sur Mac. Je suis désolé pour Windows ...)

La version Python est la suivante. Python 3.5.2

Construisons d'abord l'environnement.

Environnement

Entrez la commande suivante dans le terminal. (Peut-être avez-vous besoin de sudo dans votre tête ...)

$ easy_install virtualenv

Il semble que ce soit aussi bien. .. .. (Peut-être avez-vous besoin de sudo dans votre tête ...)

$ pip3 install virtualenv

Créez un environnement appelé env dans le dossier de projet myproject.

$ mkdir myproject
$ cd myproject
$ virtualenv env

On dit que cet environnement sera activé pour utiliser cet environnement. Entrez la commande suivante.

$ . env/bin/activate

Installation du flacon

Installez Flask.

$ easy_install Flask

L'avez-vous installé avec ça? ..

Défiez bonjour le monde

Je vais essayer Hello World immédiatement.

Commencez par créer un fichier hello.py.

/myproject
    /hello.py

Créez un fichier hello.py et écrivez le code suivant.

`hello.py`


from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return "Hello World!C'est vrai"

if __name__ == '__main__':
    app.run(debug=True)

Après avoir entré ce qui précède, entrez la commande suivante à l'emplacement où le fichier hello.py est stocké dans le terminal.

$ python3 hello.py
 * Running on http://127.0.0.1:5000/

Il semble que le serveur soit maintenant opérationnel.

Depuis le navigateur http://127.0.0.1:5000/ Quand j'essaye d'accéder

スクリーンショット 2016-07-29 2.53.43.png

Oh! Bonjour le succès mondial! C'est super facile à faire avec juste ça. Génial.

Renvoie un modèle html

Cette fois, je veux retourner un fichier html, donc je vais le contester. Flask est recherché dans le dossier de modèles de modèles, créez donc un dossier de modèles et créez hello.html comme modèle.

/myproject
    /hello.py
    /templates
        /hello.html

Écrivez le code suivant dans hello.html

`templates/hello.html`


<!doctype html>
<title>Hello from Flask</title>
{% if name %}
  <h1>{{ name }}San! Bonjour tout le monde du modèle!</h1>
{% else %}
  <h1>Bonjour tout le monde du modèle!</h1>
{% endif %}

Est-ce correct?

Cette fois depuis le navigateur http://127.0.0.1:5000/hello Quand j'essaye d'accéder

スクリーンショット 2016-07-29 12.34.50.png

Oh! C'était affiché!

Cette fois depuis le navigateur http://127.0.0.1:5000/hello/栗林 Quand j'essaye d'accéder

スクリーンショット 2016-07-29 12.36.24.png

J'ai pu refléter les personnages "Kuribayashi"!

Fichier statique

Je vais également refléter css, javascript et images.

fichier css

D'abord de css.

Vous pouvez appeler / static sur votre application simplement en créant un dossier nommé static dans le package ou à côté du module. J'ai essayé la structure des dossiers comme suit.

/myproject
    /hello.py
    /templates
        /hello.html
    /static
        /css
            /style.css

Écrivez le code suivant dans le fichier style.css.

`static/css/style.css`


@charset 'utf-8';

body {
    background: #0fa;
}

Changeons la couleur de fond de manière appropriée.

Le fichier hello.html est également modifié comme suit afin que le fichier css soit lu.

`templates/hello.html`


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/style.css">
    <title>G's academy Trainer's Recipe</title>
</head>
<body>
    <title>Hello from Flask</title>
    {% if name %}
      <h1>{{ name }}San! Bonjour tout le monde du modèle!</h1>
    {% else %}
      <h1>Bonjour tout le monde du modèle!</h1>
    {% endif %}
</body>
</html>

Depuis le navigateur http://127.0.0.1:5000/hello/栗林 Quand j'essaye d'accéder

スクリーンショット 2016-07-29 12.48.51.png

Oh ~! Cela se reflète.

Écrire du JavaScript

Écrivons également du javascript. Créez un dossier js dans le dossier statique et stockez le fichier main.js.

/myproject
    /hello.py
    /templates
        /hello.html
    /static
        /css
            /style.css
        /js
            /main.js

Décrivez l'intérieur du fichier main.js comme suit.

`static/js/main.js`


(function(){
    'use strict';

    alert('C'est une alerte!');

})();

Ajout d'une balise de script pour lire le javascript dans le fichier hello.html.

`templates/hello.html`


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/style.css">
    <title>G's academy Trainer's Recipe</title>
</head>
<body>
    <title>Hello from Flask</title>
    {% if name %}
      <h1>{{ name }}San! Bonjour tout le monde du modèle!</h1>
    {% else %}
      <h1>Bonjour tout le monde du modèle!</h1>
    {% endif %}

    <!--Ajoutez ce qui suit-->
    <script src="/static/js/main.js"></script>

</body>
</html>

Lorsque je recharge le navigateur ...

スクリーンショット 2016-07-29 12.56.35.png

Affichage d'alerte réussi!

Afficher l'image

Je veux aussi afficher l'image, alors essayons-le.

Créez un dossier images dans le dossier statique et stockez le fichier pic01.png de l'image d'esquisse que vous avez dessinée il y a quelque temps.

/myproject
    /hello.py
    /templates
        /hello.html
    /static
        /css
            /style.css
        /js
            /main.js
        /images
            /pic01.png

Modifiez le fichier hello.html comme suit.

`templates/hello.html`


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/css/style.css">
    <title>G's academy Trainer's Recipe</title>
</head>
<body>
    <title>Hello from Flask</title>
    {% if name %}
      <h1>{{ name }}San! Bonjour tout le monde du modèle!</h1>
    {% else %}
      <h1>Bonjour tout le monde du modèle!</h1>
    {% endif %}

    <!--Ajoutez ce qui suit-->
    <p>
        <img src="/static/images/pic01.png " alt="pic01">
    </p>

    <script src="/static/js/main.js"></script>
</body>
</html>

Lorsque je recharge le navigateur ...

スクリーンショット 2016-07-29 13.10.08.png

Oh ~! Génial!

Cette fois, j'ai touché Flask, un framework Python, avec un toucher doux. C'est assez facile, donc j'ai trouvé que c'était merveilleux. J'ai un peu touché Ruby on Rails, mais comparé à Rails, c'est très simple et c'est bien qu'il y ait peu de pièces qui ressemblent à une boîte noire.

En plus de Flask, il existe différents types de Python tels que Django, Pyramid, Bottle, Falcon, etc., donc si vous êtes intéressé, essayez différents frameworks.

Ceci est la recette du formateur par Kuribayashi, membre du personnel de G's ACADEMY TOKYO .

[Recette du formateur] J'ai touché le flacon du framework Python.

J'ai touché le flacon du framework python.

Environnement

Installation du flacon

Défiez bonjour le monde

hello.py

Renvoie un modèle html

templates/hello.html

Fichier statique

fichier css

static/css/style.css

templates/hello.html

Écrire du JavaScript

static/js/main.js

templates/hello.html

Afficher l'image

templates/hello.html

`hello.py`

`templates/hello.html`

`static/css/style.css`

`templates/hello.html`

`static/js/main.js`

`templates/hello.html`

`templates/hello.html`