vue2, TypeScript(clas-component), vuetyfy, Django, postgreSQLで開発する、フロント・バックに分かれたシステムの環境構築的な奴です。
vueやDjangoをまったく触ったことない人や、プログラミングの勉強したいけど、何をしたらいいかわからない人向け作成しました。最低限形になっていて、拡張のしがいのあるコードをgitにあげているので、cloneしてもらえば、ある程度参考にしながら進められると思います。
ただ、新卒2年目が短い時間で作ったものなので、質の高いコードではないです。ご了承ください。
初期のコードはgitからcloneしてもらうことを想定しているので、もっと最初の環境構築からやりたい方はごめんなさい
流れ
※開発はwindowsを想定しているので、一応Macのコマンドとかも記載していますが、あっているかわからないので、動かなかたら調べてください
・postgreSQLの用意
・バックエンド
・フロントエンド
（エディタは好きなのを使ってください。僕はフロントVScode, バックPycharmでやってます。理由は今の現場がそうだからです。）
・終わり
下記を参考にいじってみてください！
https://qiita.com/OTA_nagisa/private/2dad312cc9022945a551
参考にさせていただいたサイト
DjangoとVue.jsで作るWEBアプリ
【Django REST Framework + Vue.js】APIからデータを取得し表示する
DjangoおよびDRFのチュートリアル
Vue/Vuex Typescript example: JWT Authentication | vuex-class & vuex-module-decorators
PostgreSQLの使い方
etc
postgreSQLの用意
postgreSQLインストール
まずは、「PostgreSQLの使い方」こちらのサイトを参考に、postgreSQlを使える状態にしてください。バージョンは最新のものでいいと思います。
具体的には、以下だけでよかった気がします。（たしか）
・PostgreSQLのダウンロード及びインストール
・PATHを設定する
・WindowsサービスとしてPostgreSQLを開始または停止する
Macの方は、「【Mac】PostgreSQLのインストール」このあたりを参考にしてみて下さい。僕はMacを持っていないので、これで本当に行けるのかはわかりませんが、、、
データベース作成
以下を参考にデータベースの作成をします。わからなかったら、、、調べてください！！
・psqlからSQLコマンドを実行する
・データベースを作成する(CREATE DATABASE)
DBeaver インストール
データベースまで作成できたら、DBeaverをインストールします。
ほかに使い慣れているものがあればそちらでよいです。
自分がやったときに、どのサイトを参考にしたのか忘れましたが、
（初心者向け）DBeaverのインストール方法
こちらを参考に、インストールが完了し、MySQLを選ぶ前まで行ってください。
今回はPostgreSQLなので、新しい接続から
PostgreSQLを選択し、
下記のような設定をして（Database, ユーザー名, パスワードは、さっきインストールして、データベース作ったときのもの）
こんな感じのものが見つかれば終わり
できてなかったら知らない
あ、コミットは手動コミットをお勧めします。
間違えたアップデート文実行して、テストデータ壊したらめんどくさいので
バックエンド
まずはプロジェクトを置くフォルダを作っておいてください。フロントとバックをまとめておいておくところです。
Pythonをインストールしておいてください！
最新だとエラーになるかもしれないので、3.8とかがあんぱいかもしれません
バックエンドリポジトリこちらからclone
git clone https://github.com/OTAnagisa/vue2-drf-rest.git
ご自身のgitに紐づけたい場合は.gitファイルを削除して、git initして、下記のサイトとかを適当に参考にしてください！
https://qiita.com/miriwo/items/a7be71f6a238b09eda10
cloneして、なんやかんやしたら、そのフォルダをエディタで開きます。
そこで、Terminalを開いて、仮想環境に入ります。
powershellだと
python -m venv venv
venv\Scripts\activate.ps1
Macならこうらしい
python3 -m venv .venv
source .venv/bin/activate
頭に(venv)ってついたらOK
仮想環境に入ったら、
pip install -r requirements.txt
をしてインストール
requirements.txtがちゃんと整理できてなくて、足りないものがあったり、バージョンの関係でエラーになったりしたらすみません、、、
データベースとつなげる
最初に作成したpostgreSQLのデータベースとつなげます。
cloneしたコードの、./rest/settings.pyのDATABASESの中身を、作成したデータベース情報に合わせてください。
変更できたら、マイグレします。（マイグレって何ってなる方もいるかもしれませんが、後々コード触っていけばわかると思うので、何も考えなくていいです。）
ここもMacだとpython3ってやるんですかね？
最初にsequencesをマイグレ
python manage.py migrate sequences
もしくは
python3 manage.py migrate sequences
その後残りをマイグレ
python manage.py migrate
もしくは
python3 manage.py migrate
マイグレを行ったのち、DBeaverでスキーマを更新して
テーブルが作成されたらOKです。
少しですが、初期データも入っているので、
runserverして動し
python manage.py runserver
もしくは
python3 manage.py runserver
http://127.0.0.1:8000/api/news-list/
こちらのURLをたたいてもらえば、実際にAPIが動作し、responseを確認できると思います！
ちなみにユーザーは、僕の好きなドラマの、リッチマンプアウーマンからとってます。
ニュースの記事はchatGPTにお願いしました。
"pycharm"の設定
こっちらはやらなくてもOKですが、やっておいたほうがいいとは思ってます。
エディタ違ったら知りません
デバッグ設定
右上のEdit何たらを開いて
＋ボタン押して
python選んで
こんな感じにしたらOK
scriptPath：フォルダ直下のmanage.py
parametars：runserver
PythonInterpter：よくわかんないけど適当なPythonのやつ
これで、runserverの右の矢印の右の虫みたいなやつを押して、ruserverされたらOK
だめだったら、PythonInterpterあたりを見直して、それでもだめだったら、ごめん
（terminalで起動してたruserverは止めてOK）
デバッグモードで起動することで、処理の途中で止めて、値を確認できるので、いろいろ便利
python console 設定
Fileからsettingsを開いて
consoleで検索して、python console の設定を画像のようにして、再起動
Environment valiables:
DJANGO_SETTINGS_MODULE=rest.settings;PYTHONUNBUFFERED=1
Python interpreter:
使用してるPythonのやつ
Workinig directory:
バックエンドフォルダのパス
Starting script:（こちらの変更は再起動しないと反映されないことがあります）
import django; django.setup()
import sys; print('Python %s on %s' % (sys.version, sys.platform))
sys.path.extend([WORKING_DIR_AND_PYTHON_PATHS])
これでバックエンド側は終わり！
フロントエンド
フロントエンドリポジトリこちらからclone
git clone https://github.com/OTAnagisa/vue2-drf-client.git
こちらもinitやらなんやらは適当にやってください！
エディタでフォルダーを開いて、terminalでnpm install
終わったらnpm start
出てきたlocalのurlをクリック（バックエンド起動しておく）
画面が表示されたらOK
とりあえずの画面と、少しのテストデータだけ追加してあります。
終わり！終了！
終わりに
商品一覧ページにいろいろ詰め込みました。
ここを参考に、いろいろ試してみてください！！
http://localhost:8080/#/ProductList
こんなことやったらよさそうというリストを作ってみました。
あまり説明をいろいろ書いているわけではないので、興味のある所から、調べつつ進めてみてください
わざと複雑になるようなテーブル構造にしたり、単純に時間がなくて作りが甘い部分があるため、そういったところはリファクタリングしていただけると、、、