Les débutants essaient de créer une application Web de combat en ligne Othello avec Django + React + Bootstrap (1)

introduction

Objet de cette page

Le but est de partager la procédure de création d'une application Web pour Django + React + Bootstrap et de faire un mémorandum personnel. En ce qui concerne le contenu, ce sera une forme dans laquelle les débutants noteront tranquillement la lutte jusqu'à la mise en œuvre d'Othello de bataille interpersonnelle avec l'application Web avec Django + React + Bootstrap par essais et erreurs. Je ne peux pas expliquer en détail, donc je pense que c'est comme passer par les étapes de la construction de l'environnement, de la création du projet, de la création de l'interface utilisateur et de la mise en œuvre d'Othello.

Cible de cette page

• Ceux qui veulent créer une application Web.
• Quelqu'un qui sait écrire en Python.
• Ceux qui ont une vague connaissance de la face avant.
• Ceux qui signalent des erreurs dans le contenu.

environnement

table des matières

1er environnement construction et création de projet

--Construisez un environnement Django avec Anaconda. --Créez un projet Django. --Créez un environnement React avec Node.js. --Utilisez React sur le projet Django.

** Note: Cette fois, nous ne définirons que Django et React, donc l'implémentation d'Othello ne sortira pas. ** **

Programme pour la deuxième fois et les suivantes

--Créez l'apparence et le comportement d'Othello avec React et Bootstrap.

• Gérer les comptes avec la fonction de gestion des utilisateurs de Django. --Créez une base de données pour Othello.
• Mettre en œuvre la fonction de combat interpersonnel d'Othello (bataille en ligne).

Sujet principal

1. Créez un environnement Django avec Anaconda

On suppose qu'Anaconda est installé. Puisque l'explication sur l'installation d'Anaconda est omise, veuillez vous référer à d'autres pages. Après avoir créé un environnement appelé web avec la commande suivante, installez les nécessaires.

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

2. Créez un projet Django.

2-1. Création du corps du projet

Tout d'abord, créez un projet Django avec la commande suivante. Le projet sera créé directement sous le répertoire où cette commande est exécutée. webgame est le nom du projet. Tout va bien.

conda activate web
django-admin startproject webgame

Je pense que la structure du projet ressemble à ceci.

webgame --+-- webgame  --+-- __init__.py
          |              +-- settings.py    #Il s'agit d'un fichier de configuration Django. Affichez l'emplacement de Html et définissez la base de données.
          |              +-- urls.py        #Paramètres de routage d'URL.
          |              +-- wsgi.py
          +-- manage.py                     #Il gère Django. Démarrez et migrez la base de données.

Immédiatement, tapez la commande suivante pour le démarrer.

cd webgame
python manage.py runserver

Après avoir entré la commande, accédez à http://127.0.0.1:8000 et si une page comme l'image ci-dessous s'affiche, elle réussit.

2-2. Ajouter une page (application)

Ensuite, je vais créer une page d'index. En tant que flux,

1. Créez une application domestique.
2. Créez un fichier Html.
3. Modifiez le fichier de configuration pour rendre le fichier Html accessible.
4. Créez une vue avec l'application d'accueil.
5. Définissez l'URL.

Je vais le faire comme ça.

2-2-1 Créez une application domestique.

Vous pouvez créer une application domestique avec la commande suivante.

python manage.py startapp home

À ce stade, la structure du projet doit ressembler à ceci.

webgame --+-- home     --+-- __init__.py
          |              +-- admin.py
          |              +-- apps.py
          |              +-- models.py      #Il s'agit d'un fichier qui définit les tables de la base de données.
          |              +-- test.py
          |              +-- views.py       #C'est le fichier qui crée le comportement de la vue.
          +-- webgame  --+-- __init__.py
          |              +-- settings.py    #Il s'agit d'un fichier de configuration Django. Affichez l'emplacement de Html et définissez la base de données.
          |              +-- urls.py        #Paramètres de routage d'URL.
          |              +-- wsgi.py
          +-- manage.py                     #Il gère Django. Démarrez et migrez la base de données.

2-2-2. Créer un fichier Html

Créez un répertoire comme indiqué ci-dessous et créez ʻindex.html`.

webgame --+-- resources ---- templates ---- home ---- index.html
          +-- home      ----réduction
          +-- webgame   ----réduction
          +-- manage.py  

Le contenu doit être le suivant.

webgame/resources/templates/home/index.html

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

2-2-3. Modifiez le fichier de paramètres afin de pouvoir accéder au fichier Html.

Modifiez settings.py comme suit.

webgame/webgame/settings.py (extrait partiel)

//Près de la ligne 34
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'home',                                                             #ajouter à
]

//Près de la ligne 55
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, "resources", "templates")            #ajouter à
        ],
        '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 Créez une vue avec l'application d'accueil.

Modifiez views.py de l'application homes comme suit. Vous pouvez maintenant lire le home / index.html créé précédemment et le transmettre en tant que réponse Http.

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. Définissez l'URL.

Tout d'abord, créez un nouveau ʻurls.py` dans l'application d'accueil.

webgame --+-- resources ---- templates ---- home ---- index.html
          +-- home      -+--réduction
          |              +-- urls.py                              #ajouter
          +-- webgame   ----réduction
          +-- manage.py  

Le contenu de ʻurls.py` doit être comme suit.

webgame/home/urls.py

from django.urls import path
from . import views

app_name = "home"

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

De plus, modifiez webgame / urls.py comme suit pour lire ceci correctement.

webgame/webgame/urls.py

from django.contrib import admin
from django.urls import include, path           #ajouter inclure

urlpatterns = [
    path('', include('home.urls')),             # home.Configurer pour lire les URL
    path('admin/', admin.site.urls),
]

Si vous effectuez ce paramètre et accédez à http://127.0.0.1:8000, vous devriez voir la page suivante. Vous pouvez maintenant placer votre fichier Html préféré sur n'importe quelle URL de votre site Web.

3. Créez un environnement React avec Node.js.

Tout d'abord, installez Node.js depuis https://nodejs.org/ja/. Les explications détaillées sont laissées aux autres pages.

Pour placer le fichier React, ajoutez le dossier et le fichier comme suit.

webgame --+-- resources -+-- react     -+-- src ---- home ---- index.jsx #fichier source
          |              |              +-- package.json                 #Spécifiez les éléments à installer.
          |              |              +-- webpack.config.js            #Fichier de configuration lors de la conversion de jsx en js
          |              |              +-- .babelrc                     #la magie
          |              +-- templates ----réduction
          +-- home      ----réduction
          +-- webgame   ----réduction
          +-- manage.py  

Tout d'abord, éditez package.json comme suit.

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 (Liés à la conception)
    "superagent": "^5.0.2",                    # superagent      (Communication Ajax)
    "webpack": "^4.30.0",                      # WebPack         (Créer un fichier js)
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.13.1",                       # React           (Corps de réaction)
    "react-dom": "^16.13.1"                    # ReactDOM        (Connectez jsx avec Html)
  }
}

Ensuite, modifiez .babelrc comme suit.

webgame/resources/react/.babelrc

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

Ensuite, installez-le avec la commande suivante.

cd resources
cd react
npm install

Si tout se passe bien, un dossier appelé node_modules sera créé et diverses bibliothèques seront installées. La structure des dossiers à ce moment est comme ça.

webgame --+-- resources -+-- react     -+-- node_modules ----réduction#Cela sera ajouté
          |              |              +-- src          ----réduction
          |              |              +--réduction
          |              +-- templates ----réduction
          +-- home      ----réduction
          +-- webgame   ----réduction
          +-- manage.py  

Ceci termine les paramètres React.

4. Utilisez React sur le projet Django.

Ici, nous allons définir et publier selon le flux suivant.

1. Créez un fichier jsx
2. Convertissez le fichier jsx en js
3. Lisez le fichier js à partir du fichier Html
4. Configurer pour lire les fichiers js
5. Commencez!

4-1. Créer un fichier jsx

Commencez par créer un fichier jsx en utilisant React. Modifiez src / home / index.jsx comme suit.

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

//Importez ce dont vous avez besoin.
import React from 'react'
import ReactDOM from 'react-dom'

//Créez un composant React.
class Home extends React.Component {
    constructor() {
        super();
    }

    //Implémentez la pièce à rendre.
    render() {
        return (
            <h1> Hello, React!! </h1>
        );
    }
}

//Associez-vous à Html. ici,`home`Il est configuré pour associer la balise à l'id avec le composant Home.
ReactDOM.render(
    <Home />,
    document.getElementById('home')
);

4-2. Convertir le fichier jsx en js

Commencez par créer un emplacement de stockage pour le fichier js. Veuillez organiser comme suit.

webgame --+-- resources -+-- static    ---- js       #Créer un répertoire vide
          |              +-- react     ----réduction
          |              +-- templates ----réduction
          +-- home      ----réduction
          +-- webgame   ----réduction
          +-- manage.py  

Ensuite, éditez webpack.config.js comme suit.

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

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

module.exports = {
    //Définition du nom et de l'emplacement du fichier jsx à charger
    entry: {
        home_index:     path.resolve(__dirname, "src/home/index.jsx"),
    },
    //Définition de l'emplacement et du nom du fichier js de sortie
    output: {
        path: path.resolve(__dirname, "../static/js/") ,
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: [".js","jsx"],
    }
}

Après l'édition, allez dans webgame / resources / react comme indiqué ci-dessous et exécutez webpack. Ce processus est effectué à chaque fois que le fichier jsx est modifié.

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

Si webgame / resources / static / js / home_index.js est créé avec ceci, il réussit.

4-3. Lire le fichier js à partir du fichier Html

Cette fois, éditez le fichier home / index.html comme suit pour charger le fichier js.

webgame/resources/templates/home/index.html

<!-- Django3.Lecture de fichier statique à 0-->
{% load static %}

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

<!--Placez le tag avec l'identifiant à la maison-->
<div id="home"></div>

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

4-4. Configurer pour lire les fichiers js

Enfin, configurez Django pour pouvoir lire les fichiers statiques (js ou css). Modifiez la fin de settings.py comme suit.

webgame/webgame/settings.py

#Près de la ligne 133
STATIC_URL = '/static/'

#Partie supplémentaire d'ici
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'resources/static'),
]

4-5. Commencez!

Revenons à la hiérarchie où se trouve manage.py et démarrons le serveur comme d'habitude.

python manage.py runserver

Si vous accédez à http://127.0.0.1:8000 et que Hello, React !! s'affiche, vous avez réussi.

en conclusion

Merci pour la lecture. Ce serait très utile si vous pouviez me dire tout ce qui est difficile à comprendre, quelque chose qui ne fonctionne pas ou quelque chose qui ne va pas.

La prochaine fois, j'aimerais utiliser Bootstrap pour créer l'apparence d'Othello, alors continuez à me soutenir.