天天看點

WTM架構開發前後端分離項目總結

作者:易步繁星

近期基于WTM架構開發了一套采購資料分析與預警系統,前端用的是架構Vue模闆。

架構上手成本很低,按官網文檔快速建立一個項目:

「連結」

WTM架構開發前後端分離項目總結

快速建立Vue+Net6前後分離項目

項目建立完成後,正常情況下用VS打開直接F5即可運作。

WTM的代碼生成可以用來解決一些基礎資料管理功能,比如供應商基本資訊管理、預警規則配置、同步日志、預警接收人配置等增删改查,其它功能主要是定制化開發。

項目需求主要有三大子產品:

一、資料抽取與清洗

二、資料查詢與分析

三、資料預警與消息提醒

資料抽取和消息發送使用了WtmJob來處理,注意Wtm的Job需要放在Web層,我之前放在ViewModel層怎麼都跑不起來,看了源碼後才知道是從反射中擷取目前啟動目錄的程式集。

其它子產品我比較喜歡面向接口開發,基本都是一個接口(IXxxxxService、一個或多個實作,然後添加到IOC容器,在Controller中注入即可使用。

關于前後端的配置

appsettings.json

IsQuickDebug:是否為開發模式,在部署到生産時一定要關掉,否則影響權限管理

/ClientApp/.../config/index.ts是前端的配置檔案

development:預設為true,如果要在本地調試權限管理,必須關掉

開發過程中遇到的問題總結

問題1:Mac環境下F5運作報錯:

ERR_OSSL_EVP_UNSUPPORTED

Error: error:0308010C:digital envelope routines::unsupported

解決方法:修改package.json,添加 NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider,如下圖

WTM架構開發前後端分離項目總結

問題2:自定義接口方法名導緻前端請求報無權限通路

如下圖所示,HttpGet中我一開始是用的别名,前端調用接口用的也是别名,在開發模式下一切正常請求。釋出到生産後,在菜單編輯-》添加動作-》角色管理-》配置設定權限後産生的位址是以真實方法名為主,導緻我所有請求接口都是無權限通路。。。

解決辦法:修改所有Controller中的接口名稱,去掉Async字尾、HttpGet中使用[action]

WTM架構開發前後端分離項目總結

以上就是在使用WTM架構時遇到的問題及解決方法,經過2周的開發,系統順利開發完成并上線,來看下效果圖:

WTM架構開發前後端分離項目總結
WTM架構開發前後端分離項目總結

下鑽

WTM架構開發前後端分離項目總結

下鑽

WTM架構開發前後端分離項目總結

系統分四層進行資料展現:

第一層:資料總覽

第二層:按次元分析:類型、方式、部門、供應商等

第三層:項目清單

第四層:項目詳情

系統亮點與價值

1、實作了資料層層下鑽

2、實作供應商關系圖譜

3、每月發送采購分析報告給業務部門,提示采購風險

--------------

關于杭州易步數字科技:

使用最新、最穩定的技術,為客戶提供專業的軟體定制化開發和服務。

專注一件事,做好每件事!

WTM架構開發前後端分離項目總結

聯系我,擷取更多解決方案

繼續閱讀