Sur la façon d'écrire un blog en utilisant Vue-laravel pour séparer le front-end et le back-end

Cet article présente principalement la méthode d'utilisation de Vue-laravel pour séparer le front-end et le back-end pour écrire un blog. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. 🎜>

Pendant cette période, j'ai appris Vue et écrit un petit blog. J'ai utilisé Laravel pour l'interface backend. J'ai rencontré de nombreux problèmes dans le processus. Je vais le résumer ici et joindre un lien de code : (je ne l'ai pas fait. j'ai déjà acheté le nom de domaine, vous pouvez donc simplement regarder le code OK)

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

---

1. Pagination

Je sais qu'il existe de nombreux composants de pagination écrits sur Internet, mais mon intention initiale était d'apprendre, pas d'être rapide, alors je l'ai écrit moi-même. Le problème que j'ai rencontré était la

liaison bidirectionnelle entre les composants . J'appelle le composant paginateur sur la page de liste et lui transmets les informations de pagination. Par conséquent, les propriétés des accessoires du composant paginateur ne changent pas.
La raison est que la valeur des accessoires ne peut pas être modifiée dans le composant
et que la valeur modifiée ne sera pas synchronisée avec la couche externe du composant . Synchroniser la modification des accessoires en dehors du composant :

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

Ici, il me suffit de synchroniser la modification des accessoires en dehors du paginateur. Si vous devez notifier l'extérieur du paginateur, veuillez vous référer à comment. pour implémenter la liaison bidirectionnelle des accessoires de composants dans Vue2 Certainement

2. Éditeur Markdown

Je pense que l'éditeur de texte riche de segmentfault est très sympa, alors j'en ai trouvé un similaire, simpleMDE

Ci-joint est la configuration traduite et plus complète de simpleMDE
Pendant le processus d'utilisation, un article que j'ai trouvé très utile est SimpleMDE Editor + Extract HTML + Beautify Output
Le seul point à noter est que lors de l'introduction de fontawesome dans vue, utilisez le code suivant

npm install font-awesome --save-dev

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

---

Vous pouvez utiliser npm, bower ou cdn pour introduire

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>

Ici, je l'utilise très facilement dans laravel, juste. comme les étapes mentionnées sur GitHub, mais en vue, utilisez v- Le modèle ne peut pas obtenir le contenu du texte riche. Le résultat final de la recherche est que vous devez obtenir manuellement le contenu de l'éditeur et l'attribuer aux variables.

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

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

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

De plus, simplemde peut également personnaliser la barre d'outils. Les étudiants intéressés peuvent consulter son code source. Je l'ai personnalisé après avoir regardé le code source. Je vais vous montrer un exemple de définition du titre

3. Vue affiche les faits saillants

 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();
}

L'introduction de highlight dans vue et laravel est un peu différente

Introduit comme ceci dans laravel

Introduit comme ceci en vue

<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>

L'utilisation est

<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)
    })
});

<p v-html="Marked" v-highlight> 4. Connectez-vous et inscrivez-vous

Avant, je ne faisais que des articles et des présentations, mais je sentais que les compétences utilisées J'étais un peu peu nombreux, donc j'ai voulu faire plus, puis j'ai commencé à me connecter, à m'inscrire et à commenter. J'ai utilisé l'authentification par jeton pour me connecter et m'inscrire. Le backend est très simple. J'ai choisi un bon article sur Vue et je l'ai recommandé. à tout le monde avec vue+vuex+axios pour l'interception des autorisations de connexion et de la page d'inscription. Après l'avoir lu, cela m'a été très utile

5. Téléchargez sur GitHub

Après avoir téléchargé GitHub, clonez-le localement

et

npm install une erreur sera signalée à cette fois npm run dev
Pour la solution, veuillez vous référer à la configuration postcss Error: No PostCSS Config found in...
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez payer. attention au site PHP chinois !

Recommandations associées :

Utilisation des macros macroables dans Laravel

Introduction à la façon de créer un serveur de ressources reposant en peu de temps

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!