VBMAN Admin Panel Example

Overview

This example demonstrates how to build a complete management system using the VBMAN framework, including both server-side and frontend implementations. The frontend supports two frameworks: Layui and Vue2, showcasing different development approaches.

Project Structure

Download source [ Note：To bin regedits DLL file ]

Please go to the home page to download the VBMAN project, decompress it, and open it with all DEMO projects.

AdminEnd/
  ├── Form1.frm        # Main form
  ├── VBMAN_DEMO.vbp   # Project file
  └── www/            # Web frontend directory
      ├── layui/     # Layui version frontend
      │   └── easyweb/ # Management system template based on Layui
      └── vue/       # Vue2 version frontend
          └── eleadmin2/ # Management system template based on Vue2

Core Code Analysis

1. Server Entry (Form1.frm)

Option Explicit

Private Sub Command1_Click()
    'Launch Layui version
    Shell "explorer.exe http://127.0.0.1:800/layui/easyweb/"
End Sub

Private Sub Command2_Click()
    'Launch Vue2 version
    Shell "explorer.exe http://127.0.0.1:800/vue/eleadmin2/"
End Sub

Private Sub Form_Load()
    'Start Web server
    With HttpServer
        'Register business modules
        .Router.Reg "Users", New bUsers
        .Router.Reg "Menus", New bMenus
        
        'Configure static file directory
        .Start 800, App.Path & "\www"
    End With
End Sub

2. User Management Implementation (bUsers.cls)

'User management business class
Option Explicit

'User list
Public Sub List(ctx As cHttpServerContext)
    With ctx.Response.NewJson
        .Items.Add GetUser(1, "admin", "Administrator")
        .Items.Add GetUser(2, "test", "Test User")
    End With
End Sub

'User login
Public Sub Login(ctx As cHttpServerContext)
    Dim username As String, password As String
    username = ctx.Request.PostData("username")
    password = ctx.Request.PostData("password")
    
    If CheckLogin(username, password) Then
        'Generate token
        With ctx.Response.NewJson
            .Item("code") = 0
            .Item("token") = GenerateToken(username)
            .Item("userInfo") = GetUserInfo(username)
        End With
    Else
        ctx.Response.Error 401, "Invalid username or password"
    End If
End Sub

3. Menu Management Implementation (bMenus.cls)

'Menu management business class
Option Explicit

'Get menu tree
Public Sub GetTree(ctx As cHttpServerContext)
    With ctx.Response.NewJson
        'System management
        With .NewJson("system")
            .Item("title") = "System Management"
            .Item("icon") = "layui-icon-set"
            
            'Add submenus
            With .NewJson("children")
                .Items.Add GetMenuItem("User Management", "/system/user")
                .Items.Add GetMenuItem("Role Management", "/system/role")
                .Items.Add GetMenuItem("Menu Management", "/system/menu")
            End With
        End With
        
        'Business management
        With .NewJson("business")
            .Item("title") = "Business Management"
            .Item("icon") = "layui-icon-app"
            
            With .NewJson("children")
                .Items.Add GetMenuItem("Order Management", "/business/order")
                .Items.Add GetMenuItem("Product Management", "/business/product")
                .Items.Add GetMenuItem("Customer Management", "/business/customer")
            End With
        End With
    End With
End Sub

Feature Description

1. System Features

   • User management
   • Role permissions
   • Menu configuration
   • System settings

2. Frontend Frameworks

   • Layui Version
     • EasyWeb template
     • Rich components
     • Easy to use
   • Vue2 Version
     • ElementUI
     • Frontend-backend separation
     • Component-based development

3. Development Modes

   • Traditional Version (Layui)
     • Server-side rendering
     • Template engine
     • Synchronous loading
   • Modern Version (Vue2)
     • Frontend-backend separation
     • Single-page application
     • Asynchronous loading

Technical Points

1. Frontend-backend separation
2. Permission control
3. Asynchronous communication
4. Component encapsulation

Use Cases

1. Backend management systems
2. Business management platforms
3. Operations monitoring systems
4. Data management platforms

Extension Suggestions

1. Add more components
2. Optimize page performance
3. Add theme switching
4. Add data caching
5. Support internationalization