VBMAN 管理端示例

概述

这个示例展示了如何使用 VBMAN 框架构建一个完整的管理系统，包含了服务端和前端实现。前端支持 layui 和 vue2 两种框架，展示了不同的开发方式。

项目结构

AdminEnd/
  ├── Form1.frm        # 主窗体
  ├── VBMAN_DEMO.vbp   # 项目文件
  └── www/            # Web前端目录
      ├── layui/     # layui版前端
      │   └── easyweb/ # 基于layui的管理系统模板
      └── vue/       # Vue2版前端
          └── eleadmin2/ # 基于Vue2的管理系统模板

核心代码解析

1. 服务端入口(Form1.frm)

Option Explicit

Private Sub Command1_Click()
    '启动layui版
    Shell "explorer.exe http://127.0.0.1:800/layui/easyweb/"
End Sub

Private Sub Command2_Click()
    '启动vue2版
    Shell "explorer.exe http://127.0.0.1:800/vue/eleadmin2/"
End Sub

Private Sub Form_Load()
    '启动Web服务器
    With HttpServer
        '注册业务模块
        .Router.Reg "Users", New bUsers
        .Router.Reg "Menus", New bMenus
        
        '配置静态文件目录
        .Start 800, App.Path & "\www"
    End With
End Sub

2. 用户管理实现(bUsers.cls)

'用户管理业务类
Option Explicit

'用户列表
Public Sub List(ctx As cHttpServerContext)
    With ctx.Response.NewJson
        .Items.Add GetUser(1, "admin", "管理员")
        .Items.Add GetUser(2, "test", "测试用户")
    End With
End Sub

'用户登录
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
        '生成token
        With ctx.Response.NewJson
            .Item("code") = 0
            .Item("token") = GenerateToken(username)
            .Item("userInfo") = GetUserInfo(username)
        End With
    Else
        ctx.Response.Error 401, "用户名或密码错误"
    End If
End Sub

3. 菜单管理实现(bMenus.cls)

'菜单管理业务类
Option Explicit

'获取菜单树
Public Sub GetTree(ctx As cHttpServerContext)
    With ctx.Response.NewJson
        '系统管理
        With .NewJson("system")
            .Item("title") = "系统管理"
            .Item("icon") = "layui-icon-set"
            
            '添加子菜单
            With .NewJson("children")
                .Items.Add GetMenuItem("用户管理", "/system/user")
                .Items.Add GetMenuItem("角色管理", "/system/role")
                .Items.Add GetMenuItem("菜单管理", "/system/menu")
            End With
        End With
        
        '业务管理
        With .NewJson("business")
            .Item("title") = "业务管理"
            .Item("icon") = "layui-icon-app"
            
            With .NewJson("children")
                .Items.Add GetMenuItem("订单管理", "/business/order")
                .Items.Add GetMenuItem("商品管理", "/business/product")
                .Items.Add GetMenuItem("客户管理", "/business/customer")
            End With
        End With
    End With
End Sub

功能说明

1. 系统功能

   • 用户管理
   • 角色权限
   • 菜单配置
   • 系统设置

2. 前端框架

   • Layui版
     • EasyWeb模板
     • 组件丰富
     • 简单易用
   • Vue2版
     • ElementUI
     • 前后端分离
     • 组件化开发

3. 开发模式

   • 传统版(Layui)
     • 服务端渲染
     • 模板引擎
     • 同步加载
   • 现代版(Vue2)
     • 前后端分离
     • 单页应用
     • 异步加载

技术要点

1. 前后端分离
2. 权限控制
3. 异步通信
4. 组件封装

应用场景

1. 后台管理系统
2. 业务管理平台
3. 运维监控系统
4. 数据管理平台

扩展建议

1. 添加更多组件
2. 优化页面性能
3. 增加主题切换
4. 添加数据缓存
5. 支持国际化