WEB на Python с Django в Visual Studio

Автор: | 16.09.2019

Введение
Базовый проект на основе шаблона «Blank Django Web Project»
Создание своего приложения в базовом проекте
Использование шаблонов страниц
Обслуживание статических файлов
Добавление страницы в приложение
Использование элемента в нескольких шаблонах
Полезные ссылки

Введение

Python в Visual Studio поддерживает разработку веб-проектов в frameworks: Bottle, Django и Flask.

Ниже приводится перевод с английского некоторых из разделов Tutorial: Get started with the Django web framework in Visual Studio. При изложении материала упущены некоторые подробности описательного характера. Приводятся лишь конкретные шаги по созданию приложений. При необходимости можете обращаться к первоисточнику.

Перед началом разработки приложения убедитесь, что  для Visual Studio установлена поддержка «Разработка на Python». Она устанавливается через Visual Studio Installer.

Базовый проект на основе шаблона «Blank Django Web Project»

Создайте проект:  File>New>Project>Python>Web>Blank Django Web Project>OK.

Появится окно, с предложением выбрать необходимые пакеты. Выберите в нем опцию Instal into a virtual environment:

Создайте виртуальную среду с параметрами по умолчанию:

После нажатия кнопки Create пару минут будет происходить скачивание и установка необходимых проектов, заканчивается сообщением:

‘requirements.txt’ was installed successfully.

В каждом языке программирования программирования есть свои файлы, помогающие правильно установить окружение приложения. В python таким файлом является requirements.txt — файл зависимостей приложения, для автоматической установки пакетов python с помощью утилиты pip.

Запустите приложение:

Если все настроено правильно, откроется  WEB-браузер с сайтом:

В проекте могут запускаться несколько приложений. Вы пока создали и запустили шаблон приложения по умолчанию.

Создание своего приложения в базовом проекте

В Solution Explorer щелкните правой кнопкой мыши на проекте и выберите   Add> New Item.

В диалоговом окне «Add New Item» выберите шаблон приложения Django 1.9.

В Solution Explorer появится приложение MyApp1 с входящими в него файлами:

Описание файлов приложения см. в первоисточнике.

Содержимое файла apps.py выглядит следующим образом :

from django.apps import AppConfig

class MyApp1Config(AppConfig):
 name = 'MyApp1'

это при использовании имени  приложения  «MyApp1»

Если вы снова запустите проект в Visual Studio, вы по-прежнему увидите страницу по умолчанию. Чтобы запустить ваше приложение необходимо изменить код в 2-х файлах.

В папке базового проекта (DjangoWebProject1) измените файл urls.py:

from django.conf.urls import include, url
import MyApp1.views

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
 url(r'^$', MyApp1.views.index, name='index'),
 url(r'^home$', MyApp1.views.index, name='home'),
]

В папке MyApp1 измените файл views.py:

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, Django!")

Теперь запустите приложение

Создадим динамическую страничку. Измените файл views.py:

from django.shortcuts import render
from django.http import HttpResponse
from datetime import datetime

def index(request):
    now = datetime.now()

    html_content = "<html><head><title>Hello, Django</title></head><body>"
    html_content += "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
    html_content += "</body></html>"

    return HttpResponse(html_content)

Запустите приложение

Через некоторое время обновите страничку

Обратите внимание что время на обновленной странице изменилось.

Использование шаблонов страниц

В папке DjangoWebProject1  в файле settings.py добавьте имя приложения «MyApp1» в INSTALLED_APPS список:

INSTALLED_APPS = [
     'app',
     # Add your apps here to enable them
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'MyApp1',
]

В папке MyApp1 откройте views.py и замените код:

from django.shortcuts import render
from django.http import HttpResponse
from datetime import datetime
from django.shortcuts import render # Added for this step

def index(request):
    now = datetime.now()

    return render(
       request,
       "MyApp1/index.html", # Relative path from the 'templates' folder to the template file
       # "index.html", # Use this code for VS 2017 15.7 and earlier
       {
           'content': "Hello Django! on " + now.strftime("%A, %d %B, %Y at %X")
       }
 )

Запускаем приложение, получаем результат, подобный предыдущему:

Здесь HTML отображается через content-свойство. В папке MyApp1 откройте файл шаблона страницы templates / MyApp1 / index.html , чтобы посмотреть, как создается этот файл через переменную content:

<html>
    <head><title></title></head>
    <body>
        {{ content }}
    </body>
</html>

Рассмотрим еще один вариант записи файлов index.html с шаблоном views.py:

index.html

<html>
    <head>
        <title>{{ title }}</title>
    </head>
    <body>
        <strong>{{ message }}</strong>{{ content }}
    </body>
</html>

views.py

from django.shortcuts import render
from django.http import HttpResponse
from datetime import datetime
from django.shortcuts import render # Added for this step

def index(request):
    now = datetime.now()

    return render(
        request,
        "MyApp1/index.html", # Relative path from the 'templates' folder to the template file
        # "index.html", # Use this code for VS 2017 15.7 and earlier
        {
            'title' : "Hello Django",
            'message' : "Hello Django!",
            'content' : " on " + now.strftime("%A, %d %B, %Y at %X")
        }
 )

Результат запуска приложения практически тот же:

Обслуживание статических файлов

Статические файлы, такие как CSS и JavaScript, обычно хранятся внутри папки static. Добавим файл CSS в приложение, а затем используем созданную в файле таблицу стилей в шаблоне index.html. Для этого выполним следующие действия.

В Solution Explorer выполните  right-click над папкой MyApp1.  В контекстном меню  выбираете Add>New folder и назовите папку static. Теперь выполните  right-click над папкой static В контекстном меню  выбираете Add>New item. В диалоговом окне выбираете Stylesheet template, дайте имя файлу  site.css  и нажмите OK.  В итоге получите следующую структуру папок:

Замените в файле  site.css код на следующий:

.message {
       font-weight: 600;
       color: blue;
}

Замените содержимое файла templates / MyApp1 / index.html  следующим кодом:

<html>
    <head>
        <title>{{ title }}</title>
        {% load staticfiles %} <!-- Instruct Django to load static files -->
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

Запустите приложение:

Добавление страницы в приложение

В Solution Explorer выполните  right-click над папкой templates/MyApp1.  В контекстном меню  выбираете Add > New item>HTML Page. Назовите файл about.html. нажмите  Add.

Замените содержимое файла about.html:

<html>
    <head>
        <title>{{ title }}</title>
        {% load staticfiles %}
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <div><a href="home">Home</a></div>
        {{ content }}
    </body>
</html>

Откройте файл views.py и добавьте функцию с именем about:

from django.shortcuts import render
from django.http import HttpResponse
from datetime import datetime
from django.shortcuts import render # Added for this step

def index(request):
 now = datetime.now()

return render(
 request,
 "MyApp1/index.html", # Relative path from the 'templates' folder to the template file
 # "index.html", # Use this code for VS 2017 15.7 and earlier
 {
 'title' : "Hello Django",
 'message' : "Hello Django!",
 'content' : " on " + now.strftime("%A, %d %B, %Y at %X")
 }
 )

def about(request):
    return render(
        request,
        "MyApp1/about.html",
        {
             'title' : "About MyApp1",
             'content' : "Example app page for Django."
        }
 )

Откройте файл urls.py и добавьте следующую строку в urlPatterns массив:

 url(r'^about$', MyApp1.views.about, name='about'),

Откройте файл templates / MyApp1 / index.html и добавьте в него одну строку:

<html>
    <head>
        <title>{{ title }}</title>
        {% load staticfiles %} <!-- Instruct Django to load static files -->
        <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
    </head>
    <body>
        <div><a href="about">About</a></div>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>

Запустите проект, чтобы увидеть результаты и проверить навигацию по страницам

Использование элемента в нескольких шаблонах

Современные веб-приложения обычно используют фирменный заголовок и панель навигации, которая предоставляет наиболее важные ссылки на страницы, всплывающие меню и так далее. Чтобы иметь явные навигационные ссылки на каждой странице, вам не нужно повторять один и тот же код в каждом шаблоне страницы. Вместо этого вы можете определить общие части всех ваших страниц в одном месте.

Система шаблонов Django предоставляет два способа повторного использования определенных элементов в нескольких шаблонах — через включение (includes) и наследование (inheritance). Следующие шаги демонстрируют наследование.

В Solution Explorer выполните  right-click над папкой templates/MyApp1.  В контекстном меню  выбираете Add > New item>HTML Page. Назовите файл  layout.html. нажмите Add.

Замените содержимое файла layout.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{ title }}</title>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
</head>

<body>
    <div class="navbar">
       <a href="/" class="navbar-brand">Hello Django</a>
       <a href="{% url 'home' %}" class="navbar-item">Home</a>
       <a href="{% url 'about' %}" class="navbar-item">About</a>
    </div>

    <div class="body-content">
{% block content %}{% endblock %}
         <hr/>
         <footer>
              <p>&copy; 2018</p>
         </footer>
     </div>
</body>
</html>

Добавьте следующие стили в файл static / site.css 

.navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Измените  файл templates/MyApp1/index.html:

<html>
     {% extends "MYApp1/layout.html" %}
 
     <head> 
         <title>{{ title }}</title>
         {% load staticfiles %} <!-- Instruct Django to load static files -->
         <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
     </head>

     <body> 
         <div><a href="about">About</a></div>
         {% block content %}
            <span class="message">{{ message }}</span>{{ content }}
         {% endblock %} 
     </body>
</html>

Измените  файл templates/MyApp1/about.html:

<html>
     {% extends "MYApp1/layout.html" %}
 
     <head>
         <title>{{ title }}</title>
         {% load staticfiles %}
         <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
     </head>

     <body>
         <div><a href="home">Home</a></div>
         {% block content %}
           {{ content }}
         {% endblock %}
     </body>
</html>

Запустите проект, чтобы увидеть результаты — проверить навигацию по страницам и вид страниц:

 

Далее смотри:

 

Полезные ссылки:

Раздел: Web

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *