DOCSEARCHbyAlgolia
Submit Docs

SaiAdmin - Webman Rapid Development Framework

website·Indexed 33 days ago

https://saithink.top

An enterprise-level backend management system development framework based on Vue 3 and Webman. It features a PHP backend with a layered architecture (Controller, Logic, Model) and a JavaScript frontend utilizing Element Plus and Arco Design Pro. The framework includes built-in RBAC access control, a plugin system, multi-language support via vue-i18n, and support for multiple ORMs including ThinkORM and Eloquent.

Tokens
39.5K
Snippets
235
Records
308
Agent score
56%

What's inside SaiAdmin

  1. Overview of SAI Component Library

    v6
    SAI is a business component library built on top of Element Plus, specifically designed for the rapid development of backend management systems. It provides a suite of specialized components for forms, data handling, and UI utilities, including dictionary-based selectors, user pickers, and file upload tools.

  2. Overview of SaiAdmin Framework

    SaiAdmin is a rapid development framework built using Vue 3 for the frontend (JavaScript) and Webman for the backend (PHP). It is designed to leverage the efficiency of both languages to accelerate the development process.

  3. Overview of SaiAdmin One-Click Code Generation

    SaiAdmin provides a code generation feature that automatically produces frontend code, backend code, and menu information by reading database table metadata. This process involves editing and configuring table information to accelerate development efficiency.

  4. Overview of State Management with Pinia

    v5

    The framework uses pinia for state management, allowing state to be shared across pages and components. The core concept is the store, which acts as an independent state container. All stores are defined and managed within the src/store directory, specifically in src/store/index.js.

    Important Caveat: Pinia state is not persisted across browser refreshes (F5). A page refresh reloads the entire JavaScript environment, resetting all Pinia stores to their initial states.

  5. Overview of SaiAdmin Framework

    v6
    SaiAdmin is a high-performance backend management system plugin built on the Webman resident-memory framework. It provides a complete set of enterprise tools including RBAC permission management (users, roles, departments, posts), a CRUD code generator, and system monitoring tools. It supports both ThinkORM and Eloquent ORM and utilizes a plugin-based architecture for modular extension.

  6. Overview of SaiAdmin Layered Architecture

    v6

    SaiAdmin utilizes an MVC + Logic architecture to separate concerns. The request flow is: Request → Controller → Logic → Model → Database. A Validator is used by the Controller to validate input before passing it to the Logic layer.

    • Controller: Handles requests, parameter validation, calls Logic, and returns responses.
    • Logic: Handles business logic, data assembly, and calls Models.
    • Model: Handles database operations, data mapping, and searcher definitions.
    • Validate: Defines data validation rules, scenes, and error messages.

  7. Overview of State Management with Pinia in saiadmin

    v3

    The framework uses Pinia for state management to enable state sharing across pages and components. Stores are independent state containers located in the src/store directory. All Pinia objects used in the framework are defined in src/store/index.js.

    Important Caveat: Pinia state is not persisted across browser refreshes (F5). A page refresh reloads the entire JavaScript environment, resetting all Pinia stores to their initial states.

  8. Understand saiadmin user management design

    v5
    saiadmin manages user access via account and password authentication. Every user must be assigned to a department and can be associated with multiple roles and multiple posts.

  9. Perform common routing operations in Vue components

    v5
    Use useRouter to perform navigation actions (pushing to new routes) and useRoute to access information about the current active route (path, name, and query parameters).
    import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

// Navigation examples
router.push('/login') // Direct path
router.push({ name: 'login' }) // By route name
router.push({ path: '/login' }) // By path object
router.push({ name: 'login', query: { id: 10 } }) // With query parameters

// Accessing current route info
onMounted(async() => {
  const path = route.path
  const name = route.name
  const params = route.query
})

  11. Understand dynamic route loading

    v5
    Dynamic routes are not hardcoded in the frontend. Instead, they are fetched from the backend after a user successfully logs in. These routes are configured in the administration interface under Permissions => Menu Management. This allows the system to load different menus and pages based on the user's assigned role. Routes that have not been initialized and registered via this process remain inaccessible.

  12. Workflow for adding a new plugin feature module

    v6

    Follow these steps to create a new functional module within the plugin architecture:

    1. Create API File: Located at api/{moduleName}/{featureName}.ts. Implement the five standard methods: list, read, save, update, and delete.
    2. Create Main Page: Located at {moduleName}/{featureName}/index.vue. Import useTable and useSaiAdmin, and configure the columnsFactory for column definitions.
    3. Create Search Component: Located at {moduleName}/{featureName}/modules/table-search.vue. Use the sa-search-bar component.
    4. Create Edit Dialog: Located at {moduleName}/{featureName}/modules/edit-dialog.vue. Define initialFormData and rules, and implement initPage and handleSubmit.
    5. Configure Routing and Menu: Perform the final configuration within the backend management system.