Vue-laravel先後端分離寫博客

時間 2019-11-09

標籤 vue laravel 後端分離博客简体版

原文原文鏈接

這段時間學習vue，寫了個小博客，後臺接口用的laravel，過程當中遇到過不少問題，在此總結一下，並附上代碼連接：(我尚未買域名，因此你們只看代碼就好)
https://github.com/rencong/bl...
https://github.com/rencong/bl...css

1、分頁

我知道網上有不少寫好的分頁組件，可是個人初衷是學習，不求快，因此我本身寫的，遇到的問題是組件之間的雙向綁定。
我在list頁面調用paginator組件,並將分頁信息傳給它，結果paginator組件props的屬性不變化。
緣由是組件內不能修改props的值，同時修改的值也不會同步到組件外層。
同步組件外對props的修改：html

props: ['current', 'last'],
watch: {
   current(val) {//監聽current的變動，並同步帶currentPage中
       this.currentPage = val;
   },
   last(val) {
       this.lastPage = val;
   }
},
data() {
   return {
      currentPage: this.current,
          lastPage: this.last
   }
}

這裏我只須要同步paginator外對props的修改，若是須要通知到paginator外，請參考如何在Vue2中實現組件props雙向綁定vue

2、markdown編輯器

以爲segmentfault的富文本編輯器很好看，找了個類似的，就是simpleMDE
附上翻譯的比較全面的simpleMDE的配置
使用過程當中，以爲頗有幫助的一篇文章是SimpleMDE編輯器 + 提取HTML + 美化輸出
惟一注意點是vue中引入fontawesome用如下代碼ios

npm install font-awesome --save-dev

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

能夠用npm、bower或cdn引入laravel

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>

這裏我在laravel裏用的很順，就像GitHub上說的步驟同樣，可是在vue中，利用v-model怎麼都獲取不到富文本中的內容，最後研究結果是須要本身手動獲取編輯器的內容，並賦值給變量。git

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

//獲取編輯器的值
saveArticle() {
    this.params.content = this.markdown.value();
}

//給編輯器賦值
this.markdown.value(this.params.content);

另外simplemde還能夠自定義工具欄，感興趣的同窗能夠去看下他的源碼，我是看了源碼自定義的，我展現一個設置標題的舉例github

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 === '' ? textNew = "標題文字\n====" : textNew += "\n====";
    } else if (size === 2) {
        textNew === '' ? textNew = "標題文字\n----" : textNew += "\n----";
    }
    cm.replaceSelection(textNew);
    cm.focus();
}

3、Vue顯示高亮

vue和laravel引入highlight還有點不同
laravel中這樣引入vuex

<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中這樣引入npm

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

用法是<div v-html="Marked" v-highlight>axios

4、登陸註冊

以前原本只先作文章展現，但感受用到的技能有點少，就想多作點，而後就開始作登陸註冊還有評論，登陸註冊我用的token認證，後臺很簡單(https://blog.csdn.net/qq_2045...)，vue這邊我挑選出一個很好的文章，推薦給你們vue+vuex+axios作登陸、註冊頁權限攔截。看了以後對我頗有幫助