vue routerについての話 2021/2/1

今日やること

vue.jsでurlにあるcode以下(クエリパラメーター)の文字をブラウザ上で表示する。

>クエリパラメーターとは
>>まざまな情報をWebサーバーに伝えるためにURLに付け加える情報

今回の場合だと
localhost:8080/`?code=AQUAKEOAJ....`

色のついている部分がクエリパラメーターである。 ここを表示したいわけである。

まず`Vue.js Devtools`を使うにあたりを導入したい。

#Vue.js Devtools

>Vue.js Devtoolsとは
>>Vue.js Devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能 です。これを導入するとconsoleを開かなくてもdataの中身などを確認することができるようになります。

[Vue.js Devtools/Chrome ウェブストア](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)

#vue route

###導入

マニュアルセットアップ
①yarnでインストールする

```
yarn add @vue-router
```


#パラメータを取得してみる
パラメータの取得は、次のコードで可能です。
```:js
  this.$route.query.{キー}
```

{キー}の部分は、今回の例でいうと、code になります。

```js:FBButton
<template>
    <div>
        <button @click="open">Login with Facebook</button>
        {{ info }}
    </div>
</template>

<script>
export default {
    data(){
        return {
        info:null
    }
}, mounted (){
    let code = this.$route.query.code
    if(code){
        this.info = code
        }
    }
}
```

---------------

#DjangoApiプロジェクトを作る

今回はDjangoApiプロジェクトを[公式ドキュメント](https://www.django-rest-framework.org/#quickstart)にしたがって進めていく。

djagoをインストールする

```
pip install djangorestframework
pip install django-filter  # Filtering support
```

`setting`の`INSTALLED_APPS`に'rest_framework'を追加する

```python:settings.py
INSTALLED_APPS = [
    ...
    'rest_framework',
]
```

次に`urls.py`ファイルを変更する。

```python:urls.py
urlpatterns = [
    ...
    path('api-auth/', include('rest_framework.urls'))
]
```

次に`settings.py`の一番下にREST_FRAMEWORKの設定情報を追加します。ここでは標準のパーミッションの設定を追加しています。

```python:setting.py
REST_FRAMEWORK = {
    # Use Django's standard `django.contrib.auth` permissions,
    # or allow read-only access for unauthenticated users.
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
    ]
}
```

次に
`serializers.py`
`viewsets.py`
ファイルを追加する。

```python:serializers.py
from django.contrib.auth.models import User
from rest_framework import serializers


class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ['url', 'username', 'email', 'is_staff']
```

```python:viewsets.py
from django.contrib.auth.models import User
from rest_framework import viewsets
from core.serializers import User Serializer


class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all()
    serializer_class = UserSerializer
```

以下のコードを追加する

```python:urls.py
from rest_framework import routers
from core.viewsets import UserViewSet
from django.urls import path, include


# Routers provide an easy way of automatically determining the URL conf.
router = routers.DefaultRouter()
router.register(r'users', UserViewSet)

# Wire up our API using automatic URL routing.
# Additionally, we include login URLs for the browsable API.
urlpatterns = [
    path('', include(router.urls))
]
```

#auth_userを作る

写真

おそらくpythonを実行すると上のようなエラーが出てくると思う。

これはテーブルがないことによるエラーなので`migrate`することで解決できる。

```
python manage.py makemigrations
python manage.py migrate
```

###superuserを作る
　
Django の管理画面を利用するためには基本的にsuperuserを作ってアカウント登録する必要があります。

```
python manage.py createsuperuser
```

するとこんなコマンドが出てくるので情報を打ち込んでいきましょう。

```
$ python manage.py createsuperuser
Username (leave blank to use 'user1'): admin
Email address: admin@keicode.com
Password: # パスワードを入力
Password (again): 
This password is too common. # パスワードが単純過ぎる場合はエラー発生
Password: 
Password (again): 
Superuser created successfully.
```

#新しいモデルの作り方

『model.py』の中身に使用するモデルクラスの定義していく。

モデルクラスはDjangoフレームワークが提供する『Django.db.models.Model』を親クラスとして継承して作成します。

モデルクラス作成の基本的なコードは以下のとおりです。

```python:models.py
#モデルクラスの作成
from django.db import models

class モデル名(models.Model):
    フィールド名 = フィールドクラス(・・・,フィールドオプションの指定,・・・)
```

ここでは、『Account』というモデルクラスを定義して、その中のフィールドオブジェクトとして[fb_token][ig_token]を作成しています。そして、userモデルに紐付けます。

```python:models.py
from django.db import models
from django.contrib.auth.models import User


class Account(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    fb_token = models.CharField(max_length=1000)
    ig_token = models.CharField(max_length=1000)

    def __str__(self):
        return str(self.id)
```
OneToOneField/ 1対1(１つのユーザーは１つのアカウントしかもてない)
on_delete=models.CASCADE/ 外部キーで参照してるオブジェクトが削除されたとき、その削除に合わせて行われる処理
models.CharField(max_length=1000)/ 文字列のフィールを作る

#モデルをdjangoapiのadminに反映させる

`admin.py`にアカウントモデルを登録することによりAPI上でアカウントモデルを確認することができる。

```python:admin.py
admin.site.register(Account)
```

#Api rootに作ったモデル情報を反映させる

先程作った`serializers.py`、`viewsets.py`にそれぞれのモデルに対応するコードを書きApi Rootでアカウントの情報を確認できるようにする。

serializerの機能について学びたい人はこちらを確認してください↓↓

[[Django REST Framework] Serializer の 使い方 をまとめてみた](https://qiita.com/1999-07-08/items/180418f6c60b4b53df40)


ここでは`AccountSerializer`を作っていく

```python:serializers.py
from rest_framework import serializers
from core.models import Account


class AccountSerializers(serializers.ModelSerializer):
    class Meta:
        model = Account
        fields = ['id', 'user', fb_token', 'ig_token']   
```

次にAccountViewSetクラスを作る。

```python:viewsets.py
class AccountViewSet(viewsets.ModelViewSet):
    queryset = Account.objects.all()
    serializer_class = AccountSerializer
```

AccountViewSetクラスト作れたらそれをurls.pyで使う

```python:urls.py
from django.contrib import admin
from rest_framework import routers
+ from core.viewsets import UserViewSet, AccountViewSet
from django.urls import path, include



router = routers.DefaultRouter()
router.register(r'users', UserViewSet)
+ router.register(r'accounts', AccountViewSet)

```

すると、こうなる

![スクリーンショット 2021-03-01 9.34.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965206/660a9d1e-4206-ce0e-2a99-780706a9fad7.png)

　最後に`viewsets.py`に`permission`クラスを設定しよう。

```python:viewsets.py
class AccountViewSet(viewsets.ModelViewSet):
    queryset = Account.objects.all()
    serializer_class = AccountSerializer
+    # permission_classes = [permissions.IsAuthenticated]
+    permissions_classes = [AllowAny]
```

`[AllowAny]`では誰でも編集することができるが、`[permissions.IsAuthenticated]`では権限の持った人しかmodelの値を編集することができない.

#今日の課題

`axiosを使ってフロントエンドから取得したクエリパラメーターをdjangoのapi（fb_token, ig_tokenフィールド）に入れる。