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

不言
Release: 2023-04-02 22:14:01
Original
1913 people have browsed it

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
   }
}
Copy after login

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'
Copy after login

You can use npm, bower or cdn introduction

npm install simplemde --save
Copy after login
bower install simplemde --save
Copy after login
<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>
Copy after login

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);
Copy after login

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

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>
Copy after login

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)
    })
});
Copy after login

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template