How to implement user login function

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

Implementation of user login function

Configure database information and mybatis related information in SpringBoot

As shown below:

Database easyuser table and User entity class

The easyuser table in the database is as shown below:

javabean class User, as shown below:

The front-end vue scaffolding sends a login request to the SpringBoot backend

The code of the login method is as follows Picture:

The login method of the LoginController controller in the SpringBoot backend

The code of the login method is as follows:

The getUserByMessage method in the UserDao dynamic proxy interface

First of all, you must first scan the dynamic proxy interface on the startup class, as shown below:

UserDao.xml mapping file

Route jumps to the Home.vue component

The front end sends an axios request to the back end After that, the backend returns a json string data to the front end, and the front end parses this json string. If the flag login flag is "ok", the route will be jumped. The browser's localhost:8081/login address will be after the route jump. It becomes the localhost:8081/home address, and path: "/home" corresponds to the Home.vue component, so the Home.vue component will be rendered to the label of the App.vue component. The effect of the Home.vue component is as follows:

The code of the Home.vue component is as shown below:

Test

Start the front-end and back-end projects respectively , as shown below:

Enter the generation address of the scaffolding project in the browser, and access the front-end default homepage, as shown below:

After clicking the login button, as shown below:

[Related recommendation: "vue.js Tutorial" 】

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