前言

在園子吸收營養(yǎng)10多年，一直沒有貢獻(xiàn)，目前園子危機(jī)時(shí)刻，除了捐款+會(huì)員，也鼓起勇氣，發(fā)篇文助力一下。

2018年下半年，公司決定開發(fā)一款SaaS版行業(yè)供應(yīng)鏈管理系統(tǒng)，經(jīng)過選型，確定采用ABP（ASP.NET Boilerplate）框架。為了加快開發(fā)效率，購買了商業(yè)版的 ASP.NET ZERO（以下簡稱ZERO），選擇ASP.NET Core + Angular的SPA框架進(jìn)行系統(tǒng)開發(fā)（ABP.IO屆時(shí)剛剛起步，還很不成熟，因此沒有選用）。

關(guān)于ABP與ZERO，園子里已經(jīng)有諸多介紹，因此不再贅述。本文側(cè)重介紹我們基于ZERO框架開發(fā)系統(tǒng)過程中進(jìn)行的一些優(yōu)化、調(diào)整、擴(kuò)展部分的內(nèi)容，方便有需要的園友們了解或者參考。

系統(tǒng)架構(gòu)

系統(tǒng)在2020年7月發(fā)布上線（部署在阿里云上），目前有超過500家企業(yè)/個(gè)人注冊體驗(yàn)（付費(fèi)的很少），感興趣的可以在此系統(tǒng)的著陸網(wǎng)站 scm.plus 注冊一個(gè)免費(fèi)賬號體驗(yàn)一下，歡迎大家的批評指正。

ZERO框架總體上來說還是不錯(cuò)的，可以快速的上手，集成的通用功能（版本、租戶、角色、用戶、設(shè)置等）初期都可以直接使用，但還達(dá)不到直接發(fā)布使用的水準(zhǔn)，需要經(jīng)過諸多的優(yōu)化調(diào)整擴(kuò)展后才能發(fā)布上線。

A 后端（ASP.NET Core）部分

0、移除不需要的功能：Chat、SignalR、DynamicProperty、GraphQL、IdentityServer4。

基于系統(tǒng)功能定位，移除的這些不需要的功能，使系統(tǒng)盡可能的精簡。

1、Migrations內(nèi)移除Designer.cs。

在我們的開發(fā)環(huán)境內(nèi)，經(jīng)過測試與驗(yàn)證，使用mysql數(shù)據(jù)庫時(shí)候，可以安全移除add-migration時(shí)候生成的龐大的Designer.cs文件。移除Designer.cs文件時(shí)候，需要把該文件內(nèi)的DbContext與Migration聲明語句移到對應(yīng)的migration.cs文件內(nèi)：

[DbContext(typeof(SCMDbContext))]
[Migration("20230811015119_Upgraded_To_Abp_8_3")]
public partial class Upgraded_To_Abp_8_3 : Migration
{
   ...
}

2、替換必要的功能包，確保系統(tǒng)后端可以部署到linux環(huán)境：

• 使用SkiaSharp替換System.Drawing.Common；
• 使用EPPlus替換NPOI。

3、停用系統(tǒng)默認(rèn)的外部登錄（ Facebook、Google、Microsoft、Twitter等），添加微信掃碼與小程序登錄。

4、停用系統(tǒng)默認(rèn)的支付選項(xiàng)（ Paypal、Stripe等），添加支付寶（Alipay）支付。

5、Excel文件上傳，ZERO默認(rèn)沒有實(shí)現(xiàn)，需要自行添加Excel文件的上傳與導(dǎo)入功能：

• Excel文件上傳后先緩存該文件；
• 創(chuàng)建一個(gè)后臺(tái)Job（HangFire）執(zhí)行Excel文件的讀取、處理等；
• Job發(fā)送執(zhí)行后的結(jié)果（消息通知）。

[HttpPost]
[AbpMvcAuthorize(AppPermissions.Pages_Txxxs_Excel_Import)]
public async Task<JsonResult> ImportFromExcel()
{
    try
    {
        var jobArgs = await DoImportFromExcelJobArgs(AbpSession.ToUserIdentifier());

        var queueState = new EnqueuedState(GetJobQueueName());
        IBackgroundJobClient hangFireClient = new BackgroundJobClient();
        hangFireClient.Create<ImportTxxxsToExcelJob>(x => x.ExecuteAsync(jobArgs), queueState);

        return Json(new AjaxResponse(new { }));
    }
    catch (Exception ex)
    {
        return Json(new AjaxResponse(new ErrorInfo(ex.Message)));
    }
}

6、圖片與文件上傳存儲(chǔ)，ZERO的默認(rèn)實(shí)現(xiàn)是保存上傳的圖片文件到數(shù)據(jù)庫內(nèi)，需要改造存儲(chǔ)到OSS中：

• 使用MD5哈希前綴，生成OSS文件對象的名稱（含path），提高OSS并發(fā)性能：

private static string GetOssObjName(int? tenantId, Guid id, bool isThumbnail)
{
    string tid = (tenantId ?? 0).ToString();
    string ext = isThumbnail ? "thu" : "ori"; //thu - 縮略圖、ori - 原圖/原文件
    string hashStr = BitConverter.ToString(MD5.HashData(Encoding.UTF8.GetBytes(tid)), 0).Replace("-", string.Empty).ToLower();

    return $"{hashStr[..4]}/{tid}/{id}.{ext}";
}

• 若OSS未啟用或者上傳失敗，則直接存儲(chǔ)到數(shù)據(jù)庫中：

public async Task SaveAsync(BinaryObject file)
{
    if (file?.Bytes == null) { return; }

    //1、OSS上傳，成功后直接返回
    if (OssPutObject(file.TenantId, file.Id, file.Bytes, isThumbnail: false)) { return; } 

    //2、若OSS未啟用或者上傳失敗，則直接上傳到數(shù)據(jù)庫中
    await _binaryObjectRepository.InsertAsync(file);
}

• 獲取時(shí)候遵循一樣的邏輯：若OSS未啟用或者獲取不到，則直接自數(shù)據(jù)庫中獲取；自數(shù)據(jù)庫獲取成功后要同步數(shù)據(jù)庫中記錄到OSS中。

7、Webhook功能，需要改造支持推送數(shù)據(jù)到第三方接口，如：企業(yè)微信群、釘釘群、聚水潭API等：

• 重寫WebhookManager的SignWebhookRequest方法；
• 重寫DefaultWebhookSender的CreateWebhookRequestMessage、AddAdditionalHeaders、SendHttpRequest方法；
• 緩存Webhook Subscription：

private SCMWebhookCacheItem SetAndGetCache(int? tenantId, string keyName = "SubscriptionCount")
{
   int tid = tenantId ?? 0; var cacheKey = $"{keyName}-{tid}";

   return _cacheManager.GetSCMWebhookCache().Get(cacheKey, () =>
   {
        int count = 0;
        var names = new Dictionary<string, List<WebhookSubscription>>();

        UnitOfWorkManager.WithUnitOfWork(() =>
        {
            using (UnitOfWorkManager.Current.SetTenantId(tenantId))
            {
                if (_featureChecker.IsEnabled(tid, "SCM.H"))            //Feature 核查
                {
                    var items = _webhookSubscriptionRepository.GetAllList(e => e.TenantId == tenantId && e.IsActive == true);
                    count = items.Count;

                    foreach (var item in items)
                    {
                        if (string.IsNullOrWhiteSpace(item.Webhooks)) { continue; }
                        var whNames = JsonHelper.DeserializeObject<string[]>(item.Webhooks); if (whNames == null) { continue; }
                        foreach (string whName in whNames)
                        {
                            if (names.ContainsKey(whName))
                            {
                                names[whName].Add(item.ToWebhookSubscription());
                            }
                            else
                            {
                                names.Add(whName, new List<WebhookSubscription> { item.ToWebhookSubscription() });
                            }
                        }
                    }
                }
            }
        });

        return new SCMWebhookCacheItem(count, names);
    });
}

8、在WebHostModule中設(shè)定只有一臺(tái)Server執(zhí)行后臺(tái)Work，避免多臺(tái)Server重復(fù)執(zhí)行：

public override void PostInitialize()
{
    ...

    string defaultEndsWith = _appConfiguration["Job:DefaultEndsWith"];
    if (string.IsNullOrWhiteSpace(defaultEndsWith)) { defaultEndsWith = "01"; }
    if (AppVersionHelper.MachineName.EndsWith(defaultEndsWith))
    {
        var workManager = IocManager.Resolve<IBackgroundWorkerManager>();

        workManager.Add(IocManager.Resolve<SubscriptionExpirationCheckWorker>());
        workManager.Add(IocManager.Resolve<SubscriptionExpireEmailNotifierWorker>());
        workManager.Add(IocManager.Resolve<SubscriptionPaymentsCheckWorker>());
        workManager.Add(IocManager.Resolve<ExpiredAuditLogDeleterWorker>());
        workManager.Add(IocManager.Resolve<PasswordExpirationBackgroundWorker>());
    }

    ...
}

9、限流功能，ZERO默認(rèn)沒有實(shí)現(xiàn)，通過添加AspNetCoreRateLimit中間件集成限流功能：

• 采用客戶端ID（ClientRateLimiting）進(jìn)行設(shè)置；
• 重寫RateLimitConfiguration的RegisterResolvers方法，添加定制化的ClientIpHeaderResolveContributor：存在客戶端ID則優(yōu)先獲取，反之獲取客戶端的IP：

    public class RateLimitConfigurationExtensions : RateLimitConfiguration  
    {
        ...
        public override void RegisterResolvers()
        {
            ClientResolvers.Add(new ClientIpHeaderResolveContributor(SCMConsts.TenantIdCookieName));
        }
    }

    public class ClientIpHeaderResolveContributor : IClientResolveContributor
    {
        private readonly string _headerName;

        public ClientIpHeaderResolveContributor(string headerName)
        {
            _headerName = headerName;     
        }

        public Task<string> ResolveClientAsync(HttpContext httpContext)
        {
            IPAddress clientIp = null;

            var headers = httpContext?.Request?.Headers;
            if (headers != null && headers.Count > 0)
            {
                if (headers.ContainsKey(_headerName))                               //0 scm_tid
                {
                    string clientId = headers[_headerName].ToString();
                    if (!string.IsNullOrWhiteSpace(clientId))
                    {
                        return Task.FromResult(clientId);
                    }
                }

                try
                {
                    if (headers.ContainsKey("X-Real-IP"))                           //1 X-Real-IP
                    {
                        clientIp = IpAddressUtil.ParseIp(headers["X-Real-IP"].ToString());
                    }
                    
                    if (clientIp == null && headers.ContainsKey("X-Forwarded-For")) //2 X-Forwarded-For
                    {
                        clientIp = IpAddressUtil.ParseIp(headers["X-Forwarded-For"].ToString());
                    }
                }
                catch {}

                clientIp ??= httpContext?.Connection?.RemoteIpAddress;             //3 RemoteIpAddress
            }

            return Task.FromResult(clientIp?.ToString());
        }
    }

B 前端（Angular）部分

0、類似后端，移除不需要的功能：Chat、SignalR、DynamicProperty等。

1、拆分精簡service-proxies.ts文件：

• ZERO使用NSwag生成前端的TypeScript代碼文件service-proxies.ts，全部模塊的都生成到一個(gè)文件內(nèi)，導(dǎo)致該文件非常龐大，最終編譯生成的main.js接近4MB；
• 按系統(tǒng)執(zhí)行層次，拆分service-proxies.ts為多個(gè)文件，精簡其中的共用代碼，調(diào)整module的調(diào)用、拆分、懶加載等，最終大幅度減少了main.js的大小（目前是587KB）。

2、優(yōu)化表格組件primeng table，實(shí)現(xiàn)客戶端表格使用狀態(tài)的本地存儲(chǔ)：表格列寬、列順序、列顯示隱藏、列固定、分頁設(shè)定等。

3、實(shí)現(xiàn)客戶端的卡片視圖功能。

4、集成ng-lazyload-image，實(shí)現(xiàn)圖片展示的懶加載。

5、集成ngx-markdown，實(shí)現(xiàn)markdown格式的在線幫助。

6、業(yè)務(wù)組件設(shè)置為獨(dú)立組件，ChangeDetectionStrateg設(shè)置為OnPush：

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: './txxxs.component.html',
    standalone: true,
    imports: [...]
})
export class TxxxsComponent extends AppComponentBase {
    ...
    constructor(
        injector: Injector,
        changeDetector: ChangeDetectorRef,
    ) {
        super(injector);
        setInterval(() => { changeDetector.markForCheck(); }, AppConsts.ChangeDetectorMS);
    }
    ...
}

7、儀表盤升級為工作臺(tái)，除了可以添加圖表外，也可以添加業(yè)務(wù)組件（獨(dú)立組件）。

8、路由直接鏈接業(yè)務(wù)組件，實(shí)現(xiàn)懶加載：

import { Route } from '@angular/router';
export default [
    { path: 'p120303/t12030301s', loadComponent: () => import('./t12030301s.component').then(c => c.T12030301sComponent), ... },
    { path: 'p120405/t12040501s', loadComponent: () => import('./t12040501s.component').then(c => c.T12040501sComponent), ... },
    { path: 'p120405/t12040502s', loadComponent: () => import('./t12040502s.component').then(c => c.T12040502sComponent), ... },
] as Route[];

9、通過webpackInclude，減少打包后的文件數(shù)量；使用webpackChunkName設(shè)定打包后的文件名：

function registerLocales(
    resolve: (value?: boolean | Promise<boolean>) => void,
    reject: any,
    spinnerService: NgxSpinnerService
) {
    if (shouldLoadLocale()) {
        let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
        import(
            /* webpackInclude: /(en|en-GB|zh|zh-Hans|zh-Hant)\.mjs$/ */
            /* webpackChunkName: "angular-common-locales" */
            `/node_modules/@angular/common/locales/${angularLocale}.mjs`).then((module) => {
                registerLocaleData(module.default);
                resolve(true);
                spinnerService.hide();
            }, reject);
    } else {
        resolve(true);
        spinnerService.hide();
    }
}

C 小程序（Vue3）部分

后端部分已經(jīng)實(shí)現(xiàn)小程序集成微信登錄，后端輸出的語言文本與API等小程序都可以直接調(diào)用，因此小程序的開發(fā)實(shí)現(xiàn)就相對比較容易，只需要實(shí)現(xiàn)必要的UI界面即可。

• 小程序采用 uni-app(vue3) 框架進(jìn)行開發(fā)，整體效率較高。
• 有部分代碼可以基于前端 Angular 的代碼復(fù)制后稍加調(diào)整后即可使用。
• 目前只輸出了微信小程序，方便同企業(yè)微信群內(nèi)的消息推送一體化集成。
• 后端部分實(shí)現(xiàn)的Webhook功能，可以直接推送消息到企業(yè)微信群內(nèi)，用戶可以單擊消息卡片，直接打開微信小程序內(nèi)對應(yīng)的頁面，查看數(shù)據(jù)或者進(jìn)行其他的維護(hù)操作。
• 小程序中需要在onLaunch中進(jìn)行路由守衛(wèi)（登錄攔截），以處理通過分享單獨(dú)頁面或者企業(yè)微信群內(nèi)通過消息卡片直接打開小程序頁面的權(quán)限核查。

總結(jié)

若沒有優(yōu)秀的工具框架支持，開發(fā)SaaS化系統(tǒng)并不是一件容易的事。基于ABP框架，使用ZERO工具，極大的降低了開發(fā)SaaS化系統(tǒng)的門檻，也促成了這套系統(tǒng)的實(shí)踐與發(fā)布。

本文簡要介紹了我們實(shí)現(xiàn)這套系統(tǒng)中的一些要點(diǎn)，供有需要的人了解參考，就算是拋磚引玉吧！