15. Implementation of user list addition, update and deletion functions

1. Add

1.el-button button

2. Bind click events and add dialog boxes

 3.Choose a role

3.1. Get the role list

3.2. Perform v-for traversal on roleList to create a drop-down list

 3. OK button

Confirm the button binding event. Note: Forced verification is required, otherwise the effect will be that as soon as we click to add a user, we will click OK without entering the content. By default, the verification of losing focus will not trigger. So when we click OK, we use the validate method to forcibly trigger this verification.

 4. The dialog box disappears

When you click the OK button, the dialog box disappears and a post request is initiated to the backend. Note: After sending the post request, after successfully adding data to the backend, we need to obtain our getList method again, so that our list can obtain the latest one again, so that the current page will change, that is, you do not need to do it manually. Refresh the page to get the latest data.

4.1. Front-end

 4.2. Backend

 

When testing Apifox, test whether the interface is successful.

 

 

In order to prevent the information filled in last time is still there, we will make another blank assignment.

2. Update

1.Front end

Why is the password not displayed?

Because we did not return the password from the backend at that time. This is normal. We cannot see the user's password as soon as it is updated, so we just enter the new password directly.

2.Backend

 When testing Apifox, test whether the interface is successful.

 

 

3. Delete

1.Front end

2.Backend

Guess you like

Origin blog.csdn.net/m0_65436732/article/details/133489800