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
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)
vb
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)
vb
'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)
vb
'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
System Features
- User management
- Role permissions
- Menu configuration
- System settings
Frontend Frameworks
- Layui Version
- EasyWeb template
- Rich components
- Easy to use
- Vue2 Version
- ElementUI
- Frontend-backend separation
- Component-based development
- Layui Version
Development Modes
- Traditional Version (Layui)
- Server-side rendering
- Template engine
- Synchronous loading
- Modern Version (Vue2)
- Frontend-backend separation
- Single-page application
- Asynchronous loading
- Traditional Version (Layui)
Technical Points
- Frontend-backend separation
- Permission control
- Asynchronous communication
- Component encapsulation
Use Cases
- Backend management systems
- Business management platforms
- Operations monitoring systems
- Data management platforms
Extension Suggestions
- Add more components
- Optimize page performance
- Add theme switching
- Add data caching
- Support internationalization