關於利用Vue-laravel前端和後端分離寫一個部落格的方法

這篇文章主要介紹了關於關於利用Vue-laravel前端和後端分離寫一個部落格的方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

這段時間學習vue，寫了個小部落格，後台介面用的laravel，過程中遇到過很多問題，在此總結一下，並附上代碼連結：(我還沒有買網域名稱，所以大家只看代碼就好)
https://github.com/rencong/bl...
https://github.com/rencong/bl...

一、分頁

我知道網上有很多寫好的分頁組件，但是我的初衷是學習，不求快，所以我自己寫的，遇到的問題是組件之間的雙向繫結。
我在list頁面調用paginator組件,並將分頁資訊傳給它，結果paginator組件props的屬性不變化。
原因是組件內不能修改props的值，同時修改的值也不會同步到組件外層。
同步群組件外對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   }}

這裡我只需要同步paginator外對props的修改，如果需要通知到paginator外，請參考如何在Vue2中實現組件props雙向繫結

二、markdown編輯器

覺得segmentfault的富文字編輯器很好看，找了個相似的，就是simpleMDE
附上翻譯的比較全面的simpleMDE的配置
使用過程中，覺得很有協助的一篇文章是SimpleMDE編輯器 + 提取HTML + 美化輸出
唯一注意點是vue中引入fontawesome用以下代碼

npm install font-awesome --save-devimport '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>

這裡我在laravel裡用的很順，就像GitHub上說的步驟一樣，但是在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 === '' ? textNew = "標題文字\n====" : textNew += "\n====";    } else if (size === 2) {        textNew === '' ? textNew = "標題文字\n----" : textNew += "\n----";    }    cm.replaceSelection(textNew);    cm.focus();}

三、Vue顯示高亮

vue和laravel引入highlight還有點不一樣
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)    })});

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

四、登入註冊

之前本來只先做文章展示，但感覺用到的技能有點少，就想多做點，然後就開始做登入註冊還有評論，登入註冊我用的token認證，後台很簡單，vue這邊我挑選出一個很好的文章，推薦給大家vue+vuex+axios做登入、註冊頁許可權攔截。看了之後對我很有協助

五、上傳GitHub

上傳GitHub之後，再複製到本地需要npm install,並 npm run dev
此時報錯Error: No PostCSS Config found in...
解決辦法參考postcss配置

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！