Vue-laravelを使ってフロントエンドとバックエンドを分離してブログを書く方法について

この記事では主にVue-laravelを使ってフロントエンドとバックエンドを分けてブログを書く方法を紹介していますが、一定の参考価値があるので共有します。困っている友達は参考にしてください

この期間中、私は Vue を学び、小さなブログを書きました。バックエンド インターフェイスには Laravel を使用しました。その過程で多くの問題に遭遇しました。ここに要約し、コード リンクを添付します。ドメイン名はまだ購入していないので、コードを見るだけで大​​丈夫です。OK)
https://github.com/rencong/bl...
https://github.com/rencong/bl ...

---

1. ページネーション

インターネット上によく書かれたページング コンポーネントがたくさんあることは知っていますが、私の当初の目的は速くなることではなく学ぶことでした。私が遭遇した問題は、コンポーネント間の 双方向バインディング でした。
リスト ページでページネーター コンポーネントを呼び出し、ページング情報を渡します。その結果、ページネーター コンポーネントのプロパティのプロパティは変更されません。
その理由は、props の値はコンポーネント内で変更できず、変更された値はコンポーネントの外側の層に同期されないためです。
コンポーネント外のプロパティの変更を同期する:

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

ここでは、ページネーターの外にあるプロパティの変更を同期するだけです。ページネーターの外部に通知する必要がある場合は、実装方法を参照してください。 Vue2 でのコンポーネント プロパティの双方向バインディング

2. マークダウン エディター

segmentfault のリッチ テキスト エディターは非常に優れていると思うので、似たようなものを見つけました。simpleMDE
です。 simpleMDE の翻訳された、より包括的な構成
使用プロセス中に非常に役立つと感じた記事は、HTML を抽出して出力を美しくするための SimpleMDE エディターです。
注意すべき唯一の点は、fontawesome を vue に導入するときに、次のコードを使用してください

npm install font-awesome --save-dev

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

---

npm、bower、または cdn の導入が可能です

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>

GitHub で説明されている手順と同じように、laravel では非常にスムーズに使用しましたが、vue では、 v-modelを使ってリッチテキストの内容を取得できなかったので、最終的に勉強した結果、エディタの内容を手動で取得して変数に代入する必要がありました。

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

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

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

また、simplemde はツールバーをカスタマイズすることもできます。興味のある学生はソース コードを確認してください。私はソース コードを見てカスタマイズしました。タイトル

 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 のハイライト表示

vue と laravel のハイライトの導入は少し異なります
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>

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

使用法is<p v-html="Marked" v-highlight>

4. ログインして登録

元々は論文発表のみでしたが、使用するスキルは少し少ないです。もっとやりたいだけです。その後、ログイン、登録、コメントを開始しました。ログインと登録にはトークン認証を使用しました。バックエンドは非常にシンプルです。に関する良い記事を選びました。 Vue は、vue vuex axios を使用してログインすることを全員に推奨しています。 、登録ページの権限インターセプト。

5. GitHub のアップロード

GitHub をアップロードした後、ローカルにクローンを作成する必要がありますnpm install、および npm run dev
この時点でエラーが報告されました エラー: PostCSS 構成が見つかりません...
解決策については、postcss 構成を参照してください

上記これがこの記事の全内容です。皆さんの学習に役立つことを願っています。さらに関連するコンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

Laravel での Macroable マクロの使用

Restful リソース サーバーを短時間で構築する方法の紹介
#

以上がVue-laravelを使ってフロントエンドとバックエンドを分離してブログを書く方法についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。