VUE+Express+MongoDB-Frontend- und Backend-Trennung zur Realisierung einer Notizwand

Ich habe vor, eine Reihe von Haftnotizwänden zu realisieren. Dieses Ding ist einfach, wenn es einfach ist, und es hat viele Funktionen, wenn es komplex ist. Ich werde den Entwicklungsprozess von Grund auf aufzeichnen. Ich hoffe, dass dieses Projekt am Ende perfektioniert werden kann.

Zunächst einmal haben wir eine Architektur mit getrenntem Front-End und Back-End. Wir verwenden Vue für das Front-End, Express für das Back-End und MongoDB für die Datenbank.

Überlegen Sie im Kopf, welche Art von Prototyp Sie gleich zu Beginn fertigstellen möchten. Lassen wir die Benutzeranmeldungsverwaltung einmal beiseite, der Fokus liegt natürlich auf dem Hinzufügen, Löschen, Ändern, Prüfen und Anzeigen von Notizen!

Anschließend implementieren wir „Unit-01“, um Notizen einzeln anzuzeigen, hinzuzufügen, zu ändern und zu löschen.

1. Zuerst muss der Stil gezeichnet werden.

Machen Sie sich nicht zuerst Gedanken über die Benutzeroberfläche, sondern lösen wir zuerst das reine Front-End-Problem. Lassen Sie uns eine anständige „Tafel“ erstellen. Übrigens gibt es hier eine Website https://www.transparenttextures.com/, auf der Sie Ihr bevorzugtes Tapetenmaterial generieren können. Wir haben es also:

OK, wir werden unsere Haftnotizen an diese Tafel „kleben“. Das ist der CSS-Kram. Es hängt von Ihren künstlerischen Fähigkeiten ab. Ich mache es einfach mal so nebenbei:

Wichtig ist, dass die Haftnotizen auf dieser Hintergrundtafel an beliebiger Stelle angebracht werden können, sodass Benutzer die Position der Haftnotizen ziehen und aufzeichnen können.

Stellen Sie das Notiz-Div also auf die Position „absolut“ ein und verwenden Sie dann „oben: y px“ und „links: x px“, um die Positionierung zu erreichen.

Betrachten wir also die Eigenschaften eines einzelnen Notenobjekts:

x: der Abstand zwischen dem Haftnotizzettel und der linken Seite des Containers, der Wert von left

y: Der Abstand zwischen dem Haftnotizzettel und der oberen Kante des Containers, der Wert von top

txt: Inhalt der Notiz

Titel: Titel

Farbe:

bg: "", // Hintergrundfarbe

Pin: "" // Büroklammerfarbe

}

Als nächstes implementieren wir das Ziehen von Haftnotizen:

(1) Binden Sie die Mausklick-Funktion an das Div der Notiz:

@mousedown="mousedown($event)"

(2) Implementierung des Ziehens:

mousedown: Funktion(Ereignis) {
      lass _this = dies;
      wenn (!dies.istBearbeiten) {
        dies.startX = ereignis.x;
        dies.startY = Ereignis.y;
        diese.Note.Verschieben = wahr;
        document.onmousemove = Ereignis => {
          wenn (!_this.note.moving) false zurückgibt;
 
          lass dx = event.x - _this.startX;
          lass dy = event.y - _this.startY;
 
          Wenn (
            _diese.note.x + dx <= 0 ||
            _this.note.x + dx >= _this.width - 250 ||
            _diese.Anmerkung.y + dy <= 60
          ) {
            gibt false zurück;
          }
 
          _diese.note.x1 = _diese.note.x + dx;
          _diese.Note.y1 = _diese.Note.y + dy;
        };
        document.onmouseup = () => {
          wenn (!dies.istBearbeiten) {
            diese.Note.Verschieben = falsch;
            diese.Note.x = diese.Note.x1;
            diese.Note.y = diese.Note.y1;
            dies.saveNote();
            Dokument.onmousemove = null;
            Dokument.onmouseup = null;
          }
        };
      }
    }

Die Kopien der ursprünglichen Datensätze x und y sind x1,y1. Verwenden Sie startX und startY, um die Anfangsposition des Mausklicks aufzuzeichnen, berechnen Sie dann den Versatz mit dem Originalwert während des Ziehvorgangs, weisen Sie ihn x1 und y1 zur Positionierung zu und aktualisieren Sie x und y auf den Endwert, wenn die Maus angehoben wird.

Der entscheidende Punkt hierbei ist, dass bei Verwendung von @mousemove die Haftnotiz der Maus nicht rechtzeitig folgen kann, wenn die Maus zu schnell gezogen wird. In diesem Fall bewegt sich die Maus aus dem Div heraus, wodurch das Ziehen fehlschlägt.

Daher binden wir hier nur „mousedown“ an das Ziel und „mousemove“ und „mouseup“ an das Dokument, sodass wir uns keine Sorgen machen müssen, dass die Haftnotiz hängen bleibt, wenn sich die Maus zu schnell bewegt.

2. Wie bearbeite ich den Inhalt einer Notiz?

Hier gestalten wir einen Button. Wenn man mit der Maus darüber fährt, wird der Button angezeigt. Mit einem Klick auf den Bearbeiten-Button wird der Notizinhalt editierbar. Beim Verwischen des Inhaltsbereichs wird dieser automatisch gespeichert.

Da die Div-Notiz kein Unschärfeereignis hat, ändern Sie im Bearbeitungszustand den Inhaltsbereich in einen Textbereich:

 <div
      Klasse = "Notizeninhalt"
      v-if="!istBearbeiten"
      v-html="Inhalt"
      :ref="'Anmerkung' + Index"
    ></div>
    <el-Eingabe
      v-sonst
      Klasse = "Notizinhalt mein Textbereich"
      Typ="Textbereich"
      Platzhalter="Bitte Inhalt eingeben"
      :autosize="{ minRows: 10 }"
      v-Modell="Inhalt"
      :ref="'Anmerkung' + Index"
      @blur="Änderungshandle"
    ></el-Eingabe>

Natürlich muss der Inhalt hier mit dem innerHTML-Ergebnis gespeichert werden, da wir Stile wie Zeilenumbrüche, Wagenrückläufe und Leerzeichen speichern möchten, um eine konsistente Anzeige zu gewährleisten. Daher müssen wir den bearbeiteten String beim Abrufen durch einen regulären Ausdruck ersetzen:

dieser.Inhalt = dieser.Inhalt

.replace(/\r\n/g, "<br/>")

.replace(/\n/g, "<br/>")

.replace(/\s/g, "&nbsp;");

Wenn es editierbar wird, müssen wir das Format in einen Textbereich konvertieren:

dieser.Inhalt = dieser.Inhalt

.replace(/&nbsp;/g, " ")

.replace(/<br\/>/g, "\r\n");

3. Jetzt ist es Zeit, die Schnittstelle anzupassen

Das Express-Framework wird hier nicht beschrieben. Wir verwenden Mongoose, um eine Verbindung zur MongoDB-Datenbank herzustellen, einen Controller-Ordner zu erstellen und note.js hinzuzufügen, um Datenbankvorgänge zu implementieren:

// controller/note.js
const Notizen = erfordern("../model/notes");
var mongoose = erforderlich('mongoose');
modul.exporte = {
  updateNote(Objekt) {
    wenn (!obj.params._id) {
      obj.params._id = neues mongoose.mongo.ObjectID();
    }
    gibt Notes.findByIdAndUpdate( zurück
      obj.params und obj.params._id,
      {
        $set: Objekt.Body
      },
      {
        Upsert: wahr,
        neu: wahr,
        setDefaultsOnInsert: true
      }
    )
      .then(Funktion (neuesObjekt) {
        returniere Promise.resolve({
          Status: 200,
          Nachricht: "OK"
        });
      })
      .catch((err) => {
        gibt Promise.reject(err) zurück;
      });
  },
  getNotes() {
    returniere neues Promise(Funktion (auflösen, ablehnen) {
      Notizen.find()
        .then(Funktion (neuesObjekt) {
          auflösen (neues Objekt);
        })
        .catch((err) => {
          ablehnen(fehler);
        });
    });
  },
  deleteNoteById(_id) {
    gibt Notes.findByIdAndDelete(_id) zurück
      .then(Funktion (neuesObjekt) {
        returniere Promise.resolve({
          Status: 200,
          Nachricht: "OK"
        });
      })
      .catch((err) => {
        gibt Promise.reject(err) zurück;
      });
  }
};

Hier schreiben wir zunächst eine einfache Version und können die zurückgegebenen Ergebnisse weiter zusammenfassen.

Erstellen Sie einen Modellordner und fügen Sie note.js hinzu, um das Schema zu speichern:

// Modell/Note.js
var mongoose = erfordern("mongoose");
var Schema = mongoose.Schema;
 
//Deklariere ein Dataset-Objekt var noteSchema = new Schema({
  txt: {
    Typ: Zeichenfolge,
    erforderlich: false
  },
  X: {
    Typ: Nummer
  },
  und: {
    Typ: Nummer
  },
  Farbe:
    Typ: Objekt
  },
  Titel:{
    Typ: Zeichenfolge,
    Standard: „unbenannt“
  },
  Erstellungszeit: {
    Typ: Datum,
    Standard: Date.now
  }
});
mongoose.set("useCreateIndex", true);
mongoose.set('useFindAndModify', false);
// Datenmodell verfügbar machen module.exports = mongoose.model("Notes", noteSchema, "notes");

Daher sollte automatisch gespeichert werden, wenn das Ziehen beendet wird und wenn die Haftnotiz verwischt.

Anschließend werden unsere Notizen in der Datenbank gespeichert:

So entstand ein vorläufiger Prototyp. Wir erstellten Notizen, zogen sie, bearbeiteten sie und löschten sie. Diese wurden alle in Echtzeit gespeichert und die Position der Notizen konnte nach dem Aktualisieren der Seite beibehalten werden.

Schauen wir uns die Wirkung an:

Als nächstes gibt es noch viele Aufgabenlisten, die nicht erledigt wurden. Wenn Sie beiläufig darüber nachdenken, gibt es viele Funktionen, die verbessert werden können, z. B.: Benutzerverwaltung, Zeitklassifizierung, Abfrage mit mehreren Bedingungen, Unterstützung von Notizinhalten für Rich Text, Unterstützung von Notizinhalten für benutzerdefinierte Stile, Memo-Erinnerungsfunktion usw.

Machen Sie weiter so, es ist noch ein langer Weg~~~~

Sie können auch auf die Cavans-Minispielserie achten:

《VUE implementiert einen Flappy Bird~~~》

《VUE+Canvas realisiert Flipper- und Brick-Breaking-Spiel für den Desktop》

《VUE+Canvas implementiert ein Tippspiel von Thunder Fighter》

Dies ist das Ende dieses Artikels über die Trennung von Front-End und Back-End von VUE+Express+MongoDB zur Realisierung einer Haftnotizwand. Weitere verwandte Inhalte zur Trennung von Front-End und Back-End von Vue zur Haftnotizwand finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!