DOCSEARCHbyAlgolia
Submit Docs

WalkingTec.Mvvm (WTM) Documentation

repository·dotnet10·Indexed 26 days ago

https://github.com/dotnetcore/wtm

A rapid development framework for ASP.NET Core designed to maximize efficiency through built-in code generation and pre-built backend functionalities. WTM supports multiple UI frameworks including LayUI, React, VUE, and Blazor. It provides specialized ViewModel types such as CrudVM, ListVM, ImportVM, TemplateVM, and BatchVM to handle common web application tasks like data modification, paging, and Excel importing.

Tokens
14.6K
Snippets
15
Records
123
Agent score
88%

What's inside WalkingTec.Mvvm

  1. Overview of WalkingTec.Mvvm (WTM)

    dotnet10

    WalkingTec.Mvvm (WTM) is a rapid development framework based on .NET Core. It is designed to increase development efficiency through a built-in code generator and support for various architectural patterns, including monolithic (non-separated) and decoupled (separated) frontend/backend architectures.

    Supported UI Modes

    • Non-separated (Monolithic): Uses LayUI (Stable).
    • Separated (Decoupled): Supports React (Stable), VUE (Stable), and Blazor (New/Stable).

    Key Features

    • Built-in Code Generator: Can generate both frontend and backend code simultaneously for decoupled modes.
    • ViewModel Types: Provides four specialized ViewModel categories:
      • BaseCRUDVM: Standard Create, Read, Update, Delete operations.
      • PagedListVM: Pagination, listing, and data export functionality.
      • ImportVM & TemplateVM: Data import capabilities.
      • BatchVM: Support for batch operations.
    • Built-in Management Modules: Includes User, Role, User Group, Data Permissions, Page Permissions, Menu, Logs, Email, SMS, and File management.
    • Infrastructure Support: Supports Single Sign-On (SSO), Portals, Distributed Databases, Redis, and DFS (Distributed File System).

  2. Install WalkingTec.Mvvm via NuGet

    dotnet10
    WTM is distributed via several NuGet packages depending on your required functionality. You can install the core components, MVC support, or the full Admin module using the following package names:

  4. Install WTM via NuGet Packages

    dotnet10

    WTM is distributed via NuGet. Depending on your project requirements, you can install the following packages:

    • WalkingTec.Mvvm.Core: The core framework logic.
    • WalkingTec.Mvvm.Mvc: MVC-based implementation.
    • WalkingTec.Mvvm.Mvc.Admin: Admin management implementation.
    • WalkingTec.Mvvm.TagHelpers.LayUI: TagHelpers for LayUI frontend integration.

  5. Install and configure libgdiplus for image processing

    dotnet10

    To resolve issues related to missing libgdiplus components or image generation errors, follow these steps to build and install libgdiplus from source:

    1. Install required dependencies:
    yum -y install autoconf automake libtool
yum -y install freetype-devel fontconfig libXft-devel
yum -y install libjpeg-turbo-devel libpng-devel giflib-devel libtiff-devel libexif-devel
yum -y install glib2-devel cairo-devel
    1. Clone and build libgdiplus:
    yum -y install git
mkdir -p /softwares
cd /softwares
git clone https://github.com/mono/libgdiplus
cd libgdiplus
./autogen.sh
make
make install
    1. Create the symbolic link for the DLL:
    ln -s /usr/local/lib/libgdiplus.so /usr/lib64/gdiplus.dll

  6. Configure Internationalization (i18n) in WTM Vue3

    dotnet10

    WTM uses vue-i18n with an automated directory-based loading system for translation files. To add new translations, follow these directory conventions:

    1. Framework Translations: Place framework-level translation files in /src/i18n/lang/*.ts.
    2. Page/Component Translations: Place interface-specific translation files in /src/i18n/pages/*.ts.

    Important Rules:

    • Ensure the folder structure under /src/i18n/pages matches the directory structure of your actual pages to make them easy to find.
    • Avoid Key Collisions: Do not use the same property keys in your custom translation files that are already defined in the framework's core translations.
    • The system automatically detects language codes (e.g., en, zh-cn, zh-tw) from the file paths and merges them into the global i18n instance.

  7. Define dynamic and static routes in WTM Vue3

    dotnet10

    WTM distinguishes between three types of route definitions in the route.ts file:

    1. dynamicRoutes: Used for routes that are part of the main application layout. If isRequestRoutes is enabled on the backend, the first top-level children array in dynamicRoutes will be replaced by route data fetched from the API. To add frontend-controlled routes, add them to the children array of the root path (/).
    2. staticRoutes: Used for standalone pages that do not use the application layout (e.g., the /login page). Do not modify these for standard application navigation; use dynamicRoutes instead.
    3. notFoundAndNoPower: Pre-defined routes for handling 404 (Not Found) and 401 (No Permission) errors.
    // To add a new route that uses the application layout:
export const dynamicRoutes: Array<RouteRecordRaw> = [
	{
		path: '/',
		name: '/',
		component: () => import('/@/layout/index.vue'),
		redirect: '/home',
		meta: {
			isKeepAlive: true,
		},
		children: [
			// Add your new route here
		],
	},
];

  8. Install WTM Vue3 components

    dotnet10

    To use WTM components in your Vue 3 application, use the default export's install method. This registers the following global components:

    • WtmUploadImage: Image upload component
    • WtmUploadFile: File upload component
    • WtmTable: Data table component
    • WtmSearcher: Search panel component
    • WtmImportor: Data import component
    • WtmChart: ECharts integration component
    • WtmButton: Link button component
    • WtmEditor: Rich text editor component

  9. Manage route control modes (Frontend vs Backend)

    dotnet10

    WTM supports two modes for controlling application routes, which determines how menu items and permissions are handled:

    1. Frontend Control (isRequestRoutes: false):

      • Route menus are defined in the frontend code.
      • Requires defining roles in the route configuration.
      • Uses the initFrontEndControlRoutes() method to load routes.
      • Role management is available, but there is no menu management interface.

    2. Backend Control (isRequestRoutes: true):

      • Route menus are returned by the backend API.
      • Does not require manual roles definition in the route object.
      • Uses the initBackEndControlRoutes() method to load routes.
      • Includes both Menu Management and Role Management interfaces.

    Control behavior is toggled via the isRequestRoutes property in the themeConfig store.

  10. Configure backend route component mapping

    dotnet10

    The backend-driven routing system maps backend menu items to local Vue components.

    • Standard Routes: The component field in the backend menu should match the relative path of a .vue or .tsx file within the views directory. The system uses dynamicImport to resolve these paths.
    • Iframe/External Links: If a backend Url contains http:// or https://, the system automatically sets meta.isIframe to true, meta.isLink to the URL, and uses the layout/routerView/iframes.vue component.
    • Fallback: If no component match is found for a route, it defaults to layout/routerView/parent.vue.

  11. Fix missing text in generated images (DrawString)

    dotnet10

    If generated images do not display text (e.g., DrawString does not display in image), you must copy Windows fonts to the system font directory: /usr/share/fonts/chinese/TrueType/

  12. Resolve ICU package missing error

    dotnet10

    If the application fails with FailFast: Couldn't find a valid ICU package installed on the system, you can either install the icu package via yum or set the configuration flag System.Globalization.Invariant to true if you do not require globalization support.

    yum -y install icu