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

Django и Modern JS библиотеки – Backend (1)

О чем это руководство? Django и Modern JS Frameworks станут учебниками серии T … Помечено Python, Django, React, JavaScript.

О чем это руководство?

Django и Modern JS Frameworks станут учебниками, которая объединяет Django и современные решения для интерфейсов, таких как Reaction и Svelte. Другие структуры/библиотечные интеграции также планируют в будущем.

Описание проекта

  • Мы настроим один сервер Django и сделайте две простые приложения для одной страницы. Каждый из них будет использовать различные библиотеки JavaScript, и оба из них будут связываться с сервером Django.

  • Приложение React будет записано с нуля с помощью WebPack во второй части. Также обратите внимание, что создание-реактивное приложение не будет использоваться.

  • Последняя и третья часть этого учебника станут интеграцией Svelte.

В этой серии есть 2 проекта и 3 статьи:

  • Django Server и GraphQl API Setup

  • Настройка приложения реагирует с помощью WEBPACK и интегрируя его с нашим задней частью.

  • Настройка приложений SVELTE с WebPack и интеграция его с нашим задним дном.

Каковы требования к следуции?

  • Основной уровень знаний о Python и Django Framework

  • Базовый уровень JavaScript и React является обязательным.

Мотивация и предварительная информация

Python – мой первый язык программирования. Когда мы создали двигатель Рекомендации фильма, мы должны интегрировать его с библиотекой React Facebook, потому что мы хотим, чтобы она была приложением одной страницы. Мой уровень знаний о JavaScript был на уровне введения. Опытный в незнакомом языке программирования занимает некоторое время. Кроме того, мне нравится Ecosystem Python из-за отличных библиотек науки данных и сдача от Python никогда не было выбором. Подводя итог, это действительно потребовалось некоторое время для интеграции Джанго и реагировать. Когда я недавно опубликовал Мой блог развития и Путеводитель Стамбула , Я отредактировал и обновляю все мои старые статьи. В течение этого времени была выпущена еще одна интерфейсная библиотека, и она взволнована мне много: SVELTE. Я также добавил интеграционную статью со Svelte и Django. Я надеюсь, что эта статья серия может немного помочь решить свои проблемы.

Будет только один сервер на каждом проекте, который работает в производственной среде.

ВВЕДЕНИЕ

Что такое приложение одной страницы?

На классических веб-страницах все HTML, CSS и JS Code расположены и передаются сервером в форме рендеринга. Когда браузер получает код, он сразу же представляют элементы на экране. Если пользователь нажимает на ссылку, то браузер делает другой запрос на сервер. Сервер сделает все логические операции и отвечает другим Render-Ready Code.

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

Кроме первой загрузки, побочные приложения клиента работают быстрее и чувствует себя более родным, потому что некоторые действия выполняются немедленно на браузере, а операции ввода/вывода могут быть выполнены через асинхронное поведение JavaScript. Поэтому пользователи все еще видят ваше приложение, а не пустую белую страницу.

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

Любой, кто подщечивается на «эта страница, лучше всего смотреть с помощью Browser X» на веб-странице, по-видимому, годовала для плохих старых дней, прежде чем в Интернете, когда у вас было очень мало шансов читать документ, написанный на другом компьютере, другое слово процессор или другая сеть. ~ Тим Бернерс-Ли

Создайте бэкэнд с Джанго

Шаг 1: Создайте проект Django с нуля

Давайте создадим виртуальную среду для чистой установки.

Эта виртуальная среда будет активной средой для всех трех статей.

python3 -m venv tutorial-env

# activate
source ./tutorial-env/bin/activate

Установите Django и зависимости

# install our dependencies
pip install ipython django django_extensions django-cors-headers "graphene-django>=2.0"

#create a django project
django-admin startproject djangoproject

# change directory
cd djangoproject

# create templates directory
mkdir templates

# create static folder
mkdir static

# create utils folder for initial data
mkdir utils

2- Настройка и запуск

Обновите свой * ** ‘ djangoproject/djangoproject/ settings.py ‘ *** файл. Дополнительные настройки маркируются как * ‘Новый …’. *

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    "django_extensions",# New! (useful extension)
    'graphene_django',  # New! (for graphql communication)
    'corsheaders',      # New! (for cors request in dev env)
]

# New (for improved interactive shell)
SHELL_PLUS = "ipython"

# New (it allows webpack development server to make cross origin request)
CORS_ORIGIN_WHITELIST = (
    'http://localhost:8080',
)


MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware', # New Add this
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': (os.path.join(BASE_DIR, 'templates'),), # New
        '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',
            ],
        },
    },
]

#New 
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

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

# create migration for django-orm
python manage.py migrate

Теперь, если все идет хорошо, начнется Django Server. Вы можете открыть браузер и отметьте адрес 127.0.0.1:8000 Вы увидите такой экран:

Шаг 3: Создание приложения фильма

Мы создадим модель фильма с основными полями, которые должен иметь фильм.

До этого мы должны дать некоторую информацию о выборе поля.

* Почему есть поле URL для плаката, а не поле изображения? *

Поскольку подача статических файлов в производстве не рекомендуется, мы используем только поле URL. Получение изображения с пульта дистанционного управления, а затем сохранение его до нашего производственного хранилища – это тема другого поста. Из-за этого мы сохраним только URL-адрес плаката, а не сам постер в качестве файла изображения. Кроме того, отправка статических файлов, таких как изображения, не является хорошим подходом. Мы отправим точный URL-адрес изображения пользователю. Тогда * Браузер пользователя извлекает изображение * из этого.

* Что такое слизняка и почему это должно быть уникальным? *

Позвольте мне объяснить с примером: Я опубликовал Оригинальная статья на Cbsofyalioglu [com]/post/django-and modern-js-библиотеки-backend

Последняя часть URL, django-and-modern-js-библиотеки-backend, Является ли слинг поста, а также это идентификатор, который делает URL отличительным от других страниц после.

В части GraphQL вы увидите, что мы будем использовать этот слизмент в качестве параметра запроса, что означает, что мы будем делать запросы в базе данных в соответствии с Slug. Поэтому он должен быть уникальным.

Мы также можем выбрать другой идентификатор как идентификатор URL, но ясно, что URL-адрес не будет читательным адресом.

Поисковая индексация и рейтинг и рейтинг – жизненно важна часть любого веб-сайта, ориентированного на новые пользователи. Читаемый адрес URL ‘хороши для самих пользователей, а также предлагаются руководства по поисковой системе. Кроме того, руководящие принципы Google Webmaster рекомендуют использовать чистые и краткие структуры URL.

Давайте сделаем нашу модель и определим ее свойства и методы. На следующем шаге мы заполним нашу базу данных с начальными записями. Поэтому я добавил классный метод, ответственный за население базы данных.

Давайте создадим приложение Django. Это приложение будет включать в себя нашу модель. Таблицы базы данных будут выполнены в соответствии с этим. Также запросы API будут основаны на этом.

# create new Django app
python manage.py startapp items

Обновлять настройки .py.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    "django_extensions",
    'graphene_django', 
    'corsheaders',
    "items"             # New! (make our app will active)
]

Открыть * ** ‘ djangoproject /items/models.py ‘ *** Файл и скопируйте код ниже.

# items.models

from django.db import models

class  Movie(models.Model):

    id  = models.IntegerField(primary_key=True)
    name = models.CharField(max_length=100)
    year = models.IntegerField(null=True)
    summary = models.TextField(max_length=5000,null=True)
    poster_url = models.URLField(blank=True, null=True)
    slug = models.SlugField(max_length=50, null=True,blank  =True, unique=True)
    # order items in descending order
    class  Meta:
        ordering = ["-year"]

    # the method which defines string output of class
    def  __str__(self):
        return  self.name

    # the method which loads initial data
    @classmethod
    def  import_records(cls, record_list):
        for record in record_list:
            # create record if id is not exist
            if  not  cls.objects.filter(id=record.get("id")).exists():
                new_movie =  cls.objects.create(**record)
            else:
                print(f"Id:{record.get('id')} is already exist.")
        print("Import operation done successfully")

# make database migrations
python manage.py makemigrations
python manage.py migrate

Шаг-4: Заполнение базы данных с исходными данными

В нашей базе данных нет записи фильма. Мы предоставим небольшие исходные данные для создания некоторых записей фильмов. Все данные предоставляются сообществом, построенным База данных фильма (TMDB) Отказ Мы будем использовать эти записи в нашем приложении.

Во-первых, создайте * “itival_data.py” * Файл в * ** “ djangoproject /usils” *** папка. После того, как вы можете скопировать и вставить ниже данные в этот новый файл.

initial_data = [{
    'id': 503919,
    'name': 'The Lighthouse',
    'year': 2019,
    'summary': 'The hypnotic and hallucinatory tale of two lighthouse keepers on a remote and mysterious New England island in the 1890s.',
    'slug': 'the-lighthouse-2019',
    'poster_url': 'https://image.tmdb.org/t/p/w185/3nk9UoepYmv1G9oP18q6JJCeYwN.jpg'
    },{
    'id': 475557,
    'name': 'Joker',
    'year': 2019,
    'summary': 'During the 1980s, a failed stand-up comedian is driven insane and turns to a life of crime and chaos in Gotham City while becoming an infamous psychopathic crime figure.',
    'slug': 'joker-2019',
    'poster_url': 'https://image.tmdb.org/t/p/w185/udDclJoHjfjb8Ekgsd4FDteOkCU.jpg'
    },{
    'id': 530385,
    'name': 'Midsommar',
    'year': 2019,
    'summary': "A couple travels to Sweden to visit a rural hometown's fabled mid-summer festival. What begins as an idyllic retreat quickly devolves into an increasingly violent and bizarre competition at the hands of a pagan cult.",
    'slug': 'midsommar-2019',
    'poster_url': 'https://image.tmdb.org/t/p/w185/rXsh4MI6uyVgZBSSzXCfitJnVPy.jpg'
  },{
    'id': 531428,
    'name': 'Portrait of a Lady on Fire',
    'year': 2019,
    'summary': 'On an isolated island in Bretagne at the end of the eighteenth century, a female painter is obliged to paint a wedding portrait of a young woman.',
    'slug': 'portrait-of-a-lady-on-fire-2019',
    'poster_url': 'https://image.tmdb.org/t/p/w185/3NTEMlG5mQdIAlKDl3AJG0rX29Z.jpg'
  }]

Теперь мы импортируем и создам новые записи на уровне базы данных. Обычно мы должны иметь открытую оболочку Django. Тем не менее, * Shell_plus * Команда, которая предоставляется * django_extensions * Более функционален, поэтому мы будем использовать это. Он автоматически импортирует все созданные приложения.

# open interactive shell
python manage.py shell_plus
# let's check database and verify it's empty
Movie.objects.all()
# prints: 

# import the records which we took it from github repo
from utils.initial_data import initial_data

# create records in the database
Movie.import_records(initial_data)

# prints 'Import operation done successfully'

# query database and verify it is not empty
Movie.objects.all()

Наша модель и база данных готовы. Вы можете закрыть оболочку с помощью * выйти * Команда.

Следующий раздел будет создан API GraphQL.

API GraphQL

В этом разделе мы сделаем часть API нашего приложения с графеном, которая представляет собой реализацию Pyphon Framework.

Что мы делаем в этом разделе:

  1. Создание другого приложения Django: мы поставим все конфигурации API там.

  2. Создание схемы API, у которой есть три части: API-модель, резользеры и запросы.

  3. Создание конечной точки URL: приложение на стороне клиента запросит всю информацию на этот адрес URL.

Шаг 1 – Создание другого приложения Django для конфигураций API

На самом деле, нет никаких обязательств сделать другое приложение, потому что это приложение не будет создавать или обновлять любую таблицу базы данных. Однако, чтобы поставить все конфигурации, связанные с API в одном месте, я выбрал так.

Давайте создадим второе приложение Backend. Имя приложения не должно быть * ‘gql’ *, но если вы установите другое имя, вы также должны изменить имя схемы в * Настройки .py. * позже.

Откройте свой терминал на корневом уровне вашего проекта.

# create app with the name gql
python manage.py startapp gql

# change directory
cd gql


# create schema.py file
touch schema.py

Шаг 2 – Создание схемы API: API-модель, запросы и резольверы

API-схема будет иметь три части, учитывая объем статьи.

Это выглядят следующим образом:

  1. * API-модель типа: * Класс, который является сопоставленной версией модели фильма. Вы можете отправлять ответы на основе этого, если ответ не является примитивным типом.

  2. * Запросы: * Приложение Client-Side будет использовать эти запросы для различных запросов.

  3. * Резольверы: * Это являются функциями реагирования полей. Когда запрос на побочный клиент соответствует запросу, резольверы входят в игру и сделают все логические детали, затем отправляют информацию обратно клиенту.

* A ) * * API-модель-тип и резольверы *

Класс, который является сопоставленной версией существующей модели Django. Это посреднический слой между моделью Django (или базой данных) и ответом API. Поля ModelType будут одинаковыми полями соответствующей модели. Мы также можем создавать пользовательские поля, которые не относятся к соответствующей модели.

Вы можете проверить другие скалярные типы из документов Graphene Python.

Мы будем пошаговать за шагом, напишите схему .py файл. Вы можете скопировать и вставить его.

import graphene
from items.models import Movie
from graphene_django.types import DjangoObjectType

# api-movie-model
class MovieType(DjangoObjectType):
    id = graphene.Int()
    name = graphene.String()
    year = graphene.Int()
    summary = graphene.String()
    poster_url = graphene.String()
    slug = graphene.String()

    # define which model will be the base
    class Meta:
        model = Movie

    # 'self' corresponds to the item of Django model 
    # like The Lighthouse or Joker
    def resolve_id(self, info):
        return self.id

    def resolve_name(self, info):
        return self.name

    def resolve_year(self, info):
        return self.year

    def resolve_summary(self, info):
        return self.summary

    def resolve_poster_url(self, info):
        return self.poster_url

    def resolve_slug(self, info):
        return self.slug

Позвольте мне объяснить вышеуказанный код.

Класс «Movietype» – это сопоставленная версия модели фильма. Вы можете заметить, что все поля одинаковы. Мы определили базовую модель в классе Meta, поэтому модель фильма будет базовой моделью.

Важно сказать, что имена Resolver написаны в случае змеи, такими как «Resolve_Poster_url». Однако, когда мы пишем запросы на стороне клиента, это будет Pascalcase, такой как «Posterurl». Вы видите это позже.

* Б) запросы и резольверы *

Приложение Client-Side будет использовать эти запросы для различных запросов. Мы также напишем на стороне клиентских запросов в его роль. Запрос на стороне клиента должен совпадать с запросом на стороне сервера. Следовательно, эта часть также определяет допустимые запросы преступной части Отказ

Ради простоты мы определим только два запроса.

  • QUIRE_LIST QUERY (* RESOLE_MOVIE_LIST *) Возвращает все фильмы в базе данных

  • Запрос фильма (* Resolve_Movie ) Возвращает только конкретный фильм, если параметр ( Slug *) соответствует.

Пусть добавьте этот код ниже класса Movietype.

class Query(graphene.ObjectType):
    movie_list = graphene.List(MovieType)
    movie = graphene.Field(MovieType, slug=graphene.String())

    def resolve_movie_list(self, info, *_):
        # for large lists only query what you need
        return Movie.objects.all().only("name", "poster_url", "slug")

    def resolve_movie(self, info, slug):
        movie_queryset = Movie.objects.filter(slug=slug)
        if movie_queryset.exists():
            return movie_queryset.first()

schema = graphene.Schema(query=Query)

В последнем ряду вы увидите объект схемы. Это корневой узел API. Мы должны сказать Django Server использовать это как нашу схему API. Сделать это, обновите * настройки. PY *.

# djangoproject/djangoproject/settings.py

# New - Add this part
GRAPHENE= {'SCHEMA': 'gql.schema.schema'}

# MIDDLEWARE = [..]

Шаг 3 – Создание конечных точек URL

В REST API определяем различные конечные точки URL для разных запросов. Одной из хорошей части GraphQL является то, что мы определяем только одну конечную точку. Все запросы будут проведены через это.

Скопируйте код ниже и вставьте его на djangoproject/djangoproject/ URLS .py **** файл.

from django.contrib import admin
from django.urls import path
from graphene_django.views import GraphQLView
from django.views.decorators.csrf import csrf_exempt
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),

    # apiclient on client-side will request this adress later
    path("graphql", csrf_exempt(GraphQLView.as_view(graphiql=True))),


    # index.html file will be our root template. When a user opens our webste,
    # this file will be sent by server at first. After then, api requests
    # will directed above address.

    # (it points to ~/Blog/djr/templates/index.html)
    # (currently there is no file, webpack production bundle will come here )
    path("", TemplateView.as_view(template_name="index.html")),
    ]

Вы заметили, что мы устанавливаем * graphiql = true. * Это интерактивная панель GraphQL. Мы можем сделать запрос, как клиентское приложение через эту панель. Вы также увидите детали всех запросов.

Теперь, пожалуйста, запустите сервер в корневой папке: ‘djangoproject/’

python manage.py runserver

Открыть * 127.0.0.1:8000/graphql * Адрес из вашего браузера. Мы запрашиваем фильм с конкретным идентификатором (Slug). На левой панели вставьте это и нажмите * Выполнить запрос * кнопка.

Обратите внимание, что мы запрашиваем поля с Pascalcase. (* Posterurl *)

query {

movie(slug:"the-lighthouse-2019"){

id, name, posterUrl

}

}

И ответ будет в формате JSON, как это.

{

"data": {

"movie": {

"id": 503919,

"name": "The Lighthouse",

"posterUrl": "https://image.tmdb.org/t/p/w185/3nk9UoepYmv1G9oP18q6JJCeYwN.jpg"

}

}

}

Наши API готовы реагировать на запросы. Эта часть учебника закончена.

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

Оригинал: “https://dev.to/canburaks/django-and-modern-js-libraries-backend-1-2p9p”