Erstellen Sie vorerst ein Django-Projekt

Das Übliche.

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

Vollständiges Formular

Die Komposition sieht so aus. (1) - (6) Wir werden die Umsetzung einzeln betrachten. (▲ = Datei diesmal nicht verwendet)

qiitalist

│ fixture.json # ② Modell hinzugefügt │ manage.py │ ├─qiitalist │ │ settings.py # ① Einstellungen hinzufügen │ │ urls.py # ⑤ URL-Einstellung hinzugefügt │ │ wsgi.py # ▲ │ │ init.py │ │ │ └ statisch # ⑥ Statische Datei erstellen │ vue_grid.css │ vue_grid.html │ vue_grid.js │ └─stocks │ admin.py # ▲ │ apps.py # ▲ │ models.py # ② Modell hinzufügen │ tests.py # ▲ │ serializer.py ③ Serializer hinzufügen │ urls.py # ⑤ URL-Einstellung hinzugefügt │ views.py # ④ Ansicht hinzugefügt │ init.py │ └─migrations

① Einstellungen hinzufügen

Apps zum Implementieren und REST Framework-Einstellungen hinzugefügt.

settings.py

#Auszug nur für den Zusatz
#App hinzufügen
INSTALLED_APPS += [
    'stocks',
    'rest_framework',
]
#REST-API-Einstellungen (Filter, Paging)
REST_FRAMEWORK = {
    'DEFAULT_FILTER_BACKENDS': ('rest_framework.filters.DjangoFilterBackend',),
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.LimitOffsetPagination',
    'PAGE_SIZE': 5
}
# views.Definieren Sie den von py verwendeten Pfad
PACKAGE_ROOT = os.path.abspath(os.path.dirname(__file__))
STATICFILES_DIRS = (os.path.join(PACKAGE_ROOT, 'static'),)

② Modell hinzufügen

Bereiten Sie das von der REST-API zu veröffentlichende Datenmodell und die Anfangsdaten (Fixture) vor.

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": "Ich habe mit Python angefangen, maschinell zu lernen(Ich habe auch angefangen, bei Qiita zu posten)Datenaufbereitung",
      "stock_count": 29
    }
  },
  {
        "model": "stocks.stock",
        "pk": 2,
        "fields": {
          "title": "Ramen-Kartenerstellung mit Scrapy und Django",
          "stock_count": 23
     }
  },
  {
      "model": "stocks.stock",
      "pk": 3,
      "fields": {
        "title": "Ich habe mit der maschinellen Vorverarbeitung von Python Data begonnen",
        "stock_count": 22
     }
  },
  {
       "model": "stocks.stock",
       "pk": 4,
       "fields": {
         "title": "Rabbit MQ Nachrichtenbenachrichtigungs-App mit Growl in Python ~ mit Raspeye und Julius ~",
         "stock_count": 3
     }
   }
]

③ Serializer hinzufügen

Die Definition von Serialzier, die das Modell serialisiert, wurde hinzugefügt.

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

④ Ansicht hinzufügen

Ansichtsdefinition hinzugefügt.

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

#Ansicht, die eine statische Datei zurückgibt
def index(_):
    #Bei Verarbeitung als Django-Vorlage mit Render usw. "{{}}Ist Vue.Es verschwindet, bevor es an js übergeht.
    #Ich konnte keine gute Lösung finden und habe sie vermieden, indem ich die Datei geöffnet und statisch geworfen habe.
    html = open(
        os.path.join(settings.STATICFILES_DIRS[0], "vue_grid.html")).read()
    return HttpResponse(html)

#Rest API Viewssets
class StockViewSet(viewsets.ModelViewSet):
    queryset = Stock.objects.all()
    serializer_class = StockSerializer
    #Geben Sie Felder an, die in API-Filtern verwendet werden können
    filter_fields = ("id", "title", 'stock_count')

⑤ URL-Einstellungen hinzufügen

Geteilt nach Eltern (Qiitalist) und Kind (Aktien).

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

⑥ Statische Dateierstellung

Imitieren Sie das Beispiel für eine Rasterkomponente von https://jp.vuejs.org/v2/examples/grid-component.html </ font>.

/*Ausgelassen, da es sich um eine Kopie handelt*/

//Das obere Komponentenmontageteil ist eine Kopie, daher wird es weggelassen.
//Geändert, um die angegebenen Daten nur für den neuen Vue-Teil von der Rest-API abzurufen
var demo = new Vue({
      el: '#demo',
      data: {
        searchQuery: '',
        gridColumns: ["id", "title", 'stock_count'], //Veränderung
        gridData: [] //Daten werden von der API abgerufen, löschen Sie sie also
      },
      created: function(){ //Nehmen Sie es aus der Rest-API und fügen Sie es gridData hinzu.
          var self = this //Es scheint in Bezug auf den Umfang notwendig zu sein (dies.gridData.Push führt zu einem Fehler. )
          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 wird entsprechend den Anzeigeelementen leicht modifiziert.-->
<!DOCTYPE html>
<html>
<head>
  <title>Welcome to Vue</title>
  <!--CSS wird geladen-->
  <link rel="stylesheet" type="text/css" href="/static/vue_grid.css">

  <!-- JS(CDN)Lesen-->
  <!-- Vue.js -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- Axios（vue-Anstelle von 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 gelesen-->
<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