关于利用Vue-laravel前端和后端分离写一个博客的方法
关于利用Vue-laravel前端和后端分离写一个博客的方法
内容导读
收集整理的这篇技术教程文章主要介绍了关于利用Vue-laravel前端和后端分离写一个博客的方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4402字,纯文字阅读大概需要7分钟。
内容图文
这篇文章主要介绍了关于关于利用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配置
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
Laravel中Macroable宏指令的用法
以上就是关于利用Vue-laravel前端和后端分离写一个博客的方法的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是为您收集整理的关于利用Vue-laravel前端和后端分离写一个博客的方法全部内容,希望文章能够帮你解决关于利用Vue-laravel前端和后端分离写一个博客的方法所遇到的程序开发问题。 如果觉得技术教程内容还不错,欢迎将网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。