Informationen zum Schreiben eines Blogs mit Vue-Laravel zur Trennung von Front-End und Back-End

In diesem Artikel wird hauptsächlich die Methode zur Trennung von Front-End und Back-End beim Schreiben eines Blogs vorgestellt. Jetzt kann ich ihn mit Ihnen teilen 🎜>

Während dieser Zeit habe ich Vue kennengelernt und einen kleinen Blog geschrieben. Dabei bin ich auf viele Probleme gestoßen. Ich werde es hier zusammenfassen und einen Code-Link anhängen habe den Domainnamen schon gekauft, also kannst du dir einfach den Code ansehen)

https://github.com/rencong/bl...
https://github.com/rencong/bl.. .

---

1. Paginierung

Ich weiß, dass es im Internet viele gut geschriebene Paginierungskomponenten gibt, aber meine ursprüngliche Absicht war es zu lernen und nicht schnell zu sein, also habe ich es geschrieben Das Problem, auf das ich gestoßen bin, war die

zweiseitige Bindung zwischen Komponenten. Ich rufe die Paginator-Komponente auf der Listenseite auf und übergebe ihr die Paginierungsinformationen. Dadurch ändern sich die Eigenschaften der Paginator-Komponenten-Requisiten nicht.
Der Grund dafür ist, dass der Wert von Requisiten innerhalb der
-Komponente nicht geändert werden kann und der geänderte Wert nicht mit der äußeren Ebene der Komponente synchronisiert wird. Synchronisieren Sie die Änderung von Requisiten außerhalb der Komponente:

props: ['current', 'last'],
watch: {
   current(val) {//监听current的变更，并同步带currentPage中
       this.currentPage = val;
   },
   last(val) {
       this.lastPage = val;
   }
},
data() {
   return {
      currentPage: this.current,
          lastPage: this.last
   }
}

Hier muss ich nur die Änderung von Requisiten außerhalb des Paginators synchronisieren. Wenn Sie die Außenseite des Paginators benachrichtigen müssen, lesen Sie bitte die Implementierung Zwei-Wege-Bindung von Komponenten-Requisiten in Vue2

2. Markdown-Editor

Ich finde den Rich-Text-Editor von Segmentfault sehr schön, deshalb habe ich einen ähnlichen gefunden, simpleMDE

Im Anhang ist die Übersetzung und umfassendere Konfiguration von simpleMDE
Während der Verwendung fand ich einen Artikel, der mir sehr hilfreich war, SimpleMDE Editor + HTML extrahieren + Ausgabe verschönern
Der einzige zu beachtende Punkt ist, dass Sie bei der Einführung von Fontawesome in Vue den folgenden Code verwenden

npm install font-awesome --save-dev

import 'font-awesome/scss/font-awesome.scss'

---

Sie können npm, Bower oder cdn einführen

npm install simplemde --save

bower install simplemde --save

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

Hier verwende ich es sehr reibungslos in Laravel, genau wie die auf GitHub erwähnten Schritte, aber in Vue kann ich es nicht bekommen Der Inhalt im Rich-Text mithilfe des V-Modells. Das endgültige Forschungsergebnis ist, dass Sie den Inhalt des Editors manuell abrufen und Variablen zuweisen müssen.

this.markdown = new SimpleMDE({...});

//获取编辑器的值
saveArticle() {
    this.params.content = this.markdown.value();
}

//给编辑器赋值
this.markdown.value(this.params.content);

Darüber hinaus kann simplemde auch einen Blick auf seinen Quellcode werfen, um ihn anzupassen >

 this.markdown = new SimpleMDE({
      autoDownloadFontAwesome: false,
      element: that.$refs.markdownCreate,
      status: false,
      toolbar: [
          {
               name: 'title1',
               action: function customFunction(editor) {
                  var cm = editor.codemirror;
                  that._toggleHeading(cm, "title", 1);
               },
               className: 'glyphicon glyphicon-align-left',
               title: 'title1'
          },
          {
              name: 'title2',
              action: function customFunction(editor) {
                 var cm = editor.codemirror;
                 that._toggleHeading(cm, "title", 2);
              },
              className: 'glyphicon glyphicon-align-left',
              title: 'title2'
          },
      ]
});

_toggleHeading(cm, direction, size) {
    if (/editor-preview-active/.test(cm.getWrapperElement().lastChild.className))
       return;
    var startPoint = cm.getCursor("start");
    var endPoint = cm.getCursor("end");
    var textNew = '';
    for (var i = startPoint.line; i <= endPoint.line; i++) {
        (function (i) {
            var text = cm.getLine(i);
            textNew += text;
        })(i);
    }
    if (size === 1) {
        textNew === &#39;&#39; ? textNew = "标题文字\n====" : textNew += "\n====";
    } else if (size === 2) {
        textNew === &#39;&#39; ? textNew = "标题文字\n----" : textNew += "\n----";
    }
    cm.replaceSelection(textNew);
    cm.focus();
}

3. Vue zeigt Highlights an

Die Einführung von Highlights in Vue und Laravel ist etwas anders

So eingeführt in Laravel

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

So eingeführt in Vue

<link rel="stylesheet" href="http://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css">
<script src="http://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>

main.js中
Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
        hljs.highlightBlock(block)
    })
});

Nutzung ist

<p v-html="Marked" v-highlight>4. Anmeldung und Registrierung

Ursprünglich habe ich nur Artikelpräsentationen durchgeführt, aber ich hatte das Gefühl, dass die verwendeten Fähigkeiten etwas mangelhaft waren, also wollte ich Um mehr zu tun, habe ich mich angemeldet, registriert und kommentiert. Das Backend ist sehr einfach und kann jedem mit vue+vuex+axios empfohlen werden zum Abfangen von Anmelde- und Registrierungsseitenberechtigungen. Nachdem ich es gelesen hatte, war es sehr hilfreich für mich

5. Auf GitHub hochladen

Klonen Sie es nach dem Hochladen auf GitHub lokal

und

npm install ein Fehler wird unter gemeldet Diesmal npm run dev
Die Lösung finden Sie in der Postcss-Konfiguration Error: No PostCSS Config found in...
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Verwendung makrofähiger Makros in Laravel

Einführung, wie man in kurzer Zeit einen erholsamen Ressourcenserver erstellt

Das obige ist der detaillierte Inhalt vonInformationen zum Schreiben eines Blogs mit Vue-Laravel zur Trennung von Front-End und Back-End. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!