[PYTHON] Anfänger versuchen mit Django + React + Bootstrap (1) eine Online-Webanwendung für Othello zu erstellen.

Einführung

Zweck dieser Seite

Der Zweck besteht darin, das Verfahren zum Erstellen einer Webanwendung für Django + React + Bootstrap gemeinsam zu nutzen und ein persönliches Memorandum zu erstellen. Was den Inhalt betrifft, wird es eine Form sein, in der Anfänger den Kampf gemächlich aufschreiben, bis sie Othello des zwischenmenschlichen Kampfes mit der Webanwendung mit Django + React + Bootstrap durch Ausprobieren implementieren. Ich kann es nicht im Detail erklären, daher denke ich, dass es so ist, als würde man die Schritte von der Umgebungserstellung über die Projekterstellung, die Erstellung der Benutzeroberfläche bis hin zur Implementierung von Othello durchlaufen.

Ziel dieser Seite

Umgebung

Artikel Ausführung Ergänzung
OS Windows 10
Python 3.6.10
Anaconda 4.8.3 Es verwaltet die Python-Umgebung.
Django 3.0.3 Es ist ein Webframework von Python.
numpy 1.18.1 Es ist eine numerische Berechnungsbibliothek von Python. Ich werde es einfügen, weil es bequem ist.
npm 6.14.4 Es wird verwendet, um Pakete wie React zu installieren.
react 16.9.34 Der Hauptteil von React.
react-dom 16.9.34 Es verbindet Html und React.
react-bootstrap 1.0.1 Reagieren Sie auf die Implementierungsversion von Bootstrap, die das Design gut aussehen lässt.
webpack 4.43.0 Es konvertiert die jsx-Datei von React in js.

Inhaltsverzeichnis

1. Umweltbau und Projekterstellung

--Bauen Sie mit Anaconda eine Django-Umgebung auf. --Erstelle ein Django-Projekt. --Erstellen Sie eine React-Umgebung mit Node.js. --Verwenden Sie Reagieren Sie auf das Django-Projekt.

** Hinweis: Dieses Mal werden wir nur Django und React einstellen, damit die Implementierung von Othello nicht herauskommt. ** ** **

Planen Sie für die zweite und nachfolgende Zeit

--Erstellen Sie das Erscheinungsbild und Verhalten von Othello mit React und Bootstrap.

Hauptthema

1. Erstellen Sie mit Anaconda eine Django-Umgebung

Es wird davon ausgegangen, dass Anaconda installiert ist. Da die Erläuterungen zur Installation von Anaconda nicht enthalten sind, lesen Sie bitte andere Seiten. Installieren Sie die erforderlichen Umgebungen, nachdem Sie mit dem folgenden Befehl eine Umgebung namens web erstellt haben.

conda create --name web python=3.6.10
conda activate web
conda install django==3.0.3
conda install numpy==1.18.1

2. Erstellen Sie ein Django-Projekt.

2-1. Erstellung des Projektkörpers

Erstellen Sie zunächst ein Django-Projekt mit dem folgenden Befehl. Das Projekt wird direkt unter dem Verzeichnis erstellt, in dem dieser Befehl ausgeführt wird. Webgame ist der Name des Projekts. Alles ist gut.

conda activate web
django-admin startproject webgame

Ich denke, die Projektstruktur sieht so aus.

webgame --+-- webgame  --+-- __init__.py
          |              +-- settings.py    #Dies ist eine Django-Konfigurationsdatei. Zeigen Sie den Speicherort von HTML an und legen Sie die Datenbank fest.
          |              +-- urls.py        #URL-Routing-Einstellungen.
          |              +-- wsgi.py
          +-- manage.py                     #Es verwaltet Django. Starten und migrieren Sie die Datenbank.

Geben Sie sofort den folgenden Befehl ein, um ihn zu starten.

cd webgame
python manage.py runserver

Greifen Sie nach Eingabe des Befehls auf http://127.0.0.1:8000 zu. Wenn eine Seite wie das folgende Bild angezeigt wird, ist dies erfolgreich. image.png

2-2. Seite hinzufügen (Anwendung)

Als nächstes werde ich eine Indexseite erstellen. Als Fluss,

  1. Erstellen Sie eine Heimanwendung.
  2. Erstellen Sie eine HTML-Datei.
  3. Bearbeiten Sie die Konfigurationsdatei, um auf die HTML-Datei zugreifen zu können.
  4. Erstellen Sie eine Ansicht mit der Heimanwendung.
  5. Stellen Sie die URL ein.

Ich werde es so machen.

2-2-1. Erstellen Sie eine Heimanwendung.

Sie können eine Heimanwendung mit dem folgenden Befehl erstellen.

python manage.py startapp home

Zu diesem Zeitpunkt sollte die Projektstruktur so aussehen.

webgame --+-- home     --+-- __init__.py
          |              +-- admin.py
          |              +-- apps.py
          |              +-- models.py      #Dies ist eine Datei, die Tabellen für die Datenbank definiert.
          |              +-- test.py
          |              +-- views.py       #Dies ist die Datei, die das Verhalten der Ansicht erstellt.
          +-- webgame  --+-- __init__.py
          |              +-- settings.py    #Dies ist eine Django-Konfigurationsdatei. Zeigen Sie den Speicherort von HTML an und legen Sie die Datenbank fest.
          |              +-- urls.py        #URL-Routing-Einstellungen.
          |              +-- wsgi.py
          +-- manage.py                     #Es verwaltet Django. Starten und migrieren Sie die Datenbank.

2-2-2. Erstellen Sie eine HTML-Datei

Erstellen Sie ein Verzeichnis wie unten gezeigt und erstellen Sie "index.html".

webgame --+-- resources ---- templates ---- home ---- index.html
          +-- home      ----Kürzung
          +-- webgame   ----Kürzung
          +-- manage.py  

Der Inhalt sollte wie folgt sein.

webgame/resources/templates/home/index.html


<h1>Hello, Django!!</h1>

2-2-3 Bearbeiten Sie die Einstellungsdatei so, dass auf die HTML-Datei zugegriffen werden kann.

Bearbeiten Sie settings.py wie folgt.

webgame/webgame/settings.py (Teilauszug)


//In der Nähe der Linie 34
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'home',                                                             #hinzufügen
]

//In der Nähe der Linie 55
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, "resources", "templates")            #hinzufügen
        ],
        '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',
            ],
        },
    },
]

2-2-4. Erstellen Sie eine Ansicht mit der Heimanwendung.

Bearbeiten Sie views.py der Homes-Anwendung wie folgt. Jetzt können Sie die zuvor erstellte home / index.html lesen und als HTTP-Antwort übergeben.

webgame/home/views.py


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

def index(request):
    template = loader.get_template('home/index.html')
    context = {}
    return HttpResponse(template.render(context, request))

2-2-5. Legen Sie die URL fest.

Erstellen Sie zunächst eine neue "urls.py" in Ihrer Heimanwendung.

webgame --+-- resources ---- templates ---- home ---- index.html
          +-- home      -+--Kürzung
          |              +-- urls.py                              #hinzufügen
          +-- webgame   ----Kürzung
          +-- manage.py  

Der Inhalt von urls.py sollte wie folgt sein.

webgame/home/urls.py


from django.urls import path
from . import views

app_name = "home"

urlpatterns = [
    path('', views.index, name='index'),
]

Bearbeiten Sie außerdem "webgame / urls.py" wie folgt, um dies korrekt zu lesen.

webgame/webgame/urls.py


from django.contrib import admin
from django.urls import include, path           #add include

urlpatterns = [
    path('', include('home.urls')),             # home.Stellen Sie ein, um URLs zu lesen
    path('admin/', admin.site.urls),
]

Wenn Sie diese Einstellung vornehmen und auf http://127.0.0.1:8000 zugreifen, sollte die folgende Seite angezeigt werden. Jetzt können Sie Ihre Lieblings-HTML-Datei unter einer beliebigen URL auf Ihrer Website platzieren. image.png

3. Erstellen Sie mit Node.js eine React-Umgebung.

Installieren Sie zunächst Node.js von https://nodejs.org/ja/. Detaillierte Erläuterungen finden Sie auf anderen Seiten.

Fügen Sie den Ordner und die Datei wie folgt hinzu, um die React-Datei abzulegen.

webgame --+-- resources -+-- react     -+-- src ---- home ---- index.jsx #Quelldatei
          |              |              +-- package.json                 #Geben Sie an, was installiert werden soll.
          |              |              +-- webpack.config.js            #Festlegen der Datei beim Konvertieren von jsx nach js
          |              |              +-- .babelrc                     #Magie
          |              +-- templates ----Kürzung
          +-- home      ----Kürzung
          +-- webgame   ----Kürzung
          +-- manage.py  

Bearbeiten Sie zuerst "package.json" wie folgt.

webgame/resources/react/package.json


{
  "name": "webgame",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.4.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "react-bootstrap": "^1.0.1",               # React-Bootstrap (Designbezogen)
    "superagent": "^5.0.2",                    # superagent      (Ajax-Kommunikation)
    "webpack": "^4.30.0",                      # WebPack         (Erstellen Sie eine JS-Datei)
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.13.1",                       # React           (Körper reagieren)
    "react-dom": "^16.13.1"                    # ReactDOM        (Verbinden Sie jsx mit Html)
  }
}

Als nächstes bearbeiten Sie .babelrc wie folgt.

webgame/resources/react/.babelrc


{
    "presets": [
      "@babel/preset-env", "@babel/preset-react"
    ]
}

Installieren Sie es dann mit dem folgenden Befehl.

cd resources
cd react
npm install

Wenn alles gut geht, wird ein Ordner namens "node_modules" erstellt und verschiedene Bibliotheken installiert. Die Ordnerstruktur zu diesem Zeitpunkt ist wie folgt.

webgame --+-- resources -+-- react     -+-- node_modules ----Kürzung#Dies wird hinzugefügt
          |              |              +-- src          ----Kürzung
          |              |              +--Kürzung
          |              +-- templates ----Kürzung
          +-- home      ----Kürzung
          +-- webgame   ----Kürzung
          +-- manage.py  

Damit sind die React-Einstellungen abgeschlossen.

4. Verwenden Sie React für das Django-Projekt.

Hier werden wir gemäß dem folgenden Ablauf festlegen und veröffentlichen.

  1. Erstellen Sie eine JSX-Datei
  2. Konvertieren Sie die jsx-Datei in js
  3. Lesen Sie die js-Datei aus der HTML-Datei
  4. Stellen Sie ein, dass js-Dateien gelesen werden sollen
  5. Starten Sie!

4-1. Erstellen Sie eine JSX-Datei

Erstellen Sie zunächst eine JSX-Datei mit React. Bearbeiten Sie src / home / index.jsx wie folgt.

webgame/resources/react/src/home/index.jsx


//Importieren Sie, was Sie brauchen.
import React from 'react'
import ReactDOM from 'react-dom'

//Erstellen Sie eine React-Komponente.
class Home extends React.Component {
    constructor() {
        super();
    }

    //Implementieren Sie das zu rendernde Teil.
    render() {
        return (
            <h1> Hello, React!! </h1>
        );
    }
}

//Mit HTML verknüpfen. Hier,`home`Es ist so eingestellt, dass das Tag mit der ID der Home-Komponente verknüpft wird.
ReactDOM.render(
    <Home />,
    document.getElementById('home')
);

4-2 Konvertieren Sie die jsx-Datei in js

Erstellen Sie zunächst einen Speicherort für die js-Datei. Bitte vereinbaren Sie wie folgt.

webgame --+-- resources -+-- static    ---- js       #Erstellen Sie ein leeres Verzeichnis
          |              +-- react     ----Kürzung
          |              +-- templates ----Kürzung
          +-- home      ----Kürzung
          +-- webgame   ----Kürzung
          +-- manage.py  

Als nächstes bearbeiten Sie webpack.config.js wie folgt.

js:webgame/resources/react/webpack.config.js


require('@babel/register');
const path = require('path');

module.exports = {
    //Festlegen des Namens und des Speicherorts der zu ladenden jsx-Datei
    entry: {
        home_index:     path.resolve(__dirname, "src/home/index.jsx"),
    },
    //Festlegen des Speicherorts und des Namens der js-Ausgabedatei
    output: {
        path: path.resolve(__dirname, "../static/js/") ,
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: [".js","jsx"],
    }
}

Gehen Sie nach der Bearbeitung wie unten gezeigt zu "Webgame / resources / react" und führen Sie "webpack" aus. Dieser Vorgang wird jedes Mal ausgeführt, wenn die jsx-Datei bearbeitet wird.

cd resources
cd react
node_modules\\.bin\\webpack

Wenn damit "webgame / resources / static / js / home_index.js" erstellt wird, ist dies erfolgreich.

4-3 Lesen Sie die js-Datei aus der HTML-Datei

Bearbeiten Sie diesmal die Datei home / index.html wie folgt, um die js-Datei zu laden.

webgame/resources/templates/home/index.html


<!-- Django3.Lesen der statischen Datei bei 0-->
{% load static %}

<h1>Hello, Django!!</h1>

<!--Platzieren Sie das Tag mit der ID home-->
<div id="home"></div>

<!-- home_index.lese js-->
<script src="{% static 'js/home_index.js' %}"></script>

4-4. Zum Lesen von js-Dateien einstellen

Stellen Sie Django schließlich so ein, dass statische Dateien (js oder css) gelesen werden können. Bearbeiten Sie das Ende von settings.py wie folgt.

webgame/webgame/settings.py


#In der Nähe der Linie 133
STATIC_URL = '/static/'

#Zusätzlicher Teil von hier
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'resources/static'),
]

4-5. Start!

Kehren wir zu der Hierarchie zurück, in der sich manage.py befindet, und starten Sie den Server wie gewohnt.

python manage.py runserver

Wenn Sie auf http://127.0.0.1:8000 zugreifen und Hello, React !! angezeigt wird, sind Sie erfolgreich. image.png

abschließend

Danke fürs Lesen. Es wäre sehr hilfreich, wenn Sie mir etwas sagen könnten, das schwer zu verstehen ist, etwas, das nicht funktioniert oder etwas, das falsch ist.

Das nächste Mal möchte ich Bootstrap verwenden, um das Erscheinungsbild von Othello zu erstellen. Bitte unterstützen Sie mich weiterhin.

Recommended Posts

Anfänger versuchen mit Django + React + Bootstrap (1) eine Online-Webanwendung für Othello zu erstellen.
Lassen Sie uns mit Flask eine Webanwendung zur Konvertierung von A nach B erstellen! Von Grund auf neu ...
(Python) Versuchen Sie, eine Webanwendung mit Django zu entwickeln
Ich habe versucht, eine OCR-App mit PySimpleGUI zu erstellen
[Lernnotiz] So erstellen Sie eine App mit Django ~ Bis Hello World angezeigt wird ~
[Lernnotiz] So erstellen Sie eine Anwendung mit Django ~ Von der virtuellen Umgebung bis zum Pushing zu Github ~
Erstellen Sie eine Webanwendung mit Django
(Für Anfänger) Versuchen Sie, mit Django eine einfache Web-API zu erstellen
Versuchen Sie, einen Web-Service-ähnlichen Typ mit 3D-Markup-Sprache zu erstellen
Leicht verständliche Erklärung der Python-Webanwendung (Django) auch für Anfänger (5) [Einführung in den DB-Betrieb mit Django-Shell]
Erstellen Sie eine Webanwendung mit Django
[TCP / IP] Versuchen Sie nach dem Studium, mit Python einen HTTP-Client zu erstellen
So erstellen Sie eine Anwendung aus der Cloud mithilfe des Django-Webframeworks
Ich möchte eine Webanwendung mit React und Python Flask erstellen
Versuchen Sie, ein Bild mit Entfremdung zu erzeugen
[Für Anfänger] Versuchen Sie Web Scraping mit Python
Ich habe eine WEB-Bewerbung bei Django gemacht
WEB Scraping mit Python und versuchen, aus Bewertungen eine Wortwolke zu machen
Versuchen Sie, eine Webanwendung mit Vue.js und Django (Mac Edition) zu erstellen - (1) Umgebungskonstruktion, Anwendungserstellung
Versuchen Sie, Ihr eigenes AWS-SDK mit bash zu erstellen
KI-Anfänger versuchen, professionelle Studenten Bot zu machen
Versuchen Sie, in Python einen "Entschlüsselungs" -Code zu erstellen
Versuchen Sie, mit Python eine Diedergruppe zu bilden
Versuchen Sie, Client-FTP mit Pythonista am schnellsten zu machen
[Cloud 9] Versuchen Sie, eine Umgebung mit Django 1.11 von Python 3.4 zu erstellen, ohne auch nur 1 mm zu verstehen
Verfahren zum Erstellen einer Anwendung mit Django mit Pycharm ~ Vorbereitung ~
Python-Anfänger versucht, dem Administrator von Django eine grundlegende Authentifizierung hinzuzufügen
Lassen Sie uns ein Befehls-Standby-Tool mit Python erstellen
Versuchen Sie, mit MVC eine RESTful-API mit Flask 1.0.2 zu erstellen
Webanwendung erstellt mit Python3.4 + Django (Teil.1 Umgebungskonstruktion)
So erstellen Sie einen HTTPS-Server mit Go / Gin
Anfänger des maschinellen Lernens versuchen, einen Entscheidungsbaum zu erstellen
Einmaliges Anmelden bei der Django-Anwendung mit AWS SSO
Erstellen Sie mit tkinter eine Anwendung mit cx_freeze zu einer ausführbaren Datei
[Python] Ich habe versucht, mit tkinter eine Anwendung zu erstellen, die das Gehalt anhand der Arbeitszeit berechnet