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>.

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

//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 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>

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

# python manage.py loaddata fixture.json

# python manage.py runserver