Aufbau einer RSS-Viewer Mit Vue: Teil 2

0
31

Willkommen zu Teil 2 dieser mini-Serie über den Aufbau einer RSS-viewer mit Vue. Im letzten post ging ich durch, wie ich meine gebaut-demo mit Vue.js und Vuetify auf dem front-end und Webtask auf dem back-end. Wenn ich gebaut habe, die erste version, ich wusste, es war genau thatmdash;eine “erste” version. Ich brauchte einige Zeit, um die Arbeit auf ein paar updates, und während ich werden es nicht Wagen, nennen dies eine “perfekte” version, ich glaube, ich habe einige Verbesserungen vorgenommen und ich möchte Sie mit Ihnen teilen.

Artikel-Serie:

  1. Setup und erste iteration
  2. Verfeinerungen und Letzte version (Dieser Beitrag)

Bevor ich loslege, hier sind links zu den abgeschlossenen demo-und source-code.

Demo Ansehen Code Anzeigen

Fühlen Sie sich frei, um Gabel, Datei PRs und bugs zu Inhalt Ihres Herzens!

Der Plan

Wenn ich gemeinsam die erste version, die in Teil 1 habe ich skizziert einige Ideen zur Verbesserung der RSS-reader, einschließlich:

  • Umzug nach Vuex.
  • Ab zum Schalter, um Komponenten in das layout. (Gut, ich war ja schon mit Vuetify Komponenten, aber ich meinte die benutzerdefinierten Komponenten, die für meine Anwendung.)
  • Mit IndexedDB zu speichern feed-Elemente für einen schnelleren Zugriff und offline-Unterstützung.

Das war der plan, und wie die meisten Pläne, die ich nicht unbedingt in der Lage, zu treffen alles in diesem update (und ich werde erklären, warum am Ende). Aber hoffentlich werden Sie sehen, die Verbesserungen im Allgemeinen “bewegen uns in die richtige Richtung” für die Anwendung. Mit diesem aus dem Weg, lasst uns loslegen!

Die Umsetzung Vuex

Ich werde beginnen, diskutieren die größte Veränderung an der Anwendung, die neben der Vuex. Wie gesagt in der früheren post, Vuex beschreibt sich selbst als “state-management-Muster + Bibliothek” auf Ihre “Was ist Vuex” – Seite. Nichts für ungut, Ihre Dokumentation, aber ich hatte eine schwierige Zeit, die Umhüllung meinem Kopf, um genau was damit gemeint ist, vom praktischen Sinn.

Nachdem Sie es in ein paar kleine Projekte, die jetzt, ich komme zu schätzen, was es bietet. Für mich, der Kern Vorteil ist die Bereitstellung einer zentralen Schnittstelle zu Ihren Daten. Wenn ich habe eine basic-Vue-app arbeitet mit einem array von Werten, die ich haben kann, mehrere unterschiedliche Methoden, Sie zu ändern. Was passiert, wenn ich beginnen, haben bestimmte Regeln, die angewendet werden müssen, bevor die Daten verändert? Ein einfaches Beispiel: stellen Sie sich eine Reihe von RSS-feeds. Bevor ich einen neuen hinzufügen, ich möchte sicherstellen, dass es nicht bereits vorhanden ist in der Liste. Wenn ich eine Methode hinzufügt, um die feed-Liste, das ist kein problem, aber wenn ich mehr haben, kann es umständlich zu halten, dass die Logik in der sync über die verschiedenen Methoden. Ich könnte erstellen Sie einfach ein Dienstprogramm, um dies zu tun, aber was passiert, wenn ich noch andere Komponenten im Spiel so gut?

Es ist zwar absolut nicht eine eins-zu-eins-Vergleich habe ich das Gefühl, Vuex erinnert mich daran, wie die Anbieter oder Dienste arbeiten in Eckig. Wenn ich jemals wollen, um Arbeit zu tun, mit beliebigen Daten, ich werde dafür sorgen, dass ich mit einem zentralen Anbieter, um allen den Zugang zu diesen Daten. Das ist, wie ich schaue, Vuex.

Also die große Veränderung, die in dieser Anwendung wurde die Migration aller Daten bezogenen Elemente in einem Speicher. Ich begann, indem die Bibliothek, um meine HTML:

<script src=”https://unpkg.com/vuex”></script>

Juhuu! Auf halbem Weg getan! (OK, vielleicht auch nicht.)

Dann habe ich eine Instanz von mein laden in meiner JavaScript-Datei:

const feedStore = new Vuex.Store({
// viele Sachen hier
});

und enthalten es in meinem Vue app:

lassen Sie app = new Vue({
el: ‘#app’,
Shop:feedStore,
// viele Sachen hier zu…
});

Jetzt kommt der interessante Teil. Jeder Zeit meinen Vue Anwendung Daten benötigt, die in Erster Linie besteht aus der Liste der feeds, und die Elemente, aus denen feeds, es geht um Fragen, die für Sie vorgesehen. So, zum Beispiel, meine feeds-Wert wird nun berechnet:

feeds() {
zurück feedStore.Zustand.feeds;
},

Dies ist nun definiert, in den staatlichen Anteil von meinem Shop:

Status: {
allItems: [],
feeds: [],
selectedFeed: null
},

Beachten Sie, dass die feeds standardmäßig ein leeres array. Ich hatte bisher die erstellte Ereignis meiner Vue app zum Lesen der Daten aus dem localStorage. Nun Frage ich den laden zu machen:

erstellt() {
feedStore.dispatch(‘restoreFeeds’);
},

Zurück in den laden, die Logik ist so ziemlich das gleiche:

restoreFeeds(context) {
lassen Sie feedsRaw = Fenster.”localStorage”.getItem(‘feeds’);
wenn(feedsRaw) {
try {
lassen Sie feeds = JSON.parse(feedsRaw);
Kontext.Zustand.feeds = feeds;
Kontext.Zustand.feeds.forEach(f => {
Kontext.dispatch(‘loadFeed’, f);
});
} catch(e) {
console.error(‘Fehler beim wiederherstellen feed, json’+e);
// bad json oder andere Problem, nuke it
Fenster.”localStorage”.removeItem(‘feeds’);
}
}
},

Ich sage “so ziemlich das gleiche”, nur jetzt mache ich eine bit-Fehler-Prüfung auf den Wert Lesen in “localStorage”. Aber hier ist die entscheidende etwas. Ich habe bereits gesagt, ich konnte in Bezug auf die Umstellung auf IndexedDB, aber in der Theorie konnte ich den Bau einer Dritten version von diese Anwendung mit einer aktualisierten store und mein Vue app nicht kennen den Unterschied. Und das ist, wo ich begann, um wirklich begeistert. Je mehr ich arbeitete, desto mehr “dumm” meine Vue app wurde und die weniger gefesselt es war auf eine bestimmte Implementierung von storage. Schauen wir uns die komplette Vue app jetzt:

lassen Sie app = new Vue({
el: ‘#app’,
Shop:feedStore,
Daten() {
return {
Schublade:true,
addFeedDialog:false,
addURL:”,
urlError:false,
urlRules:[],
selectedFeed:null
}
},
berechnet: {
showIntro() {
wieder dieses.feeds.Länge == 0;
},
feeds() {
zurück feedStore.Zustand.feeds;
},
items() {
zurück feedStore.Getter.Elemente;
}
},
erstellt() {
feedStore.dispatch(‘restoreFeeds’);
},
Methoden:{
addFeed() {
diese.addFeedDialog = true;
},
allFeeds() {
feedStore.dispatch(‘filterFeed’, null);
},
addFeedAction() {
diese.urlError = false;
diese.urlRules = [];

feedStore.dispatch(‘addFeed’, {url:.addURL})
.dann(res => {
diese.addURL = “;
diese.addFeedDialog = false;
})
.catch(e =>{
console.log(‘err hinzufügen’, e);
diese.urlError = true;
diese.urlRules = [“URL existiert bereits.”];
});
},
deleteFeed(feed) {
feedStore.dispatch(‘deleteFeed’, Futtermittel);
},
filterFeed(feed) {
feedStore.dispatch(‘filterFeed’, Futtermittel);
}
}
})

Was Sie bemerken ist, dass so ziemlich alle von der eigentlichen Logik ist jetzt Weg und alles, was ich wirklich tun, hier ist die UI-Sachen. Öffnen eines modalen hier hinzufügen, ein Fehler, und so weiter.

Sie können den kompletten Shop hier, obwohl ich entschuldige mich für lumping alles zusammen in einer Datei.

Hinzufügen einer Komponente

Eine der anderen änderungen, die ich erwähnte, war Anfang zu “component-ize” der view-Schicht. Ich landete nur eine Komponente, feed-Element. Dies reduziert die Gesamtzahl der Zeilen in den HTML-Code bit:

<v-flex-xs12 v-=”item in items” :key=”Element.link”>
<- feed-Element :title=”Element.title” :content=”item.content” :link=”Element.link” :feedtitle=”Element.feedTitle” :Farbe=”Element.feedColor” :posted=”Element.pubDate”></feed-Elements>
</v-flex>

Es ist nicht eine große Veränderung mit allen Mitteln, aber Sie haben es etwas leichter für mich, wenn ich mit der Arbeit an der feed-Anzeige. Da ich nicht mit einem fancy-generator noch, ich mein-Komponente direkt in JavaScript etwa so:

Vue.Komponente(‘feed-item’, {
Requisiten:[
‘color’,’Titel’,’Inhalt’,’link’,’feedtitle’, ‘gepostet’
],
Vorlage: `
<v-card :color=”Farbe”>
<v-card-title PV-title>
<div class=”headline”>{{title}} ({{veröffentlicht | dtFormat}})</div>
</v-card-title>
<v-card-text”>
{{Inhalt | maxText }}
</v-card-text”>
<v-card-Aktionen>
<v-btn-Wohnung target=”_new” :href=”link”>Lesen Sie auf {{feedtitle}}</v-btn>
</v-card-Aktionen>
</v-card ->
`
});

Ich bin nicht etwas zu tun, bei aller Phantasie, die in heremdash;es gibt keine dynamische Logik oder Veranstaltungen oder so etwas, aber ich könnte sicherlich hinzufügen, dass später, wo es Sinn macht. Ich habe schließlich umgehen, um das hinzufügen des Datums und der Uhrzeit der Veröffentlichung. Wenn Sie neugierig sind, wie ich gebaut habe das Formatierungsprogramm verwendet für es, Lesen Sie meine Artikel Bauen Ein i18n-Filter Verwenden Vue.js & Native Web-Specs.”

Die Macht der Löschen!!!

Oh, und ich schließlich Hinzugefügt, die eine Möglichkeit zum löschen der feeds:

Papierkorb-Symbol, FTW!!!

Dieser feuert nur aus einer Methode, die auf der Vue-Objekt, das wiederum löst einen Anruf an den laden, kümmert sich um das entfernen der Futter-und Elemente aus der UI und dann beibehalten. Eine kleine Sache, aber, wow, ich wünschte, ich hätte das in der ersten version bei der Prüfung. Und hier ist eine abschließende Schuss von alles:

Das ehrfürchtige app, in all seiner awesomeness

Die nächsten Schritte… und Was Passiert mit IndexedDB?

Wie ich am Anfang gesagt, diese version ist noch nicht perfekt, aber ich fühle mich definitiv besser. Ich empfehle Ihnen zu teilen, Tipps, Anregungen und bug-reports in den Kommentaren unten oder auf der GitHub-repo.

Also, was passiert ist IndexedDB-Unterstützung? Die Frage, die ich begegnete, war, wie man richtig initialisieren der Datenbank. Vuex speichert nicht das Konzept erstellt Prozess. Ich könnte etwas getan haben, wie diese:

// dummy-code für das abrufen von feeds
dispatch(‘getDB’)
.dann ist(() =>
// irgendwas tun
);

Wo die getDB Aktion wieder ein Versprechen und Griffen dabei eine einmalige IndexedDB öffnen und speichern den Wert in dem Zustand. Ich kann ihm eine Chance geben, später, und wieder, was ich Liebe, Vuex ist, dass ich weiß, ich kann das bedenkenlos tun, ohne sich mit dem rest der Anwendung.

Artikel-Serie:

  1. Setup und erste iteration
  2. Verfeinerungen und Letzte version (Dieser Beitrag)

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!