Entwicklung einer Vue Element-Frontend-Anwendung zum Abrufen von Backend-Daten

<Vorlage>
  
</Vorlage>

<Skript>
Standard exportieren {

}
</Skript>

<Stil>

</Stil>

importiere { GetTopBanners, GetProductList } von '@/api/product'

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {};
  },
  Methoden: {
    //Komponentenmethode},
  betrachten:
    // watch eignet sich gut für Szenarien, in denen ein Datum mehrere Daten beeinflusst},
  berechnet: {
    // computed ist gut im Umgang mit Szenarien, in denen ein Datum von mehreren Daten beeinflusst wird},
  vorErstellen: function() {
    // Wird nach der Initialisierung der Instanz und vor der Datenbeobachter- und Ereignis-/Watcher-Konfiguration aufgerufen.
  },
  erstellt: function() {
    // Wird aufgerufen, nachdem die Instanz erstellt wurde. In diesem Schritt hat die Instanz die folgenden Konfigurationen abgeschlossen: Datenbeobachter, Eigenschafts- und Methodenoperationen und Überwachungs-/Ereignisrückrufe. Allerdings hat die Mounting-Phase noch nicht begonnen und die Eigenschaft $el ist derzeit nicht sichtbar.
  },
  vorMount: function() {
    // Wird aufgerufen, bevor das Mounten beginnt: Die relevante Renderfunktion wird zum ersten Mal aufgerufen.
  },
  montiert: Funktion () {
    // Der Ereignis-Hook wird ausgeführt, nachdem das kompilierte HTML auf der Seite bereitgestellt wurde. // el wird durch das neu erstellte vm.$el ersetzt und der Hook wird aufgerufen, nachdem er auf der Instanz bereitgestellt wurde.
    // Diese Hook-Funktion macht normalerweise einige Ajax-Anfragen, um Daten für die Dateninitialisierung abzurufen console.log("Home done");
  },
  vorUpdate: function() {
    // Wird aufgerufen, wenn Daten aktualisiert werden, bevor der virtuelle DOM neu gerendert und gepatcht wird. Sie können den Status in diesem Hook weiter ändern, wodurch kein zusätzliches erneutes Rendering ausgelöst wird.
  },
  aktualisiert: function() {
    // Dieser Hook wird aufgerufen, nachdem der virtuelle DOM aufgrund von Datenänderungen neu gerendert und gepatcht wurde.
    // Wenn dieser Hook aufgerufen wird, wurde das Komponenten-DOM bereits aktualisiert, sodass Sie jetzt Vorgänge ausführen können, die vom DOM abhängen. In den meisten Fällen sollten Sie jedoch eine Statusänderung während dieser Zeit vermeiden, da dies zu einer Endlosschleife bei der Aktualisierung führen kann.
    // Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.
  },
  vorZerstören: Funktion() {
    // Wird aufgerufen, bevor die Instanz zerstört wird. In diesem Schritt ist die Instanz noch vollständig nutzbar.
  },
  zerstört: Funktion() {
    // Wird aufgerufen, nachdem die Vue-Instanz zerstört wurde. Nach dem Aufruf wird die Bindung von allem, worauf die Vue-Instanz zeigt, aufgehoben, alle Ereignis-Listener werden entfernt und alle untergeordneten Instanzen werden zerstört. Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.
  }
};
</Skript>

Standard exportieren {
  Daten() {
    zurückkehren {
      aktiverName: "alle",
      aktuellesDatum: neues Datum(),
      Banner: [],
      Produktliste: [],
      Seiteninfo: {
        Seitenindex: 1,
        Seitengröße: 10,
        gesamt: 0
      },
      Produkttyp: „alle“
    };
  },
  erstellt() {
    dies.loadbanners()
    dies.getlist()
  },

<el-row :gutter="20" style="padding:20px">
  <el-button type="primary" icon="el-icon-search" :plain="producttype !='all'" @click="handleClick($event, 'all')">Alle</el-button>
  <el-button type="success" icon="el-icon-search" :plain="producttype !='1'" @click="handleClick($event, '1')">Framework-Produkte</el-button>
  <el-button type="warning" icon="el-icon-search" :plain="producttype !='2'" @click="handleClick($event, '2')">Softwareprodukte</el-button>
  <el-button type="danger" icon="el-icon-search" :plain="producttype !='3'" @click="handleClick($event, '3')">Entwicklungskomponente</el-button>
</el-row>

<el-col: span="4"><div Klasse="Gitterinhalt bg-purple" />
<el-card Klasse="Box-Karte">
  <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
  <div Stil="Padding: 14px;">
    <span>Leckere Burger</span>
    <div Klasse="bottom clearfix">
      <time class="time">Preis: ￥200</time>
      <el-button type="text" class="button" @click="loadbanners()">Aktionsschaltfläche</el-button>
    </div>
  </div>
</el-Karte>
</el-col>

<el-col v-for="(Artikel, Index) in Produktliste" :key="index" :span="4" style="min-width:250px">
<div Klasse="Rasterinhalt bg-lila">
  <el-card Klasse="Box-Karte">
    <img :src="item.Picture" Klasse="Bild" Stil="Breite:200px;Höhe:200px">
    <div Stil="Padding: 14px;">
      <span>{{ Artikel.Produktname }}</span>
      <div Klasse="bottom clearfix">
        <!-- <time class="time">Preis: ￥{{ item.Preis }}</time> -->
        <el-button type="text" class="button">Bedienungstaste</el-button>
      </div>
    </div>
  </el-Karte>
</div>
</el-col>

 <el-pagination
      Hintergrund
      Layout = "Zurück, Pager, Weiter"
      :Seitengrößen="[10,20,50]"
      :total="Seiteninfo.total"
      :current-page="Seiteninfo.Seitenindex"
      :Seitengröße="Seiteninfo.Seitengröße"
      @size-change="Größenänderungsgriff"
      @current-change="AktuelleÄnderung handhaben"
    />

Liste abrufen () {
      //Paging-Abfragebedingungen erstellen var param = {
        Typ: dieser.Produkttyp === 'alle' ? '' : dieser.Produkttyp,
        Seitenindex: diese.Seiteninfo.Seitenindex,
        Seitengröße: this.pageinfo.pagesize
      };

      this.listLoading = wahr
      // Eine Datenabfrage starten und den Wert der lokalen Daten festlegen GetProductList(param).then(data => {
        diese.produktliste = daten.liste
        this.pageinfo.total = Daten.Gesamtzahl
        this.listLoading = falsch
      })
    },

// Beim Klicken auf eine Kategorie, Abfrage handleClick(e, Typ) {
      // console.log(e, Typ);

      this.producttype = Typ
      diese.pageinfo.pageindex = 1;

      dies.getlist()
    },
    // Abfrageverarbeitung nach Änderung der Seitenanzahl handleSizeChange(val) {
      console.log(`${val} Elemente pro Seite`);
      this.pageinfo.pagesize = Wert;
      dies.getlist()
    },
    // Abfrageverarbeitung nach Seitenzahländerung handleCurrentChange(val) {
      console.log(`Aktuelle Seite: ${val}`);
      this.pageinfo.pageindex = Wert;
      dies.getlist()
    }