# Dica 24 - Alpine.js e Django [![](/files/-MfuAP1e7W4erW9hf6Ic)](https://youtu.be/jTvfN0DctnQ) **Importante:** remova a `\` no meio das tags. ![](/files/5yQAAuqmpHdOp0r1qaxa) ``` cd backend python ../manage.py todo cd .. ``` Edite `urls.py` ```python path('todo/', include('backend.todo.urls', namespace='todo')), # noqa E501 ``` Edite `settings.py` ```python INSTALLED_APPS = [ ... 'backend.todo', ] ``` Edite `todo/apps.py` ```python name = 'backend.todo' ``` Edite `todo/models.py` ```python from django.db import models from backend.core.models import TimeStampedModel class Todo(TimeStampedModel): task = models.CharField('tarefa', max_length=100) done = models.BooleanField('feita', default=False) class Meta: ordering = ('task',) verbose_name = 'tarefa' verbose_name_plural = 'tarefas' def __str__(self): return f'{self.task}' def to_dict(self): return { 'id': self.id, 'task': self.task, 'done': self.done, } ``` Edite `todo/admin.py` ```python from django.contrib import admin from .models import Todo @admin.register(Todo) class TodoAdmin(admin.ModelAdmin): list_display = ('__str__', 'done') search_fields = ('task',) list_filter = ('done',) ``` Edite `todo/urls.py` ```python from django.urls import include, path from backend.todo import views as v app_name = 'todo' todo_patterns = [ path('', v.todos, name='todos'), # noqa E501 path('/done/', v.todo_done, name='todo_done'), # noqa E501 path('/delete/', v.todo_delete, name='todo_delete'), # noqa E501 ] urlpatterns = [ path('', v.todo_list, name='todo_list'), # noqa E501 path('api/v1/', include(todo_patterns)), ] ``` Edite `todo/views.py` ```python from django.views.decorators.http import require_http_methods import json from django.http import JsonResponse from django.shortcuts import render from .models import Todo from django.views.decorators.csrf import csrf_exempt def todo_list(request): ''' Renderiza um template para as tarefas. ''' template_name = 'todo/todo_list.html' return render(request, template_name) def todos(request): ''' Retorna as tarefas via API REST, ou adiciona uma nova. ''' todos = Todo.objects.all() if request.method == 'POST': # Desserializa os dados. data = json.loads(request.body) # Salva a tarefa. todo = Todo.objects.create(task=data['task']) # Retorna o objeto. return JsonResponse(todo.to_dict()) data = [todo.to_dict() for todo in todos] # Retorna uma lista. return JsonResponse(data, safe=False) @csrf_exempt @require_http_methods(['POST']) def todo_done(request, pk): ''' Conclui uma tarefa via API REST. ''' data = json.loads(request.body) done = data.get('done') try: todo = Todo.objects.get(pk=pk) todo.done = done todo.save() return JsonResponse({'success': True}) except Todo.DoesNotExist: return JsonResponse({'success': False}) @csrf_exempt @require_http_methods(['DELETE']) def todo_delete(request, pk): ''' Deleta uma tarefa via API REST. ''' todo = Todo.objects.get(pk=pk) todo.delete() return JsonResponse({'success': True}) ``` Edite `core/templates/base.html` ```html ``` Edite core/templates/includes/aside.html ```html
  • Tarefas
    • ``` Crie a pasta ``` mkdir -p backend/todo/templates/todo touch backend/todo/templates/todo/todo_list.html ``` todo\_list.html versão base: ```html {\% extends "base.html" %} {\% load static %} {\% block content %}

    Tarefas

    		 Concluída Tarefa
    Mostrando 1-20 de 2000
    {\% endblock content %} {\% block js %} {\% endblock js %} ``` ```html {\% extends "base.html" %} {\% load static %} {\% block content %}

    Tarefas

    		 Concluída Tarefa
    Mostrando 1-20 de 2000
    {\% endblock content %} {\% block js %} {\% endblock js %} ``` Crie `todo.js` ``` touch backend/core/static/js/todo.js ``` ```js // todo.js const data = document.currentScript.dataset const csrftoken = data.csrf const getTodos = () => ({ url: '/todo/api/v1/', todos: [], task: '', required: false, init() { this.getData() }, getData() { // Pega os dados no backend com fetch. fetch(this.url) .then(response => response.json()) .then(data => { this.todos = data }) }, saveData() { // Verifica se task foi preenchido. if (!this.task) { this.required = true return } // Salva os dados no backend. fetch(this.url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrftoken }, body: JSON.stringify({ task: this.task }) }) .then(response => response.json()) .then((data) => { this.todos.push(data) this.task = '' this.$refs.task.focus() }) }, // Marca a tarefa como feita ou não. toggleDone(todo) { fetch(`/todo/api/v1/${todo.id}/done/`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ done: !todo.done }) }) .then(response => response.json()) .then((data) => { if (data.success) todo.done = !todo.done }) }, deleteTask(todo) { fetch(`/todo/api/v1/${todo.id}/delete/`, { method: 'DELETE', }) .then(response => response.json()) .then((data) => { if (data.success) { this.todos.splice(this.todos.indexOf(todo), 1) } }) } }) ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://www.dicas-de-django.com.br/090-24-alpinejs-django.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.