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.
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. |
--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. ** ** **
--Erstellen Sie das Erscheinungsbild und Verhalten von Othello mit React und Bootstrap.
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
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.
Als nächstes werde ich eine Indexseite erstellen. Als Fluss,
Ich werde es so machen.
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.
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>
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',
],
},
},
]
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))
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.
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.
Hier werden wir gemäß dem folgenden Ablauf festlegen und veröffentlichen.
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')
);
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.
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>
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'),
]
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.
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