Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- fastapi [2023/06/21 14:39]
xavier_fibla_agustin
+++ fastapi [2023/06/28 15:32]
xavier_fibla_agustin [Templates]
@@ Línia 1: / Línia 1: @@
 ====== FastAPI ======
+----
-[[https://fastapi.tiangolo.com/]]
+Referències teoria i documentació:
+[[https://fastapi.tiangolo.com/|Documentació oficial FastAPI]]
-**Instal·lació**
+=====Instal·lació=====
@@ Línia 21: / Línia 25: @@
 </WRAP>
-**Aplicació simple**
+=====Aplicació simple=====
+Per a crear una API molt simple que ens mostri un missatge només necessitem importar la llibreria del FastAPI
+i defenir un mètode; en aquest cas li definim una ruta d'accés "/api/index" que ens retornarà el missatge.
 <file python main.py>
 from fastapi import FastAPI
@@ Línia 40: / Línia 50: @@
-**REST APIs**
+=====REST APIs=====
-**Swagger OpenAPI**
+Representation State Transfer (REST) API
+  * GET
+  * POST
+  * DELETE
+  * PUT
+  * PATCH
+Tots aquestes operacions estan disponible estan disponibles amb el decordaro @app. Per exemple @app.get()
-** Requests i responses **
+=====Swagger OpenAPI=====
-** Templates **
+Al arrancar el servidor uvicorn poden veure totes les URLs que estan disponibles a la nostra API accedin a la URL de la documentació, http://localhost:8000/docs.
+En aquesta ruta ens mostra la documentació amb el format [[https://www.openapis.org/|OpenAPI]], mostrant tots els mètodes de la nostra API on també els podem provar.
-[[https://fastapi.tiangolo.com/advanced/templates/]]
+{{::fastapi-swagger-ui-simple.png?400|}}
+=====Requests i responses=====
+PENDENT
+=====Templates=====
+FastAPI pot integrar el motor de plantilles Jinja on podem utilitzar una sintaxi semblant a Python, és molt semblant al motor de plantilles de Django.
+Referències teoria i documentació:
+[[https://fastapi.tiangolo.com/advanced/templates/| jinja2 Templates ]]
+[[https://jinja.palletsprojects.com/en/3.1.x/|jinja ]]
+Primer s'ha d'instal·lar:
+<WRAP center round box 100%>
+**pip install jinja2**
+</WRAP>
+Per utilitzar les plantilles s'han d'importar les llibreries com veiem al fitxer main.py. En aquest exemple li estem dient que totes plantilles estan en una carpeta anmenada //templates//. Dintre d'aquesta estan tots els fitxers html.
+També podem carregar fitxer estàtics com poden ser els css, en aquest cas tenim un carpeta anomenada //static// on tenim les nostres fulles d'estils que després utilitzen les plantilles html.
+Si ens fixem en la resposta de l'//endpoint// @app.get("/devices") veiem que retorna un tipus de resposta //TemplateResponse// especificant quina plantilla utilitzar i passant-li els objectes //request// i //devices// que després podem utilizar en la plantilla per mostrar informació.
+<file python main.py>
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+templates = Jinja2Templates(directory="templates")
+app = FastAPI()
+app.mount("/static", StaticFiles(directory="static"), name="static")
+@app.get("/devices")
+async def ruckus(request: Request, db: Session = Depends(get_db)):
+    ....
+    devices = db.query(models.Ruckus).order_by(models.Ruckus.id.desc())
+    return templates.TemplateResponse("index.html",
+    {"request": request, "devices": devices})
+</file>
+Com podem veure en el fitxer index.html podem tenir un fitxer principal o base (en el cas de l'exemple és la primera línia {% extends 'base.html' %}) i anar afegint vistes sobre aquest.
+En la resposta de la API estem tornant un array d'objecte (//devices//) que es el que utilitzem per mostrar la informació en el //for// de la plantilla; podent accedir a les diferents propietats i podent posar la lògica de presentació que sigue necessària.
+<file html index.html>
+{% extends 'base.html' %}
+{% block content %}
+<h2>Dispositius</h2>
+<div class="py-5">
+    <div class="container">
+        <div class="row hidden-md-up">
+            {% for device in devices %}
+            <div class="col-md-4">
+                {% if device.connected%}
+                <div class="card ok">
+                    {% else %}
+                    <div class="card danger">
+                        {% endif %}
+                        <div class="card-body">
+                            <h5 class="card-title">{{ device.ip }}</h5>
+                            <h6>{{device.hostname}}</h6>
+                            <h6>{{device.student}}</h6>
+                            <a href="edit/{{ device.ip }}">Edit</a>
+                            <a href="delete/{{ device.ip }}">Delete</a>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+    {% endblock content %}
+</file>

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina