FastApiAdmin

| Details | |----------|------|----------|------|----------|------| | Login |  | Home |  | Profile |  | | Personal |  | Settings |  | Workbench |  | ## 🛠️ Secondary Development Tutorial ### Backend Part 1. **Write the Entity Class Layer**: Create the ORM model for the demo in `backend/app/api/v1/models/demo/example_model.py` (corresponding to the entity class layer in Spring Boot). 2. **Write the Data Model Layer**: Create the demo data model in `backend/app/api/v1/schemas/demo/example_schema.py` (corresponding to the DTO layer in Spring Boot). 3. **Write the Persistence Layer**: Create the demo data layer in `backend/app/api/v1/cruds/demo/example_crud.py` (corresponding to the Mapper or DAO layer in Spring Boot). 4. **Write the Business Layer**: Create the demo data layer in `backend/app/api/v1/services/demo/example_service.py` (corresponding to the Service layer in Spring Boot). 5. **Write the Interface Layer**: Create the demo data layer in `backend/app/api/v1/controllers/demo/example_controller.py` (corresponding to the Controller layer in Spring Boot). 6. **Register Backend Routes**: Register the demo routes in `backend/app/api/v1/urls/demo_url.py`. 7. **Register Routes to the FastAPI Service**: Register the routes in `backend/plugin/init_app.py`. 8. **Add the Demo Module to the System Initialization Script**: Add it in `backend/app/scripts/initialize.py` (if necessary, you can configure the demo menu permissions in `backend/app/scripts/data/system_menu.json` and `backend/app/scripts/data/system_role_menus.json` or from the frontend page menu). 9. **Add the Demo Module to the Database Migration Script**: Add it in `backend/app/alembic/env.py`. ### Code Generation Tutorial The code generation module is one of the core features of this project, which can help developers quickly generate complete CRUD code and greatly improve development efficiency. This module is based on the Jinja2 template engine and can generate integrated front-end and back-end functional modules. #### Code Generation Process 1. **Create or Import Data Tables**: - Method 1: Create a new table directly in the system through the "Create Table" function - Method 2: Import existing database tables into the code generator through the "Import" function 2. **Configure Generation Parameters**: - Basic Configuration: - Table name, table description, entity class name - Generation Configuration: - Generation package path (package_name): e.g., `student` - Generation module name (module_name): e.g., `student` - Generation business name (business_name): e.g., `student` - Generation function name (function_name): e.g., `Student Management` - Code generation method: zip package download or project directory write - Parent menu: Select the menu category to which the generated function belongs 3. **Field Configuration**: - Configure each field: - Field column type, Python type, Python field name - Whether it is a primary key, auto-increment, required - Whether it is an insert field, edit field, list field, query field - Query method (equal, not equal, greater than, less than, range) - Display type (text box, text area, dropdown box, checkbox, radio button, date control) - Dictionary type (for dropdown data source) 4. **Code Preview**: - Preview the code to be generated - Support preview of backend (Python), frontend (Vue/TS), and database (SQL) code - Filter preview content by type 5. **Code Generation**: - Click "Download Code" to generate and download a zip package - Click "Write to Local" to write directly to the project directory #### Generated File Structure The code generator will generate a complete front-end and back-end code structure: **Backend Files**: - Controller layer: `backend/app/api/v1/module_{module_name}/{business_name}/controller.py` - Service layer: `backend/app/api/v1/module_{module_name}/{business_name}/service.py` - Data access layer: `backend/app/api/v1/module_{module_name}/{business_name}/crud.py` - Data model layer: `backend/app/api/v1/module_{module_name}/{business_name}/model.py` - Data schema layer: `backend/app/api/v1/module_{module_name}/{business_name}/schema.py` - Query parameter layer: `backend/app/api/v1/module_{module_name}/{business_name}/param.py` **Frontend Files**: - API interface file: `frontend/src/api/module_{module_name}/{business_name}.ts` - Page component file: `frontend/src/views/module_{module_name}/{business_name}/index.vue` **Database Files**: - Menu SQL file: `backend/sql/module_{module_name}/{business_name}_menu.sql` #### Usage Example 1. Create a new table in the database, such as `sys_student` 2. Log in to the system and enter the **Code Generation** module 3. Click "Import" and select the `sys_student` table 4. Configure generation parameters: - Generation package path: `student` - Generation module name: `student` - Generation business name: `student` - Generation function name: `Student Management` - Parent menu: System Management 5. Configure field properties (such as setting which fields need to be displayed, queried, edited, etc.) 6. Click "Preview Code" to view the generated code 7. Click "Download Code" or "Write to Local" to generate a complete functional module 8. Restart the service, and the new function module is ready to use ### Frontend Part 1. **Configure the Frontend to Access the Backend Interface Address**: Configure it in `frontend/src/api/demo/example.ts`. 2. **Write the Frontend Page**: Write it in `frontend/src/views/demo/example/index.vue`. ### Mobile Part 1. **Configure the mobile access address for backend interfaces**: Write the code in `fastapp/src/api`. 2. **Write mobile pages**: Write the code in `fastapp/src/pages`. ## ℹ️ Help For more details, please check the [Official Documentation](https://service.fastapiadmin.com) ## 👥 Contributors ## 🙏 Special Thanks Thanks to the contributions and support of the following open-source projects: - [FastAPI](https://fastapi.tiangolo.com/) - [Pydantic](https://docs.pydantic.dev/) - [SQLAlchemy](https://www.sqlalchemy.org/) - [APScheduler](https://github.com/agronholm/apscheduler) - [Vue3](https://cn.vuejs.org/) - [TypeScript](https://www.typescriptlang.org/) - [Vite](https://github.com/vitejs/vite) - [Element Plus](https://element-plus.org/) - [UniApp](https://uniapp.dcloud.net.cn/) - [Wot-Design-UI](https://wot-ui.cn/) ## 🎨 Community | WeChat QR Code | Group QR Code | WeChat Pay QR Code | | --- | --- | --- | |  |  |  | ## ❤️ Support the Project If you like this project, please give it a ⭐️ Star to show your support! Thank you very much! [](https://starchart.cc/1014TaoTao/FastapiAdmin)