Vue-laravel을 사용하여 프런트엔드와 백엔드를 분리하여 블로그를 작성하는 방법에 대해
- 不言원래의
- 2018-07-10 14:25:151948검색
이 글은 Vue-laravel을 사용하여 블로그 작성을 위해 프론트엔드와 백엔드를 분리하는 방법을 주로 소개합니다. 이제는 필요한 친구들이 참고할 수 있도록 공유합니다. vue.이 기간 동안 백엔드 인터페이스로 laravel을 사용하여 작은 블로그를 작성했는데 그 과정에서 많은 문제가 발생했습니다. 여기에 요약하고 코드 링크를 첨부하겠습니다. 코드만 읽어도 됩니다)
https:/ /github.com/rencong/bl...https://github.com/rencong/bl...
잘 있는걸로 압니다. -인터넷에서 페이징 구성 요소를 작성했지만 원래 의도는 학습이 속도에 관한 것이 아니기 때문에 직접 작성했습니다. 제가 직면한 문제는
구성 요소 간 양방향 바인딩이었습니다. 목록 페이지에서 페이지네이터 구성요소를 호출하여 페이징 정보를 전달한 결과 페이지네이터 구성요소 소품의 속성이 변경되지 않았습니다. 그 이유는
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 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();
}3을 설정하는 예를 보여드리겠습니다.
Vue와 laravel은 조금 다르게 하이라이트를 소개합니다
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>입니다. >
4. 로그인 및 회원가입 <p v-html="Marked" v-highlight>
四、登录注册
之前本来只先做文章展示，但感觉用到的技能有点少，就想多做点，然后就开始做登录注册还有评论，登录注册我用的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 중국어 웹사이트를 주목하세요!
🎜🎜🎜단시간에 안정적인 리소스 서버를 구축하는 방법 소개🎜🎜🎜위 내용은 Vue-laravel을 사용하여 프런트엔드와 백엔드를 분리하여 블로그를 작성하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!