Рубрики
Без рубрики

Django: настройка Básico com bootstrap

Neste artigo Aposta é criar um setup básico de um projeto django já Integrado com o bootstrap que … Tagged с Django, Python.

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:

  1. CRIAMOS UM DIRETORIO PARA O PREJETO E DENTO DELE O AMBIente Virtual Python, Que gerou um diretório Вен . Depois criamos wutro diretório, o SRC ;
  2. Нессе Диртерорио SRC Criamos O Projeto django usando o comando django-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”

Читайте ещё по теме: