Vue.js에서 추적 단추, 관심수, 관심자 수의 결합을 실시합니다

3490 단어 LaravelVue.js

추적 기능은 Laavel 및 Vue입니다.js에서 실현
추적 단추, 팔로우 수, 팔로우 수의 협업 이외의 부분은 아래의 내용을 보면 실현할 수 있다.
https://www.youtube.com/watch?v=ImtZ5yENzgE
추적 기능에 관하여 나는 주로 다음과 같은 두 가지가 있다고 생각한다
1. 사용자 등록 기능이 없으면 진행할 수 없습니다.
- Laavel 인증 기능을 통해 간편하게 수행
2. DB의 디자인에는 여러 쌍의 사용자 테이블과 설정 테이블이 필요하다.

npm의 준비


Laavel은 Vue입니다.표준은 js를 탑재하고 전기에는 노드를 준비했다.js 설치 및 npm 사용
그저 할 수 있도록
  • node.js와 npm의 설치
  •    sudo yum install nodejs npm --enablerepo=epel
    
  • npm 버전 업그레이드
  •    npm install -g npm 
    
  • Vuex 설치
    어셈블리 간의 통신(형제 어셈블리)을 위해서는 Vuex가 필요합니다.
  •    npm install vuex --save
    
  • 종속성 패키지 설치
  •    cd /path/to/laravel /* Laravelルートディレクトリへ移動 */
       npm install 
    
  • 프런트엔드 구축
  •    cd /path/to/laravel /* Laravelルートディレクトリへ移動 */
       npm run watch
    
    지금까지 Laavel의 Vue였습니다.js가 잘 움직일 거예요!

    디렉토리 구성

  • Laavel의 Resources 디렉토리 구조
  • views/profiles/index.blade.php 디스플레이 추적 단추, 팔로우 수, 팔로우 수
  • js/app.js가 Vue 구조기에서 실례 생성
  • js/components/follow-button.vue는 추적 단추의 단일 파일 구성 요소입니다
  • js/components/followers.vue는 팔로워 수의 단일 파일 구성 요소
  • 입니다.
  • js/components/following.vue는 추적 수의 단일 파일 구성 요소입니다.
  • js/store/store.js 응용 상태를 유지하는 Vuex 포획
  • 원본 코드를github로 높입니다.뒷부분에 링크를 붙여넣습니다.

    Vuex


    범위 관계에서this에서 다른 구성 요소를 참고할 수 없지만, Vuex를 사용하여 구성 요소 간에 같은 데이터를 공유할 수 있습니다.특히 비부자 구성 요소 간의 통신은 상점 Vuex를 사용하지 않으면 혼란스러울 수 있다.
    js/store/store.설명 js
    store.js

    15행 follow User 방법은 추적 단추를 눌렀을 때의 동작입니다. Vuex에서 Store 상태를 바꾸는 동작은 모두 store 자체에 있어야 하기 때문에 추적 단추의 구성 요소에 쓰여 있지 않습니다.
    열여섯 번째 줄axios.post는 axios(Promise)에서 비동기 통신을 한다.여기서 서버를 따라가거나 취소합니다.
    17번째 줄은 Promise의 then()을 사용하여 호출 처리를 하는데 성공한 경우 25번째 줄은'진짜'입니다.then에게 건네주고 따라가기와 해제 후의 추적기 수, 추적기 수를 상점에 반영한다.
    GitHub
    https://github.com/iwaoo/laravel_login

    좋은 웹페이지 즐겨찾기