Introduction à Tornado (3): Développement à l'aide de modèles [Pratique]
introduction
Dans cette série, nous présenterons comment développer des applications avec Tornado, un serveur Web et un framework d'applications Web qui s'exécutent sur Python. Le contenu de cette série est le suivant.
- Caractéristiques de Tornado
- Procédure de configuration de l'environnement pour l'utilisation de Tornado
- Hello, World Création d'une application
- Création d'une application liée à une base de données
- Autres techniques utiles liées à la tornade
La dernière fois, j'ai expliqué comment passer une valeur d'un gestionnaire à un modèle. Cela permet la génération de contenu dynamique. Cette fois, j'expliquerai les fonctions d'autres modèles. Plus précisément, je vais expliquer comment créer une application en utilisant l'héritage de modèle.
<! - Cette fois, je présenterai la fonction de moteur de template de Tornado. ->
Public cible
- Ceux qui sont intéressés par le développement d'applications Web en utilisant Python
- Ceux qui ont touché Python
- Ceux qui apprennent ou qui commencent tout juste à développer des applications Web
Environnement requis
- Python 2.6 et supérieur
- Tornado 4.2
Article associé
- Introduction à Tornado (1): Framework Web Python à partir de Tornado
- Introduction à Tornado (2): Introduction au développement à l'aide de modèles - Génération de pages dynamiques-
Exemple de code
Dernier examen
Dans l'article précédent (http://qiita.com/Hironsan/items/d2d8f59ed2c2e8e63488), j'ai créé une application qui affiche quelque chose comme "Bonjour votre nom!" Lorsque vous passez un nom. Grâce à la création de cette application, j'ai compris les bases de la génération dynamique de pages.
La dernière fois, il n'y avait qu'un seul fichier modèle. Cependant, la plupart des applications Web du monde réel utilisent plusieurs modèles. Par conséquent, cette fois, nous allons essayer de développer en utilisant plusieurs modèles.
Cette fois, nous allons créer un site d'introduction pour les langages de programmation. L'image est la suivante.
Cette fois, je le ferai après avoir appris le mécanisme d'héritage des modèles.
Héritage du modèle
L'héritage de modèle est la possibilité ** d'hériter d'un modèle existant et d'en créer un nouveau **. Nous appellerons le modèle existant ** modèle parent ** et le modèle hérité ** modèle enfant **.
Dans l'héritage de modèle, le modèle parent contient des éléments couramment utilisés sur votre site, et un bloc qui peut être écrasé par le modèle enfant y est défini. Cela permet au modèle parent d'être réutilisé. Regardons un exemple.
base.html
<html>
<head>
<title>{% block title %}Titre par défaut{% end %}</title>
</head>
<body>
{% block content %}
Contenu par défaut
{% end %}
</body>
</html>
Appelons ce modèle base.html. Dans cet exemple, nous utilisons la balise block pour définir deux blocs ({% block title%} {% end%} et {% block content%} {% end%}) afin que le modèle enfant puisse être rempli de valeurs. Je suis. Le rôle de la balise de bloc est de faire savoir au moteur de modèle que le modèle enfant peut écraser la partie du modèle qui est incluse dans les balises.
Le modèle enfant ressemble à ceci:
{% extends "base.html" %}
{% block content %}
Contenu du modèle enfant
{% end %}
La balise extend en haut est la clé de l'héritage. Cette balise indique au moteur de modèle qu'il s'étend à d'autres modèles. Lorsque le moteur de modèle traite ce modèle, il recherche d'abord le modèle parent (ici base.html).
À ce stade, le moteur de modèle remarque que deux blocs sont définis dans base.html et remplace ces blocs par les blocs appropriés dans le modèle enfant. La sortie ressemble à ceci:
<html>
<head>
<title>Titre par défaut</title>
</head>
<body>
Contenu du modèle enfant
</body>
</html>
Le modèle enfant n'a pas de cartouche défini, donc la valeur du modèle parent est utilisée telle quelle.
Créer une application
Structure du répertoire
La structure du répertoire est presque la même que la dernière fois. La différence est que certains fichiers ont été ajoutés aux modèles.
.
├── app.py
├── static
│ └── style.css
└── templates
├── base.html
├── index.html
├── php.html
├── python.html
└── ruby.html
Les fichiers des modèles sont des modèles parents qui héritent de base.html, et les autres sont des modèles enfants créés en héritant de base.html. En tant que fonction, index.html est la première page, et les autres sont des pages d'introduction pour chaque langue.
Comme la dernière fois, il y a les trois composants suivants.
- Code Python
- modèle
- CSS
Code Python
Le code Python à exécuter cette fois est le suivant.
import os
import tornado.ioloop
import tornado.web
from tornado.web import url
class IndexHandler(tornado.web.RequestHandler):
def get(self):
self.render('index.html')
class PythonHandler(tornado.web.RequestHandler):
def get(self):
self.render('python.html')
class PHPHandler(tornado.web.RequestHandler):
def get(self):
self.render('php.html')
class RubyHandler(tornado.web.RequestHandler):
def get(self):
self.render('ruby.html')
BASE_DIR = os.path.dirname(__file__)
application = tornado.web.Application([
url(r'/', IndexHandler, name='index'),
url(r'/python/', PythonHandler, name='python'),
url(r'/php/', PHPHandler, name='php'),
url(r'/ruby/', RubyHandler, name='ruby'),
],
template_path=os.path.join(BASE_DIR, 'templates'),
static_path=os.path.join(BASE_DIR, 'static'),
)
if __name__ == '__main__':
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
Je n'ai rien fait de nouveau depuis la dernière fois. Un nouveau point est que lors de la définition de l'URL, nous utilisons la fonction url et passons le nom comme argument. Cela vous permet d'inverser l'URL. La recherche inversée d'URL est une image qui ** lorsque vous transmettez un nom à la fonction de recherche inversée, elle est convertie en l'URL correspondant à ce nom **. Par exemple, dans le cas d'un paramètre d'URL comme celui-ci, si vous passez la chaîne de caractères "python" à la fonction de recherche inversée, elle sera convertie en URL "/ python /". La raison pour laquelle cela est possible est que lorsque vous définissez l'URL "/ python /" à l'aide de la fonction url, vous passez la chaîne "python" dans son argument de nom. De plus, la traction inversée est utilisée dans le modèle.
modèle
Les 5 modèles suivants sont utilisés pour l'affichage cette fois. Tout d'abord, base.html. Ceci est le modèle parent cette fois.
base.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% end %}</title>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="{{ static_url('style.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="{{ reverse_url('index') }}">Home</a>
<a class="navbar-brand" href="{{ reverse_url('python') }}">Python</a>
<a class="navbar-brand" href="{{ reverse_url('php') }}">PHP</a>
<a class="navbar-brand" href="{{ reverse_url('ruby') }}">Ruby</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
{% block content %}
{% end %}
</div>
</div>
<div class="container">
<footer>
<p>© Company 2015</p>
</footer>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Ce fichier modèle définit deux blocs ({% block title%} {% end%} et {% block content%} {% end%}). Ces deux blocs sont remplacés par le modèle enfant. Aussi, pouvez-vous voir que la fonction reverse_url est utilisée dans la partie barre de navigation? Cette fonction est une fonction permettant d'effectuer la recherche inversée de l'URL expliquée précédemment.
Ensuite, index.html. Il est créé en héritant de base.html. Il fonctionne comme la première page.
index.html
{% extends "base.html" %}
{% block title %}haut de page{% end %}
{% block content %}
<h1>Introduction du langage de programmation</h1>
<p>
salut! Ce site présente les langages de programmation.
Plus précisément, il y en a trois: Python, PHP et Ruby.
Sélectionnez la langue qui vous intéresse dans le menu ci-dessus pour voir les détails.
</p>
{% end %}
Assurez-vous que vous utilisez des extensions pour hériter de base.html et utilisez block pour remplacer le contenu.
Et php.html, python.html, ruby.html. Ceux-ci sont également créés en héritant de base.html. Chacun fonctionne comme une page d'introduction pour chaque langue.
php.html
{% extends "base.html" %}
{% block title %}Présentation de PHP{% end %}
{% block content %}
<h1>Hello, PHP!</h1>
<p>
PHP est un langage de programmation dont le but principal est de réaliser des pages Web dynamiques en générant dynamiquement des données HTML.
Et son système de traitement de la langue. Communément abrégé en PHP, ce qui signifie "page d'accueil personnelle" en anglais
"Personal Home Page"Dérivé de.
</p>
<p><a class="btn btn-primary btn-lg" href="https://secure.php.net/" role="button">Savoir plus»</a></p>
{% end %}
python.html
{% extends "base.html" %}
{% block title %}Présentation de Python{% end %}
{% block content %}
<h1>Hello, Python!</h1>
<p>
Python est un langage de programmation polyvalent largement utilisé.
On prétend que le langage est conçu pour une grande lisibilité du code, et grâce à sa syntaxe, par rapport à des langages tels que C.
On prétend que le programme peut être représenté avec moins de lignes de code. Des petits programmes aux grands programmes
Beaucoup de code est fourni pour que vous puissiez écrire clairement différents programmes.
</p>
<p><a class="btn btn-primary btn-lg" href="https://www.python.org/" role="button">Savoir plus»</a></p>
{% end %}
ruby.html
{% extends "base.html" %}
{% block title %}Présentation de Ruby{% end %}
{% block content %}
<h1>Hello, Ruby!</h1>
<p>
Ruby est un langage de script orienté objet développé par Yukihiro Matsumoto (communément appelé Matz).
Réalisez une programmation orientée objet dans les zones où des langages de script ont été utilisés.
C'était également le premier langage de programmation développé au Japon à être certifié en tant que norme internationale lors de la Conférence internationale sur les normes électriques.
</p>
<p><a class="btn btn-primary btn-lg" href="https://www.ruby-lang.org/ja/" role="button">Savoir plus»</a></p>
{% end %}
Comme index.html, ils sont créés en héritant de base.html en utilisant extend et en remplaçant le contenu en utilisant block.
CSS Le fichier CSS utilisé cette fois est le suivant.
body {
padding-top: 50px;
padding-bottom: 20px;
}
Il n'y a rien de spécial à dire, je vais donc omettre l'explication de ce fichier CSS.
Courir
Tout comme la dernière fois, exécutez le code suivant pour démarrer le serveur.
$ python app.py
Accédez ensuite à [http: // localhost: 8888 /](http: // localhost: 8888 /). Vous devriez voir une page comme celle ci-dessous.
Essayez de sélectionner le nom du langage de programmation dans la barre de navigation. Vous pouvez voir que la page a été générée à l'aide de l'héritage de modèle.
Résumé
Cette fois, j'ai présenté comment créer une application en utilisant l'héritage de modèle. Vous pouvez voir que vous pouvez utiliser des extensions pour hériter d'un modèle et un bloc pour remplacer le contenu d'un bloc d'un modèle enfant.
Si vous pouvez comprendre comment transmettre la valeur du gestionnaire introduit la dernière fois et comment en hériter cette fois, vous pouvez dire que vous comprenez les bases du développement à l'aide de modèles. Après cela, si vous connaissez les instructions de contrôle et les fonctions qui peuvent être utilisées dans le modèle, vous pouvez développer en douceur. La prochaine fois, je présenterai les instructions de contrôle et les fonctions qui peuvent être utilisées dans le modèle.