Using LARAVEL with VUE JS – Get data from Laravel endpoints using Axios / Ajax – part 2

안녕하세요 다른 Laravel 및 Vue 자습서에 오신 것을 환영합니다

새로운 Laravel 프로젝트에서 Vue를 설정하는 이전 비디오 이 비디오에서는 몇 가지 끝점을 만들 수있는 방법을 살펴 보겠습니다 우리 구성 요소에 대한 데이터가 있으므로이 라이브러리를 사용할 것입니다 당신이 laravel과 그 모든 것을 통해 설치할 때 vue와 함께 제공되는 Axios 아약스 요청이야 내가 너에게 길을 보여줄거야 나는 그것을 잘 유지하고 조직을 위해 상처를 받아야하고 너를 막는다 미래의 일들을 근본적으로 깨는 것 또한 기본적으로 내가 원하는 것부터 시작하는 것입니다

이 구성 요소가 내 Laravel 백엔드의 일부 데이터를 표시하도록합니다 내가해야 할 일은 내가 자르려고하는거야 블로그 게시물 또는 그와 비슷한 것이므로 나는 단지 그것을 호출 할 것입니다 나는 단지 블로그를 할 것입니다 지금은 컨트롤러 용으로 JSON을 반환하는 컨트롤러를 end point 보통 API 폴더에 넣기 만하면 별도로 유지할 수 있습니다

뷰를 리턴하는 컨트롤러가 필요하다 Ajax를 반환하는 API 라이브러리는 API 폴더에 넣습니다 그래서 PHP 숙련공은 이것을 만들 때 끝에 자원 플래그를 추가했는지 확인하십시오 컨트롤러 oops 예 API 폴더에 넣을거야 그럼 리소스를 넣으면 그것의 끝에 플래그가 자동으로 몇 가지 메소드를 생성합니다 거기에 당신을 위해 당신이 보여 줄 자원 경로를 사용할 수 있다는 것을 의미합니다

두 번째로이 블로그 컨트롤러에서 생성 된 내용을 살펴 보겠습니다 이제 우리는 목록을 표시하는 표시를위한 색인을 가지고 있습니다 우리가 얻을 수있는 블로그 글은 우리가 빠져 나갈 수있는 농장은 분당에 필요하지 않기 때문에 JSON에서만 반환됩니다 스토어, 그래서 우리는 새로운 블로그 포스트를 만들 것입니다 나중에 사용하면 블로그 게시물을 독자적으로 표시 할 수 있습니다

하나의 블로그 게시물을 공유하기 위해 페이지에서 블로그를 작성하십시오 그 데이터는 편집 폼을 보여주기위한 것입니다 우리가 별도의 비디오에서 할 수있는 것을 업데이트하는 것이 필요 없다 왜냐하면 지금은 확실히 만들고 색인을 작성한 다음 파괴 할 수 있기 때문입니다 분명히 삭제하면 다음으로해야 할 일은 이렇게 우리가 노선 폴더로 들어가면 나는 API를 사용하지 않을 것입니다

루트 파일은 실제로 사용되는 API를 만드는 데 사용되므로 외부 사용자가 외부 액세스 할 수있는 반면 외부 사용자는 액세스중인 반면 당신이 FBI를 사용할 필요가 없도록이 페이지에서 왜냐하면 그것은 모든 Terkel과 모든 것이 이미 있기 때문입니다 이미 거기에 우리가 웹 파일에 들어가면 내가 볼 수 있는지 보도록하겠습니다 이걸 기억해두면 내가 API를 슬래시 한 다음 모델이 무엇이든간에 블로그를 슬래시 할 수 있습니다 그 다음에 API 블로그 컨트롤러가 호출되면 어떻게 될지 우리가 실제로 사용하는 각각의 메소드에 대해 별도의 경로를 지정할 필요는 없습니다 이전에 보았을 때 자동으로 감지되는지 여부를 감지합니다

슬래시 블로그를 얻는다면 그것은 블로그를 비난하고 ID가된다면 그것을 할 것입니다 보여줄 것인가? 그리고 그것이 내가 요청한 것인가? 마지막에 내가 나중에 당신을 보여줄거야 어쨌든 그럼 그 다음에 우리 그렇게해야 모델을 생성 할 필요가 있습니다 우리의 응용 프로그램의 빈 줄 그래서 우리는 단지 그것을 위해 모델을 추가해야합니다 아, 그래, 네가 그렇게 부르면 끝까지 마이너스를 붙이면 돼 또한 마이그레이션을 생성하므로 이전을 추가해야하므로 이제는 마이그레이션을 추가해야합니다 이것은 매우 간단합니다

왜냐하면 우리가 올바른 일을하는 방법을 실제로 거치지 않기 때문입니다 블로그를위한 데이터베이스입니다이 구성 요소로 들어가는 방법을 보여 주기만하면됩니다 그래서 분명히 당신은 일반적으로 사용자 아이디에이 링크를 가지고있을 것입니다 나는 이것을 근본적으로 괴롭히지 않을 것이다

나는 지금 문학의 옛날을 위해 그것을 그냥 크롤링 할 것이다 이 모든 것이 제목과 첫 번째 내용이므로 실제로 무엇이 이루어질 것입니다 거기에있을 것이고 그래서 단지 두 가지가 실제로 그리고 분명하게 업데이트되고 그때 우리 아이가 그 이주를 실행한다면 우리 농가 상자에 가면 농가를 짓는 법을 알고 싶어요 생각 나는 비디오가 있어요 내 첫 번째 비디오 였으므로 한번보고 싶다

그래서 여기에있는 것들은 L default의 로그에 의해 추가되었습니다 그러나 이것은 하나입니다 우리가 지금 만들었던 바로 그 다음에 우리가하고 싶은 일은 실제로 데이터 출력을 얻으므로 속편을 열면 볼 수 있습니다 데이터베이스에있는 내용 이제 블로그 게시물을 얻었습니다 이제 막 갈 예정입니다

우리가 출력 할 수 없도록 하나를 넣으십시오 맞아요 그게 우리가 사용할 수있는 하나의 테스트입니다 그래서 지금 막 열어 볼 것입니다 똑같은 또 다른 탭을 누른 다음 슬래시 API 슬래시 블로그에 아무것도 없다면 너 그렇게 쉬울 거라고 생각하지 않았어

그래서 지금해야 할 일은 실제로 데이터를 가져 오는 것입니다 컨트롤러가있다 나는 이것을 간단히 해낼 것이다 데이터는 일반적으로 서비스와 저장소를 가지고 있습니다 당신은 훨씬 더 잘할 수 있었지만 나는 그 비디오에 대해 별도의 비디오를 할 것입니다

하나의 비디오에서이 모든 작업을 수행하는 것이 너무 많을 것이라고 생각하기 때문에 지금 당장은 컨트롤러에서 곧바로 outlook을 사용하려고합니다 먼저 시작하는 것이 좋지만 나중에 다른 방식으로하고 싶을 수도 있지만 나는 다른 비디오에서 그렇게 할 것입니다 그래서 지금 우리가 지갑을 똑같이한다면 우리는 당신이 사용한다면 완전히 사용해야합니다 그래, 그렇게 출력됩니다하지만이 배열 그래서 만약 당신이 그냥 추가하자 우리가 거기서 볼 수있는 행진이 두 가지가 있습니다 블로그 피플과 함께 두 가지 개체를 사용하면 꽤 많이 사용할 수 있습니다

그것이 그렇듯이 나는 마지막 단계도하고 싶다 그래서 내가하고 싶은 것은 사용이다 명백하게 내가 어디에서 출력했는지 분명히 나타내는 웅변 적 자원 데이터베이스에있는 것이 무엇이든 거기에서이 이름을 바꾸면 우리가이 최선을 사용한다면 데이터베이스에있는 열 프런트 엔드는 열을 변경했지만 언제든지 만들 수있는 리소스로 데이터베이스를 변경하더라도 제목과 첫 번째 내용이 있는지 확인하십시오 당신은 여전히 ​​GS를 출력 할 수 있으며 같은 형식으로 당신이 그렇게하는 방법을 깨는 것은 리소스를 만들어서 그냥 빠져 나가는 것입니다 이 그래서 그냥 블로그 pasteries 엉덩이 그래서 그냥 PHP 아티스트 내가 믹크라고 전화 할거야 리소스 블로그 bursaries 엉덩이가 여기 에이 폴더에 누가 그렇게 엉덩이가 넣어 넣어 보자 그 다음에 여기에 이것을 추가 할 필요가 있습니다

이제 우리는 이것을 우리가 사용할 수 있습니다 컨트롤러 대신 그냥 돌아 오는 것 우리가 돌아 오면 곧장 거기에서 나온다 블로그 게시물 리소스를 수집하고 컬렉션을 작성한 다음 실제 출력을 거기에 쿼리가 잘하면 같은 좋은 HTTP를 보여야한다 작동해야한다 예 오 나는 여기에서 GDP를 놓치고 싶다 그래서 똑같은 것처럼 보인다 실제로 다른 형식을 지정하지 않습니다

실제로 그것은 데이터 객체에 래핑 된 것입니다 우리는 그것을 그대로두고 떠날 것입니다 페이지 매김을하고 싶다면 실제 데이터 객체에있는 것이 좋다 왜냐하면 그 수준 에서뿐만 아니라 페이지 매김 정보를 가지고 있기 때문에 아직 걱정하지 마라 우리는 다른 비디오에서 그것에 대해 들어갈 것이다

그래서 우리가 그의 엉덩이를 위해 이것으로 들어가면 지금하고있는 일은 우리가 이걸 없애고 나서 우리가 말할 수 있다면 예를 들어 우리가 실제로 원하는 것은 사용자 배열을 반환하는 경우입니다 이것의 당신의 날짜에서 당신은 반드시 그들의 전자 우편 주소를 원하지 않을 것입니다 프런트 엔드로 출력물을 가져 오는 것은 사람들이 요청을 작성한 다음 모든 사용자 이메일을 닉하면 여기에서 할 수있는 작업은 다음과 같습니다 그냥 이름과 아바타 프로필 사진을 원하는대로 넣어주세요 또는 무엇인가 그러나 우리 blog 포스트를 위해 나는 단지 ID 그물 제목을 원한다 내용이 너무 많아서 ID로 처리하면됩니다

그래서 당신이 원하는 각 컬럼에 대해이 일을 할 수 있고 무엇이 오는지도 알 수 있습니다 그것에 실제로 계산할 수 있습니다 if 당신은 당신이 당신을 추가 할 수있는 어떤 통화 또는 어떤 것을 형식화하기를 원한다 이 부분에서 올바르게 포맷 할 수 있습니다 형식화되었는지 확인합니다

나는 거기에 머무를 것입니다 이것은 내용입니다 그래서 당신은 그것이 지금하고있는 것을 볼 수 있습니다 그것은 추구 된 콘텐츠 라 불리는 대신 내용으로 출력됩니다 그래서 우리가이 칼럼을 전혀 다른 것으로 바꾸더라도 우리가 여기에 추가 할 때 항상 앞쪽에 내용으로 출력됩니다

끝내 다른 사람들이 가고있는 공중에서 파이를 할 때 특히 좋다 왜냐하면 만약 당신이 당신이 당신의 데이터베이스를 바꾼다면 영원히 사람들을 깨뜨릴 수 있도록 표시하려고 시도하도록 노력합시다 우리의 뷰 구성 요소 그래서 그것을 찾아 보자 나는 지금 당장 이걸 없애 버릴거야 우리가 가장 먼저 필요한 것은 데이터 I입니다 이것을하는 방법을 기억할 수있는 희망 제 생각 엔이게 이거 같아요

당신이 이 데이터 메소드를 생각해 보면 별표를 붙일 대상을 되 돌리는 것입니다 이 구성 요소는이 구성 요소에만 적용되므로 기본적으로 블로그 게시물 목록을 작성한 다음이 개체에 제공합니다 속성 그래서 만약 내가 그냥 게시물을 넣어 다음 그래서 빈 후면으로 초기화 할 것입니다 왜냐하면이 컴포넌트 로드하면 실제로 거기에는 아무 것도 없지만 우리는 그것이 무엇인지 알기를 원합니다 뒤쪽에서 그리고 나중에 우리는 그것을 인구가 많은 지역으로 바꿀 것입니다

공지 사항 내가 변경 사항을 업데이트했는지 확인하기 만하면됩니다 그냥하고 오후에 지켜 봅니다 그러면 내가 토론 한 내용을 보게 될 것입니다 마지막 비디오 내가 필요한 경우에 대비하여 문서를 가져올 것입니다 그래서 때로는 일을 올바르게하고 있는지 확인해야합니다

예를 보자 실제로 표시되지 않았으므로 비어있다 아무것도 내가 어떤 오류가 발생했는지 알 수있을거야 그냥 보자

우리가 필요한 것 같아 그것이 단지 확장 기능이라는 것을 무시하십시오 이제 우리는 다음을보아야합니다 이 AJAX 호출이 실제로로드 될 때 실제로 거기에 3 월을 추가 할 것입니다 나는 로딩 함수를 속성에 많이 추가 할 것이므로 우리가 할 수있는 것은 일단 우리가 할 수있는 일이다

지갑에 짐을 넣기 시작하면 진실을 말하고 확실하게 나는 지금 막 짐을 넣을 것입니다 일단 결과를 얻었거나 오류가 발생하면이를 false로 설정할 수 있습니다 다시로드 메시지를 숨 깁니다 그래서 나는 단지 내가 그것을 시도하도록 노력할 것이고, 이것을 기억할 것입니다 네가 옳은 것처럼 보이고 Axios가 이미 포함되어 있기 전에 내가 말했던 것처럼 마지막 비디오에서 설명한 설정을 수행하면 이미이 기능을 사용할 수 있습니다

포함되어 있으므로 충분히 말할 필요가 없으므로 그만하면됩니다 비트 실제로 먼저 우리는 이것을 사용해 볼 수있었습니다 로딩 메시지를 멈추기 위해 그것을 사용할 수 있습니다 errors 우리는 로딩 메시지를 숨기려면 항상 로딩을 false로 설정할 수있다 그냥 붙여 넣기 만하면됩니다

우리는 API 슬래시 블로그 경로의 경로 폴더에서 설정 한보기에서 온 것입니다 파일로 저장하면됩니다 우리가 볼 수있는 블로그 게시물 목록 우리는 실제로 그것을 우리 안에 넣습니다 응답을 객체에 넣습니다 우리가 우리의 극장 자료를 응답뿐만 아니라 그래서 도트 도트 점을해야 할 그래서 만약 당신이 그냥 우리가이 데이터를 가지고있는 모습을 보아도 극장에 넣으라고 요청하십시오

여섯 번째 당신은 두 명의 daters를 두어야 만합니다 그냥이 권리를 끄도록 내버려둬 그래서 그것은 실제로 발포하지 않는 것이다 Axios가 요청한 것은 당신이해야 할 일이 있기 때문입니다 구성 요소가 마운트 될 때이 마운트가 시작되도록 포스트를 가져옵니다

돔에 그래서 우리가 이걸하면 버스트를 얻어야한다 그래,이 블로그 종점이라 불리는이 사이트가 실제로로드되지 않습니다 우리가 원하는 곳 어디에서도 실제로 제공하지 않기 때문에 이 게시물 속성에 제공합니까 그래서 우리가 적어도 조금 더 멋지게 농장을 만들면 내가하고 싶은 일은 실제로 액세스를 시작하기 전에로드 메시지를 설정하려고합니다 우리가 할 수있는 것이고 거짓을 넣을 것이기 때문에이 점 로딩을 true로하십시오

그걸로 마침내 우리가 뭔가를 얻으면 무슨 일이 생기더라도 거짓으로 설정하고 이것은 아마 빨리 올라갈 것입니다 나는 생각하지 않습니다 보여줄 수있을거야 그래, 그만하자 그래서 당신이 할 수있는 일은 당신이 할 수있는 일은 equals wording 일 때입니다

그게 효과가 있는지 보자 그럼 여기에 다른 것을 넣을 수있다 이것은 일단 우리가 출력을하자면 우리가 거기에 두 가지를 가질 것입니다 그게 아무것도하지 않으면 그냥 볼 그래서 그것은 아니 그것을 아니에요로드 아니에요 뒤로 오, 왜 이렇게 많은 사람들이이 문제를 겪고 있는지 알기 때문에 이것은 그것을하는 오래된 방법입니다 그래서 이것을 가져 오지 않습니다

보기 이것을 시도하고 그것을 새로운 방식으로 바꿀 수 있는지 봅시다 그래서 나는 당신이 어떻게하는지 생각합니다 그래서 당신이 실제로 도랑을 파야 할지도 모르겠지만 이것이 맞는지 기억이 안납니다 그것을하는 방법 아, 그거야 나 한테 자주 이런 일을하지 않아

구문을 잊어 버렸습니다 기본적으로 그렇게하는 것이 기본입니다 이것을이 방법으로이 응답에 넣습니다 이 구문을 사용하면 이전 구문을 실제로 가져올 수 없습니다 여기서는 작동하지 않으므로 우리는 단지 이것을 변경해야합니다

좋아, 그럼 우린 할 수있어 루든은 거짓이야 그래서 성공하면 사용자가 원하지 않으므로이를 false로 설정하지 못합니다 해당 페이지의 내용 및 스피너 또는로드를 보여주는 경우 메시지를 처리 ​​할 수 ​​없을 것입니다 그러면 우리가 원하는 것입니다 그때해야합니까? 그래서 우리는 앞서 언급 한이 게시물을 설정하고 그 내용을 바라건대이 두 가지 일로 반응을 보일 수도 있습니다 하나 일 수도 있고 둘일 수도 있습니다

그러면 지금 보게 될 것 같습니다 일했다 나는 그것을 아직 넣지 않았다 그렇다면 우리가 그것을 어떻게 내는가는 이것을하는 것이다 지금 막 루프를 돌리는 방법을 보여주기 위해 정말 간단 할 것입니다 그것을 통해하지만 여기에 당신은 각각에 루프하려는 요소가 있습니다

이 영역의 반복은 이제 div를 할 것입니다 그래서 당신은 V를 할 것입니다 당신이 처음부터 할 수있는 일이 무엇인지 알아내는 것입니다 우리가 방금 설정 한 게시물의 각 게시물을 통해 당신은 여기서 각자의 게시물을 볼 수 있습니다 모든 제목을 통해 너무 잘하면 그렇듯이 잘하면 루프해야한다

그것은 작동하여 학습 메시지를 얻은 다음 표시합니다 우리가 조명을 미리 넣어 두었다면 분명히 멋지게 보이게하는 데 더 많은 시간을 할애하지만 이것은 우리가 그것을 자원으로 부르는 것을 보여줍니다 들어 보자 나는 그것이 우리가 그것을 부르는지도 인 것과 충돌하는지 궁금하다 다른 무언가 그게 작동하는지 먼저 블로그로 변경하겠습니다

뭔가 옳지 않아서 블로그 포스트로 확실히 들어 왔어 이런 문제가 조금이라도 생기면 내가하고 싶은 한가지를 출력하고 있습니다 모든 것을 출력합니다 그렇게하면 먼저 Jason을 출력해야합니다 그래서 우리는 제목을 가지고 있고, 그 다음 blog 포스트를 가지고있다

나는 그것이 단지 출력이라는 것을 깨달았습니다 하나는 단지 P로 바뀌므로 그냥 작동하기 전에 작동하지 않았습니다 나는 그것이 그것을 보여주고 있었을 정도로 나는 그것을 장애물로 남겨 두었다는 것을 깨닫지 못했다 마치 타일 인 것처럼 콘텐츠를 추가하는 방법은 이것을 없애면 블로그 게시물 목록을 얻을 수 있습니다 실제로 당신을 넣을 수 있습니다 당신은 자신의 구성 요소로 게시물을 가질 수 있습니다

마지막 비디오에서 만든 구성 요소를 사용하여 그것은 다른 구성 요소를 호출하여 블로그 게시물로 이름을 바꾸자 나는 왜 그것이 아마 어쩌면 봉사하고 있지 않은지 잘 모르겠다 우리가 필요로하는 이름을 바꾸고 있기 때문에 잠시 멈춰라 이 오 예 변경 빛의 이름이 바뀌 었으므로 지금 시작하십시오 이 시계 버클은 트럭처럼 어떤 변화라도하고, 우리가 원하는 것 대신에 할 일은 우리가 그 영역을 반복 할 때마다 매번이 구성 요소를 반복하는 것입니다

우리가하고 싶은 일은이 부문을 갖기보다는 뭔가를 가질 수있는 것입니다 그런 다음 소품을 전달할 수 있습니다 그래서 그렇게한다면 제목이 첫 번째 제목과 동일 해지면 실제로 그것을 전달할 수 있습니다 실제 객체 그래서 우리는 먼저 먼저 equals를 먼저 수행 한 다음이 V를 복사 할 수 있습니다 이 구성 요소에 들어가면 첫 번째 객체를 소품으로 보냅니다

이 새로운 구성 요소에 포함 시켜서 우리가 필요로하는 것은 이제 이것을 지금 받게하십시오 우리가이 중 하나를 다른 사람에게한다면 우리는 당신이 그것을 할 수 있다고 생각합니다 이게 내가 생각하기에 수학은 이것을 확인합니다 이 구성 요소에 뭔가가 있다면 다른 구성 요소에서 약간 읽을 수 있습니다 뭔가 잘못 됐어

그냥 먼저 이름이 맞는지 확인해 보자 먼저 버그 오, 키를 묻는 중입니다 그렇게하는 법을 생각해 봅시다 빠른 모양을 가져야한다 우리가 필요로하는 것은 이것입니다

나는 내가 일해야한다고 생각했습니다 왜 불평하는지 잘 모르겠다 감사 그래서 그 구성 요소가 그곳에 있음을 보여줍니다 V 파일이 필요할 수도 있습니다 내가 div에 넣으면 다른 방법을 시도해 보자

그래서 우리가 그것을 디보에 넣으면 우리는 그것을 할 수 있습니다 우리가 해낸 이래로 내가 이걸 했으니 까 잘하면 우리는 각각의 소품을 전달할 수 있도록하겠습니다 메모 할 첫 번째 것과 같음 앞에 붙이면됩니다

실제로 이렇게 사용하십시오 만약 당신이 여기에 있다면, 당신이 할 수있는 것들을 넣습니다 거기에 지갑을 쓰면 그걸 가져 가면 그냥 문자열 포스트를 보낼거야 그리고 소도구처럼 그것은 그것과 같습니다 이걸로 이제 우리는이 내부에있을 수 있다는 것을 확신 할 수 있어야합니다

우리가 전에했던 것처럼,하지만 이렇게하면 재사용이 가능해진다 응용 프로그램에서 이러한 구성 요소를 재사용 할 수 있으므로 먼저 그 제목을 할 수 있어야합니다 나는 우리가 지금 뭐라고 부르던 것을 자른다 첫 콘텐츠는 내가 좋아하는 것을 좋아하지 않는다 소품을 버려서이 프록시를 추가해야합니다

그냥 소품으로 받기를 원한다는 것을 알려주 죠 그래서 제가 처음으로 말하면 그 희망은 이제는 효과가 없어야합니다 그러나 그 이유는 확실하지 않습니다 내가 Jess 전체를 출력하고 우리가 전에했던 것처럼 작동하지 않는다 오, 그것은 블로그 게시물 오, 그래, 왜냐하면 내가 조언을 복사했기 때문에 우리의 데이터베이스에 있지만 나는 이것을 안전한 것으로 그냥 복사해야한다

일해야 해 그래, 그래서 그냥 바닥에 약간의 여백을 두는 것입니다 에어 덕트 호출의 데이터를 보여주는 여러 구성 요소를 공유하는 방법 그것 Axios 나는 그것을 떠날거야 생각 지금은 그 비디오에 대한 정보가 있습니다 다음 비디오는 우리가 가지고있는 다른 방법들을 통해 갈 것입니다 여기 – 주연의 새로운 블로그 게시물 그래서 당신은 그것을 관리 지역에서 가질 수있었습니다

개인을 보여주는 블로그 게시물을 만들 수있는보기 구성 요소 블로그 게시물에 링크로 표시 한 다음 개별 게시물을 표시합니다 그런 다음 아마도 업데이트 및 삭제를 할 것입니다 분명히 확실히 스타가 있기를 바랍니다 YouTube 알고리즘으로 인해 도움이되기 때문에 클릭하십시오 실제로 채널을 성장시키려는 노력과 더 많은 사람들이 더 많은 수업을 할 수 있고 어떤 것에 대한 구체적인 조언이 필요한 경우 그냥 코멘트를 남겨두면 나는 각 사람에게 돌아가서 잊지 말아라

구독하는 경우에도 무료로 수업을 듣기 위해 무료 레슨을받을 수 있습니다 대학 당신은이 감사를 위해 수천을 지불해야 후 보고 있으면서 무엇인가 붙어 있으면 의견을 말하면 모두에게 도움을 청합니다 건배

Impersonating Users in Laravel And Example of TDD using PHPUnit

안녕 얘들 아, 우리 채널에 오신 것을 환영합니다 오늘은이 비디오에서 가장 한 사용자에 대해 이야기하겠습니다

프로젝트의 상황을 고려하십시오 사용자가 설명 할 수없는 상황이 발생합니다 이러한 상황에서 문자 그대로 흉내낼 수 있다면 유용합니다 로그인 자격 증명을 쓰지 않고 계정에 로그인하고 다음 작업을 수행하십시오 그들을 대신해서

또는 사용자가 오류가 발생하면 자신의 오류를 볼 수 있습니다 이 동영상에서 개발할 데모 앱은 다음과 같습니다 이미 Harish라는 관리자 계정으로 로그인하고 있습니다 관리자 슬래시 가장 자리 페이지로 이동합니다 여기서 우리는 다른 사용자의 이메일 주소 (예 : john@example

com)를 입력 할 수있는 간단한 양식을 가지고 있습니다 클릭 할 때 가장 버튼을 클릭합니다 자, 이제 우리는 그 이메일 주소를 사용하여 로그인했습니다 이제 우리는 자신이 필요한 모든 것을 할 수 있습니다 여기서 버튼을 가장하는 것을 중지했습니다

이제이 버튼을 클릭하면 관리자 계정 Harish로 다시 전환됩니다 이 기능을 개발하기 위해 PHPUnit 테스트 케이스도 작성합니다 따라서이 채널을 처음 사용하는 경우 앞으로 이동하기 전에 빨간색 가입 버튼을 누르십시오 벨 아이콘을 누릅니다 따라서 곧 출시 될 비디오를 놓칠 수 없습니다

이제 시작하겠습니다 먼저, 새로운 Laravel 프로젝트를 만들 것입니다 가장이라는 이름을 지어 봅시다 다음으로 cd 가장합니다 이 프로젝트를 편집기에서 엽니 다

이제 우리는 dot env 파일로 데이터베이스를 구성 할 것입니다 이미 mysql에 데이터베이스를 만들었습니다 그래서, 여기서 데이터베이스 이름은 가장이고, DB 사용자 이름은 qirolab이고 암호는 비밀입니다 터미널에서, 나는 php artisan을 실행하여 빠른 인증을 생성하는 인증을한다 발판

다음으로 우리는 PHP artisan migrate를 실행하여 데이터 베이스 다음 단계는 테스트 케이스를 위해 phpunitxml 파일을 구성하는 것입니다 아래쪽에서 데이터베이스 자격 증명을위한 환경 변수를 추가 할 것입니다 여기에 DB_CONNECTION sqlite를 추가 할 것입니다

config databasephp 파일이 보이면 여기 sqlite, 우리는 DB 데이터베이스를 추가해야합니다 그래서 phpunitxml에서 우리는 메모리에 DB_DATABASE를 추가 할 것입니다 테스트를 실행하기 위해 일반적으로 SQLite in-memory 데이터베이스를 사용합니다

테스트를 위해 데이터베이스의 트랜잭션, SQLite 메모리 내에서 이러한 트랜잭션 수행 매우 빨라서 몇 초 안에 수백 건의 테스트를 수행 할 수 있습니다 이제 모든 기본 구성이 완료되었습니다 이제 우리는 사용자 기능을 가장하려고 시도 할 것입니다 시험을 치러 시작할 것입니다 당신은 우리가 ExampleTest

php 파일을 가지고 테스트 기능에서 볼 수 있습니다, 그럼, 이것을 삭제하자 Unit 디렉토리에서 ExampleTestphp 파일을 볼 수도 있습니다 이것도 삭제하십시오 다음, 터미널에서, 나는 PHP를 장인이 테스트를 가장 할 사용자 테스트를 실행합니다 그것은 테스트 기능 디렉토리에 ImpersonateUserTest

php 파일을 만듭니다 상상할 수있는 것처럼, 이와 같이 사용자가 로그인 할 수있는 엔드 포인트를 노출하면 사용자라면이 끝점이 확실히 보호되어야합니다 관리자 만 열 수 있습니다 이를 위해 관리자가 아닌 사용자가 가장 할 수없는 페이지를 만들 수 없습니다 이제 우리가 손님이라면 관리자 슬래시에 액세스 할 수있는 권한이 없습니다

엔드 포인트를 가장하려고합니다 따라서 관리자 슬래시를 가장하려고 시도하면 가장 할 수 있습니다 로그인 페이지로 리디렉션됩니다 이제 이것을 테스트하기 위해 터미널에서 우리는 공급 업체 bin phpunit, 내 터미널에서 필자는 PHPUnit 별칭을 만들었습니다 따라서이 긴 경로를 실행하는 대신 PHPUnit을 실행할 수 있습니다

여기에 응답 상태 코드 [404]가 예상대로 생성됩니다 끝 점이 아직 없습니다 이제 webphp로 이동하여 여기에 경로를 추가하겠습니다 경로는 관리자가 가장합니다

나는 항상 Admin 네임 스페이스에 관리 경로를 추가하려고합니다 여기 컨트롤러는 Admin ImpersonateController @ index입니다 이제 PHPUnit을 다시 실행하면 500 개의 상태 코드가 생성됩니다 그러나 그것은 어떤 오류에 대한 피드백을 표시하지 않았습니다 그럼, 우리가 뭘할지, 여기 전화 할게

이것은 예외 처리 방법이 없습니다 PHPUnit을 다시 실행하십시오 이제 문제에 대한 적절한 피드백을 얻었습니다 이 가장 컨트롤러는 존재하지 않습니다 나는 항상 예외 처리없이 우리의 테스트를 좋아한다

테스트가 실패 할 경우 항상 적절한 피드백을보고 싶어합니다 따라서 문제가 무엇인지 쉽게 확인할 수 있습니다 그래서, TestCasephp에서, 여기서 우리는 public function setUp을 말할 것입니다 부모 집합 여기서 예외 처리없이 이것을 호출 할 것입니다

이제 여기서이를 삭제할 수 있습니다 다시 phpunit을 실행 해 봅시다 여기에 올바른 피드백이 있습니다이 가장 컨트롤러는 존재하지 않습니다 이제이 컨트롤러를 만들어 보겠습니다

PHP 장인 확인 : 컨트롤러 Admin \ ImpersonateController PHPUnit 실행 이제 인덱스 메소드가 존재하지 않습니다 이 방법을 만들어 보겠습니다 App Http 컨트롤러 Admin Impersonate 컨트롤러, 공개 함수 인덱스 다시 테스트를 실행하십시오 이제 우리는 200 개의 상태 코드를 얻습니다 그것은 인덱스 메소드를 치고 있습니다

하지만 여기서 우리는 로그인 페이지로 리다이렉트하는 것을 주장하고 싶다 자, 이제이 메소드를 작성해 보겠습니다 이 미들웨어와 패스 인증 그럼 다시 한번 시도해 봅시다 이번에는 예상대로 인증되지 않은 예외가 발생합니다

그래서, 초록색으로 만드십시오 여기 TestCasephp에서 이것을 주석 처리 할 수 ​​있습니다 실행 phpunit, 이제 그것은 녹색과 우리의 테스트가 전달됩니다 또는 우리가 할 수있는 일을 주석 처리하십시오

여기에 Exception Handling을 추가 할 수 있습니다 다시 한 번 쏴, 우리는 녹색이된다 로그인하지 않은 상태에서이 엔드 포인트를 방문하면 로그인 페이지로 이동해야합니다 그러나 사용자가 로그인 한 것으로 가정 해 봅시다 그래서 우리는 이것을 사용자라고합니다

이 사용자를 생성합시다 공장 App 사용자 클래스 만들기 그리고 여기 똑같은 일을 다시하고 상태 코드를 주장 할 것입니다 403입니다 그래서이 방법으로 우리는 당신이 손님이고이 일을하려고한다면 그것이 안된다는 것을 확인할 수 있습니다 일하다

그리고 일반 사용자라면 아무 것도 작동하지 않을 것입니다 우리는 테이블 사용자가 아니더라도 다시 실행할 것입니다 이것은 우리가 데이터베이스 새로 고침을 사용해야하기 때문입니다 테스트가 끝난 후 테스트 및 롤백 다시 한 번 실행하면 403 번이 아니라 200 번 상태가됩니다

이제 여기에는 커스텀 미들웨어 또는 다른 것이 필요합니다 따라서 간단하게 유지하고 사용자가 무언가를 관리 할 수 ​​있는지 여부를 알려 드리겠습니다 그렇게 이제 부팅 서비스 방법에 대한 인증 서비스 제공 업체로 이동합니다 이전에 게이트를 말할 것입니다

함수를 호출하면 사용자를 받아 들일 것이고 여기서는 필요한 논리를 수행하여 현재 인증 된 사용자에게 작업 수행 권한이있는 경우 그럼 여기서 뭘 할거야 사용자 테이블에 역할 열이 있다고 가정 해 보겠습니다 사용자 역할이 admin 인 경우 true를 반환합니다 이제 사용자 테이블에 역할 열을 추가해 보겠습니다 데이터베이스 이주에서 사용자 테이블 이주 파일을 작성하고, 여기에 테이블 문자열 역할을 추가하고 기본값은 회원

phpunit을 실행하고, 클래스 앱 제공 업체가 없습니다 여기에 타이핑 실수가 있습니다 이미 알아 차렸을 것입니다 다시 테스트를 실행하십시오 응답 상태 코드 403은 리디렉션 상태 코드가 아닙니다

우리는 여기서 실패하고 있습니다 이것은 우리가 여기에서 인증 미들웨어를 삭제했기 때문입니다 이것을 다시 추가합시다 PHPUnit과 우리는 녹색 얻을 지금까지 우리는 브라우저에서 이것을 테스트하지 않았습니다

브라우저에서 테스트하기 전에 PHP 숙련자 마이그레이션을 실행 해 봅시다 새로 고침 사용자 테이블에 새 역할 열을 추가했기 때문입니다 다음으로, 나는 터미널을 나눌 것이고 여기서 나는 달릴 것이다 php artisan serve 브라우저에서이 URL 열기 손님으로 admin / impersonate 경로를 방문하려고하면 즉시 리디렉션됩니다 로그인 페이지

이제 새 계정을 등록하십시오 Harish harish@examplecom 암호 및 등록 다시 admin / impersonate 경로를 방문하려고 시도하면 이번에는 403 오류가 발생합니다 관리자가 아닙니다

자, 터미널, php artisan tinker로 가자 사용자가 동일 함 App 사용자의 첫 번째 사용자 역할이 admin과 같습니다 다음으로 사용자 저장 이제 우리는 admin 사용자입니다 이번에는 admin / impersonate에 방문하면 이번에이 페이지에 액세스 할 수 있습니다 물론 우리는 컨트롤러에서 아무것도 인쇄하지 않았기 때문에 여기서는 아무 것도 볼 수 없었습니다

동작 그것을 확인하기 위해 echo "hello"가 출력됩니다 다음 단계는이 페이지에 대한보기를 만드는 것입니다 이제이보기를 만들어 보겠습니다 뷰 관리자 가장 인덱스를 반환합니다

이 인덱스 블레이드 파일을 작성해 보겠습니다 리소스보기 admin impersonate indexbladephp 다음으로 auth loginblade

php에서 일부 마크 업을 강요합니다 여기에서는 사용자를 가장하는 말을 할 것입니다 양식 작업은 admin slash impersonate이며, 이메일 필드가 필요합니다 다음으로이 비밀번호 필드가 필요 없습니다 그래서 이것을 지우십시오

그리고이 기억 영역도 필요하지 않습니다 다음은이 로그인 버튼으로 가장하는 것입니다 그리고 우리는 이것을 필요로하지 않습니다 브라우저에서 보도록하겠습니다 새로 고침

그리고 이것은 우리의 형식입니다 그런 다음이 양식을 제출하고 해당 사용자를 가장하려고합니다 그래서 이것을위한 테스트를 만들어 봅시다 그래서, ImpersonateUserTestphp에서이 테스트와 마찬가지로, 우리는 그것을 원하지 않습니다

관리자가 아닌 사용자가 가장 (impersonate) 요청을 제출할 수 있습니다 따라서 비 관리자 사용자는 사용자를 가장 할 수 없습니다 우리의 테스트가 거의 동일하기 때문에 여기에서 복사 해 봅시다 여기에 게시물 요청을 제출합니다 이것은 또한 게시물 요청입니다

이제 phpunit을 실행하면 405 오류가 발생합니다 우리가 아직 게시 경로를 만들지 않았기 때문입니다 자,이 게시물 경로를 만들어 보겠습니다 webphp에서 이것을 복제하십시오

이것은 게시 경로이며 행동은 가장입니다 이제 PHPUnit을 실행 해 봅시다 그리고 우리는이 가장을 만들지 않았는데도 녹색을 얻습니다 방법 우리는 이미 여기에서 보호를 구현했기 때문입니다

위생 검열을 위해 이것을 설명합시다 우리는 PHPUnit을 사용하여이 특정 테스트를 실행할 수 있습니다 – 필터는 동등하고 테스트합니다 여기서 실패했습니다 이제 주석 처리를 제거하고 다시 실행하십시오 통과합니다

다음으로 관리자가 사용자를 가장 할 수 있는지 확인하기 위해 다른 테스트를 추가해 보겠습니다 여기에는 사용자가 있으며 관리자도 있습니다 사용자 우리는이 역할을 관리자와 동일하게합니다 그런 다음 관리자로 로그인하여 관리자로 로그인합니다

그런 다음이 엔드 포인트를 제출하고 원하는 사용자의 이메일을 전달합니다 의장 그리고 나서 마침내 우리의 주장은이 주장이 될 것입니다 auth id는 사용자와 같습니다 신분증

괜찮아 그래서 우리는 관리자로 로그인하는 것입니다 그런 다음이 엔드 포인트에 게시물 요청을 제출하여 해당 사용자를 가장합니다 그리고 우리가 모든 것을 올바르게했다면 현재 인증 된 사용자는 관리자가되면 이제는 가장하고있는 사용자가됩니다 계속 해보자

물론 그것은 실패합니다 여기서 우리는 오류를 가장하는 메소드가 존재하지 않습니다 자,이 방법을 만들어 보겠습니다 이 테스트를 다시 실행하십시오, 이번에는 오류가 발생합니다 진행합니다

이제 우리의 주장은 실패합니다 2 경기 예상 1 이제이 기능이 어떻게 작동하는지 살펴 보겠습니다 여기에 요청 객체를 가져 오자 자, 여기, 우리는 물론 이메일을 검증하기를 원합니다

전자 메일이 필요하며 전자 메일 주소인지 확인해야합니다 또한 사용자 테이블에 있는지 확인하고 싶습니다 다음으로이 이메일에 연결된 사용자를 찾아 봅시다 사용자는 이메일이 요청 이메일 인 첫 번째 사용자를 잡는 앱 사용자와 같습니다 자, 여기서 내가 할 일은 인증 ID를 세션에 넣을 것입니다

그래서 우리는 session helper를 세션 impersonate_by auth id에 넣을 것입니다 그런 다음 여기에 해당 사용자로 로그인합니다 그래서, 정식 로그인과 패스 사용자 다음으로 홈페이지로 리디렉션합니다 리디렉션 홈으로 돌아갑니다

시험을 치자 이번엔 초록색입니다 이제 브라우저에서 살펴 보겠습니다 브라우저에서이를 테스트하려면 가장 할 새 계정이 필요합니다 이제이 관리 사용자를 로그 아웃하고 새 계정을 등록 해 봅시다

John John@examplecom 암호 및 등록 이 사용자는 회원이며 가장 할 수있는 권한이 없습니다 따라서 로그 아웃하고 관리자로 로그인하십시오 그것은 harish@examplecom입니다

admin slash sperson으로 이동합니다 여기에 회원 사용자 john@examplecom의 전자 메일 주소를 입력합니다 가장을 클릭하십시오 이제 우리는 요한으로 가장하고 있으며 요한을 대신해서 무엇이든지 할 수 있습니다

유일한 문제는 지금 로그 아웃하지 않으면 빠져 나갈 실제 방법이 없다는 것입니다 이제는 버튼을 만들고, 그 버튼을 클릭하면 우리는 가장을 멈추고 관리자에게 다시 로그인하십시오 먼저 테스트를 작성하겠습니다 여기에서 관리자 사용자가 가장 (impersonating)을 중지 할 수 있다고 말합니다 여기에서 모두 복사하십시오

따라서 관리자로 로그인 한 다음이 끝점에 게시물 요청을 제출해야합니다 해당 사용자를 가장하기 위해 여기에 있습니다 그리고 나서 현재 인증 사용자는 관리자가 아니어야합니다 이제는 해당 사용자 여야합니다 이제 가장 (impersonating)을 중지하기 위해이 끝점에 삭제 요청을 보냅니다

다음은이 주장이 auth id가 admin id와 같음을 나타냅니다 이 테스트를 실행 해 보겠습니다 경로를 만들지 않았기 때문에 실패합니다 그래서, webphp에서

이것을 복제하십시오 이것은 삭제 경로입니다 그리고 그 행동은 멈춘다 이제이 테스트를 실행하면 무단으로 예외가 발생합니다 이는이 삭제 요청을 제출할 때이 사용자로 로그인했기 때문입니다

그 사용자는 회원 사용자입니다 가장 (Impersonate) 컨트롤러에서이 경로를 보호했으며 유일한 관리자 만 사용할 수 있습니다 사용자 그래서, 여기서 우리는 중지 방법을 제외한 모든 것을 보호 할 것이라고 말할 것입니다 그리고 여기에 사용자가 가장하는 것을 중지 할 수 있습니다

테스트를 실행하면 다시 실패합니다 중지 방법이 존재하지 않습니다 자,이 방법을 만들어 보겠습니다 테스트를 다시 실행하십시오 이번에는 우리의 주장이 실패합니다

그래서, 우리가 어떻게 통과 시킬지 여기에 우리는 세션에 관리자 아이디를 저장했습니다 그래서, 우리는 그 id를 잡고 그 admin 사용자로 로그인 할 것입니다 그래서 여기에 Auth loginUsingId와 impersonate_by를 가져옵니다 세션에서

이제 더 이상 세션에서 impersonate_by가 필요하지 않습니다 그래서 이것을 지우십시오 세션 impersonate_by을 잊어 버려 그런 다음 관리자 가장을 페이지로 리디렉션합니다 그게 전부예요

테스트를 해보 죠 그리고 이번에는 초록색입니다 이제 브라우저에서이를보고 싶습니다 먼저 가장하지 마세요 버튼을 추가하십시오 탐색 표시 줄에

이를 위해 appbladephp 레이아웃으로 이동해 보겠습니다 바로 여기에 버튼을 추가 할 것입니다 그래서 여기에 우리가 말하길, 세션이 다음으로 가장하여 추가하는 경우 li class nav-item form 메소드 게시 조치는 admin slash impersonate입니다

csrf 토큰 및 메소드 삭제 버튼 클래스 btn btn-link 그리고 여기서 우리는 도용을 중지한다고 말합니다 여기 모두 있습니다 브라우저로 이동합니다 새롭게 하다

여기서 우리는 "도용 중지"버튼을 가지고 있습니다 이것을 클릭하십시오 관리자 인 Harish에게 다시 회신합니다 한 번 더 보자 우리는 john@example

com hit impersonate로 가장 할 것입니다 이제 우리는 John으로 로그인하고 대신 John을 대신하여 조치를 취할 수 있습니다 명의 도용을 중지하면 관리 사용자 Harish에게 다시 전환됩니다 이것은이 비디오의 전부입니다 튜토리얼이 마음에 들면 좋아하는 버튼을 클릭하고이 비디오를 공유하고 구독하는 것을 잊지 마세요

우리 다음 곧 출시 될 비디오에서 곧 만나요

How to Create a JavaScript Gantt Chart App Using PHP Laravel – DHTMLX Tutorial

안녕하세요, DHX 기술 지원 팀의 Ramil입니다이 동영상에서는 Laravel 프레임 워크를 사용하여 Gantt 차트 응용 프로그램을 쉽게 만들 수 있습니다

GitHub에서 데모를 준비하거나이 단계별 비디오 가이드를 따르십시오 이 비디오를 위해 여러분은 이미 PHP의 기초에 익숙하다고 가정합니다 'Composer'패키지 관리자뿐만 아니라 시스템에 설치하십시오 확실하지 않은 경우에 대한 소개 문서를 확인하십시오 Laravel 프레임 워크

모든 링크는 동영상 설명에 포함됩니다 이제`create-project` 명령을 사용하여 프로젝트 상용구를 생성 해 보겠습니다 필요한 파일을 모두 다운로드하여 만드는 데 1 분 정도 걸립니다 완료되면 모든 것이 올바른지 확인할 수 있습니다 이 단계에서 우리는 기본 Laravel 페이지를 얻습니다

괜찮아! 다음으로 Gantt 차트를 사용하여 새 페이지를 만듭니다 views 폴더로 이동하여 ganttbladephp라는 새보기를 작성하십시오 페이지에 Gantt 차트를 표시하는 데는 단지 3 단계 만 거쳐야합니다

새 페이지를 추가 한 후에는 브라우저에서 액세스 할 수 있도록해야합니다 이 튜토리얼에서는 Gantt를 앱의 기본 페이지로 만들 계획입니다 webphp로 가서 기본 경로를 'gantt'로 변경하십시오 우리가 지금 무엇을 가지고 있는지 확인합시다

그래서 빈 Gantt 차트가 있습니다 이제 Gantt가 모델을 사용하여 데이터베이스에서 데이터를 가져 오도록하겠습니다 이 비디오에서는 데이터베이스 용으로 MySQL을 사용하고 설치했다고 가정합니다 귀하의 시스템에 MySQL 서버에 새로운 데이터베이스를 생성해야합니다

녹음 할 때 PHP에 필요한 버전 8의 MySQL에는 몇 가지 문제가 있습니다 workarounds, 그래서 나는 MySQL 57을 사용하고있다 데이터베이스 서버가 실행 중인지 확인하면 'env'파일을 열고 연결 설정을 업데이트하십시오

여기서 방금 작성한 데이터베이스를 지정합니다 데이터베이스 사용자 및 암호를 설정하십시오 나머지 설정 값은 기본값과 잘 맞습니다 다음 단계는 모델 클래스와 마이그레이션을 생성하는 것입니다 Artisan 명령을 사용하여 클래스 및 마이그레이션 파일을 생성합니다

마이그레이션이 성공적으로 생성되었음을 알 수 있습니다 이제 마이그레이션 파일을 열어 보겠습니다 우리 작업과 링크에 대한 열을 지정하십시오 작업 테이블의 코드는 다음과 같습니다 그리고 링크 테이블의 코드는 다음과 같습니다

그것은 Gantt가 일하기 위해 요구되는 최소한의 것입니다 추가 데이터를 저장해야하는 경우 우리는 문제없이 모든 열을 추가 할 수 있습니다 이제 우리는 마이그레이션을 실행합니다 그 동안 우리 앱을위한 테스트 데이터를 생성 할 수 있습니다 artisan 명령을 사용하여 시드 자 클래스를 생성합니다

이제 TasksTableSeeder에 데이터를 추가합니다 데이터가로드되는지 확인하기 위해 몇 가지 작업을 추가했습니다 그리고 DatabaseSeederphp에서 테이블 시더를 호출하십시오 그런 다음 명령 줄에서 데이터베이스를 시드 할 수 있습니다

일단 데이터베이스가 생성되고 모델이 정의되면, 우리는 Gantt에 데이터를로드 할 수 있습니다 클라이언트 측에서는 JSON 형식의 데이터를 허용합니다 우리는 그것이 어떻게 작동 하는지를 알기 위해 간단한 컨트롤러를 만들 수 있습니다 클라이언트가이 작업을 호출 할 수 있도록 경로를 등록하십시오 api

php routes 파일에 경로를 추가합니다 마지막으로 'ganttload'메소드를 사용하여 뷰에서이 액션을 호출합니다 ganttload가 AJAX 요청을 보냅니다

지정된 URL에 JSON 응답을 기대할 것입니다 전에 정의 된 또한 xml_date 값을 지정했습니다 이것이 우리가 Gantt에게 데이터 소스가 사용할 날짜 형식을 알려주는 방식입니다 클라이언트 쪽에서 파싱 할 수 있습니다

응용 프로그램을 다시 시작하면 Gantt는 우리가 데이터베이스에 추가 한 작업을 표시해야합니다 기본적으로 작업 트리가 축소되어 있지만, 당신은 그것이 확대되기를 바랄 수도 있습니다 프로젝트 트리의 초기 상태는 공개 설정 클라이언트 쪽 Gantt 또는 서버에서 반환 된 데이터에서 가져옵니다 우리가 Laravel 통합을 다루고 있기 때문에, 후자로 진행해 보겠습니다 공식 문서에서, 우리는 작업의 초기 상태가 `open` 속성의 값

우리가이 값을 작업 모델에 저장하려고한다고 생각하지 않습니다 대신, 작업 클래스에 고정 값 속성을 추가 할 수 있습니다 응용 프로그램을 다시 실행하면 초기에 지점을 확장해야합니다 현재 Gantt는 백엔드에서 데이터를 읽을 수 있습니다 그러나 클라이언트에서 변경된 사항은 백엔드로 보내지거나 데이터베이스에 저장되지 않습니다

예를 들어, 여기에 새 작업을 추가 한 다음 페이지를 다시로드하면 그 작업이 사라진 것을 볼 수 있습니다 고쳐 주자! 이전 비디오에서 보았 듯이, 당신은 꽤 쉽게 클라이언트 측에서 업데이트를 가능하게 할 수 있습니다 지금 우리가 필요로하는 것은 작업과 링크 모두에 대한 작업을 처리하는 컨트롤러를 정의하는 것입니다 모델을 만들고 클라이언트의 경로를 만들고 클라이언트 측에서 데이터를 저장할 수 있습니다 컨트롤러부터 시작하겠습니다

각 모델에 대해 하나의 리소스 컨트롤러를 만듭니다 여기에는 모델을 추가, 삭제 및 업데이트하는 메소드가 포함됩니다 이 방법은 매우 간단합니다 클라이언트 측에서 작업 객체를 요청 매개 변수를 입력하면 모델 항목을 구성하여 저장 장치에 저장합니다 dhtmlxGantt에 특정한 몇 가지가 있습니다

"진행"값을 확인하고 요청이있는 경우 기본값을 0으로 지정합니다 매개 변수가 비어 있습니다 클라이언트 측 Gantt가이 열을 선택 사항으로 간주하고이 열을 선택적으로 간주하기 때문에이를 수행합니다 값이 클라이언트에 설정되지 않은 경우 백엔드 이 경우 기본값 대신 null 대신 0을 설정해야합니다

둘째, 응답 형식을 기록하십시오 action 매개 변수는 클라이언트 측에 조치 결과를 알려줍니다 클라이언트가 이해할 수있는 몇 가지 고정 값이 있습니다 이 경우 성공적으로 추가 된 항목에 대해 '삽입 됨'상태가 반환됩니다 그리고 새로운 데이터베이스 ID를 포함해야하는 "tid"매개 변수가 있습니다

목 실제로 응답과 함께 추가 정보를 클라이언트에게 보낼 수 있습니다 기본적으로 Gantt는이를 무시하지만 공용 API를 사용하여 Gantt에 액세스 할 수 있습니다 여기에는 "업데이트"및 "삭제"작업이 있습니다 그들은 거의 같은 방식으로 작동하므로 더 이상 확장하지 않을 것입니다

Gantt가 호출 할 수 있도록 새 컨트롤러의 경로를 추가하는 것을 잊지 마십시오 이제 LinkController에 대해서도 같은 것을 구현해 보겠습니다 우리가 방금 만든 작업 컨트롤러와 정확히 같기 때문에 너무 자세하게 설명하지 않겠습니다 구현 됨 : 여기서 새로운 링크를 생성하는`store` 메소드를 볼 수 있습니다 기존 항목의 변경 사항을 저장하는`update` 메소드와`destroy` 메소드는 그것과 거의 동일합니다

이전의 경우와 마찬가지로 경로를 추가하십시오 마지막으로 클라이언트 쪽에서 업데이트를 사용할 수 있습니다 우리가 이전 단계에서 모든 것을 올바르게 만들었다는 것을 감안할 때, 우리의 간트는 변화를 저장할 것입니다 방금 구현 한 컨트롤러를 사용합니다 앱을 다시 실행하고 확인해 보겠습니다

dev 도구를 보면, Gantt가 이제 서버를 호출해야합니다 내가 뭔가를 수정할 때마다 페이지를 새로 고침하면 모든 변경 사항은 유지됩니다 더 많은 것을 알고 싶다면 이전 비디오와 공식 문서를 볼 수 있습니다 Gantt가 사용하는 요청 형식

그리고이게 다야! Gantt 차트가 포함 된 간단한 Laravel 응용 프로그램을 만들었습니다 봉사해야하는 dhtmlxGantt를 사용하여 실험을 시작하십시오 동영상 설명에서이 자습서의 텍스트 버전에 대한 링크를 찾을 수 있습니다 완벽한 응용 프로그램과 함께 GitHub 저장소에 대한 링크입니다 다음 번에 짧은 동영상 시리즈를 계획하고 있습니다

Gantt API의 다른 부분 탐색 일반적으로 직면하는 일반적인 작업 실제 프로젝트에서 Gantt 사용하기 구성처럼 Gantt 차트에서 왼쪽 그리드의 댓글 섹션에서 내가 다루고 싶은 다른 주제를 알려주십시오 앞으로는! 관심과 비디오를 주셔서 감사합니다!

Laravel Package Development – e07 – Parsing the Body Using the PHP Parsedown Library

그래서 지금까지 우리는 머리를 돌 보았습니다 그러나 지금은 머리를 돌보아야 할 때입니다

신체 MarkFile 테스트로 돌아가 봅시다 현재이 테스트가 진행 중입니다 에 대한 테스트 목적으로, 나는 우리가 할 수 있도록 여기에 한 줄 더 추가 할 것이다 우리가 정확한 데이터를 되찾고 있다는 것을 확신하십시오

h1을 추가하겠습니다 제목과 나는 단지 그것을 "표제"로 만들거야 그리고 그게 다야! 나는 그저 원할 뿐이야 우리가 기대하고있는 정확한 데이터를 되 찾을 수 있는지 확인하십시오 에서 우리 PressFileParserTest, 새로운 테스트를 작성하자,이 테스트가 될거야 "시체가 저장되고 손질됩니다"이 테스트에서 우리는 해당 데이터 배열에서 "body"에 대한 항목이 있습니다 그래서, 나는 실제로 복사 할 것이다

이 준비와 그것을 여기에두고 우리는 우리가 "몸"을 가지고 있는지 확인하고 있습니다 여기서 뭐야? 자, 언뜻보기에는 다소 까다로울 수도 있지만 우리의 "MarkFile1md"로 돌아가서 우리가 정말로 기대하는 것을보십시오 그래서 우리는 이것을 기대하고 나서 우리는 하나의 줄 바꿈과 또 다른 줄 바꿈을 기대하고있다 그리고 우리는 이것을 기대하고 있습니다

좋아, 한 줄 바꿈, 두 줄 바꿈, 그 다음 그러나 우리는 이미 작은 따옴표를 사용하면 개행 문자가 아닌 문자 "백 슬래시 n"을줍니다 자, 이것을 이중 따옴표로 바꾸자 좋아 우리 테스트를 해보자

다시 터미널 "phpunit – – filter "그리고 "undefined index body"를 얻습니다 좋아요

일하러 가다 우리의 PressFileParser에서는 현재 아무 것도하지 않습니다 여기 우리가 $의 힘을 가지고 있지만 몸을 저장하는 측면에서 데이터, 우리는 실제로 시체를 구하기 위해 아무것도하지 않습니다 자, 보여 드릴께요이 데이터를 여기에서 죽이고 털어 버릴거야

그리고 보자 우리가 얻는 것 우리가 두 번째 키 밑의 문자열을 보면 실제로 우리가 그것은 이미, 그러나 우리는 그것을 저장하지 않습니다 그럼 먼저 저장하겠습니다 $ this 데이터 그리고 나서 우리는 이것이 "몸"이되어야한다는 것을 압니다

우리는 그것을 설정하려고합니다 키 2에서이 데이터 $와 같습니다 다시 말하지만, 열쇠 2가 여기에 있습니다 우리는 이것을 얻고 있습니다 이제 어떻게 될지 보자

좋습니다보기에 조금 까다 롭습니다 그래서, 나 실제로 당신이 이것을 보여주고 싶습니다 나는이 데이터 키 2 달러를 "죽이고 털어 내야한다" 그래서 우리는 우리가 기대하지 못했던 몇 가지 선도적 인 새로운 라인을 가지고 있습니다

머리, 우리는이 문자열을 "자르거나 (trim)"만들 수 있으며 필요한 결과를 얻을 수 있습니다 한 번 보자 그걸로 자, 이제 코드를 변경해 보겠습니다 이 데이터 대신 $ "trim ()"$이 데이터 키를 두 번 통과하면 거기에갑니다! 우리는 초록색 시험을하고 있습니다 에서 다음 에피소드, 나는 실제 HTML로 그 markdown 구문 분석 태클 싶어요

Laravel Package Development – e08 – Parsing the Date Field using PHP Carbon Library

이 시점까지는이 "MarkFile1md"를 테스트로 사용했습니다

더미하지만이 에피소드의 첫 번째 부분에서는 우리가 뭘하는지에 대해 정말 세분화 될 수있는 작은 리펙터 실제로 테스트 PressFileParserTest로 돌아가 보겠습니다 이게, 나는 PressFileParser에 파일 이름 이상을 전달할 수 있기를 원한다 그래서, 제가 생각하기에, 저는 빠른 점검을하고 무엇이 PressFileParser에 전달 된 파일입니다 그렇다면 우리는 우리가 지금하고있는 일을 계속할 것입니다

그 파일의 내용은 아니지만 그렇지 않은 경우에는 실제로 시도해 볼 것입니다 대신 전달 된 것을 구문 분석하십시오 그럼, 어떻게 생겼는지 보자 이 테스트 아래에서 새로운 테스트를 시작하자 그리고 나는 그것을 "문자열 대신 사용할 수도 있습니다

"여기에있는 것을 보도록하겠습니다이 테스트를 복사 할 것입니다 이 테스트에 들어가서 수정 해 봅시다 따라서 파일 이름을 전달하는 대신 원하는 것은 문자열을 전달하는 것입니다 최소 금액은 무엇입니까? 정규 표현식을 만들기 위해 전달해야하는 데이터 그리고 일반 내가 말하는 대시가있는 표현입니다

그래서, 우리는 그것이 새 줄과 그 다음 일종의 필드가 오는 3 개의 대시가 필요합니다 그것을 "제목"과 "내 제목"이라고 부르면 나는 그것이 새로운 줄을 기대하고 있음을 안다 3 개의 대시가 뒤따라오고 그 다음에 또 하나의 새로운 줄이 나오면 바로 이리 그걸 붙여 넣자이 시험을 위해서, 나는 실제로 설명

여기에서 내가 바꿀 부분은 PressFileParser에 있습니다 이 파일을 찾으려고합니다 그것이 존재하지 않는다면 우리는 무엇이든 취할 것입니다 전달하고 대신 그것을 사용하려고합니다 이 테스트를 실행하고 일하게하십시오

그래서 분명히 그것은 우리에게 "파일이 존재하지 않습니다"라고 우리에게주는 이유는 실제로 우리가 전달은 문자열입니다 그걸 수정합시다! PressFileParser로 돌아가서, 메소드 문제의 사람은 여기에 있습니다 우리는 맹목적으로 받아 들여지는 것이 무엇이든간에 그 내용을 얻는 것 파일이 있는지 여부를 확인하지 않고 있습니다 아무것도

자 이제하자 파일 파사드를 사용하여 파일 존재하고 그것은 "File :: Exists ()"이고 우리는이 파일 이름을 $로 전달할 수 있습니다 이것에 대한 속기를 사용할 것입니다 파일이 존재한다면, 우리는 파일 그렇지 않으면이 파일 이름을 $로 사용하기 만하면됩니다

말이 돼? $ this 파일 이름은 생성자에 전달되며, 여기서는 여기에 있습니다 이것은 우리가 생성자에게 전달하는 것 그런 다음 분할 파일을 건너 뛰고 우리가 확인해 볼게, "이 파일이 존재합니까?" 이 경우에는 실패 할 것이므로 우리는 else 부분으로 건너 뛸 것이지만이 경우 여기에있는 것처럼 파일이 존재한다면, 분명히이 파일이 실제 파일이라는 것을 알고 있으므로 그 파일을 사용하여 "preg_match ()"를 수행하십시오 한번 더 테스트를 해봅시다 우리는 초록색으로 돌아 왔습니다

전체 제품군을 실행하고 우리는 아직 초록색입니다 그래서, 작은 요소로 파일을 전달하거나 문자열을 전달할 수 있으며 둘 다 똑같이 작동합니다 이제 새로운 유형의 분야에 대해 이야기하고 싶습니다 "날짜"필드 우리는이 블로그 게시물에 날짜는 대부분의 블로그 게시물에 표시됩니다

따라서 Google 사용자는 "날짜"에 게시 됨 그래서, 제가하고 싶은 것은 일종의 소원 프로그래밍입니다 잠시만 여기서 우리는 이것을 "날짜 필드가 파싱 됨"을 테스트하십시오 이제 대부분의 Laravel과 함께, 당신은 날짜가 Carbon 인스턴스 네가 카본에 익숙해서 우린 들어 가지 않을거야

훨씬 자세하지만 Carbon은 우리가 얘기했던 PHP 패키지 중 하나입니다 그것은 우리가 데이트를하는 데 도움이 될 것입니다 따라서이 테스트의 일환으로 우리가 Carbon 인스턴스를 실제로 돌려 받고 있는지 테스트합니다 자, 이걸 끝내자 우리가 시작할 수 있도록 테스트

이걸 복사하고 수정 해 보겠습니다 그래서, 우리는 데이트 할 때가 있다는 것을 알고 있습니다 우리 데이트에서, 나는 5 월 14 일을 말할거야 1988 년에 우리는 아무것도 전달할 필요가 없습니다 그래서, 사실 그렇게 지울거야

일단 우리가 데이터를 얻으면 우리는 여기서 무엇을 기대하고 있습니까? 글쎄, 우리는 할 수 없어 주장 포함 대신에 두 가지 단언을하자 $ this assert 인스턴스 우리가 주장하는 것은 무엇인가? "Carbon Carbon :: class"가 일치했습니다 키를 누르면 날짜가됩니다

이제 카본이 수입되고 있습니다 탄소 탄소 더구나, 우리는 날짜가 있는지 확인하기를 원할 것입니다 우리가 문자열을 전달하고 적절한 Carbon을 기대하면서 파싱 된 속성 예 $ this는 평등을 선언하고 서식을 변경합니다

우리가 찾고있는 자신감을주십시오 "1985 년 5 월 14 일"그래서, 만약 우리가 날짜에 데이터를 저장하고 format 메서드를 호출합니다 이제, 우리는이 시점에서, date는 Carbon 인스턴스입니다 테스트의이 부분에 도달하면 $ data date가 Carbon 인스턴스인지 확인하십시오 즉, "format ()"메서드를 호출 할 수 있습니다

그 위에 이제 형식에 맞는 문자열을 전달해 보겠습니다 한 달에 두 자리 숫자 "m" 두 자릿수의 일 동안은 "d"를, 네 자리에는 대문자 "Y" 자리 연도 좋아, 그게 다야! 무슨 일이 일어나는지 보자

분명히, 우리는 실패하고 있습니다 탄소 탄소의 사례라고 단언하십시오 일하러 가자 우리의 PressFileParser, 여기에 새로운 단계가 필요합니다 $ this "processFields ()"protected 메소드를 추가하십시오

그래서, 여기서 우리의 첫 걸음은 프로세스 필드에서 반복하고 싶습니다 $ 데이터를 통해 필드 이름을 일종의 논리와 일치 시키려고합니다 지금 이것은 매우 순진한 구현입니다 다음 강의에서 우리는 이것을 재사용 가능한 멋진 코드로 리팩터링하는 것 "foreach $ this data as"와 무엇을 할 것인가? 우리는이 시점에서 여기에 있는가? 우리는 실제로 분야가 있고 우리는이 분야에서 가치가 있습니다

포인트 if 문을 작성해 보겠습니다 "필드가 있다면"그리고 우리가 가진 분야는 무엇입니까? 찾고있어? 우리는 날짜 필드를 조작하려고 시도하고 있으므로 "필드"가 3 개인 경우 '날짜'와 같으면 'die and dump'값을 사용하십시오 나는 우리가보고 싶어한다 우리가 가지고있는 것

그리고 거기에 우리 날짜가 포함 된 문자열이 있습니다 그래서, 여기서 탄소 변환을 해봅시다 이 데이터를 키로 사용하면 "Carbon :: parse"와 같은 필드를 입력하면 값을 전달합니다 우리의 "죽어 버리고 덤프"를 지우고 테스트를 실행 해 봅시다 우리는 초록색입니다! 자, 당신은 즉시 깨지기 쉽다는 것을 이해할 수 있습니다

설명을 위해 if 문에서 하나 더 찔러야합니다 내가 처리하고자하는 것은 "몸"입니다 현재, "body"에 대한 우리의 테스트는 간단합니다 우리가 문자 상장을 되 돌리는 것을 확실히했지만 우리는 실제로, 우리는 가격 인하를 분석 할 필요가 있습니다 그래서 이것을 수정할 것입니다

우리가 실제로 기대하는 것을 얻을 수 있도록 약간만 테스트하십시오 그래서, 우리는 "#"결과는 "<h1>"태그입니다 그래서, "<h1>"과 "<h1>"그리고 우리는 새로운 라인이 정말 새로운 라인이지만 단락이 될 것이므로 "<p>"태그를 사용하십시오 자, 이제이 시험 실패 할 것입니다 왜냐하면 우리는 파싱을하지 않기 때문입니다

우리가 어떻게 그 문제를 해결할 수 있는지 보도록하겠습니다 우리가 그 시험을 녹색으로 되돌릴 수있는 가장 쉬운 방법을 찾아 봅시다 우리는 "else if"를 추가하십시오 그래서, $ field triple이 "body"와 같으면, 우리는 이것을 알 수 있습니다 우리가 "몸"에 머무르는 단계

이 데이터 필드는 $와 같습니다 markdown 파서이므로 우리가해야 할 일은 그냥 "parse"메소드를 호출하는 것뿐입니다 괜찮아, "MardownParser :: parse ()"는 값을 전달합니다 테스트를 한 번 더 실행 해 봅시다 그리고 우리는 거기에 우리가 녹색에있어! 전체 제품군을 실행 해 보겠습니다

아직 녹색입니다! 에서 다음 강의에서는 우리의 테스트를 사용하여 아주 멋진 리팩터링을 이끌어 낼 것입니다 이것을보다 객체 지향적 인 접근 방식으로 바꾸십시오 계속 지켜봐

#3 – Whispering Client Events Using Laravel-echo and Laravel WebSockets Package | Real-time chat App

안녕 얘들 아, 우리 채널에 오신 것을 환영합니다 이전 스크린 캐스트에서는 Laravel WebSockets를 사용하여 간단한 채팅 시스템을 개발했습니다 패키지, VueJs 및 Laravel echo

실시간으로 메시지를 보낼 수 있으며이 채팅 페이지의 사용자를 추적 할 수도 있습니다 WebSockets의 도움으로 페이지를 새로 고침하지 않고 실시간으로 따라서 이전 스크린 캐스트를 보지 않았다면 계속하기 전에 시청해야합니다 비디오 이제이 비디오에서이 사용자 입력 텍스트를 살펴 보겠습니다 지금은 하드 코딩 된 텍스트이고, 우리는 그것을 기능적으로 만들 것입니다

다음으로이 스크롤바를 살펴볼 것입니다 몇 개의 메시지를 보낼 때 메시지를 보려면 스크롤해야합니다 우리는 새로운 메시지를 받으면 맨 아래로 자동 스크롤해야합니다 우리는 잠시 후에이를 고칠 것입니다 계속 진행하기 전에이 채널을 처음 사용하는 경우 빨간색 구독 버튼을 누르고 언론 종 아이콘, 그래서 우리는 곧 우리의 비디오를 놓칠 수 없습니다

이제 먼저이 스크롤 문제를 해결해 보겠습니다 이 문제를 해결하기 위해이 vue-chat-scroll 패키지를 설치합니다 Vue에 대한 자동 스크롤 – 아래 지시문입니다 다음은 설치 단계입니다 터미널에서 실행 해 봅시다

설치가되었으므로 다음 단계는 js 파일로 가져 오는 것입니다 따라서 리소스, js, app dot js로 이동하십시오 여기서 Vue를 가져옵니다 그래서 여기에서 복사하여 여기에서 복사 할 것입니다 다음은이 지시어를 사용하는 것입니다

그래서 채팅 구성 요소에서이 ul 태그 안에는 메시지가 표시됩니다이 li 태그 하나의 메시지 항목입니다 여기에 v-chat-scroll 지시문을 붙여 넣으겠습니다 자, 이걸 시험해 봅시다 따라서 터미널 npm에서 시계 실행 그것은 우리의 변경 사항을 app dot js 파일로 컴파일했습니다

브라우저를 새로 고침하십시오 이제 메시지를 보내면 맨 아래로 자동 스크롤됩니다 지금 일하고있다 이제 이것을 사이드 바이 사이드 브라우저에서 테스트하십시오 이 창에서 저는 example

com에 john 인 다른 계정과 암호로 로그인 할 것입니다 이제 여기에서 메시지를 보내면 자동 스크롤됩니다 이제 스크롤 문제가 해결되었습니다 자동 스크롤이 잘 작동합니다 다음 단계는 사용자가 텍스트를 입력하여 작업하게하는 것입니다

우리는 고객 이벤트의 도움을 받아 기능적으로 만들 수 있습니다 웹 소켓 구성 파일에서 기본적으로 client_messages는 비활성화되어 있습니다 사실로 설정해야합니다 이제 채팅 구성 요소에서 메시지를 전송하기 위해 입력 된 내용이 있습니다 따라서, 사용자가 키를 눌렀을 때 또는 사용자가이 입력을 입력하기 시작할 때이를 말합니다

그런 다음 타이핑 이벤트를 보냅니다 이제 아래쪽에이 메서드를 추가해 보겠습니다 여기이 채널을 잡아 보자 Laravel echo는 우리에게 클라이언트 메시지를 보내는 방법, 즉 속삭임을 제공합니다 우리는 다른 모든 고객에게 타이핑 이벤트를 속삭이며, 필요한 데이터는 여기를 통과하십시오

그래서 우리는이 도트 사용자를 전달할 것입니다 메시지를 입력하는 로그인 한 사용자 따라서 사용자가 입력 할 때 우리는 채널을 얻고 다른 모든 클라이언트에게 속삭이게됩니다 사용자가 타이핑 중이다 따라서 사용자가 타이핑 할 때 클라이언트 이벤트를 WebSocket에 보내면 다음 단계로 진행됩니다

속삭임을 듣고있다 그래서 우리는 바로 여기에서 할 수 있습니다 왜냐하면, 우리는 listenForWhisper 메소드를 가지고 있습니다 이름은 타이핑이고, 다음에 응답을받습니다 콘솔 로그에서 브라우저

이 두 브라우저를 새로 고칩니다 이제이 창에서 타이핑을 시작하면 아무 일도 일어나지 않았습니다 콘솔 로그가 예상됩니다 오 실제로, 우리는 php artisan serve를 다시 시작하는 것을 잊었습니다 구성 파일

또한 WebSocket 서버를 다시 시작하십시오 이제 브라우저로 돌아가서 두 창을 새로 고칩니다 이제 여기에 타이핑을 시작하면 바로 타이핑 이벤트가 캡처됩니다 창문 그리고 그것은 메시지를 입력하는 사용자입니다

그래서, 우리가 뭘 할거야 먼저 활성 사용자가 있다고 가정 해 봅시다 처음에는 거짓이었습니다 그리고 여기서 우리는 수신 타이핑 이벤트에서이 도트 활성 사용자가 사용자와 같다고 말합니다 이것은 또한 사용자입니다

그리고 여기에 활성 사용자가있는 경우 활성 사용자 도트 이름이 입력됩니다 이제 이것을 브라우저에서 테스트 해보고 두 브라우저를 모두 새로 고침하십시오 이제 여기에 타이핑을 시작하면, 바로 여기에서 John이 타이핑 텍스트가 나타나는 것을 볼 수 있습니다 비슷하게, 우리가이 끝에서부터 타이핑하면 우리는 똑같은 것을 얻습니다 이제 우리는 그것을 어느 시점에서 사라지게 할 필요가 있습니다

그래서, 우리가 필요로하는 것은 입력 이벤트를 받고이 활성 사용자를 업데이트 한 다음 3 초 후에 초,이 활성 사용자를 다시 설정하십시오 이를 위해 setTimeout 함수를 사용합니다 여기 우리가 말하길,이 도트 액티브 사용자는 거짓과 같습니다 그리고 우리는 세 번 후에 그렇게 할 것입니다 초

새로 고침을 한 번 더하십시오 나는 타이핑을 시작할 때 여기 하나 하나 두 개가 사라졌다 그러나 당신은 문제를 볼 것입니다, 여기서 계속 입력하면 3 초 후에 다른 창에서 볼 수 있습니다 계속 깜박입니다 이 타이머는 계속 설정되어 활성 사용자 재설정을 유지하는 메모리를 구축하기 때문입니다

그럼 어떻게 해결할 수 있을까요? 새로운 타이핑 이벤트를 받으면이 타이머를 지워야합니다 그래서 타이핑 타이 머가 있다고 가정 해 봅시다 처음에는 거짓입니다 여기에 타이핑 타이머를 할당 할 것입니다 이제 여기에 우리가 타이핑 타이핑이 있는지 말할 수 있습니다

이 도트 타이핑 타이머를 지우십시오 따라서 사용자가 타이핑 중이며 타이핑 이벤트를 받으면이 활성 사용자를 업데이트하십시오 다음으로 타이핑 타이머가 이미있는 경우 삭제하고 새 타이머를 만듭니다 이제 크롬으로 돌아갑니다 이 새로 고침을 다시하십시오

이제 내가 타이핑을 시작하면서,이 존에 대해 계속 주시하고 타이핑하고 있습니다 더 이상 깜박이지 않습니다 우리가 타이머를 비우고 있기 때문입니다 이제 타이핑을 멈 추면 타이머가 3 초로 리셋됩니다 그래서 3 초 후에 사라질 것입니다

이제 다 끝났어 우리는 아주 간단한 표준 채팅 시스템을 만들었습니다 이 튜토리얼을 즐겁게 사용하시기 바랍니다 동영상이 마음에 들면 버튼처럼 동영상을 공유하고 구독하는 것을 잊지 마세요 우리

곧 나오는 비디오에서 보자

Spatie Laravel Permission Package Tutorial | Using Middleware for permission and role #4

비트 피 (bitfumes)에 오신 것을 환영하며 laravel permission tutorial의이 에피소드에서 우리는 어떤 경로로든 직접 들어가서 사용자를 제한 할 수있는 방법을 알아볼 것입니다 마지막 에피소드에서 뭔가를 보여 주거나 감추기 위해 블레이드 구문을 사용했습니다

John이 사용자 John이 편집자 인 경우 새 버튼을 볼 수없는 것처럼 새 게시물을 만들지 만 해당 경로로 직접 이동할 수 있으므로 우리가 정의한 미들웨어 미들웨어를 사용해야하는 경우이를 제한하십시오 레벨 권한 패키지를 사용하면 여기로 스크롤하면됩니다 당신은 우리가 이걸 가지고 있기 때문에 중간보기를 볼 수 있습니다 모두가 나가기를 간절히 바라는 모든 경로는 계속 반복됩니다 그것을 제한 할 수 있으므로 미들웨어를 사용해야하므로 미들웨어가 간단하고 우리가 롤과 정확한 규칙을 사용하게 될 중간이 무엇인지에 대한 역할 작가의 간단한 일이 그래서 나는 단지이 경로를 방문하고 싶었을 때 사용자가 로그인 한 사용자가 올바른 규칙을 가지고 있으므로 가자

John은 작가가 아니기 때문에 올바른 버튼이나 새 버튼을 볼 수 없습니다 하지만 여기서 내가하는 일은 새로 고침과 우리가 가지고 있기 때문입니다 미들웨어가 새로 고침되면 문제가 발생하여 오류가 발생합니다 이유는 무엇입니까? 그것을 얻는 것은 패키지이고 패키지는 모든 테스트와 함께 제공되므로 우리는 가지고 있습니다 조항 규칙이 존재하지 않는다면 뭔가 빠졌어요

규칙 미들웨어가 수준 끝에서 정의되지 않았 음을 의미하므로이 문제를 해결할 수 있습니다 실제로 정의 할 필요가있는 스크롤러라면 실제로 한 가지만하면됩니다 이 미들웨어 파일은 대령 파일이므로 그것은 자신의 애플 리케이션은 간단합니다 미들웨어가 아니라 애플 리케이션 내부의 HDTV를 중간보기 HTTP 대령 대령이 PHP를 사용하고 스크롤하면 모든 것을 볼 수 있습니다 경로 미들웨어 그래서이 세 붙여 넣기 및 저장 및 권한 롤 역할 또는 허락이 세 작은 곰이이 패키지에 있습니다 왜냐하면 지금은이 사람들이이 길을 새로 고침하고 붐을 일으킬 수 있기 때문입니다

미안하지만 연설문에 액세스 할 수있는 권한이 없다는 것을 알기 바랍니다 우리는이 공동체가 가지고 있지 않은 권한을 가지고 있지 않길 바란다 작가의 역할, 왜 그가이 길을 방문 할 수 있겠는가? 산타가 작가라는 것을 알고 있기 때문에 남쪽에있다 그래서 나는 새로운 것을 볼 수있다 부분은 새로 고침과 예 그가 쉽게 볼 수 있도록 이것은 이것이 우리가하는 방식입니다 경로를 제한 할 수있어 이제는 편집 할 수있게 해줍니다

하지만 편집 부분에 대해 말하면 어떻게 사용할지 말하고 싶습니다 미들웨어 꺼져 우리는 편집자의 역할을 알아야한다 이 경로 또는 게시물 편집은 미들웨어에서만 액세스 할 수 있습니다 편집자 역할을하는 사용자로 로그인 했으므로 내가 여기에 간다면 어떻게 될까? 우리는 사르 타크가 작가라는 것을 알고 있지만 편집을 위해서 체사레에게 특별한 허가를주었습니다 그것 포스트 그래서 만약에 내가 엿 보인다면 그것은 4 3 3을 말한다

왜냐하면 미들웨어에서 우리는 편집자 그러나 우리가 규칙 시스템 관광객을 사용하지 않고있는 날 부분에 Victoire는 우리가 허가 시스템을 사용하고 있다는 것을 보여줍니다 권한 관련 자료가 여기에 있으므로 커널에 PHP에 대한 권한이 있습니다 미들웨어 그래서 왜이 하나를 사용하지 말고 롤을 사용하여 말할 것이다 게시물 편집 권한 로그인 한 경우 액세스 또는이 경로를 허용하고 싶습니다 사용자가 규칙을 수정할 권한이 있으므로 지금 Chrome으로 이동하면 대신 가능합니다 4 ~ 3의 경우에도 리프레쉬하면 아버지도 이것을 방문 할 수 있으므로 게시물에 가자 모든 게시물은 여기 있습니다

Salter는 새로운 것을 만들 수 있기 때문에 Arthur는 게시물을 편집 할 수 있으며 존에 대해 John과 ye에게 가보겠습니다 John은 편집 할 수없는 게시물 만 편집 할 수 있습니다 권한이 부여되지 않은 게시물을 만들어 매우 차가워 이제 마지막으로 Jean에게 시도해 보겠습니다 게시자가 게시 버튼이 없기 때문에 게시자가 할 수 없습니다 아이디어를 얻으 십시요 그래서 나가 새롭게하는 경우에 아직도 무단이고 그러나 마지막 것이다 알렉스는 어딨어? 알렉스가 거기있어

오, 우리는 약간의 문제가있어서 우리는 그 문제를 해결할 것입니다 Alex 우리가 작가의 역할을 부여했기 때문에 가치가있는 새로운 게시물을 만들 수 없습니다 그저 작가가 아니기 때문에 그는 관리자이기 때문에 아무 것도 할 수 있습니다 우리가 다른 역할을 분리하기 위해 파이프 기호를 사용했던 날 부분에 우리가 여기에서 사용할 수있는 것처럼 작가 또는 관리자의 역할은 여기에서 새로 고침하겠습니다 여기서 편집 할 수 있으므로 절대적으로 잘 작동하는 것을 볼 수 있습니다

새 게시물을 만드십시오 그러면이 레벨에서 가질 수있는 것들입니다 권한 튜토리얼 및 레벨 권한 패키지 이 튜토리얼을 통해 얼마나 멋있고 얼마나 쉬운가를 이 패키지와 함께 복잡한 것들이 있으므로이 시리즈가 마음에 들었다고 생각합니다 이 자습서는 이렇게하면 그냥 가서이 비디오를 페이스 북 트위터와 Instagram에 betweens 같은 친구가 없다면 구독하기 전에 지금 가서 더 많은 것을 위해이 채널에 가입하십시오 우리가 레벨에 관련된 다른 에피소드에서 만날 측면 관련 업데이트 아마 우리는 나중에 다시 만나고 그 때까지 잘 갈거야

[Part 06] Laravel 5.5 and Vue Js Tutorial Series: how to do input validation using vue js and axios

빈 라덴 – 오 – 알라이 쿰 친구 나는 완벽한 웹 솔루션에 의해 laravel 5 VUE JS의이 튜토리얼 시리즈에서 당신을 환영합니다 내 이름은 이므 란 카심입니다 이것은 우리 laravel 5 뷰 JS 가이드 시리즈의 06 오늘의 비디오 자습서에서 우리는 배울거야 우리는 양식을 사용하여 데이터를 삽입 할 때 우리가 삽입하기 전에 기록을 확인하는 방법을 의미 보통의 요청 또는 아약스 또는 Axios의 또는 XMLHTTP 요청을 통해 통해 일반 유효성 검사를 처리하는 방법을 의미 친구 그래서, 나는이 비디오 자습서를 시작하기 전에 나는 아직 내 채널에 가입하지 않은 경우 것을 요청합니다 다음 친절 여기에 가입 그리고 벨 아이콘을 누르면하는 것을 잊지 마세요 그래서 당신은 당신의 YouTube에 또는 당신의 이메일에 내 곧 영화와 시리즈 알림을 받게됩니다

당신은 자신이 그것을 업데이트 유지 정말 감사합니다 그래서이 비디오 튜토리얼을 시작하자 완벽한 웹 솔루션 프로모션