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

不言
發布: 2023-04-02 22:14:01
原創
1913 人瀏覽過

這篇文章主要介紹了關於利用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-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>
登入後複製

這裡我在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 === &#39;&#39; ? textNew = "标题文字\n====" : textNew += "\n====";
    } else if (size === 2) {
        textNew === &#39;&#39; ? 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配置

以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

相關推薦:

Laravel中Macroable巨集指令的用法

#

以上是關於利用Vue-laravel前端和後端分離寫一個部落格的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板