Neste artigo Aposta é criar um setup básico de um projeto django já Integrado com o Bootstrap que vai ser aí базовая пара, то есть Энтао, Вамос Ла:
Criando O Projeto django
Primeiro Vamos Criar Um Diretório:
~: $ mkdir projeto ~: $ cd projeto/
E Então, Preparar Nosso Ambiente Python:
~/projeto: $ python3 -m venv venv ~/projeto: $ source venv/bin/activate (venv) ~/projeto: $ pip install Django
Acabamos de Criar um Ambiente Virtual Python chamado Вен
Onde Serão Instaladas todas как зависит от De nosso projeto. Em Seguida o ativamos (nosso rample ganha um prefixo (venv)
que indica que o ambiente virtual está ativo) e instalamos o django.
Com o django instalado, vamos criar nosso projeto:
(venv) ~/projeto: $ mkdir src (venv) ~/projeto: $ cd src/ (venv) ~/projeto/src: $ django-admin startproject core .
Отправляется Criocão Do Projeto até aqui:
- CRIAMOS UM DIRETORIO PARA O PREJETO E DENTO DELE O AMBIente Virtual Python, Que gerou um diretório
Вен
. Depois criamos wutro diretório, oSRC
; - Нессе Диртерорио
SRC
Criamos O Projeto django usando o comandodjango-admin startproject
seguido do nome do projeto, nesse casoядро
, e de um ponto, que indica o diretório atually como aquele onde será feita instalação.
Agora, Criaremos mais dois diretórios:
(venv) ~/projeto/src: $ mkdir static templates
Em Статический
Colocaremos os arquivos do bootstrap e em Шаблоны
Шаблоны nossos html.
UMA COISA QUE GOSTO DE FAZER TAMBém é Já Iniciar um Repositório git desde o início:
(venv) ~/projeto/src: $ git init (venv) ~/projeto/src: $ touch .gitignore
Aqui Nesse Ссылка ТЕМОС гм .gitignore
Падран Пара -Прайтос Python, Que vai nos atender perfeitamente. Assim não Vamos Enviar Pro Repositório git arquivos e Diretórios desnecessários ou sensíveis.
Vamos Também Criar Um Arquivo com As DevingEncias do nosso projeto, o teds.txt (o “package.json” do django, pra quem é do inverso javascript). Masa aqui faremos um pouco diferente, criaremos um diretório Требования
e nele um arquivo local.txt
Анкет
(venv) ~/projeto/src: $ mkdir requirements (venv) ~/projeto/src: $ touch requirements/local.txt (venv) ~/projeto/src: $ pip freeze > requirements/local.txt
Já Exepamos o PIP FREEZE e redirecionamos a saída para o arquivo local.txt recém criado. Semper Que instalarmos novas Devestências, исполнитель Devemos Essa instrução novamente.
Feito Tudo Isso, Estrutura de Nosso Projeto Está Assim:
/projeto/ |-- src/ | |-- core/ | | `-- __init__.py | | `-- settings.py | | `-- urls.py | | `-- wsgi.py | |-- requirements/ | | `-- local.txt | |-- static/ | |-- templates/ | `-- manage.py |-- venv/
Até aqui fizemos o Установка невиновного do django, entãao já podemos subir o serviço. Antes, AplicaRemos как Migrações (Säo As Migrações das Aplicações Que Já Vem Por Padrão Com O Django, Como Admin, Auth, Entre Outras):
(venv) ~/projeto/src: $ python manage.py migrate (venv) ~/projeto/src: $ python manage.py runserver
Ума Телинха Падран до Джанго Девера Апарекер нет Seu Navegador em http://127.0.0.1:8000
, значит Que Tudo Correu Bem.
Integrando com bootstrap e font потрясающий
Agora, Vamos inserir o Bootstrap E O Font потрясающий noso projeto.
Начальная загрузка
На Паджина де Загрузки Нет сайта getbootstrap.com, Vamos escolher o “código compilado, pronto para uso”, é a a primeira opção na página.
Após Descompactar O Pacote Zip Veremos OS Diretórios CSS
e JS
Анкет Энтао, Вамос Мов /projeto/src/static/
Анкет Perfeito. Já estamos quase prontos para usar в качестве классов начальной школы em nossos htmls, mas vamos primeiro fazer uma limpeza nesses diretórios. O Pacote Que Baixamos traz vários arquivos .css e .js, mas nós precisaremos apenas dos seguintes:
/static/ |-- css/ | `-- bootstrap.min.css | `-- bootstrap.min.css.map |-- js/ | `-- bootstrap.min.js | `-- bootstrap.min.js.map
Шрифт потрясающий
Композиция Bootstrap em nosso projeto, Já estamos prontos para desenvolver nossas aplicações e deixá-las com um visual decente (Princealmente pra quem é mais de backend, como eu). Mas Já Que estamos Aqui, Vamos Aproveitar E Integrar Também o Font Awesome, Que aí não vai ter mais desculpa pra não fazer uma página bonitinha.
На папагиналискую do projeto vamos fazer o Скачать Dos Arquivos do Plano Gratuito Deles, O Que Já nos Dá Uma Base Enorme E, Acredito Eu, Suficiente de ícones.
Descompactado o Pacote, Vamos Selecionar Apenas o Diretório Веб -фонты
e o CSS
e Movê-los para o Diretório статический
, mas para não confundir com Операционные системы Arquivos do Bootstrap, Criaremos UM Submiretório antes, Chamado FA (de font Awesome). Ах, Тамбем Нена -Праворимос де Тодос Акелс Арквивос Дентро де FA/CSS
, Basta Deixar O All.min.css
. Я до Веб -фонты/
Néao Removeremos nada.
O Diretório Статический
Está assim Agora:
/static/ |-- css/ | `-- bootstrap.min.css | `-- bootstrap.min.css.map |-- js/ | `-- bootstrap.min.js | `-- bootstrap.min.js.map |-- fa/ | |-- css/ | | `-- all.min.css |-- |-- webfonts/ | | `-- todos_os_arquivos_originais
Lembrando aqui Que essa estrutura de diretórios é a que eu gosto de usar, mases podem optar por autra, podem nomear de forma diferente, desde que facam os afontamentos corretos nos arquivoso abaixo, tudo funcionará!
Integrando ao django
Agora que já estamos com todos os arquivos estáticos receiorios Em Seus Devidos Diretórios, Vamos Fazer Agetração de Fato.
Editaremos o arquivo /projeto/src/core/settings.py
, adicionando a Spectência para nosso diretório Статический
Анкет
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
AproveItaremos pra editar autra linha do arquivo настройки.py
, indicando nosso diretório de templates, Que vamos trabalhar em seguida:
# -- código acima -- TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join((BASE_DIR), 'templates/')], # -- código abaixo --
Pronto, com os diretórios referenciados no arquivo настройки.py
, Vamos Agora Criar Nossos Шаблоны: Arquivos Html Que Intercalaremos com código Python, Através da linguagem de templates Джинджа Анкет
Просмотры E URL
Já estamos na reta final de nosso projeto, onde criaremos um template index.html já utilizando в качестве классов Bootstrap e os ícones font Awesome. Porém, Antes vamos реализар Um Watere Passo Que é Criar A Lógica Que Fará Tudo Esso Funcionar.
Нет Django, nós mapeamos todas как urls que nosso sistema “Oferece” no arquivo urls.py
Анкет CRIAREMOS ENTEUAO UMA URL NA RAIZ QUE, AO SER ACESSADA, ЧАМАРА Ума Взгляд, QUE EUMA FUNCão Dentro Do Arquivo views.py
, que por sua vez tratará a requisição (ele é que faz a computação de fato: requisições ao banco de dados outros serviços, emcrita em disco и т. Д.) Э. No Nosso Caso, индекс Funcão Apenas renderizará O Template Index.html.
Arquivo urls.py
:
from django.contrib import admin from django.urls import path from .views import index urlpatterns = [ path('admin/', admin.site.urls), path('', index), ]
Criaremos o arquivo views.py
:
from django.shortcuts import render def index(request): return render(request, 'index.html', {})
Pra Tudo Funcionar, Só Falta Criar O Template index.html
Шаблоны
Редка финала Do Projeto, Vamos Criar O Template ‘index.html’, Já utilizando A Sintaxe do Jinja pra carregar os arquivos estáticos:
Нет Início do arquivo carregaremos os arquivos estáticos:
{% load static %}
Na Seção Head Do Nosso Arquivo Html, ServiceMiaremos os arquivos Corportentes AO Código CSS E JS:
Agora estamos prontos para escrever código html usando в качестве классов. Начальник делает Font Awesome Para Criar O Visual de Nossa Aplicação.
Нет репозиторио Do Projeto no Github (Link no Final Do artigo) Vocês Podem Pegar O index.html
opploo Já com alguns componentes bootstrap. Паджана Деверарская Ассим:
Эстратура де Диреториос финал фику
/projeto/ |-- src/ | |-- core/ | | `-- __init__.py | | `-- settings.py | | `-- urls.py | | `-- views.py | | `-- wsgi.py | |-- requirements/ | | `-- local.txt | |-- static/ | | |-- css/ | | | `-- bootstrap.min.css | | | `-- bootstrap.min.css.map | | |-- js/ | | | `-- bootstrap.min.js | | | `-- bootstrap.min.js.map | | |-- fa/ | | | |-- css/ | | | | `-- all.min.css | | |-- |-- webfonts/ | | | | `-- todos_os_arquivos_originais | |-- templates/ | | `-- index.html | `-- manage.py |-- venv/
Repositório do projeto:
thalesbruno/django_bootstrap
Проект настроек Django с начальной загрузкой и встроенными шрифтами
использование
Создайте каталог проекта и установите виртуальную среду Python
mkdir project && cd project python3 -m venv venv source venv/bin/activate
Создайте источник и клонировать репозиторий
mkdir src && cd src git clone https://github.com/thalesbruno/django_bootstrap .
Установите зависимости
pip install -r requirements/local.txt
Запустите миграции и запустите сервер!
python manage.py migrate python manage.py runserver
Ура! Приложение работает в http://127.0.0.1:8000
🙂
Эйссо! Até Aróxima;)
Оригинал: “https://dev.to/thalesbruno/django-projeto-generico-com-bootstrap-3d86”