¿Cuál es el proceso de conexión del código front-end (HTML / CSS) con el código back-end (Python) en el desarrollo web? ¿Puedes dar un ejemplo / recurso / tutorial?

Algunas de las otras respuestas han discutido tecnologías específicas, intentaré agregar una descripción más general.

La parte frontal de una página web, como mencionó, es la estructura de elementos (HTML), el estilo (CSS) y el comportamiento dinámico (JS) de la página, procesada y mostrada por el navegador.

En los “viejos tiempos” de Internet, la mayoría de las páginas web eran simplemente documentos html / css en servidores. Alguien ingresaría una URL en su navegador, se envió una solicitud a través de Internet para el recurso ubicado en esa URL, y el servidor web (probablemente Apache) recibiría la solicitud y luego enviaría el archivo de la página a través del Internet al usuario navegador, que representaría la página.

Con el crecimiento de la web, el contenido dinámico se hizo rápidamente necesario. Por ejemplo, un sitio web de noticias con historias que cambian constantemente o algo con contenido generado por el usuario; actualizar el HTML a mano cada vez sería bastante difícil de manejar.

Entonces, tecnologías como PHP comenzaron a usarse en el lado del servidor. Típicamente, el servidor web tendría acceso a una base de datos que contiene toda la información relevante para un sitio: contenido (texto), usuarios, perfiles, etc., y plantillas HTML / CSS para las páginas principales del sitio.

La forma en que esto funciona es que ingrese una solicitud, se consultará la base de datos para recuperar la información necesaria para atender esa solicitud (la información de perfil de usuario, contenido, etc.) y luego el servidor insertará dinámicamente ese contenido como se indica en el modelo. El resultado sería un documento HTML / CSS como cualquier otro, compuesto “en el acto” en función de la solicitud.

Esto permitió una mayor complejidad en los sitios web y la reutilización de todos los elementos de las páginas web que no cambian (como encabezados, fondo, etc.), actualizando solo las partes dinámicas según sea necesario.

Todo esto se puede hacer hoy en Python (u otros lenguajes) de manera más elegante que en PHP, con la ayuda de uno de los excelentes marcos web de Python, como Flask, Django o Pyramid. Yo personalmente recomiendo Flask como una opción ideal para comenzar.

El frasco en sí consiste principalmente en una utilidad de “Interfaz de puerta de enlace de servidor web” (WSGI) (traducción: manejo de solicitudes) llamada Werkzeug y una herramienta de plantillas llamada Jinja. Ambos son muy fáciles de usar.

Flask facilita la escritura de plantillas que pueden representar documentos HTML dinámicamente, en función de los datos que les proporciona, y también asigna URLS a funciones de Python que:
– use el código Python para procesar solicitudes
– prepare los datos que desea pasar a una plantilla elegida
– renderizar y devolver documentos HTML con estilo basados ​​en plantillas

Recientemente, el uso de frameworks front-end también es muy popular: esto implica tomar los elementos que acabo de describir (manejo de solicitudes y representación HTML) y manejarlos en el lado del cliente en lugar del servidor, ahorrando el viaje de ida y vuelta al servidor para la mayoría de las acciones . El uso de esta arquitectura para un sitio completo se conoce como una “aplicación de página única”, ya que la página solo se carga desde el servidor una vez (cuando el navegador descarga el código Javascript que hace todo lo demás). Después de la descarga inicial, la única comunicación con el servidor es a través de llamadas API para recuperar datos en bruto o guardar cosas en la base de datos, que es más ligera en el servidor en comparación con el envío de páginas completas cada vez, y permite un mejor rendimiento en el lado del cliente .

Se pueden combinar fácilmente estos enfoques mediante el uso de plantillas HTML para representar las páginas en el servidor, pero con algunos elementos de página dinámicos administrados por JavaScript en el lado del cliente.

En cualquier caso, el paradigma es el mismo: usar código para crear HTML / CSS dinámicamente y administrar ese proceso y las preocupaciones que lo rodean (como autenticación, control de acceso, etc.) de la manera más conveniente posible.

Entonces, en lo que respecta a conectar los dos, se trata de crear los documentos HTML en el servidor y luego enviarlos al cliente, o habilitar el acceso a datos sin procesar del cliente (a través de llamadas API desde el código javascript) y renderizar en el cliente lado.

¡Espero que este resumen ayude!

Bien: aquí hay un flujo de trabajo de una aplicación web típica:

1. El cliente envía un comando al servidor. Al hacer clic en un enlace o al enviar un formulario

2. El servidor lee este comando y ejecuta la lógica de negocios

3. Antes de su pregunta. El servidor completa el contexto empresarial en una plantilla html (como esta

{% count(number-of-users) %}

través del motor de plantillas.

4. El servidor sirve esta plantilla al cliente, en una forma:

143


5. El cliente trabaja con estos datos.


Asi que. Supongo que deberías aprender el motor de plantillas para entender qué debes ajustar en tu código y cómo.
Si usa Python, estos enlaces ayudarán:
Plantillas | Documentación de Django | Django
Documentación Jinja2
{{ Bigote }}

En términos muy simplistas …

Trabajo en RoR, y parte de la magia de los rieles es rubí incrustado directamente en HTML. Esto es muy similar a PHP, y posiblemente también a Django. Una muestra podría verse así:

En su página de índice, por ejemplo:

<% = @ user.name%>

En PHP, sería En lugar de%

El navegador luego representa un div con el nombre de un usuario dentro. Obviamente, hay muchas piezas en movimiento, esto es solo un fragmento de inyección de código de fondo en las páginas frontales. También hay un archivo separado (controlador) que consulta la base de datos para que el navegador sepa qué nombre de usuario obtener.

En cuanto a los recursos, hay muchos por ahí:
Academia de código
Skillshare
Youtube

Hay 2 formas de hacer eso.

  1. El uso de un motor de plantillas es la forma nativa de conectar el front-end al back-end.
  2. Usando puntos finales API para conectar back-end con front-end usando frameworks de front-end como AngularJS, Ember, React (biblioteca de JavaScript), Backbone.js, quizás Semantic-ui y más si lo buscas en Google.

Para escribir el código de fondo para un sitio web / aplicación web en Python, debe considerar usar un marco web de Python, ya que esto abstraerá muchas de las complejidades.

Hay varios de ellos: Django, Flask, Pyramid, Bottle y más.

Para usar Flask, que es una buena opción si necesita comenzar rápidamente, puede consultar esta serie de tutoriales:

blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world

Simplemente hablando, el backend de Python envía HTML y CSS al navegador como Chrome o IE.
En la vida real, el servidor de fondo no solo envía, sino que genera HTML y CSS de acuerdo con las entradas del usuario, los datos almacenados en el servidor, etc.

El backend que es manejado principalmente por php se puede activar de muchas maneras.

Puede ser

  • Un activador de JavaScript
  • Un evento de clic

Considere el caso del evento de clic. En este caso, puede crear un enlace en HTML de la siguiente manera

clic

Esto creará un clic en el enlace en el que se ejecutará un script php llamado do.php

Cree do.php en el mismo directorio o proporcione la ruta completa al script.

Este es un ejemplo muy básico. Espero que esto sea de ayuda.

W3schools.com es un gran recurso para principiantes.

Puede conectar fácilmente su código de Python de back-end con su front-end utilizando el trabajo de marco de matraz. Si eres nuevo en el matraz, ve al punto de tutoriales.

aclamaciones nithin