Vue-laravel을 사용하여 프런트엔드와 백엔드를 분리하여 블로그를 작성하는 방법에 대해

이 글은 Vue-laravel을 사용하여 블로그 작성을 위해 프론트엔드와 백엔드를 분리하는 방법을 주로 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유합니다. vue.이 기간 동안 백엔드 인터페이스로 laravel을 사용하여 작은 블로그를 작성했는데 그 과정에서 많은 문제가 발생했습니다. 여기에 요약하고 코드 링크를 첨부하겠습니다. 코드만 읽어도 됩니다)

https:/ /github.com/rencong/bl...

https://github.com/rencong/bl...

1. 페이지 매기기

---

잘 있는걸로 압니다. -인터넷에서 페이징 구성 요소를 작성했지만 원래 의도는 학습이 속도에 관한 것이 아니기 때문에 직접 작성했습니다. 제가 직면한 문제는

구성 요소 간 양방향 바인딩

이었습니다. 목록 페이지에서 페이지네이터 구성요소를 호출하여 페이징 정보를 전달한 결과 페이지네이터 구성요소 소품의 속성이 변경되지 않았습니다. 그 이유는
props의 값은 컴포넌트 내에서 수정될 수 없으며, 수정된 값은 컴포넌트의 외부 레이어에 동기화되지 않기 때문입니다
. 컴포넌트 외부의 prop 수정 동기화:

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

여기에서는 페이지네이터 외부의 prop 수정만 동기화하면 됩니다. 페이지네이터 외부에 수정 사항을 알리려면 컴포넌트의 양방향 바인딩 구현 방법을 참조하세요. props in Vue2

2. 마크다운 편집기

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>
<script></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 
3을 설정하는 예를 보여드리겠습니다. 
 
Vue와 laravel은 조금 다르게 하이라이트를 소개합니다
Laravel은 이렇게 소개합니다
<link>
<script></script>
<script>hljs.initHighlightingOnLoad();</script>

Vue는 이렇게 소개합니다
<link>
<script></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></p>입니다. >
 4. 로그인 및 회원가입 <p v-html="Marked" v-highlight></p>
四、登录注册
之前本来只先做文章展示，但感觉用到的技能有点少，就想多做点，然后就开始做登录注册还有评论，登录注册我用的token认证，后台很简单，vue这边我挑选出一个很好的文章，推荐给大家vue+vuex+axios做登录、注册页权限拦截。看了之后对我很有帮助
五、上传GitHub
上传GitHub之后，再克隆到本地需要npm install,并 npm run dev
 此时报错Error: No PostCSS Config found in...
 원래는 기사 발표만 했는데, 사용하는 스킬이 좀 적은 것 같아서 좀 더 해보고 싶어서 로그인하고 회원가입을 하고 댓글을 달기 시작했습니다. 로그인 및 등록에 토큰 인증을 사용했습니다. 백엔드는 매우 간단합니다. Vue에서 좋은 기사를 골랐으며 모든 사람에게 vue+vuex+axios를 사용하여 로그인 및 등록 페이지 권한을 차단하도록 권장했습니다. 읽고 나니 많은 도움이 되었습니다
5. GitHub 업로드
GitHub 업로드 후 로컬로 복제하려면 npm install 및 npm run dev가 필요합니다
 오류가 발생했습니다. 오류: PostCSS Config를 찾을 수 없습니다...
 해결 방법은 postcss 구성을 참조하세요위 내용이 이 글의 전체 내용이길 바랍니다. 모두의 학습에 도움이 됩니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요! 
관련 권장사항: 
Laravel에서 매크로 가능 매크로 사용
🎜🎜🎜단시간에 안정적인 리소스 서버를 구축하는 방법 소개🎜🎜🎜

위 내용은 Vue-laravel을 사용하여 프런트엔드와 백엔드를 분리하여 블로그를 작성하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!