[JAVA] Framework Django REST avec Vue.js

</ i> Introduction

J'étais curieux de connaître ** le framework Django REST ** et ** Vue.js **, alors j'ai essayé de les combiner.

</ i> Présentation de la configuration / du fonctionnement

Au lieu d'utiliser la fonction de modèle html de Django, renvoyez les données HTML sous forme de fichier statique et affichez une liste d'informations obtenues à partir du navigateur via l'API Rest avec Vue.js. (DB est SQLite3, les exemples de données sont le nombre d'actions de mon article.)

vuesとrest.png

</ i> Environnement d'exploitation

Python est ** Python 3.5.1 ** Le package est ci-dessous

# pip3 freeze
Django==1.10.5
django-filter==1.0.1
djangorestframework==3.5.3

Vue.js et axios sont récupérés par CDN, et la version au moment de la publication (2017/1/30) est la suivante.

  • Vue.js: 2.1.10
  • axios: 0.15.3

</ i> Essayez

Créer un projet Django pour le moment

L'habituel.

# django-admin startproject qiitalist
# cd qiitalist/
# python manage.py startapp stocks

Formulaire rempli

La composition ressemble à ceci. (1) - (6) Nous examinerons la mise en œuvre individuellement. (▲ = Fichier non utilisé cette fois)

qiitalist

│ fixture.json # ② Modèle ajouté │ manage.py │ ├─qiitalist │ │ settings.py # ① Ajouter des paramètres │ │ urls.py # ⑤ Paramètre d'URL ajouté │ │ wsgi.py # ▲ │ │ init.py │ │ │ └─ static # ⑥ Créer un fichier statique │ vue_grid.css │ vue_grid.html │ vue_grid.js │ └─stocks │ admin.py # ▲ │ apps.py # ▲ │ models.py # ② Ajouter un modèle │ tests.py # ▲ │ serializer.py ③ Ajouter un sérialiseur │ urls.py # ⑤ Paramètre d'URL ajouté │ views.py # ④ Vue ajoutée │ init.py │ └─migrations

① Ajouter des paramètres

Ajout d'applications à implémenter et de paramètres du Framework REST

settings.py


#Extrait uniquement pour l'ajout
#Ajouter une application
INSTALLED_APPS += [
    'stocks',
    'rest_framework',
]
#Paramètres de l'API REST (filtres, pagination)
REST_FRAMEWORK = {
    'DEFAULT_FILTER_BACKENDS': ('rest_framework.filters.DjangoFilterBackend',),
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
    'PAGE_SIZE': 5
}
# views.Définir le chemin utilisé par py
PACKAGE_ROOT = os.path.abspath(os.path.dirname(__file__))
STATICFILES_DIRS = (os.path.join(PACKAGE_ROOT, 'static'),)

② Ajouter un modèle

Préparez le modèle de données à publier par l'API REST et les données initiales (fixture).

models.py


from django.db import models


class Stock(models.Model):

    class Meta:
        db_table = "stock"
    id = models.AutoField(primary_key=True)
    title = models.TextField()
    stock_count = models.IntegerField()

fixture.json


[
  {
    "model": "stocks.stock",
    "pk": 1,
    "fields": {
      "title": "J'ai commencé l'apprentissage automatique avec Python(J'ai aussi commencé à poster sur Qiita)Préparation des données",
      "stock_count": 29
    }
  },
  {
        "model": "stocks.stock",
        "pk": 2,
        "fields": {
          "title": "Création de carte Ramen avec Scrapy et Django",
          "stock_count": 23
     }
  },
  {
      "model": "stocks.stock",
      "pk": 3,
      "fields": {
        "title": "J'ai commencé l'apprentissage automatique avec le prétraitement des données Python",
        "stock_count": 22
     }
  },
  {
       "model": "stocks.stock",
       "pk": 4,
       "fields": {
         "title": "Application de notification de message Rabbit MQ avec Growl en Python ~ avec Raspeye et Julius ~",
         "stock_count": 3
     }
   }
]

③ Ajouter un sérialiseur

Ajout de la définition de Serialzier qui sérialise le modèle.

serializers.py


from rest_framework import serializers
from stocks.models import Stock


class StockSerializer(serializers.ModelSerializer):

    class Meta:
        model = Stock
        fields = ("id", "title", 'stock_count')

④ Ajouter une vue

Ajout de la définition de vue.

views.py


import os

from django.conf import settings
from django.http.response import HttpResponse
from rest_framework import viewsets

from stocks.models import Stock
from stocks.serializer import StockSerializer

#Vue qui renvoie un fichier statique
def index(_):
    #Lorsqu'il est traité comme un modèle Django avec rendu, etc., "{{}}Est Vue.Il disparaît avant de passer à js.
    #Je n'ai pas pu trouver une bonne solution, alors je l'ai évitée en ouvrant et en jetant le fichier sous statique.
    html = open(
        os.path.join(settings.STATICFILES_DIRS[0], "vue_grid.html")).read()
    return HttpResponse(html)

#Ensembles de vues de l'API Rest
class StockViewSet(viewsets.ModelViewSet):
    queryset = Stock.objects.all()
    serializer_class = StockSerializer
    #Spécifiez les champs pouvant être utilisés dans les filtres API
    filter_fields = ("id", "title", 'stock_count')

⑤ Ajouter des paramètres d'URL

Divisé par parent (qiitaliste) et enfant (actions).

urls.py(qiitalist)


from django.conf.urls import include, url
from stocks.urls import urlpatterns as qiitalist_url

urlpatterns = [
    url(r'^qiita/', include(qiitalist_url)),
]

urls.py(stocks)


from django.conf.urls import include, url
from rest_framework import routers

from stocks.views import StockViewSet, index

router = routers.DefaultRouter()
router.register(r'stock', StockViewSet)

urlpatterns = [
    # qiita/api/stock/
    url(r'api/', include(router.urls)),
    # qiita/
    url(r'', index, name='index'),
]

⑥ Création de fichier statique

Imitez l'exemple de composant de grille de https://jp.vuejs.org/v2/examples/grid-component.html </ font>.

vue_grid.css


/*Omis car il s'agit d'une copie*/

vue_grid.js


//La partie de montage du composant supérieur est une copie, elle est donc omise.
//Modifié pour obtenir les données spécifiées de l'API Rest uniquement pour la nouvelle partie Vue
var demo = new Vue({
      el: '#demo',
      data: {
        searchQuery: '',
        gridColumns: ["id", "title", 'stock_count'], //Changement
        gridData: [] //Les données sont récupérées par l'API, supprimez-les
      },
      created: function(){ //Prenez-le de l'API Rest et ajoutez-le à gridData.
          var self = this //Il semble nécessaire en termes de portée (ce.gridData.Push entraînera une erreur. )
          axios.get('/qiita/api/stock/')
            .then(function(response){
              for(var i = 0; i < response.data.results.length; i++){
                      self.gridData.push(response.data.results[i]);
                  }
            });
          }
    })

vue_grid.html


<!-- vue_grid.html est légèrement modifié en fonction des éléments affichés.-->
<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Vue</title>
  <!--Chargement CSS-->
  <link rel="stylesheet" type="text/css" href="/static/vue_grid.css">

  <!-- JS(CDN)Lis-->
  <!-- Vue.js -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- Axios(vue-Au lieu de ressource)-->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script type="text/x-template" id="grid-template">
  <table>
    <thead>
      <tr>
        <th v-for="key in columns"
          @click="sortBy(key)"
          :class="{ active: sortKey == key }">
          {{ key | capitalize }}
          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="entry in filteredData">
        <td v-for="key in columns">
          {{entry[key]}}
        </td>
      </tr>
    </tbody>
  </table>
</script>

<div id="demo">
  <form id="search">
    Search <input name="query" v-model="searchQuery">
  </form>
  <demo-grid
    :data="gridData"
    :columns="gridColumns"
    :filter-key="searchQuery">
  </demo-grid>
</div>
</body>

<!--JS lire-->
<script src="/static/vue_grid.js"></script>
</html>

</ i> Essayez de le déplacer.

Créez un DB.

# python manage.py makemigrations
# python manage.py migrate

Saisissez les données initiales.

# python manage.py loaddata fixture.json

Démarrez le serveur.

# python manage.py runserver

Accédez à la console API http: // localhost: 8000 / qiita / api / depuis votre navigateur.

apitop.png

Obtenez une liste des stocks sur http: // localhost: 8000 / qiita / api / stock /. (Jusqu'à 5 articles peuvent être acquis et affichés dans le réglage de pagination de ①. * Remarque: Il n'y a pas de signification particulière car le stock enregistré est de 4 articles)

apistock.png

Accédez à http: // localhost: 8000 / qiita / et essayez de l'afficher.

qiitatop.png

</ i> Impressions

Pour le moment, j'ai pu faire une pièce mobile, alors j'ai commencé à me motiver à étudier. Vue.js est presque une copie, mais j'ai pensé qu'il était plus facile à utiliser (intuitivement) que AngularJS et React.js. Il est fatal que le nombre de données traitées soit faible. Ce n'est pas intéressant, alors augmentons le nombre d'articles ...

</ i> Référence

Recommended Posts