사용자 추가 기능을 구현하는 방법

이 글에서는 사용자 추가 기능을 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

사용자 추가 기능 구현

Requirements

추가 버튼을 클릭하면 사용자 추가 대화 상자가 나타나며, 이 대화 상자에 추가된 사용자의 정보를 입력하고 추가를 클릭하면 사용자 정보는 마지막에 표시됩니다. 한 페이지가 표시됩니다.

사용자 추가 버튼에 클릭 이벤트 바인딩

사용자 추가 버튼에 클릭 이벤트를 바인딩하면 사용자 추가 버튼을 클릭하면 바인딩된 클릭 이벤트가 아래와 같이 나타납니다.

사용자 대화 상자 추가 효과 및 코드

효과는 다음과 같습니다.

코드는 다음과 같습니다.

필요한 UserList.vue 구성 요소의 데이터 사용자 대화 상자를 추가하려면

에 있습니다. 추가 양식에 사용자 정보를 입력한 후 양방향 바인딩이므로 사용자 정보는 addForm이라는 json 개체의 속성에 저장됩니다.

UserList.vue 컴포넌트의 addUser 메소드

addUser 메소드의 내용은 다음과 같습니다.

addUser 메소드가 성공적으로 실행된 후 새로운 사용자 데이터가 데이터베이스의 easyUser 테이블에 추가되었으며 사용자 데이터는 UserList.vue 구성 요소에 표시되어야 합니다. 새로 추가된 이 데이터를 테이블에 표시하는 방법은 무엇입니까? 현재 페이지 번호를 전체 페이지 수보다 큰 값으로 변경하는 것입니다. SpringBoot 구성 파일에서 페이징 매개변수 합리화 매개변수 합리적인 값이 true로 설정되어 있으므로 이 큰 페이지 번호는 실제로 마지막 페이지와 동일합니다. 페이지 번호. 현재 페이지 번호를 설정한 후 addUser 메소드에서 getUserList 메소드를 호출하면 마지막 페이지의 사용자 컬렉션 데이터를 다시 로드할 수 있습니다.

getUserList 메서드

getUserList 메서드는 아래와 같이 userList 및 전체 데이터에 값을 할당하는 데 사용됩니다.

UserList.vue 구성 요소의 페이징 데이터

아래와 같이:

In SpringBoot 백엔드 컨트롤러 pageuser 요청을 수신하는 getUserList 메소드

백엔드는 프론트엔드에서 전달된 Page json 객체를 수신해야 하기 때문에 해당 Page 엔터티 클래스를 백엔드에 작성해야 합니다. 페이지 엔터티 클래스는 다음과 같습니다. 그림: springBoot의 백엔드에 있는 getuserlist 메소드:

동적 프록시 인터페이스 UserDao의 Getalluser 메소드

아래와 같습니다.

UserDao.xml 매핑 파일 sql 문

은 다음과 같습니다.

addUser 메소드에서 getUserList 메소드가 실행된 후 쿼리된 페이징 데이터가 UserList.vue 컴포넌트가 사용자 정보를 표시하는 테이블

사용자 정보가 저장되는 테이블은 아래와 같습니다.

getUserList 메소드가 실행되면 현재 페이지의 데이터가 userList 컬렉션에 저장됩니다. 아래와 같이:

요소 ui의 테이블을 사용하여 아래와 같이 userList 컬렉션에 사용자 데이터를 표시합니다.

Testing

첫 번째 선택은 아래와 같이 홈페이지에 들어가서 사용자 추가 버튼을 클릭하는 것입니다.

그런 다음 아래와 같이 팝업 대화 상자에 추가할 사용자 정보를 입력합니다.

아래 그림과 같이 추가 버튼을 클릭하세요.

아래 그림과 같이 데이터베이스의 easyUser 테이블을 봅니다.

[권장 학습: SQL 비디오 자습서]

위 내용은 사용자 추가 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!