其他分享
首页 > 其他分享> > Abp Vnext Vue3

Abp Vnext Vue3

作者：互联网

Abp Vnext Vue3 的版本实现

 

Abp Vnext Pro 的 Vue3 实现版本 开箱即用的中后台前端/设计解决方案

开始

系统功能

项目结构

后端

.
├── 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配置文件

运行项目前提

获取项目

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

OR

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

启动

配置说明

{
  // 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"
  }
}

{
  "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"
  }
}

  // 迁移数据库
  "ConnectionStrings": {
     "Default": "Data Source=localhost;Database=CompanyNameProjectNameDB;uid=root;pwd=1q2w3E*;charset=utf8mb4;Allow User Variables=true;AllowLoadLocalInfile=true"
  }

前端

// 一定要打Tags，因为前端会根据这个生成代理类
// 建议参数都封装为一个Input
[SwaggerOperation(summary: "登录", Tags = new[] {"Account"})]
public Task<LoginOutput> LoginAsync(LoginInput input)
{
    return _loginAppService.LoginAsync(input);
}

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

npm run nswag

健康检查

模块

用户管理

角色管理

设置管理

消息通知

/// <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);
}

/// <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("未知的消息类型");
    }
}

// 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 };
}

审计日志

ES 日志

  "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);
}

集成事件

  "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());
    }
}

身份认证中心

租户管理

Ocelot 网关(可选)

部署

Docker 方式

HttpApi.Host

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 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

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 build -t abp-vnext-pro-ui .

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

常见问题

VS 编译项目字符串超过 256 个字符

Hangfire 和 Cap 界面加载不出来

  分类: .NETCore, Abp Vnext

标签：Vnext,admin,ts,Abp,nginx,json,Vue3,message,localhost
来源： https://www.cnblogs.com/Leo_wl/p/15841643.html