St. Regis Takeaway: Backend system login and logout functions

demand analysis

After clicking the login button, the browser employee/loginsubmits data in a POST manner, usernameand passwordthe server returns data in a certain format to the browser after processing, which includes:

  • code: login status code
  • data: user information
  • msg: Reason for failure

After successful login, click the exit button to clear the user ID in the session and return to the login page.

code development

Create entity class

Create the entity class Employee, map it to the employee table in the database, directly import the written java file into the entity directory, and enable naming conversion when mapping
Insert image description hereinapplication.yml

Insert image description here

Import return result class R

R is a general result class, and all data returned by the server is packaged in this type and returned to the front end.
Insert image description here

controller、service与mapper

  • The controller calls the method encapsulated in ServiceImpl to provide access services to the browser.
  • Service provides methods used by business logic, which are implemented in ServiceImpl.
  • mapper provides methods for operating data for ServiceImpl, and the specific implementation of SQL statements is in the xml file.

login.html

Insert image description here
Valid is the verification of password digits.
After passing the verification, the login button on the page will be displayed as登陆中

The picture below shows the Spring framework converting the R object returned by the backend into json and returning it to the browser, that is, the res below.
Insert image description here
If res codeis 1, it means the login is successful.
Convert the res data to json and save it to localStorage.
Insert image description here
If you log in If it fails, the msg of the extracted res is displayed on the page.
Insert image description here

Insert image description here

Prevent illegal access

Currently, you can access index.html even if you are not logged in, so you need to use a filter or interceptor to determine whether the user has completed the login. If not, go to login.html

Guess you like

Origin blog.csdn.net/weixin_43249758/article/details/130442564