1. Open-Source Project Introduction

SmartAdmin2.X was developed in Luoyang, Henan Province 1024 Innovation Lab (opens new window)A clean and easy-to-use front-end and back-end management solution developed with SpringBoot 2.x and Vue 3.2, using the Setup syntax and Composition API (supporting both JavaScript and TypeScript versions)!

We open-source beautiful code and a clean, consistent coding standard, bringing a refreshing approach to the often chaotic world of software development! At the same time, we help developers save countless hours, reduce overtime, enjoy their work, stay humble, keep learning, love coding, and love life even more!

2. Open Source License

Licensed under MIT

3. Screenshots

Demonstration Picture

4. Feature Overview

Philosophy and Principles

• What we share isn't a collection of unnecessary features, but the essential ones, such as data change records, system documentation, version update logs, user feedback, logs, heartbeats, serial number generators, and more.
• We also share front-end, back-end, and Vue 3 coding standards that have been validated by hundreds of companies. Good coding standards make every line of code we write more consistent and meaningful!
• We advocate high-quality code. As developers, our code is our sword. With every keystroke flowing effortlessly, we work like skilled swordsmen: once the mission is accomplished, we quietly put away our sword and leave without seeking fame or recognition.
• We value strong teamwork, seamless collaboration, and mutual support. We never work overtime, rather than feeling overwhelmed whenever we see someone else's code and leaving it to the 996.ICU (opens new window).
• We think proactively, stay humble, keep learning, love coding, and love life even more.
• We hope you'll take 3 minutes to carefully read each of the points below and experience a technical journey like never before!

Features

• Tables: Persistent table column customization, internationalization, watermarks, etc.
• OA Office Management: Company information (invoices, banks, employees, etc.), announcements and notifications (reading records, view counts, etc.).
• Documentation: System manuals, user feedback, update logs, etc.
• Monitoring: Heartbeat monitoring, database monitoring
• Logs: Login logs, operation logs (IP, browser, operating system, and other device information)
• System: Employees, departments, roles, permissions, menus, etc.
• Tools: File management, system parameters, data dictionary, serial number generation, etc.
• Code Generation:  Table-based configuration, online code preview, code downloads, etc.

Front-End Features

• How to properly write and organize code using the Vue 3.2 Composition API
• Both JavaScript and TypeScript versions are provided, with a clear code structure
• Beautiful UI with better usability and interactions, including menu bars, tabs, and employee, department, role, and menu management
• Multiple layout modes
• Front-end constant management: vue-enum, eliminating magic numbers and unmaintainable constant enumerations
• Proper loading configuration in main.js
• A beautiful homepage, excellent help documentation, and many more thoughtful details waiting for you to discover...

Back-End Features

• High-quality Java code, well-organized package structure, and comprehensive code comments
• An industry-original approach to managing request response codes, definitely worth checking out
• Four-layer architecture (controller, service, manager, dao)
• Swagger documentation annotations integrated with the front-end vue-enum
• Heartbeat service that lets you discover which machines are running and who might be secretly running your Jobs
• smart-reload: Hooks reserved in the system for dynamic loading, allowing you to execute code without restarting the application. You know what we mean.
• These are just a few examples. Countless more surprises and details await your discovery!

5. Tech Stack

Technology Stack

• Front End: Vue 3.2 + Vue-Router + Pinia + Ant Design Vue 3.X + Vite3
• Back End: Java8 + SpringBoot2.X + Mybatis-Plus + JWT + Druid + MySQL

Front-End Coding Standards

• How to Organize the Directory Structure of a Vue 3 Project
• How to Write Code Using the Composition API and Setup Syntax
• Naming Conventions for Files, Folders, Directory Structures, Components, Variables, and More
• How to Organize and Extend Router and Store (Pinia) for Better Scalability
• How to Encapsulate Axios for Network Requests
• And much more: countless practical standards that make development more enjoyable and rewarding, both mentally and physically

Back-End Coding Standards

• What is the four-layer architecture (controller, service, manager, dao), and why do we need four layers?
• How should code be written in each layer to ensure seamless teamwork and consistency?
• How to distinguish and use vo, bo, form, entity, and various JavaBeans
• Are you using Spring's @Transactional correctly?
• There should also be standards for method parameter counts, comments, TODOs, and more. Have you followed them?
• Database column naming conventions and more
• The examples above are just a drop in the ocean. Many more details are waiting for you to discover!

P.S. These standards are all designed with the team in mind, helping everyone enjoy writing code together. The goal is not to enforce coding standards for their own sake. Please be kind if you disagree! Thank you.