基于Blazor实现的简易进销存管理系统

最新推荐文章于 2025-09-25 21:44:00 发布

原创

最新推荐文章于 2025-09-25 21:44:00 发布 · 620 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#Blazor

本文主要介绍如何使用Known开发框架来开发Blazor项目，下面我们用简易进销存管理系统作为示例来分析和设计，文中的代码为关键示例代码，不能直接运行，如要运行查看效果，可在码云上下载完整项目源码运行。

源码地址：https://gitee.com/known/JxcLite

1. 系统需求

可以维护商品信息库，采购进货单可以从中选择商品，销售出货从库存中选择商品；
采购进货和销售出货支持月结和现金结算，月结的单据需要与客户和供应商对账单；
采购和销售需支持退货；
提供库存查询、进出退货明细、利润表等报表功能；
支持单机桌面版和云Web版。

2. 功能模块

基础数据：包含数据字典、组织结构、商品信息、供应商、客户管理。
进货管理：包含采购进货单、采购退货单。
销货管理：包含销售出货单、销售退货单。
库存管理：包含商品库存查询。
财务管理：包含客户对账单、供应商对账单。
统计报表：包含进货明细表、进退货明细表、销货明细表、销退货明细表、商品利润表。
系统管理：包含角色管理、用户管理、系统附件、系统日志。

3. 项目结构

├─JxcLite          -> 包含配置、常量、枚举、模型、服务接口、路由、页面。
├─JxcLite.Core     -> 后端类库，包含实体、业务逻辑、数据访问。
├─JxcLite.Wasm     -> 项目WebAssembly，Auto模式前端程序。
├─JxcLite.Web      -> 项目Web App，云Web程序。
├─JxcLite.WinForm  -> 项目WinForm App，单机桌面程序。
├─JxcLite.sln      -> 项目解决方案文件。

4. 框架搭建

打开VS2022创建一个空的解决方案JxcLite.sln，然后再添加各个项目。

4.1. JxcLite项目

添加JxcLite类库，引用Known 3.*，工程文件如下：

<Project Sdk="Microsoft.NET.Sdk.Razor">
    <ItemGroup>
        <PackageReference Include="Known" Version="3.*" />
    </ItemGroup>
</Project>

项目文件结构

├─wwwroot         -> 静态文件夹，包含css、img、js，桌面和Web共用资产。
├─Apps            -> 移动端页面文件夹。
├─Models          -> 前后端数据交互模型文件夹。
├─Pages           -> PC端页面文件夹。
├─Services        -> 前后端数据交互服务接口和Http客户端文件夹。
├─Shared          -> 模块共享组件文件夹。
├─_Imports.razor  -> 全局命名空间引用文件。
├─AppConfig.cs    -> 系统配置类。
├─AppConstant.cs  -> 系统所有常量类文件。
├─AppEnums.cs     -> 系统所有枚举文件。
├─AppModule.cs    -> 系统一级模块配置类。
├─Routes.razor    -> 系统路由组件。

4.2. JxcLite.Core项目

添加JxcLite.Core类库，引用JxcLite项目和Known.Core 3.*等库，工程文件如下：

<Project Sdk="Microsoft.NET.Sdk">
    <ItemGroup>
        <PackageReference Include="Known.Cells" Version="1.*" />
        <PackageReference Include="Known.Core" Version="3.*" />
        <ProjectReference Include="..\JxcLite\JxcLite.csproj" />
    </ItemGroup>
</Project>

项目文件结构

├─Entities      -> 实体类文件夹。
├─Extensions    -> 后端业务扩展类文件夹。
├─Imports       -> 数据导入类文件夹。
├─Repositories  -> 数据访问类文件夹，SQL语句都写在此处。
├─Services      -> 业务逻辑服务实现类文件夹。
├─_Imports.cs   -> 全局命名空间引用文件。
├─AppCore.cs    -> 后端配置类。

4.3. JxcLite.Wasm项目

添加JxcLite.Wasm类库，引用JxcLite项目和WebAssembly等库，工程文件如下：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
    <ItemGroup>
        <ProjectReference Include="..\JxcLite\JxcLite.csproj" />
    </ItemGroup>
</Project>

该项目只有一个Wasm程序入口文件Program.cs

├─Program.cs  -> Wasm程序入口。

4.4. JxcLite.Web项目

添加JxcLite.Web类库，引用JxcLite.Core和JxcLite.Wasm项目，工程文件如下：

<Project Sdk="Microsoft.NET.Sdk.Web">
    <ItemGroup>
        <ProjectReference Include="..\JxcLite.Core\JxcLite.Core.csproj" />
        <ProjectReference Include="..\JxcLite.Wasm\JxcLite.Wasm.csproj" />
    </ItemGroup>
</Project>

项目文件结构

├─wwwroot          -> 静态文件夹。
├─_Imports.razor   -> 全局命名空间引用文件。
├─App.razor        -> 主程序。
├─appsettings.json -> 配置文件。
├─Program.cs       -> Web程序入口。

4.5. JxcLite.WinForm项目

添加JxcLite.WinForm类库，引用JxcLite.Core项目，工程文件如下：

<Project Sdk="Microsoft.NET.Sdk.Razor">
    <ItemGroup>
        <ProjectReference Include="..\JxcLite.Core\JxcLite.Core.csproj" />
    </ItemGroup>
</Project>

项目文件结构

├─wwwroot        -> 静态文件夹，包含css、img、index.html。
├─_Imports.razor -> 全局命名空间引用文件。
├─App.razor      -> 主程序路由。
├─AppSetting.cs  -> 程序设置类。
├─Dialog.cs      -> WinForm对话框类。
├─favicon.ico    -> 图标。
├─MainForm.cs    -> 主窗体。
├─Program.cs     -> 桌面程序入口。

5. 项目配置

5.1. 前端配置

前端配置写在JxcLite项目的AppConfig.cs文件中，示例如下：

public static class AppConfig {
   
   
    public static string AppId => "JxcLite";
    public static string AppName => "进销存管理系统";

    // 添加应用程序配置，云Web、Wasm和桌面需要调用
    public static void AddApplication(this IServiceCollection services, AppType type) {
   
   
        var assembly = typeof(AppConfig).Assembly;
        Config.AddModule(assembly);

        services.AddKnown(option => {
   
    }); // 添加Known
        services.AddModules();            // 添加一级模块
        services.ConfigUI();              // 配置界面
    }

    // 添加Wasm模式的Http客户端，Wasm需要调用
    public static void AddApplicationClient(this IServiceCo