Resumo : neste tutorial, você aprenderá como criar um projeto Django Todo App incluindo:
- Crie um ambiente virtual
- Instale o pacote Django
- Crie um novo projeto
- Adicionando arquivos estáticos
- Configurando modelos
- Crie o aplicativo de tarefas
- Crie o modelo de tarefa e aplique migrações
Você pode baixar o código final deste aplicativo Django Todo aqui.
Criando um ambiente virtual
Execute o seguinte comando python para criar um ambiente virtual usando o módulo integrado venv
:
python -m venv venv
Linguagem de código: texto simples ( texto simples )
E ative o venv
ambiente virtual usando o seguinte comando:
venv\scripts\activate
Linguagem de código: texto simples ( texto simples )
Se você usa macOS e Linux, pode usar o seguinte python3
comando para criar um novo ambiente virtual:
python3 -m venv venv
E ative-o usando o seguinte comando:
source venv/bin/activate
Linguagem de código: texto simples ( texto simples )
Instale o pacote Django
Como o Django é um pacote de terceiros, você precisa instalá-lo usando o seguinte pip
comando:
pip install django
Linguagem de código: texto simples ( texto simples )
Criando um novo projeto
Para criar um novo projeto todo_list
, você usa o startproject
comando:
django-admin startproject todo_list
Linguagem de código: texto simples ( texto simples )
Adicionando arquivos estáticos
Primeiro, crie um static
diretório dentro do diretório do projeto:
mkdir static
Linguagem de código: JavaScript ( javascript )
Segundo, defina o STATICFILES_DIRS
para o static
diretório após settings.py
o STATIC_URL
arquivo para que o Django possa encontrar os arquivos estáticos no static
diretório:
STATIC_URL = 'static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
Linguagem de código: Python ( python )
Terceiro, crie três diretórios js
, css
e images
dentro do static
diretório:
cd static
mkdir css images js
Linguagem de código: JavaScript ( javascript )
O static
diretório ficará assim:
├── static
| ├── css
| ├── images
| └── js
Linguagem de código: texto simples ( texto simples )
Por fim, copie o style.css
arquivo e feature.jpg
a imagem do arquivo de download para os diretórios css
e images
.
Configurando modelos
Primeiro, crie um templates
diretório dentro do diretório do projeto:
mkdir templates
Linguagem de código: Python ( python )
Segundo, crie um base.html
modelo dentro do templates
diretório com o seguinte conteúdo:
{%load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<title>Todo List</title>
</head>
<body>
<header class="header">
<div class="container">
</div>
</header>
<main>
<div class="container">
</div>
</main>
<footer class="footer">
<div class="container">
<p>© Copyright {% now "Y" %} by <a href="https://tutorials.acervolima.com">Python Tutorial</a></p>
</div>
</footer>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
O base.html
modelo usa o style.css
arquivo do static/css
diretório.
Terceiro, configure o diretório do template no TEMPLATES
arquivo settings.py
para que o Django possa encontrar o base.html
template.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates' ],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
Linguagem de código: Python ( python )
Quarto, crie o home.html
modelo dentro do templates
diretório:
{%extends 'base.html'%}
{%load static %}
{%block content%}
<section class="feature">
<div class="feature-content">
<h1>Todo</h1>
<p>Todo helps you more focus, either work or play.</p>
<a class="btn btn-primary cta" href="#">Get Started</a>
</div>
<img src="{%static 'images/feature.jpg'%}" alt="" class="feature-image">
</section>
{%endblock content%}
Linguagem de código: JavaScript ( javascript )
Criando um aplicativo de tarefas
Primeiro, crie um todo
aplicativo no todo_list
projeto usando o startapp
comando:
django-admin startapp todo
Linguagem de código: Python ( python )
Segundo, registre o todo
aplicativo no settings.py
projeto todo_list
adicionando-o à INSTALLED_APPS
lista:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'todo',
]
Linguagem de código: Python ( python )
Terceiro, crie o templates
diretório dentro do todo
diretório app:
cd todo
mkdir templates
Linguagem de código: Python ( python )
Quarto, crie o todo
diretório dentro do templates
diretório. O nome do diretório deve ser igual ao nome do aplicativo.
cd templates
mkdir todo
Linguagem de código: Python ( python )
Quinto, defina uma home()
função de visualização dentro do views.py
aplicativo de tarefas que renderiza o home.html
modelo:
from django.shortcuts import render
def home(request):
return render(request,'home.html')
Linguagem de código: Python ( python )
Sexto, crie urls.py
um arquivo no todo
aplicativo e defina uma rota que mapeie para a URL inicial com a home()
função de visualização:
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
]
Linguagem de código: Python ( python )
Sétimo, inclua o
do urls.py
todo
aplicativo no
do projeto:urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('todo.urls'))
]
Linguagem de código: Python ( python )
Oitavo, execute o servidor de desenvolvimento Django no todo_list
diretório:
python manage.py runserver
Linguagem de código: Python ( python )
Por fim, aberto http://127.0.0.1:8000/
em um navegador da web, você verá a página do blog que mostra a página inicial:
Crie o modelo de tarefa
Primeiro, defina o Task
modelo no models.py
aplicativo todo
:
from django.db import models
from django.contrib.auth.models import User
class Task(models.Model):
title = models.CharField(max_length=255)
description = models.TextField(null=True, blank=True)
completed = models.BooleanField(default=False)
created_at = models.DateTimeField(auto_now_add=True)
user = models.ForeignKey(User,on_delete=models.CASCADE, null=True, blank=True)
def __str__(self):
return self.title
class Meta:
ordering = ['completed']
Linguagem de código: Python ( python )
Em segundo lugar, registre o Task
modelo no admin.py
aplicativo todo
para que você possa gerenciá-lo na página de administração:
from django.contrib import admin
from .models import Task
admin.site.register(Task)
Linguagem de código: Python ( python )
Terceiro, faça migrações executando o makemigrations
comando:
python manage.py makemigrations
Linguagem de código: texto simples ( texto simples )
Saída:
Migrations for 'todo':
todo\migrations\0001_initial.py
- Create model Task
Linguagem de código: texto simples ( texto simples )
Quarto, aplique as migrações ao banco de dados:
python manage.py migrate
Linguagem de código: texto simples ( texto simples )
Saída:
Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions, todo
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying admin.0003_logentry_add_action_flag_choices... OK
Applying contenttypes.0002_remove_content_type_name... OK
Applying auth.0002_alter_permission_name_max_length... OK
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages... OK
Applying auth.0008_alter_user_username_max_length... OK
Applying auth.0009_alter_user_last_name_max_length... OK
Applying auth.0010_alter_group_name_max_length... OK
Applying auth.0011_update_proxy_permissions... OK
Applying auth.0012_alter_user_first_name_max_length... OK
Applying sessions.0001_initial... OK
Applying todo.0001_initial... OK
Linguagem de código: texto simples ( texto simples )
Quinto, crie um superusuário executando o createsuperuser
comando:
python manage.py createsuperuser
Linguagem de código: texto simples ( texto simples )
Saída:
Username: john
Email address:
Password:
Password (again):
Superuser created successfully.
Linguagem de código: texto simples ( texto simples )
Sexto, reinicie o servidor de desenvolvimento Django:
python manage.py runserver
Linguagem de código: texto simples ( texto simples )
Sete, faça login na página de administração e crie três tarefas:
Você pode baixar o código final deste aplicativo Django Todo aqui.