关于利用Vue-laravel前端和后端分离写一个博客的方

这段时间学习vue，写了个小博客，后台接口用的laravel，过程中遇到过很多问题，在此总结一下，并附上代码链接：(我还没有买域名，所以大家只看代码就好)
https://github.com/rencong/bl...
https://github.com/rencong/bl...

我知道网上有很多写好的分页组件，但是我的初衷是学习，不求快，所以我自己写的，遇到的问题是组件之间的双向绑定。
我在list页面调用paginator组件,并将分页信息传给它，结果paginator组件props的属性不变化。
原因是组件内不能修改props的值，同时修改的值也不会同步到组件外层。
同步组件外对props的修改：

props: [ html' target='_blank'>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双向绑定

觉得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= /uploads/allimg/190429/09495S333-0.jpg /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和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之后，再克隆到本地需要npm install,并 npm run dev
此时报错Error: No PostCSS Config found in...
解决办法参考postcss配置

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP ！

相关推荐：

Laravel中Macroable宏指令的用法

关于如何短时间内搭建一个restful资源服务器的方法介绍

以上就是关于利用Vue-laravel前端和后端分离写一个博客的方法的详细内容，PHP教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。