How to implement the add user function

This article will introduce to you how to implement the function of adding users. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Implementation of adding user function

Requirements

After clicking the Add button, a dialog box to add a user will pop up, and then in In this dialog box, enter the information to add the user, click Add, and the user information will be displayed on the last page.

Bind a click event to the add user button

Bind a click event to the add user button. After clicking the add user button, a dialog box for adding a user will pop up. The binding The click event is as shown below:

The effect and code of the dialog box to add the user

The effect is as shown below:

The code is as shown below:

The data in the UserList.vue component needed to add the user dialog box

Enter it in the add form After adding the user's information, because it is a two-way binding, the user information will be stored in the attributes of the json object named addForm. The addForm data object is as shown below:

The addUser method in the UserList.vue component

The content in the addUser method is as shown below:

addUser method was executed successfully After that, a new piece of user data has been added to the easyUser table in the database. This new data needs to be displayed in the table that displays users in the UserList.vue component. How to display it? It is to change the current page number to a large value, larger than the total page number. Because the paging parameter rationalization parameter reasonable has been set to true in the SpringBoot configuration file, this large page number is actually equivalent to the last page. page number. After setting the current page number, call the getUserList method in the addUser method to reload the user collection data of the last page.

getUserList method

getUserList method is used to assign values ​​to userList and total data, as shown below:

UserList.vue component Paging data

is as shown below:

The method getUserList in the SpringBoot backend controller to receive pageuser requests

because the backend needs to receive the frontend The Page is passed as a json object, so a corresponding Page entity class must be written on the backend, so as to facilitate receiving the parameters passed by the front end. The Page entity class is as shown below:

The getUserList method in the SpringBoot backend is as shown below:

The getAllUser method in the dynamic proxy interface UserDao

is as shown below:

The sql statement in the UserDao.xml mapping file

is as shown below:

After the getUserList method is executed in the addUser method, the queried paging data will be re-rendered to the table where the UserList.vue component displays user information.

The table that stores user information, as shown below:

After the getUserList method is executed, the data of the current page will be stored in the userList collection, as shown below:

Use element ui The table in displays the user data in the userList collection, as shown below:

Test

The first choice is to enter the home page and click the Add User button as shown below:

Then in the pop-up dialog box Fill in the user information to be added, as shown below:

Click the add button as shown below:

View the database easyUser table, as shown below:

[Recommended learning: SQL video tutorial]

The above is the detailed content of How to implement the add user function. For more information, please follow other related articles on the PHP Chinese website!