BuildAdmin: Vue 3 + ThinkPHP 8 Admin Panel with CRUD Generator

BuildAdmin is an enterprise-grade backend management system built on a modern technology stack: Vue 3.x, ThinkPHP 8, TypeScript, Vite, Pinia, and Element Plus. It supports memory-resident execution, offers a visual CRUD code generator, and includes a built-in web terminal. The interface is fully responsive, adapting seamlessly to desktops, tablets, and smartphones. The package includes Web, WebNuxt, and Server components. Key features include a global data recycle bin, field-level change protection, auto-registered routes, and unlimited nested permission management. BuildAdmin is open-source with no license fees and is free for commercial use, specifically designed to accelerate development cycles.

Visual CRUD Code Generator The visual designer allows you to generate backend CRUD code via a drag-and-drop interface, which automatically creates the necessary database tables. The resulting tables are both functional and aesthetically pleasing, featuring 24 distinct form components, row-level drag-and-drop sorting, and permission-controlled edit/delete actions. The tool also supports linking related tables, saving hours of manual coding.

Integrated Web Terminal BuildAdmin is among the first admin systems to deeply integrate a terminal into the local development environment. When installing this Vue 3-based system, there is no need to manually run npm install. Following CRUD generation, the terminal automatically invokes prettier to format the new code. You can execute any command available in your environment variables, with more advanced features currently in development.

Modern and Stable Tech Stack The architecture maintains a strict separation between frontend and backend. The backend is powered by ThinkPHP 8, while the frontend utilizes Vue 3’s setup syntax and useTemplateRef. State management is handled by Pinia, with TypeScript and Vite ensuring a robust development experience. Because it is fully compatible with the Vue 3, ThinkPHP 8, and PHP 8.x ecosystems, you can easily integrate existing libraries and components to maximize efficiency.

Module Market The built-in Module Market offers one-click installations for various utilities including data import/export, SMS services, payment gateways, cloud storage, and rich text editors. It also features full-scale applications such as CMS platforms, e-commerce shops, and community forums. The system automatically manages package.json and composer.json updates, utilizing the internal terminal to install any necessary dependencies for a chosen module.

Separated Frontend Architecture The web directory contains clean, independent frontend code. This allows for the complete separation of codebase and deployment, providing a familiar environment for frontend specialists. Developers who focus exclusively on the frontend can utilize BuildAdmin as a learning resource and community hub without needing to master the backend architecture.

Memory-Resident Performance Core features are designed to run in memory, providing performance speeds significantly faster than traditional frameworks. The Workerman module enables a memory-resident HTTP service and a WebSocket service that functions immediately upon installation.

On-Demand Loading Frontend components and language packs are loaded asynchronously only when required. On the server side, ThinkPHP 8 and PSR standards ensure true on-demand loading, ensuring that the system does not consume resources for unused features.

Recycle Bin & Data Recovery A global recycle bin records field-level changes and data diffs. Users can roll back changes or restore deleted records at any time. This safety mechanism operates transparently without impacting the user experience.

Refined User Interface BuildAdmin offers three distinct layout modes. The default configuration features a modern, borderless design where functional sections appear to float on the screen, optimizing screen real estate for maximum efficiency.

Permission Management Permissions are managed through a visual interface. The system dynamically registers routes, menus, pages, and buttons based on assigned roles. It supports unlimited parent-child permission groups, with frontend and backend synchronization to verify access rights. Developers can freely assign specific page and button-level permissions as needed.

BuildAdmin Installation Guide

Preparation

1. Clone the BuildAdmin repository to your local machine or download the full release package.
2. Ensure PHP version ≥ 8.0.2 is installed (x64; PHP 8.0.2 is recommended for development).
3. Ensure MySQL version ≥ 5.7 is installed (InnoDB required; version 8.0 is recommended).
4. Install Node.js ≥ 20.14.0.
5. Install npm ≥ 9.8.1.
6. If you cloned via Git, Composer is required. The full package download includes all dependencies.

Note: Do not create a traditional web server (Nginx/Apache) yet. Follow the documentation to complete the installation. During the initial development and installation phase, run the system on your local PC. Only upload the compiled site to a production server after development is complete.

Start the Installation Service

# Navigate to the project root (the directory containing the `think` file)
cd buildadmin

# For Git clones only. If `composer install` is not recognized, try `composer.phar install`
composer install

# On Linux, using `sudo php think run` is recommended.
# If permission errors persist, ensure the directory owner matches the user running the command.
php think run

Once the service starts successfully, you will see output similar to the following:

ThinkPHP Development server is started On < http://0.0.0.0:8000 / >
You can exit with ` CTRL-C `
Document root is: D:\WWW\buildadmin\public

Open http://127.0.0.1:8000/ in your browser and follow the on-screen instructions to complete the setup.

Stopping the Service

Press Ctrl+C in your terminal. The service will also terminate if the terminal window is closed or the connection is lost.

You should continue using this internal service during development. Set up Nginx or Apache only when you are ready to move to a production environment.

Troubleshooting Common Issues

1. Installation service or web terminal inaccessible: Check the directory permissions, the user group settings for the buildadmin folder, and the URL used in the browser.
2. Function disabled for security reasons: This indicates a restricted function in php.ini. Locate the function in your configuration file and remove it from the disable_functions list.
3. composer install command not found: Ensure Composer is in your system’s environment variables. Try composer.phar install if the standard command fails. If problems persist, use the full package download.
4. Unresolved Composer dependencies: Review the "Problem" descriptions in the terminal output. These usually indicate missing PHP extensions that must be installed.
5. Terminal "command not found": Verify the domain/URL you are using. Linux users should ensure the service was started with sudo php think run.
6. Terminal permission denied: Verify the domain/URL. Linux users should use sudo php think run and ensure the directory permissions are correctly configured for the active user.

For Developers

Setting Up the Development Environment

1. Install BuildAdmin on your local PC to serve as your development environment.
2. Use the php think run command to start the service during development. Do not use Nginx or Apache at this stage.
3. Database credentials provided during installation are stored in config/database.php. Ensure your MySQL service is active.
4. Navigate to the /web directory and execute npm run dev. Access the frontend via localhost:1818 (the backend is pre-configured to allow these cross-origin requests).
5. Enable ThinkPHP’s debug mode during development and familiarize yourself with API debugging techniques.
6. Review the documentation regarding IDE configuration and the standard system workflow.

With this setup, changes to frontend code will trigger a hot-reload at localhost:1818. API errors will provide detailed debug information, and generated CRUD code will be accessible immediately.

Key takeaway: In the dev environment, two commands run simultaneously. The site is accessed via port 1818, and Nginx/Apache is not required.

Common Questions

1. Why use php think run instead of Nginx during development? This command initializes a service that reads current environment variables, which is necessary for the web terminal to execute commands and for the API server to function correctly within the dev environment.

2. What is the purpose of npm run dev in the web folder? Modern Vue projects require a compilation step. This command starts the Vite hot-reload service, allowing you to preview changes instantly without a full rebuild. It hosts the development version of the site on port 1818.

3. Is a full rebuild required for every change? No. Use the hot-reload service during development. You only need to run a full build when you are ready to deploy the project to production.

4. What is frontend engineering? Frontend engineering refers to the use of standardized tools and automated processes to improve development speed, quality, and collaboration. It handles tasks like transpiling modern JavaScript (ES6+) for older browsers and integrating tools like Sass, TypeScript, and Prettier.

CRUD Code Generation

CRUD refers to the four basic functions of persistent storage: Create, Retrieve, Update, and Delete. BuildAdmin provides a visual interface to automate this process.

Prerequisites

Ensure your development environment is active (site running on port 1818). Code generation features like hot-reloading and immediate accessibility are only available in this environment. If you choose not to use the dev environment, you must click "Republish" in the web terminal (found in the top right of the admin panel) after generating code to apply changes.

The Designer Interface

The CRUD designer is a robust tool. By clicking "Advanced Settings," you can customize the generation path and create specific folder structures.

Menu rules in the backend follow the directory structure of the generated code. If a menu rule already exists, the CRUD generator will skip creating duplicate permission nodes and will not overwrite existing rules.

If the target table contains data, the generator will update the table structure according to your design rather than dropping it. For empty tables, the generator will drop and recreate the table to ensure a clean implementation.

Each component comes with preset configurations. When modifying field types or lengths, ensure the component is appropriate for the data—for instance, do not manually reconfigure a radio button to act as a checkbox; instead, drag a new checkbox component into the design.

Creating a New Backend Feature

You can build a complete backend management feature from scratch by dragging and dropping components. The generator produces the controller, model, validator, language packs, database table, and frontend forms. Since the project lives in a single directory despite the frontend/backend separation, Git is recommended for version control.

Generating from Existing Tables

While starting from the designer is recommended, you can also use pre-existing tables. Ensure your table follows the system's design guidelines. In the visual CRUD interface, use the "Select table" option to import your schema and generate the corresponding code.

If you modify the table design later, use the "Copy Design" feature in the "CRUD Records" section to update the existing implementation.

Managing CRUD Designs

The "CRUD Records" section allows you to manage historical designs:

• Copy Design: Retains all parameters from a previous CRUD session for modification.
• Delete CRUD: Removes the generated code files but leaves the database table intact.
• Modifying Designs: Use "Copy Design" to load an old configuration. If the table name remains the same, regenerating the code will overwrite the previous version with your updates.