About how to write a blog using Vue-laravel to separate the front-end and back-end

This article mainly introduces the method of using Vue-laravel to separate the front-end and back-end to write a blog. It has certain reference value. Now I share it with you. Friends in need can refer to it

During this period of time, I learned Vue and wrote a small blog. I used Laravel for the backend interface. I encountered many problems in the process. I will summarize it here and attach a code link: (I haven’t bought the domain name yet, so you can just look at the code. OK)
https://github.com/rencong/bl...
https://github.com/rencong/bl...

---

1. Pagination

I know there are many well-written paging components on the Internet, but my original intention was to learn, not to be fast, so I wrote it myself. The problem I encountered was two-way binding between components .
I call the paginator component on the list page and pass the paging information to it. As a result, the properties of the paginator component props do not change.
The reason is that the value of props cannot be modified within the component, and the modified value will not be synchronized to the outer layer of the component.
Synchronize the modification of props outside the component:

props: ['current', 'last'],
watch: {
   current(val) {//监听current的变更，并同步带currentPage中
       this.currentPage = val;
   },
   last(val) {
       this.lastPage = val;
   }
},
data() {
   return {
      currentPage: this.current,
          lastPage: this.last
   }
}

Here I only need to synchronize the modification of props outside the paginator. If you need to notify the outside of the paginator, please refer to how to implement two-way binding of component props in Vue2

2. Markdown Editor

I think segmentfault’s rich text editor is very nice, so I found a similar one, which is simpleMDE
Attached is the translated and more comprehensive configuration of simpleMDE
During the use process, an article that I found very helpful is the SimpleMDE editor to extract HTML and beautify the output
The only point to note is that when introducing fontawesome into vue, use the following code

npm install font-awesome --save-dev

import 'font-awesome/scss/font-awesome.scss'

---

You can use npm, bower or cdn introduction

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>

I used it very smoothly in laravel, just like the steps mentioned on GitHub, but in vue, I couldn’t get the content in the rich text using v-model. Finally, I studied The result is that you need to manually obtain the content of the editor and assign it to a variable.

this.markdown = new SimpleMDE({...});

//获取编辑器的值
saveArticle() {
    this.params.content = this.markdown.value();
}

//给编辑器赋值
this.markdown.value(this.params.content);

In addition, simplemde can also customize the toolbar. Interested students can check out his source code. I customized it after looking at the source code. I will show you an example of setting the title

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

3. Vue display highlight

The introduction of highlight between vue and laravel is a bit different
Introduction in 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>

Introduction in 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)
    })
});

Usage is<p v-html="Marked" v-highlight>

4. Log in and register

I originally only did article presentations, but I felt that the skills used were a bit Less, I just want to do more, and then I started to log in, register and comment. I used token authentication to log in and register. The backend is very simple. I picked out a good article on Vue and recommended it to everyone to use vue vuex axios to log in. , registration page permission interception. After reading it, it was very helpful to me.

5. Upload GitHub

After uploading GitHub, you need to clone it locallynpm install, andnpm run dev
Error reported at this time Error: No PostCSS Config found in...
For the solution, please refer to postcss configuration

The above is the entire content of this article, I hope it will be helpful to everyone’s learning Helpful, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Usage of Macroable macros in Laravel

Introduction to how to build a restful resource server in a short time

The above is the detailed content of About how to write a blog using Vue-laravel to separate the front-end and back-end. For more information, please follow other related articles on the PHP Chinese website!