vue2, Django, postgreSQL で開発する環境構築

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アプリ](https://nmomos.com/tips/2019/07/17/django-vuejs-1/)
[【Django REST Framework + Vue.js】APIからデータを取得し表示する](https://qiita.com/taki_21/items/d2905e093d326f72a286)
[DjangoおよびDRFのチュートリアル](https://rinoguchi.net/2022/03/django-rest-framework.html)
[Vue/Vuex Typescript example: JWT Authentication | vuex-class & vuex-module-decorators](https://www.bezkoder.com/vuex-typescript-jwt-auth/)
[PostgreSQLの使い方](https://www.javadrive.jp/postgresql/)

etc
## postgreSQLの用意
### postgreSQLインストール
まずは、「[PostgreSQLの使い方](https://www.javadrive.jp/postgresql/)」こちらのサイトを参考に、postgreSQlを使える状態にしてください。バージョンは最新のものでいいと思います。
具体的には、以下だけでよかった気がします。（たしか）
・[PostgreSQLのダウンロード及びインストール](https://www.javadrive.jp/postgresql/install/index1.html)
・[PATHを設定する](https://www.javadrive.jp/postgresql/install/index3.html)
・[WindowsサービスとしてPostgreSQLを開始または停止する](https://www.javadrive.jp/postgresql/install/index4.html)

Macの方は、「[【Mac】PostgreSQLのインストール](https://yuhabeem.com/2021/03/15/202/)」このあたりを参考にしてみて下さい。僕はMacを持っていないので、これで本当に行けるのかはわかりませんが、、、

### データベース作成
以下を参考にデータベースの作成をします。わからなかったら、、、調べてください！！
・[psqlからSQLコマンドを実行する](https://www.javadrive.jp/postgresql/connect/index4.html)
・[データベースを作成する(CREATE DATABASE)](https://www.javadrive.jp/postgresql/database/index2.html)

### DBeaver インストール
データベースまで作成できたら、DBeaverをインストールします。
ほかに使い慣れているものがあればそちらでよいです。
自分がやったときに、どのサイトを参考にしたのか忘れましたが、
[（初心者向け）DBeaverのインストール方法](https://masafumi-blog.com/dbeaver-install)
こちらを参考に、インストールが完了し、MySQLを選ぶ前まで行ってください。

今回はPostgreSQLなので、新しい接続から
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/071bed4e-1b70-4232-2f34-26ea4f33b5e7.png)
PostgreSQLを選択し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/1e7605f3-5960-4aad-03f4-171785d28147.png)
下記のような設定をして（Database, ユーザー名, パスワードは、さっきインストールして、データベース作ったときのもの）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/d52b8641-06d8-a2d5-c969-c4ec229c8165.png)

こんな感じのものが見つかれば終わり
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/3de551b0-3076-c1dc-a8fe-5c3e3db4975c.png)

できてなかったら知らない

あ、コミットは手動コミットをお勧めします。
間違えたアップデート文実行して、テストデータ壊したらめんどくさいので
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/90668bb5-07b5-85d7-c516-b9b19291ea0c.png)


## バックエンド
まずはプロジェクトを置くフォルダを作っておいてください。フロントとバックをまとめておいておくところです。

Pythonをインストールしておいてください！
最新だとエラーになるかもしれないので、3.8とかがあんぱいかもしれません

[バックエンドリポジトリ](https://github.com/OTAnagisa/vue2-drf-rest)こちらからclone
```
git clone https://github.com/OTAnagisa/vue2-drf-rest.git
```
ご自身のgitに紐づけたい場合は.gitファイルを削除して、git initして、下記のサイトとかを適当に参考にしてください！
https://qiita.com/miriwo/items/a7be71f6a238b09eda10
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/63489eea-13c2-21d5-a089-412c987813a1.png)

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がちゃんと整理できてなくて、足りないものがあったり、バージョンの関係でエラーになったりしたらすみません、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/7daa90fc-9e79-b388-a8e5-bb0e1332e059.png)

### データベースとつなげる
最初に作成したpostgreSQLのデータベースとつなげます。

cloneしたコードの、./rest/settings.pyのDATABASESの中身を、作成したデータベース情報に合わせてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/36bf270b-781c-2793-2f84-6b7c940ef36b.png)

変更できたら、マイグレします。（マイグレって何ってなる方もいるかもしれませんが、後々コード触っていけばわかると思うので、何も考えなくていいです。）
ここもMacだとpython3ってやるんですかね？
```
最初にsequencesをマイグレ
python manage.py migrate sequences
もしくは
python3 manage.py migrate sequences

その後残りをマイグレ
python manage.py migrate
もしくは
python3 manage.py migrate
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/ac3a82a1-f983-afe4-606c-daac6c213350.png)

マイグレを行ったのち、DBeaverでスキーマを更新して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/753553c3-95cd-2275-4664-a80bb79c0505.png)

テーブルが作成されたらOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/32163af3-3066-1dc5-cc18-669048cde5b6.png)

少しですが、初期データも入っているので、
runserverして動し
```
python manage.py runserver
もしくは
python3 manage.py runserver
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/3b43caa3-9b91-7071-fb3d-34d02abcea7d.png)

http://127.0.0.1:8000/api/news-list/
こちらのURLをたたいてもらえば、実際にAPIが動作し、responseを確認できると思います！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/675a2ade-5a1b-91fc-adf9-8c1b9b1113aa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/5c1b4a0d-25ff-2934-109c-de3333cda37b.png)
ちなみにユーザーは、僕の好きなドラマの、リッチマンプアウーマンからとってます。
ニュースの記事はchatGPTにお願いしました。


### "pycharm"の設定
こっちらはやらなくてもOKですが、やっておいたほうがいいとは思ってます。
エディタ違ったら知りません
#### デバッグ設定

右上のEdit何たらを開いて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/bfabe5f9-14a9-e4e2-1e26-bd198aee8a3a.png)

＋ボタン押して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/0f38f4c4-bf3c-a4b0-fe13-e06ba2ae1d82.png)

python選んで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/02c8ca4b-cbcd-c954-84f5-900522ff9e72.png)

こんな感じにしたらOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/8f683dcc-a08d-5b6c-56ad-f1150ae9a147.png)
scriptPath：フォルダ直下のmanage.py
parametars：runserver
PythonInterpter：よくわかんないけど適当なPythonのやつ

これで、runserverの右の矢印の右の虫みたいなやつを押して、ruserverされたらOK
だめだったら、PythonInterpterあたりを見直して、それでもだめだったら、ごめん
（terminalで起動してたruserverは止めてOK）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/33141e05-0073-eec2-e24a-cde84cc21164.png)

デバッグモードで起動することで、処理の途中で止めて、値を確認できるので、いろいろ便利
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/deeb4cde-f65f-e919-94bb-ed4ff3a023f6.png)

#### python console 設定
Fileからsettingsを開いて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/08253295-68d2-1716-e554-8824b137074d.png)

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])

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/aab1e118-fbb0-a419-3444-6d16862d1db1.png)


これでバックエンド側は終わり！

## フロントエンド
[フロントエンドリポジトリ](https://github.com/OTAnagisa/vue2-drf-client)こちらからclone
```
git clone https://github.com/OTAnagisa/vue2-drf-client.git
```
こちらもinitやらなんやらは適当にやってください！

エディタでフォルダーを開いて、terminalでnpm install

終わったらnpm start

出てきたlocalのurlをクリック（バックエンド起動しておく）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/0cc5bf96-dd0d-f07a-6a81-4196183fc8a1.png)

画面が表示されたらOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/f1ed1ea2-0026-a32f-a3df-df7eb1af6a69.png)

とりあえずの画面と、少しのテストデータだけ追加してあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/0b757337-1de6-c4ee-7c0e-5605ad70be77.png)

終わり！終了！

# 終わりに
商品一覧ページにいろいろ詰め込みました。
ここを参考に、いろいろ試してみてください！！
http://localhost:8080/#/ProductList
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125193/02e81bf9-0956-ba9a-3f94-f070ed718c17.png)

こんなことやったらよさそうというリストを作ってみました。
あまり説明をいろいろ書いているわけではないので、興味のある所から、調べつつ進めてみてください

https://qiita.com/OTA_nagisa/private/2dad312cc9022945a551

わざと複雑になるようなテーブル構造にしたり、単純に時間がなくて作りが甘い部分があるため、そういったところはリファクタリングしていただけると、、、