Vue-laravel先后端分离写博客

这段时间学习vue，写了个小博客，后台接口用的laravel，过程当中遇到过不少问题，在此总结一下，并附上代码连接：(我尚未买域名，因此你们只看代码就好)
https://github.com/rencong/bl...
https://github.com/rencong/bl...

---

1、分页

我知道网上有不少写好的分页组件，可是个人初衷是学习，不求快，因此我本身写的，遇到的问题是组件之间的双向绑定。
我在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双向绑定

2、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();
}

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

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

4、登陆注册

以前原本只先作文章展现，但感受用到的技能有点少，就想多作点，而后就开始作登陆注册还有评论，登陆注册我用的token认证，后台很简单(https://blog.csdn.net/qq_2045...)，vue这边我挑选出一个很好的文章，推荐给你们vue+vuex+axios作登陆、注册页权限拦截。看了以后对我颇有帮助

5、上传GitHub

上传GitHub以后，再克隆到本地须要npm install,并 npm run dev
此时报错Error: No PostCSS Config found in...
解决办法参考postcss配置

记得关注我呦