vue.js 게시판 예제

이것은 Scotch.io Vue.js 자습서에 대 한 코드입니다. 자습서에서는 이벤트 게시판 응용 프로그램을 빌드하고 Vue의 기본 을 다룹니다. CLIENT_DOMAIN 변수를 Auth0 응용 프로그램 도메인으로 변경하고 AUTH0_AUDIENCE를 잠재고객으로 설정합니다(이 예에서는 http://meetupapi.com). /api/예제/개인 경로는 익스프레스 jwt 및 jwks-rsa로 보호됩니다. 이제 앱의 상태에 게시물이 있으므로 해당 게시물을 DOM으로 렌더링해야 합니다. 이렇게 하려면 템플릿에서 액세스할 수 있도록 게시물을 대시보드 구성 요소에 바인딩해야 합니다. 계산된 속성에서 mapState에 `게시물`을 추가합니다. 각 보드에는 ID, 이름, 설명, 보관된 필드가 있습니다. 보관된 부울 필드는 보드가 보관되어 있는지 여부를 나타내며 목록 필드는 목록 개체의 배열입니다. TL;DR: 이 문서에서는 Vue.js (프로그레시브 자바 스크립트 프레임 워크)를 사용하여 브라우저에서 대화 형 Kanban 보드를 빌드합니다. 이 프로젝트의 전체 소스 코드는 GitHub 리포지토리에서 사용할 수 있으며 완성된 프로젝트의 온라인 데모를 사용할 수 있습니다. 앱에서 사용하는 샘플 데이터를 가져오고 로드하는 데 사용되는 fetchData Vuex 작업의 예를 들어 보겠습니다. 모든 Vuex 작업은 컨텍스트 개체를 첫 번째 매개 변수로 수신하므로 개체를 파괴하고 커밋 메서드를 당겨 돌연변이를 호출합니다.

기록 모드를 사용하면 기본 옵션(/#/대시보드)과 반대로 더 읽기 쉬운 URL 경로(/대시보드)를 사용할 수 있습니다. 현재 사용자가 만들지 않는 한 게시물을 숨길 때 게시물을 숨기려면 store.js 파일에서 스냅샷 쿼리를 업데이트해야 합니다. 먼저 게시물이 현재 사용자인지 확인합니다. 그렇다면 이전과 같이 실행합니다. 현재 사용자 게시물은 게시되는 즉시 항상 표시됩니다. 그렇지 않은 경우 데이터가 이미 로드되어 있고 이러한 게시물이 기존 게시물(예: 댓글 또는 좋아요)에 대한 업데이트가 아닌 새 게시물인지 확인해야 합니다. 지금 Kanban 보드를 보면 모든 항목에 멋진 색상의 배지가 있어야 합니다. 깔끔한! 여러 목록을 표시하기 위해 여러 목록을 나타내는 목록 배열 속성이 있는 최상위 개체로 보드를 갖도록 데이터를 업데이트했으며 각 목록에는 개별 목록 항목을 나타내는 항목 배열 속성이 있습니다.

또는 사용자가 TaskBoard 페이지에 있을 때 개별 보드를 보는 동안 TaskListEdit 및 TaskListRestore 구성 요소가 표시됩니다. activeBoard 변수는 사용자가 현재 열려 있는 보드에 대한 참조를 보유합니다. 그리고 보드 변수는 개별 보드에 대한 정보를 포함하는 배열이다. 위의 코드 코드 조각은 상태 개체와 페이로드를 매개 변수로 수신하는 SET_INITIAL_DATA 돌연변이를 선언합니다. 상태 개체를 통해 보드 변수에 액세스하고 페이로드로 업데이트할 수 있습니다. 참고: 사용자가 앱을 처음 방문하고 콜백이 로컬 호스트에 있는 경우 API에 대한 액세스 권한을 부여할 수 있는 동의 화면도 표시됩니다.