「Django」の版間の差分
提供: wikipokpok
(→仮想環境作成 psycopg2インストール Djangoインストール プロジェクト作成 アプリ作成) |
(→データベース) |
||
44行目: | 44行目: | ||
} | } | ||
}</nowiki> | }</nowiki> | ||
+ | |||
+ | === Reactアプリケーションのセットアップ === | ||
+ | * Reactアプリケーションをプロジェクトにセットアップする | ||
+ | npx create-react-app myreactapp | ||
+ | <nowiki>mysite/ | ||
+ | ├── myapp/ | ||
+ | │ ├── __init__.py | ||
+ | │ ├── admin.py | ||
+ | │ ├── apps.py | ||
+ | │ ├── migrations/ | ||
+ | │ ├── models.py | ||
+ | │ ├── tests.py | ||
+ | │ └── views.py | ||
+ | ├── myreactapp/ | ||
+ | │ ├── node_modules/ | ||
+ | │ ├── public/ | ||
+ | │ ├── src/ | ||
+ | │ ├── package.json | ||
+ | │ ├── package-lock.json | ||
+ | │ ├── README.md | ||
+ | │ └── ... | ||
+ | ├── mysite/ | ||
+ | │ ├── __init__.py | ||
+ | │ ├── asgi.py | ||
+ | │ ├── settings.py | ||
+ | │ ├── urls.py | ||
+ | │ └── wsgi.py | ||
+ | └── manage.py | ||
+ | </nowiki> | ||
+ | * 依存関係のインストール | ||
+ | cd myreactapp | ||
+ | |||
+ | npm install | ||
+ | |||
+ | npm list | ||
+ | |||
+ | npm start |
2023年10月2日 (月) 09:33時点における版
目次
準備
PostgreSQL
- 事前に済ませる
postgres=# CREATE USER terajq WITH PASSWORD 'pas'; postgres=# CREATE DATABASE teranote; postgres=# GRANT ALL PRIVILEGES ON DATABASE teranote TO terajq;
Python Djangoインストール
- 事前に済ませる
仮想環境作成 psycopg2インストール Djangoインストール プロジェクト作成 アプリ作成
- コードを置きたい場所に cd し、仮想環境作成し、psycopg2(データベースのバインディング )インストール、Djangoをインストールし、プロジェクト作成し、アプリを作成する。
- 仮想環境を作成
python3 -m venv <仮想環境名> % python3 -m venv venv % source ./venv/bin/activate // アクティベート
- psycopg2をインストール
% pip install psycopg2
- Djangoをインストール
% pip install django
- プロジェクトを作成
django-admin startproject <プロジェクト名> % django-admin startproject mysite
- Django REST Frameworkをインストール、設定する
pip install djangorestframework
- 開発用サーバーの起動
% cd mysite % python manage.py runserver
- アプリケーションをつくる
Djangoプロジェクトのルートディレクトリ内で、以下のコマンドを使用してアプリケーションを作成 $ python manage.py startapp teranote
データベース
- 設定
DATABASES = { "default": { "ENGINE": "django.db.backends.postgresql", "NAME": "mydatabase", "USER": "mydatabaseuser", "PASSWORD": "mypassword", "HOST": "127.0.0.1", "PORT": "5432", } }
Reactアプリケーションのセットアップ
- Reactアプリケーションをプロジェクトにセットアップする
npx create-react-app myreactapp mysite/ ├── myapp/ │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── migrations/ │ ├── models.py │ ├── tests.py │ └── views.py ├── myreactapp/ │ ├── node_modules/ │ ├── public/ │ ├── src/ │ ├── package.json │ ├── package-lock.json │ ├── README.md │ └── ... ├── mysite/ │ ├── __init__.py │ ├── asgi.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py └── manage.py
- 依存関係のインストール
cd myreactapp
npm install
npm list
npm start