Как использовать Axios / Vue.js для вызова данных из бэкэнда SQLite / Django? - PullRequest
0 голосов
/ 10 ноября 2019

Status Quo:

Всякий раз, когда пользователь посещает мое веб-приложение, Axios обращается к стороннему API для получения данных и заполнения внешнего интерфейса этими данными, используя v-for.

Вывод: у меня есть один вызов API на посетителя веб-сайта.

Желаемый статус:

Всякий раз, когда пользователь посещает мое веб-приложение, Axios получить данные из базы данных SQLite , которая сама заполняется каждые XX секунд питоном request для сокращения вызовов API.

Вопросы:

СейчасЯ реализовал базу данных SQLite, используя Django models и views. Пока все хорошо, API регулярно выбирается и корректно обновляет таблицу базы данных.

1.) Как теперь я могу вызывать данные в базе данных с помощью Axios? Поскольку, согласно моим исследованиям, Аксиосу как-то нужно вызвать view, а view будет вызывать данные из базы данных, это правильно?

2.) Если Axios необходимо вызвать view, нужен ли мне другой файл view.py, который вызывает базу данных? Если бы я вставил нужную функцию view в существующий файл view.py, он бы инициировал еще один вызов API, не так ли?

3.) И как я могу реализоватьссылка на функцию view на Axios? Вместо URL-адреса стороннего API я бы просто использовал путь к файлу view?

Quotes_app / Views.py:

from django.shortcuts import render
from Quotes_app.models import ratesEUR

import json
import requests

response = requests.get("http://data.fixer.io/api/latest?access_key=XXXX&base=EUR")

rates_EUR = json.loads(response.content.decode('utf-8'))
timestamp = rates_EUR['timestamp']
base = rates_EUR['base']
date = rates_EUR['date']
rates = rates_EUR['rates']
id = 1

rates_new = ratesEUR(id=id, timestamp=timestamp, base=base, date=date, rates=rates)
rates_new.save()


def render_Quotes_app(request, template="Quotes_app/templates/Quotes_app/Quotes_app.html"):
    return render(request, template)

Quotes_app / models.py:

from django.db import models


class ratesEUR(models.Model):
    timestamp = models.CharField(max_length=10)
    base = models.CharField(max_length=3)
    date = models.DateField(auto_now=False, auto_now_add=False)
    rates = models.CharField(max_length=8)

    def __str__(self):
        return self.base

Vue.js / axios: (на данный момент непосредственно загружает API)

Vue.config.devtools = true;

var app = new Vue({
  delimiters: ['[[', ']]'],
  el: '.eurQuotesWrapper',
  data() {
    return {
      rates: [],
    };
  },
  computed: {
    rates1() {
      const ratesArr1 = Object.entries(this.rates);
      const ret = ratesArr1.reduce((a, c, i, d) => {
        if (i < d.length / 2) a[c[0]] = c[1];
        return a;
      }, {});
      console.log('rates1', ret);
      return ret;
    },
    rates2() {
      const ratesArr2 = Object.entries(this.rates);
      const ret = ratesArr2.reduce((a, c, i, d) => {
        if (i >= d.length / 2) a[c[0]] = c[1];
        return a;
      }, {});
      console.log('rates2', ret);
      return ret;
    }
  },
  created() {
    axios
      .get("http://data.fixer.io/api/latest?access_key=XXXX&base=EUR")
      .then(response => {
        this.rates = response.data.rates;
        console.log(this.rates);
        for(key in this.rates) {
          this.rates[key] = new Intl.NumberFormat('de-DE', {
            minimumFractionDigits: 5,
            maximumFractionDigits: 5
          }).format(this.rates[key]);
        }
        console.log(this.rates);
      });
    }
});

Заранее большое спасибо за помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...