Shulou(Shulou.com)05/31 Report--

This article is about how vue.js and sql can add user functions. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The advantages of Vue Vue specific lightweight framework, easy to learn, two-way data binding, componentization, separation of data and structure, virtual DOM, fast running and other advantages, Vue pages use local refresh, do not have to request all the data and dom every time the page is redirected, which can greatly improve the access speed and user experience.

Add the implementation requirements of user functions

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

Bind the 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 pops up to add a user. The bound click event is shown below:

Add the effect and code of the user's dialog box

The effect is as follows:

The code is shown below:

Add the data in the UserList.vue component that the user dialog box needs to use

After entering the information to add the user in the add form, because of the two-way binding, the user information is stored in the properties of the json object named addForm, as shown in the following figure:

AddUser method in UserList.vue component

The content of the addUser method is shown below:

After the successful execution of the addUser method, a new piece of user data has been added to the easyUser table in the database. You need to display this new data in the UserList.vue component's display user table. How to display it? Is to change the current page number to a large value, larger than the total page number, because the SpringBoot configuration file has set the paging parameter rationalization parameter reasonabled value to ture, so this large page number is actually equivalent to the last page number. After setting the current page number, call the getUserList method in the addUser method to reload the user collection data for the last page.

GetUserList method

The getUserList method is used to assign values to userList and total data, as shown in the following figure:

Paging data in UserList.vue components

As shown below:

The method getUserList of receiving pageuser request in SpringBoot back-end controller

Because the backend needs to receive the json object Page passed by the frontend, write a corresponding Page entity class in the backend to facilitate receiving the parameters passed by the frontend. The Page entity class is shown below:

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

GetAllUser method in dynamic proxy Interface UserDao

As shown below:

Sql statements in UserDao.xml Mapping File

As shown below:

After executing the getUserList method in the addUser method, the paged data queried is re-rendered to the table where the user information is displayed by the UserList.vue component.

A table for storing user information, as shown in the following figure:

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

Use the table in elment ui to display user data in the userList collection, as shown in the following figure:

test

Go to the home page and click the add user button as shown below:

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

Click the add button as shown below:

View the easyUser table in the database, as shown in the following figure:

Thank you for reading! This is the end of the article on "how to add user functions for vue.js and sql". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.