SpringBoot Vue Template Jwt

Overview:

The 前后端分离项目（JWT方案）is a template project for building a front-end and back-end separated application using SpringBoot3 and Vue3. It integrates multiple technology stacks and implements the JWT authentication scheme. The back-end functionality includes user registration, user login, password reset, and corresponding API endpoints. It uses Mybatis-Plus as the persistence layer framework and Redis for storing registration/reset operation verification codes with expiration time control. RabbitMQ is used for queuing and sending SMS notifications, which are then processed by a listener. SpringSecurity is utilized as the authorization framework, with manual integration of the JWT validation scheme. Redis is also used for IP address rate limiting to prevent abuse. The view layer objects and data layer objects are separated, and utility methods are implemented to quickly convert between them using reflection. Error and exception pages are uniform and returned in JSON format. Cross-origin requests are handled manually using filters. Swagger is used for automatic generation of API documentation, with pre-configured login-related endpoints. Filters are also employed to automatically generate snowflake IDs for all requests, making it easier to identify and locate issues in the production environment. The project supports multiple environments and has different configurations for development and production. The log files contain complete information about each request as well as their corresponding snowflake IDs. The overall project structure is clear, responsibilities are well-defined, and comprehensive documentation is provided. It is ready to use out-of-the-box. On the front-end side, the project includes user registration, user login, password reset interfaces, and a simple homepage. It utilizes Vue-Router for routing, Axios for asynchronous requests, Element-Plus as the UI component library, and VueUse to adapt to dark mode switching. It also uses unplugin-auto-import to reduce the bundle size by selectively importing components.

Features:

• Front-end Features:

  • User registration, user login, and password reset interfaces
  • Simple homepage
  • Vue-Router for routing
  • Axios for asynchronous requests
  • Element-Plus as the UI component library
  • VueUse for adapting to dark mode switching
  • unplugin-auto-import for selective component import to reduce bundle size

• Back-end Features:

  • User registration, user login, and password reset functionality
  • Mybatis-Plus as the persistence layer framework
  • Redis for storing registration/reset operation verification codes with expiration time control
  • RabbitMQ for queuing and sending SMS notifications, processed by a listener
  • SpringSecurity as the authorization framework with manual JWT validation integration
  • Redis for IP address rate limiting
  • View layer objects and data layer objects separation
  • Utility methods for quick conversion between objects using reflection
  • JSON format error and exception page responses
  • Manual handling of cross-origin requests with filters
  • Swagger for automatic API documentation generation with pre-configured login-related endpoints
  • Filters for automatic generation of snowflake IDs for all requests to aid in issue identification and troubleshooting
  • Different configurations for development and production environments
  • Logs containing complete request information and corresponding snowflake IDs

Summary:

The 前后端分离项目（JWT方案）is a comprehensive template project for building front-end and back-end separated applications using SpringBoot3 and Vue3. It provides a wide range of features such as user registration, login, password reset, and authorization using JWT. The back-end utilizes Mybatis-Plus for data persistence, Redis for storing verification codes, RabbitMQ for sending SMS notifications, and SpringSecurity for authorization. Various techniques are used for enhancing performance and security, including IP address rate limiting, snowflake ID generation, and handling cross-origin requests. The project also includes detailed documentation, clear project structure, and support for multiple environments. On the front-end side, popular libraries and frameworks like Vue-Router, Axios, Element-Plus, and VueUse are used to provide a seamless user interface. The template project is ready to use out-of-the-box, with installation instructions provided for ease of setup. Overall, it is a powerful tool for developing modern, secure, and scalable applications with a front-end and back-end separation architecture.