這篇文章主要介紹了關於利用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 === '' ? 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配置
以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！
相關推薦：
關於如何在短時間內建立一個restful資源伺服器的方法介紹
#
以上是關於利用Vue-laravel前端和後端分離寫一個部落格的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
