前言
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屆時剛剛起步，還很不成熟，因此沒有選用）。
關(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è)/團(tuán)隊/個人注冊體驗，感興趣的園友可以在此系統(tǒng)的著陸網(wǎng)站 scm.plus 注冊一個免費賬號體驗一下，歡迎大家的批評與建議。
ZERO框架總體上來說還是不錯的，可以快速的上手，集成的通用功能（版本、租戶、角色、用戶、設(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)盡可能的精簡。文章來源：http://www.zghlxwxcb.cn/news/detail-695050.html
1、Migrations內(nèi)移除Designer.cs。
在我們的開發(fā)環(huán)境內(nèi)，經(jīng)過測試與驗證，使用mysql數(shù)據(jù)庫時候，可以安全移除add-migration時候生成的龐大的Designer.cs文件。移除Designer.cs文件時候，需要把該文件內(nèi)的DbContext與Migration聲明語句移到對應(yīng)的migration.cs文件內(nèi)：文章來源地址http://www.zghlxwxcb.cn/news/detail-695050.html
[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)的支付選項（ Paypal、Stripe等），添加支付寶（Alipay）支付。
5、Excel文件上傳，ZERO默認(rèn)沒有實現(xiàn)，需要自行添加Excel文件的上傳與導(dǎo)入功能：
- Excel文件上傳后先緩存該文件；
- 創(chuàng)建一個后臺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、圖片與文件上傳存儲，ZERO的默認(rèn)實現(xiàn)是保存上傳的圖片文件到數(shù)據(jù)庫內(nèi)，需要改造存儲到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未啟用或者上傳失敗，則直接存儲到數(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);
}
- 獲取時候遵循一樣的邏輯：若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è)定只有一臺Server執(zhí)行后臺Work，避免多臺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)沒有實現(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，全部模塊的都生成到一個文件內(nèi)，導(dǎo)致該文件非常龐大，最終編譯生成的main.js接近4MB；
- 按系統(tǒng)執(zhí)行層次，拆分service-proxies.ts為多個文件，精簡其中的共用代碼，調(diào)整module的調(diào)用、拆分、懶加載等，最終大幅度減少了main.js的大?。壳笆?87KB）。
2、優(yōu)化表格組件primeng table，實現(xiàn)客戶端表格使用狀態(tài)的本地存儲：表格列寬、列順序、列顯示隱藏、列固定、分頁設(shè)定等。
3、實現(xiàn)客戶端的卡片視圖功能。
4、集成ng-lazyload-image，實現(xiàn)圖片展示的懶加載。
5、集成ngx-markdown，實現(xiàn)markdown格式的在線幫助。
6、業(yè)務(wù)組件設(shè)置為獨立組件，ChangeDetectionStrategy設(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、儀表盤升級為工作臺，除了可以添加圖表外，也可以添加業(yè)務(wù)組件（獨立組件）。
8、路由直接鏈接業(yè)務(wù)組件，實現(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)實現(xiàn)小程序集成微信登錄，后端輸出的語言文本與API等小程序都可以直接調(diào)用，因此小程序的開發(fā)實現(xiàn)就相對比較容易，只需要實現(xiàn)必要的UI界面即可。
- 小程序采用 uni-app(vue3) 框架進(jìn)行開發(fā)，整體效率較高。
- 有部分代碼可以基于前端 Angular 的代碼復(fù)制后稍加調(diào)整后即可使用。
- 目前只輸出了微信小程序，方便同企業(yè)微信群內(nèi)的消息推送一體化集成。
- 后端部分實現(xiàn)的Webhook功能，可以直接推送消息到企業(yè)微信群內(nèi)，用戶可以單擊消息卡片，直接打開微信小程序內(nèi)對應(yīng)的頁面，查看數(shù)據(jù)或者進(jìn)行其他的維護(hù)操作。
- 小程序中需要在onLaunch中進(jìn)行路由守衛(wèi)（登錄攔截），以處理通過分享單獨頁面或者企業(yè)微信群內(nèi)通過消息卡片直接打開小程序頁面的權(quán)限核查。
總結(jié)
若沒有優(yōu)秀的工具框架支持，開發(fā)SaaS化系統(tǒng)并不是一件容易的事。基于ABP框架，使用ZERO工具，極大的降低了開發(fā)SaaS化系統(tǒng)的門檻，也促成了這套系統(tǒng)的實踐與發(fā)布。
本文簡要介紹了我們實現(xiàn)這套系統(tǒng)中的一些要點，供有需要的人了解參考，就算是拋磚引玉吧！
到了這里，關(guān)于基于ASP.NET ZERO，開發(fā)SaaS版供應(yīng)鏈管理系統(tǒng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
