Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de JavaScript ES6 para desarrolladores de Django

 Este tutorial de JavaScript (ES6) es parte de una serie de tutoriales para enseñar a los desarrolladores de Django el desarrollo web front-end para crear aplicaciones modernas de pila completa.

Antes de comenzar el tutorial para las nuevas características de JavaScript / ES6, primero aprenderemos cómo incluir JavaScript en un proyecto de Django.

Tutorial de JavaScript ES6

Hay dos métodos para integrar JavaScript con Django.

  • Separe las aplicaciones Django (back-end) y JavaScript (front-end), lo que es conveniente para crear aplicaciones con mucho JavaScript con un back-end Django RESTful
  • Usar JavaScript con plantillas integradas de Django, lo cual es conveniente para aplicaciones que no necesitan un front-end complejo de JavaScript

Anteriormente cubrimos cómo usar el primer enfoque con ejemplos de React, Vue y Angular. En este tutorial, nos centraremos en el segundo enfoque.

Suponemos que ya ha creado un proyecto. ¡Consulta este tutorial si necesitas ayuda!

Comencemos creando una plantilla base HTML de Django para su aplicación ( base.html):

<!DOCTYPE html>
<html lang="en">
<head>
  {% block title %}<title>Django JavaScript ES6 Tutorial</title>{% endblock %}
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
{% block body %} {% endblock %}
</body>
</html>

Agregar JavaScript a nuestra plantilla Django

Podemos agregar JavaScript a nuestra plantilla usando una <script>etiqueta en línea o un archivo JavaScript externo. Creemos un app.jsarchivo, colóquelo en una jscarpeta que necesita crear en la staticcarpeta de su aplicación.

A continuación, en la <head>etiqueta de la plantilla agregue:

{% load static %} 
<link rel="stylesheet" href="{% static 'js/app.js' %}">

Usamos la staticetiqueta de plantilla para especificar la URL relativa al archivo JS.

Publicar un comentario

0 Comentarios