Диспетчер классов с Django и React

Диспетчер классов с Django и React

Небольшой проект для вашего портфолио! Часть 1

Итак, недавно один из моих друзей начал делать портфолио программистов (для fullstack-разработчика). Поэтому я подумал, что помогу ему и другим людям в создании их портфолио.

Ниже приведен диспетчер классов (в основном школьная система, приложение, в котором учителя могут публиковать тесты и оценки учеников, а ученики могут отправлять тесты, общаться с другими одноклассниками, участвовать в видеозвонках и т. д.), созданный с помощью React (JavaScript) для внешний интерфейс и Django (Python) для внутреннего интерфейса.

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

Во-вторых, так как это довольно большой проект, он будет разделен на разные части :) Это Getting Started часть :)

В этом уроке мы будем использовать node.js, yarn, Python 3.10.5( and Django), поэтому убедитесь, что вы их загрузили. После того, как все будет загружено, откройте папку, в которой вы хотите, чтобы все было. Для меня это будет Class Manager/ Все будет происходить внутри этой папки.

Начнем с Джанго. Откройте cmd на Class Manager/ и выполните следующие команды:

Class Manager> django-admin startproject backend
Class Manager> cd backend
Class Manager\\backend> python manage.py startapp Auth
Class Manager\\backend> python manage.py startapp Class
Class Manager\\backend> pip install djangorestframework channels channels-redis django-cors-headers

Теперь давайте настроим React. Выполните следующие команды:

Поскольку мы здесь, есть пара вещей, которые мы должны изменить в frontend/src. Сделайте следующее:

Delete App.css
Delete App.test.js
Delete logo.svg
Delete setupTests.js
Add a /components folder inside /src 
Add a /redux folder inside /src

Итак, наша структура папок должна быть:

/Class Manager
|
|-- /backend
    |
    |--- /Auth
    |--- /backend
    |--- /Class
|-- /frontend
    |
    |--- /node_modules
    |--- /public
    |--- /src
        |
        |--- componets
	|--- redux
    |
    |--- package.json
    |--- package-lock.json

С этого момента важно, чтобы у вас было открыто 2 cmd’s (если вы хотите быть более эффективным). Один для Class Manager/backend и один для Class Manager/frontend.

Теперь давайте просто настроим наше приложение и на этом закончим! В backend/settings.py обновлении INSTALLED_APPS:

INSTALLED_APPS = [
    # ...
	
    'rest_framework',
    'rest_framework.authtoken',
    'django_filters',  
    'corsheaders',
    'channels',
    'Auth',
    'Class',
]

И чуть ниже INSTALLED_APPS добавьте:

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication', # We will be using auth token for authentication : )
    ],
    'DEFAULT_PARSER_CLASSES': [
        'rest_framework.parsers.JSONParser',
        'rest_framework.parsers.MultiPartParser', # We will need to parse images later : )
    ],
    'DEFAULT_FILTER_BACKENDS': [
        'django_filters.rest_framework.DjangoFilterBackend' # We will manage filtering with FilterBackend : )
    ],
}

И обновите MIDDLEWARE вот так:

MIDDLEWARE = [
    # ...
    'corsheaders.middleware.CorsMiddleware', # Initialize CORS
    'csp.middleware.CSPMiddleware'
]

И, наконец, внизу settings.py добавьте:

# Setting up media files( images, .txt, etc.)
STATIC_URL          =   'static/'
DEFAULT_AUTO_FIELD  =   'django.db.models.BigAutoField'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
ASGI_APPLICATION = "backend.routing.application"
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}
CSRF_COOKIE_SECURE                  =      True
SESSION_COOKIE_SECURE               =      True
SECURE_HSTS_SECONDS                 =      0
SECURE_HSTS_INCLUDE_SUBDOMAINS      =      True
SECURE_HSTS_PRELOAD                 =      True
CSP_DEFAULT_SRC                     =      ("'self'",)
CSP_STYLE_SRC                       =      ("'self'",)
CSP_SCRIPT_SRC                      =      ("'self'",)
CSP_IMG_SRC                         =      ("'self'",)
CSP_FONT_SRC                        =      ("'self'",)
CORS_ORIGIN_WHITELIST = [
    '<https://localhost:3000>',
]

Теперь перейдите к backend/urls.py и обновите его:

from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
    path("", include("Auth.urls")),
    path("", include("Class.urls"))
]
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Мы закончили с python code (для этого урока). Теперь идите к frontend/src/App.js.

export default function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

Это пока :). Я знаю, что нам не нужно было запускать какой-либо код, но это только для этого руководства, поскольку оно просто настраивало все! Ждите следующего урока :)