今日やること
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 route
導入
マニュアルセットアップ
①yarnでインストールする
yarn add @vue-router
パラメータを取得してみる
パラメータの取得は、次のコードで可能です。
:js
this.$route.query.{キー}
{キー}の部分は、今回の例でいうと、code になります。
<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プロジェクトを公式ドキュメントにしたがって進めていく。
djagoをインストールする
pip install djangorestframework
pip install django-filter # Filtering support
settingのINSTALLED_APPSに'rest_framework'を追加する
INSTALLED_APPS = [
...
'rest_framework',
]
次にurls.pyファイルを変更する。
urlpatterns = [
...
path('api-auth/', include('rest_framework.urls'))
]
次にsettings.pyの一番下にREST_FRAMEWORKの設定情報を追加します。ここでは標準のパーミッションの設定を追加しています。
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
ファイルを追加する。
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']
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
以下のコードを追加する
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』を親クラスとして継承して作成します。
モデルクラス作成の基本的なコードは以下のとおりです。
#モデルクラスの作成
from django.db import models
class モデル名(models.Model):
フィールド名 = フィールドクラス(・・・,フィールドオプションの指定,・・・)
ここでは、『Account』というモデルクラスを定義して、その中のフィールドオブジェクトとして[fb_token][ig_token]を作成しています。そして、userモデルに紐付けます。
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上でアカウントモデルを確認することができる。
admin.site.register(Account)
Api rootに作ったモデル情報を反映させる
先程作ったserializers.py、viewsets.pyにそれぞれのモデルに対応するコードを書きApi Rootでアカウントの情報を確認できるようにする。
serializerの機能について学びたい人はこちらを確認してください↓↓
[Django REST Framework] Serializer の 使い方 をまとめてみた
ここではAccountSerializerを作っていく
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クラスを作る。
class AccountViewSet(viewsets.ModelViewSet):
queryset = Account.objects.all()
serializer_class = AccountSerializer
AccountViewSetクラスト作れたらそれを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)
すると、こうなる
最後にviewsets.pyにpermissionクラスを設定しよう。
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フィールド）に入れる。