Abp Vnext Vue3 的版本實現

WangJunZzz發表於2021-11-07

Abp Vnext Pro 的 Vue3 實現版本開箱即用的中後臺前端/設計解決方案

開始

系統功能

[x] 使用者管理
[x] 角色管理
[x] 審計日誌
[x] 後臺任務
[x] 整合事件
[x] IdentityServer4
- [x] 客戶端管理
- [x] Api 資源管理
- [x] ApiScope 管理
- [x] Identity 資源管理
[x] SinglaR 訊息通知
[x] 多語言
[x] FreeSql
[x] 資料字典(UI 暫時沒有)
[x] 容器化部署
[x] 單元測試
[x] ES 日誌
[x] Setting 管理
[x] 多租戶
[ ] 組織機構

專案結構

後端

.
├── Directory.Build.props nuget 版本控制
├── frameworks # 公共模組
│       ├── CAP # dotnetcore.cap
│       └── Extensions # 自定義擴充套件
├── gateways # 閘道器
├── modules # 模組
│       ├── DataDictionaryManagement # 資料字典
│       └── NotificationManagement # 通知服務
├── services # 公共靜態資源目錄
│       ├── host # 啟動模組
│           ├── CompanyName.ProjectName.HttpApi.Host # admin ui host
│           └── CompanyName.ProjectName.IdentityServer # IdentityServer host
│       ├── src  # 原始碼
│           └── CompanyName.ProjectName.DbMigrator # 遷移控制檯程式
│       └── test # 單元測試

前端

.
├── _nginx # docker 打包
├── build # 打包指令碼相關
│   ├── config # 配置檔案
│   ├── generate # 生成器
│   ├── script # 指令碼
│   └── vite # vite配置
├── mock # mock資料夾
├── public # 公共靜態資源目錄
├── src # 主目錄
│   ├── api # 介面檔案
│   ├── assets # 資原始檔
│   │   ├── icons # icon sprite 圖示資料夾
│   │   ├── images # 專案存放圖片的資料夾
│   │   └── svg # 專案存放svg圖片的資料夾
│   ├── components # 公共元件
│   ├── design # 樣式檔案
│   ├── directives # 指令
│   ├── enums # 列舉/常量
│   ├── hooks # hook
│   │   ├── component # 元件相關hook
│   │   ├── core # 基礎hook
│   │   ├── event # 事件相關hook
│   │   ├── setting # 配置相關hook
│   │   └── web # web相關hook
│   ├── layouts # 佈局檔案
│   │   ├── default # 預設佈局
│   │   ├── iframe # iframe佈局
│   │   └── page # 頁面佈局
│   ├── locales # 多語言
│   ├── logics # 邏輯
│   ├── main.ts # 主入口
│   ├── router # 路由配置
│   ├── services # Nswag生成的代理
│   │   ├── ServiceProxies.ts # Nswag生成的代理
│   │   ├── ServiceProxyBase.ts # Nswag生成的代理攔截器
│   ├── settings # 專案配置
│   │   ├── componentSetting.ts # 元件配置
│   │   ├── designSetting.ts # 樣式配置
│   │   ├── encryptionSetting.ts # 加密配置
│   │   ├── localeSetting.ts # 多語言配置
│   │   ├── projectSetting.ts # 專案配置
│   │   └── siteSetting.ts # 站點配置
│   ├── store # 資料倉儲
│   ├── utils # 工具類
│   └── views # 頁面
├── test # 測試
│   └── server # 測試用到的服務
│       ├── api # 測試伺服器
│       ├── upload # 測試上傳伺服器
│       └── websocket # 測試ws伺服器
├── types # 型別檔案
├── vite.config.ts # vite配置檔案
└── windi.config.ts # windcss配置檔案

執行專案前提

Mysql

docker run --name mymysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=1q2w3E* -d mysql:5.7 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci

Redis

docker run --name myredis -p 6379:6379 -d redis:latest redis-server

RabbitMq 非必須

appsetting.development.json-> CAP:Enabled 設定為 false

docker run -d --name myrabbitmq -e RABBITMQ_DEFAULT_USER=admin -e RABBITMQ_DEFAULT_PASS=admin -p 15672:15672 -p 5672:5672 rabbitmq:management

ELK 非必須
appsetting.development.json-> LogToElasticSearch:Enabled 設定為 false
安裝 Node.js, Npm Or Yarn

獲取專案

直接 clone 專案

git clone https://github.com/WangJunZzz/abp-vnext-pro.git

下載程式碼生成器

git clone https://github.com/WangJunZzz/abp-vnext-pro-gui.git

下載程式碼生成生成器之後，輸入自己想要的專案名稱生成程式碼即可

啟動

修改 HttpApi.Host-> appsettings.development.json 的資料庫連線字串，Redis, RabbitMq,Es 地址即可(如果沒有 es 也可以執行,只是前端 es 日誌頁面無法使用而已，不影響後端專案啟動)
修改 IdentityServer-> appsettings.development.json 資料庫連線字串
修改 DbMigrator-> appsettings.json 資料庫連線字串
執行 DbMigrator 生成資料庫
啟動 HttpApi.Host 和 IdentityServer
前端 yarn 之後，執行 npm run dev 啟動

配置說明

HttpApi.Host-> appsettings.development.json

{
  // Serilog 日誌配置，生成環境修改日誌級別
  "Serilog": {
    "MinimumLevel": {
      "Default": "Information",
      "Override": {
        "Microsoft": "Information",
        "Volo.Abp": "Information",
        "Hangfire": "Information",
        "DotNetCore.CAP": "Information",
        "Serilog.AspNetCore": "Information"
      }
    }
  },
  // 跨域設定
  "App": {
    "CorsOrigins": "https://*.ProjectName.com,http://localhost:4200,http://localhost:3100"
  },
  // 資料庫連線字串，修改為你本地的mysql地址
  "ConnectionStrings": {
    "Default": "Data Source=localhost;Database=CompanyNameProjectNameDB;uid=root;pwd=1q2w3E*;charset=utf8mb4;Allow User Variables=true;AllowLoadLocalInfile=true"
  },
  // Redis快取
  "Cache": {
    "Redis": {
      "ConnectionString": "localhost",
      "Password": "mypassword",
      "DatabaseId": 0
    }
  },
  // Jwt配置
  "Jwt": {
    "Audience": "CompanyNameProjectName",
    //客戶端標識
    "SecurityKey": "dzehzRz9a8asdfasfdadfasdfasdfafsdadfasbasdf=",
    "Issuer": "CompanyNameProjectName",
    //簽發者
    "ExpirationTime": 24
    //過期時間 hour
  },
  // 使用了Dotnetcore.cap的rabbitmq,false的情況基於記憶體
  "Cap": {
    "Enabled": "false",
    "RabbitMq": {
      "HostName": "localhost",
      "UserName": "admin",
      "Password": "admin"
    }
  },
  // es日誌地址配置
  "LogToElasticSearch": {
    "Enabled": "true",
    "ElasticSearch": {
      "Url": "http://es.cn",
      "IndexFormat": "companyname.projectname.development",
      "UserName": "elastic",
      "Password": "aVVhjQ95RP7nbwNy",
      "DashboardIndex": "companyname.projectname"
    }
  },
  // identityserver地址
  "HttpClient": {
    "Sts": {
      "Url": "http://localhost:44354"
    }
  },
  // Consul 服務發現和治理
  "Consul": {
    "Enabled": false,
    "Host": "http://localhost:8500",
    "Service": "Project-Service"
  }
}

IdentityServer-> appsettings.development.json

{
  "App": {
    "SelfUrl": "https://localhost:44354",
    "ClientUrl": "http://localhost:4200",
    "CorsOrigins": "https://*.ProjectName.com,http://localhost:4200,https://localhost:44307,https://localhost:44315",
    "RedirectAllowedUrls": "http://localhost:4200,https://localhost:44307"
  },
  // mysql連線字串
  "ConnectionStrings": {
    "Default": "Data Source=localhost;Database=CompanyNameProjectNameDB;uid=root;pwd=1q2w3E*;charset=utf8mb4;Allow User Variables=true;AllowLoadLocalInfile=true"
  },
  // Redis
  "Redis": {
    "Configuration": "localhost,password=mypassword"
  }
}

DbMigrator-> appsettings.json

  // 遷移資料庫
  "ConnectionStrings": {
     "Default": "Data Source=localhost;Database=CompanyNameProjectNameDB;uid=root;pwd=1q2w3E*;charset=utf8mb4;Allow User Variables=true;AllowLoadLocalInfile=true"
  }

前端

前端採用 TypeScript,所有的型別動態生成 NSwag
後端 api 統一使用 Post
定義 api 格式

// 一定要打Tags，因為前端會根據這個生成代理類
// 建議引數都封裝為一個Input
[SwaggerOperation(summary: "登入", Tags = new[] {"Account"})]
public Task<LoginOutput> LoginAsync(LoginInput input)
{
    return _loginAppService.LoginAsync(input);
}

在前端目錄下配置代理的地址
- nswag->nswag.json

  "documentGenerator": {
    "fromDocument": {
      "url": "http://localhost:44315/swagger/v1/swagger.json", // 代理地址，只有生成的時候用，不區分環境
    }
  }

如果介面引數或者返回值有改變，需要重新生成代理，執行:

npm run nswag

前端多環境，.env.development 和.env.production
- 介面地址配置 VITE_API_URL
- IdentityServer 地址配置 VITE_AUTH_URL
許可權配置
選單許可權
- src/router/routes
  
  policy 欄位匹配後端的許可權名稱
- 按鈕許可權
  
  v-auth="'AbpIdentity.Users.Delete'"

健康檢查

模組

使用者管理

提供原始登入和第三方登入(IdentityServer4),預設使用者名稱密碼：admin 1q2w3*

角色管理

許可權定義(Application.Contracts 層)
Abp 會自動掃描繼承 PermissionDefinitionProvider
文件 Abp 官方
在 Http.Api 的 Controller 打上 Authorize

設定管理

整合Abp.SettingUi

訊息通知

訊息型別，傳送給指定人和廣播訊息
傳送訊息到前端，通過整合事件和 RabbitMq
注入 NotificationManager 傳送訊息，

/// <summary>
/// 傳送普通文字訊息
/// </summary>
/// <returns></returns>
/// <exception cref="NotificationManagementDomainException"></exception>
public async Task<Notification> SendCommonTextAsync(string title, string content, List<Guid> receiveIds)
{
    if (receiveIds is {Count: 0})
    {
        throw new NotificationManagementDomainException("訊息接收人不能為空");

    var senderId = Guid.Empty;
    if (_currentUser?.Id != null)
    {
        senderId = _currentUser.Id.Value;

    var entity = new Notification(GuidGenerator.Create(), title, content, MessageType.Text, senderId);
    foreach (var item in receiveIds)
    {
        entity.AddNotificationSubscription(GuidGenerator.Create(), item);

    var notificationEto = ObjectMapper.Map<Notification, NotificationEto>(entity);
    // 傳送整合事件
    entity.AddCreatedNotificationDistributedEvent(new CreatedNotificationDistributedEvent(notificationEto));
    return entity = await _notificationRepository.InsertAsync(entity);
}

Handler 當前事件:NotificationCreatedDistributedEventHandler

/// <summary>
/// 傳送訊息
/// </summary>
public async Task SendMessageAsync(string title, string content, MessageType messageType, List<string> users)
{
    switch (messageType)
    {
        case MessageType.Text:
            await SendMessageToClientByUserIdAsync(new SendNotificationDto(title, content, messageType), users);
            break;
        case MessageType.BroadCast:
            await SendMessageToAllClientAsync(new SendNotificationDto(title, content, messageType));
            break;
        default:
            throw new UserFriendlyException("未知的訊息型別");
    }
}

前端接受 SignalR 訊息

// src/hooks/web/useSignalR.js
import * as signalR from "@microsoft/signalr";
import { useMessage } from "/@/hooks/web/useMessage";
import { useUserStoreWithOut } from "/@/store/modules/user";
export function useSignalR() {
  /**
   * 開始連線SignalR
   */
  function startConnect(): void {
    let connection = connectionsignalR();
    //接收普通文字訊息
    connection.on("ReceiveTextMessageAsync", ReceiveTextMessageHandlerAsync);
    //接收廣播訊息
    connection.on("ReceiveBroadCastMessageAsync", ReceiveBroadCastMessageHandlerAsync);
    //開始連線
    connection.start();
  }

  /**
   * 連線signalr
   */
  function connectionsignalR(): signalR.HubConnection {
    const userStore = useUserStoreWithOut();
    const token = userStore.getToken;

    const url = (import.meta.env.VITE_WEBSOCKE_URL as string) + "/ws/signalr/notification";
    const connection = new signalR.HubConnectionBuilder()
      .withUrl(url, {
        accessTokenFactory: () => token,
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets,
      })
      .withAutomaticReconnect({
        nextRetryDelayInMilliseconds: (retryContext) => {
          //重連規則：重連次數<300：間隔1s;重試次數<3000:間隔3s;重試次數>3000:間隔30s
          let count = retryContext.previousRetryCount / 300;
          if (count < 1) {
            //重試次數<300,間隔1s
            return 1000;
          } else if (count < 10) {
            //重試次數>300:間隔5s
            return 1000 * 5;
          } //重試次數>3000:間隔30s
          else {
            return 1000 * 30;
          }
        },
      })
      .configureLogging(signalR.LogLevel.Debug)
      .build();
    return connection;
  }

  /**
   * 接收文字訊息
   * @param message 訊息體
   */
  function ReceiveTextMessageHandlerAsync(message: any) {
    console.log(message);

    const { notification } = useMessage();

    notification.open({
      message: message.title,
      description: message.content,
    });
  }

  /**
   * 接收廣播訊息
   * @param message 訊息體
   */
  function ReceiveBroadCastMessageHandlerAsync(message: any) {
    const { notification } = useMessage();

    notification.open({
      message: message.title,
      description: message.content,
    });
  }

  return { startConnect };
}

審計日誌

參考 Abp 官方文件即可

ES 日誌

在 appsetting.development.json 設定是否開啟

  "LogToElasticSearch": {
    "Enabled": "false", // 如果為fasel,日誌也會寫入到本地，安裝ELK,參考上面的docker-compose
    "ElasticSearch": {
      "Url": "http://es.cn",
      "IndexFormat": "companyname.projectname.development",
      "UserName": "elastic",
      "Password": "aVVhjQ95RP7nbwNy",
      "DashboardIndex": "companyname.projectname"
    }
  },

後臺任務

定時任務

public override void OnPostApplicationInitialization(ApplicationInitializationContext context)
{
    context.CreateRecurringJob();
    base.OnPostApplicationInitialization(context);
}

延遲任務: 官方文件

整合事件

整合 dotnetcore.CAP
在 appsetting.development.json 設定是否開啟

  "Cap": {
    "Enabled": "false", //如果為false 預設使用記憶體級別的佇列，否則請安裝rabbitmq
    "RabbitMq": {
      "HostName": "localhost",
      "UserName": "admin",
      "Password": "admin"
    }
  },

private void ConfigurationCap(ServiceConfigurationContext context)
{
    var configuration = context.Services.GetConfiguration();
    var enabled = configuration.GetValue<bool>("Cap:Enabled", false);
    if (enabled)
    {
        context.AddAbpCap(capOptions =>
        {
            capOptions.UseEntityFramework<ProjectNameDbContext>();
            capOptions.UseRabbitMQ(option =>
            {
                option.HostName = configuration.GetValue<string>("Cap:RabbitMq:HostName");
                option.UserName = configuration.GetValue<string>("Cap:RabbitMq:UserName");
                option.Password = configuration.GetValue<string>("Cap:RabbitMq:Password");
            });
            var hostingEnvironment = context.Services.GetHostingEnvironment();
            bool auth = !hostingEnvironment.IsDevelopment();
            capOptions.UseDashboard(options => { options.UseAuth = auth; });
        });
    }
    else
    {
        context.AddAbpCap(capOptions =>
        {
            capOptions.UseInMemoryStorage();
            capOptions.UseInMemoryMessageQueue();
            var hostingEnvironment = context.Services.GetHostingEnvironment();
            bool auth = !hostingEnvironment.IsDevelopment();
            capOptions.UseDashboard(options => { options.UseAuth = auth; });
        });
    }
}

釋出事件
- 可參考通知模組

// 傳送整合事件
entity.AddCreatedNotificationDistributedEvent(new CreatedNotificationDistributedEvent(notificationEto));

訂閱事件
- 可參考通知模組

/// <summary>
/// 建立訊息事件處理
/// </summary>
public class
    CreatedNotificationDistributedEventHandler : IDistributedEventHandler<CreatedNotificationDistributedEvent>,
        ITransientDependency
{
    private readonly INotificationAppService _hubAppService;
    public CreatedNotificationDistributedEventHandler(INotificationAppService hubAppService)
    {
        _hubAppService = hubAppService;
    }
    public Task HandleEventAsync(CreatedNotificationDistributedEvent eventData)
    {
        return _hubAppService.SendMessageAsync(
            eventData.NotificationEto.Title,
            eventData.NotificationEto.Content,
            eventData.NotificationEto.MessageType,
            eventData.NotificationEto.NotificationSubscriptions.Select(e => e.ReceiveId.ToString()).ToList());
    }
}

身份認證中心

IdentityServer4
可重寫登入介面 UI

租戶管理

提供租戶登入和 IdentityServer4 租戶登入方式

Ocelot 閘道器(可選)

整合 Ocelot 和 Consul

部署

Docker 方式

HttpApi.Host

釋出 HttpApi.Host 到和 Dockerfile 同級目錄
```
-- publish
-- Dockerfile
```
Dockerfile

FROM mcr.microsoft.com/dotnet/aspnet:5.0

# 建立目錄
RUN mkdir /app

COPY publish /app

# 設定工作目錄
WORKDIR /app

# 暴露80埠
EXPOSE 80

# 設定環境變數
ENV ASPNETCORE_ENVIRONMENT=Production

ENTRYPOINT ["dotnet", "CompanyName.ProjectName.HttpApi.Host.dll"]

生成 Docker 映象

docker build -t abp-vnext-pro-admin .

執行容器

docker run -itd --name abp-vnext-pro-admin -p 8011:80 abp-vnext-pro-admin

IdentityServer.Host

步驟同上

前端

打包

npm run build

Dockerfile

FROM nginx:1.17.3-alpine as base
EXPOSE 80
COPY /_nginx/nginx.conf /etc/nginx/nginx.conf
COPY /_nginx/env.js /etc/nginx/env.js
COPY /_nginx/default.conf /etc/nginx/conf.d/default.conf
COPY /dist/ /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

生成 Docker 映象

docker build -t abp-vnext-pro-ui .

執行容器

docker run -itd --name abp-vnext-pro-ui -p 8012:80 abp-vnext-pro-ui

常見問題

VS 編譯專案字串超過 256 個字元

把專案拷貝到磁碟根目錄 OR 使用 Rider 開發

Hangfire 和 Cap 介面載入不出來

這 2 個介面開啟了許可權認證，由於前端路由的非同步載入，導致路由在渲染的時候 access_token 沒有載入出來，Ctrl+F5 重新整理即可

初識ABP vNext（6）：vue+ABP實現國際化
2020-08-26
Vue
ABP vnext模組化架構的最佳實踐的實現
2020-10-13
架構
初識ABP vNext（5）：ABP擴充套件實體
2020-08-21
套件
ABP vNext 實現租戶Id自動賦值插入
2021-01-23
賦值
OData WebAPI實踐-與ABP vNext整合
2023-05-16
WebAPI
初識ABP vNext（8）：ABP特徵管理
2020-09-04
特徵
初識ABP vNext（10）：ABP設定管理
2020-09-17
Abp vNext 依賴注入
2023-09-26
依賴注入
Abp vnext EFCore 實現動態上下文DbSet踩坑記
2022-01-17
如何實現資料庫資料到Abp vnext實體物件的同步？以及程式碼生成工具
2024-04-18
資料庫物件
初識ABP vNext（3）：vue對接ABP基本思路
2020-08-17
Vue
淺談Abp vNext的模組化設計
2020-12-02
ABP VNext學習日記8
2020-12-18
ABP VNext學習日記7
2020-12-18
Abp vNext 模組載入機制
2023-09-25
原始碼解析-Abp vNext丨LocalEventBus
2021-10-22
原始碼
初識ABP vNext（9）：ABP模組化開發-檔案管理
2020-09-14
Abp vNext異常處理的缺陷/改造方案
2020-12-23
ABP VNext實踐之搭建可用於生產的IdentityServer4
2020-09-02
IDEServer
自動註冊實體類到EntityFramework Core上下文，並適配ABP及ABP VNext
2022-11-25
Framework
十一、Abp vNext 基礎篇丨測試
2021-10-09
ABP vNext 審計日誌獲取真實客戶端IP
2021-01-11
客戶端
學習abp vnext框架到精簡到我的Vop框架
2020-12-04
框架
[Abp vNext 原始碼分析] - 4. 工作單元
2019-07-01
原始碼
十、Abp vNext 基礎篇丨許可權
2021-09-23
Abp vNext 基礎篇丨分層架構
2021-08-19
架構
Abp vNext 基礎篇丨領域構建
2021-08-23
ABP VNext從單體切換到微服務
2020-09-26
微服務
[Abp vNext 原始碼分析] - 18. 單元測試
2021-04-27
原始碼
九、Abp vNext 基礎篇丨評論聚合功能
2021-09-18
八、Abp vNext 基礎篇丨標籤聚合功能
2021-09-13
七、Abp vNext 基礎篇丨文章聚合功能下
2021-09-06
五、Abp vNext 基礎篇丨部落格聚合功能
2021-08-27
初識ABP vNext（12）：模組的獨立執行與託管
2020-10-30
[Abp vNext 原始碼分析] - 21. 介面與文字的本地化
2020-09-25
原始碼
基於 abp vNext 和 .NET Core 開發部落格專案 - 使用 abp cli 搭建專案
2020-05-15
[Abp vNext 入坑分享] - 6.完整接入swagger
2020-05-18
Swagger
六、Abp vNext 基礎篇丨文章聚合功能上
2021-09-01

Abp Vnext Vue3 的版本實現

開始

系統功能

專案結構

後端

前端

執行專案前提

獲取專案

啟動

配置說明

前端

健康檢查

模組

使用者管理

角色管理

設定管理

訊息通知

審計日誌

ES 日誌

後臺任務

整合事件

身份認證中心

租戶管理

Ocelot 閘道器(可選)

部署

Docker 方式

HttpApi.Host

IdentityServer.Host

前端

常見問題

VS 編譯專案字串超過 256 個字元

Hangfire 和 Cap 介面載入不出來

相關文章