$experience\color{red}{better reading experience}$

project address

Function Introduction - Video Demo

Functional summary

Support login and registration functions.
Support password retrieval and email verification.
Support "remember me" function.
A base page that contains the full functionality of the above.

login function

Support "username/password" login.
"Remember me" is optional for login. After checking, the login information will be retained when the user does not actively log out.
Only after the user logs in, can he access the site interface, and illegal access will return to the main interface.

registration function

Need to provide:
- username (unique)
- password (twice confirmed)
- Email (unique and required, used to retrieve password)
- Verification code (send verification code to email)
There is a one-to-one correspondence between user name and email address.
The validity period for sending the verification code is 3 minutes, and you need to wait for 60 seconds after sending it once.

recover password

To reset the password, you need to verify your email and send a verification code for verification.
The reset can only be performed after the verification is passed.

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-hAoqcmnv-1689610398039) (https://image.itbaima.net/images/40/image-20230717222022386.png )]

quick start

Environment build

First Starand Forkthis item to your repo(bushi)
Environmental dependencies: jdk17, node.js16+, SpringBoot3, Vue3,redis5.0.14.1
It is recommended ideato build with:
- Import demo-beckendthe module, and execute Maventhe build.
- Import demo-frontendthe module, and execute npmthe build.
installation redis, windows download address ;
Install mysqland run demo.sqlthe file, note that the character set is utf8mb4, and the collation is utf8mb4_unicode_ci.

Data source configuration

Enter demo-backend/src/main/resourcesthe open application.yamlfile to modify the data source configuration:

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/demo?useUnicode=true&charterEncoding=utf-8  # 数据库连接地址，数据库名称默认 demo
    username: xxx             # 数据库连接用户名
    password: xxxxxx          # 密码
  mail:                       # 配置 smtp 邮件代发
    host: smtp.163.com        # 邮件代理主机地址
    username: [email protected]     # 代理用户名
    password: xxxxxx          # 密码
    protocol: smtps
    port: 465
    properties:
      from: [email protected]       # 代理用户名
      mail:
        smtp:
          auth: true
          starttls:
            enable: true
          socketFactory:
            class: javax.net.ssl.SSLSocketFactory
  data:
    redis:
      database: 0
      host: 127.0.0.1
      port: 6379

Startup project

Confirm that mysqlthe database is successfully connected;
Start redisthe server;
Finally, start the front and back ends.

common problem

Start to connect to the database and report an error

Check the data source configuration, confirm that mysqlthe database port is correct and allow it.
Check the database name and user permissions.

Failed to send verification code

Can't connect to host

Check whether the mail proxy user has enabled smtpthe service.
Check whether the agent mailbox and agent service password are correct.

报错：springboot Got bad greeting from SMTP host: smtp.xxx.com, port: 465, response: [EOF]

Close vpnnetwork proxy services such as .
mailCheck the type of data source configuration protocal, port: 465corresponding protocal:smtps.

springboot3+vue3 front-end and back-end separation project template