English

简体中文

English

简体中文

VJSP Frontend Architecture Documentation ​

1. Project Overview ​

VJSP is a Web-based enterprise application platform that adopts a front-end and back-end separation architecture. The frontend is built using a custom framework (VJSP framework) and integrates various third-party libraries and components. It supports multiple languages, theme switching, and other functionalities. This system includes common enterprise-level application features such as user management, permission control, workflow, and form processing.

2. Technology Stack ​

2.1 Core Framework ​

  • VJSP self-developed framework (vjsp.all.min.js)

2.2 UI Component Library ​

  • EasyUI (vjsp.eui.min.js)
  • LayUI
  • ZTree (vjsp.zt.min.js)

2.3 Charts and Visualization ​

  • ECharts 5 (vjsp.ec.min.js)

2.4 Rich Text Editor ​

  • UEditor (vjsp.ue.min.js)

2.5 Date Picker ​

  • LayDate

2.6 File Upload ​

  • WebUploader (vjsp.wu.min.js)

2.7 Media Playback ​

  • Plyr (vjsp.pl.min.js)

2.8 Calendar ​

  • FullCalendar (vjsp.fc.min.js)

3. Project Structure ​

vjsphtml/
├── CommonDialog/           # Common dialog components
├── home/                   # Home-related pages
│   ├── main.html           # Desktop home page
│   └── portal.html         # Portal page
├── httpStatus/             # HTTP status pages
├── modules/                # Business modules
│   └── customer/           # Customer management module
├── system/                 # System management modules
│   ├── account/            # Account management
│   ├── dept/               # Department management
│   ├── dic/                # Data dictionary
│   ├── exportSql/          # SQL export
│   ├── flowRole/           # Workflow roles
│   ├── log/                # Log management
│   ├── menu/               # Menu management
│   ├── role/               # Role management
│   └── user/               # User management
├── vjsp-resource/          # Resource files
│   └── resource/
│       └── static/
│           ├── theme-customMade/  # Custom theme
│           ├── theme-default/     # Default theme
│           └── workflow/          # Workflow resources
├── vjsp-static/            # Static resources
│   ├── script/             # JS script files
│   ├── style/              # CSS style files
│   ├── theme-default/      # Default theme resources
│   └── thirdlibs/          # Third-party libraries
│       ├── easyui/         # EasyUI library
│       ├── echarts5/       # ECharts charting library
│       ├── fullcalendar/   # Calendar component
│       ├── laydate/        # Date picker
│       ├── layui/          # LayUI component library
│       ├── plyr/           # Media player
│       ├── ueditor/        # Rich text editor
│       ├── webuploader/    # File upload component
│       └── ztree/          # Tree control
├── vjspflow/               # Workflow-related pages
└── _vjsp_setting/          # System configuration files

4. Core Function Modules ​

4.1 Authentication and Authorization ​

  • Token-based authentication
  • Permission control system
  • Multi-role support
  • Super administrator privileges

4.2 User Interface ​

  • Multi-theme capability
  • Customizable themes
  • Multi-language support (Chinese, English, etc.)

4.3 System Management ​

  • User management
  • Role management
  • Department management
  • Menu management
  • Permission configuration
  • Log management
  • Data dictionaries

4.4 Workflow ​

  • Process definition
  • Process instances
  • Task management
  • Process records

4.5 Form System ​

  • Dynamic forms
  • Form validation
  • Processing of form data

5. Architecture Features ​

5.1 Frontend and Backend Separation ​

  • Frontend handles UI rendering and user interaction
  • Backend delivers RESTful APIs
  • Token-based authentication

5.2 Modular Design ​

  • Independent module encapsulation of functions
  • Separation of business logic
  • Strong extensibility

5.3 Multi-platform Adaptation ​

  • Responsive layout design
  • Device detection and adaptation

5.4 Internationalization Support ​

  • Multi-language switching
  • Language package management
  • Localization configuration

5.5 Theme Customization ​

  • Ability to switch themes
  • Support for custom themes
  • Dynamic style adjustment

6. Development Guidelines ​

6.1 File Naming ​

  • HTML file: functionality.html
  • Language files: functionality.lang.language_code.json

6.2 Directory Structure ​

  • Organized by functional modules
  • Centralized management of static resources
  • Independent storage for third-party libraries

6.3 Code Style ​

  • Component-based development based on the VJSP framework
  • Event-driven interaction handling
  • Unified API invocation approach

7. Security Mechanisms ​

  • Token-based identity verification
  • Fine-grained permission control
  • Interface authorization verification
  • Session management
  • Security header settings

8. Deployment and Operation ​

8.1 Environment Requirements ​

  • Modern browser compatibility
  • Compatibility with IE9+ (via polyfill)

8.2 Resource Loading ​

  • Static resources version control (URL parameter _t)
  • On-demand component loading
  • Cache control mechanisms

9. Extension and Customization ​

9.1 Adding New Modules ​

  1. Create a new module directory under modules
  2. Implement HTML, JS and CSS files for the module
  3. Add entry point for new module in system menu

9.2 Theme Customization ​

  1. Modify style files under theme-customMade directory
  2. Adjust UI elements such as colors, fonts
  3. Update image and icon resources

9.3 Language Extension ​

  1. Create new language package files (*.lang.language_code.json)
  2. Add new language option in system configuration
  3. Implement language switching function

10. Best Practices ​

  • Utilize components and APIs provided by the VJSP framework
  • Follow modular and component-based development methods
  • Leverage third-party library functionalities appropriately
  • Consider mobile adaptation and responsive design
  • Implement internationalization and localization support