网站设计远程培训_画网页_廊坊seo整站优化_推推蛙网站诊断

时间:2025/7/9 7:54:14来源：https://blog.csdn.net/qq_42027681/article/details/147506183 浏览次数:0次

记录搭建自己应用中心

应用架构
- 主应用-管理中心
- 系统文件系统
- 子应用
日志系统
- 日志系统前端
- 日志系统后端
用户系统
- 接入使用
- 暂未完成
研发管理
- 需求面板
- 消息推送
- 任务分配
- 应用发布

应用架构

一直想做个试试，这是一个简易版的，主要是整合下知识的，依赖包构建，微服务，微前端，等等。
目前是设计的这么多
在这里插入图片描述

主应用-管理中心

主应用实现应用的管理。新建，logo，名称等等。这里图片换了资源，没正常显示。创建应用后，会获取appId和登录令牌。作为其他插件/依赖包的使用。
在这里插入图片描述
目前只展示了用户，后面计划为，应用的分析，受欢迎页面分析，来源分析，版本信息，迭代周期，以及应用告警等等。

系统文件系统

文件系统使用的是minio ，调用minio的签署，获取带有时间的直传链接，前端直接上传。

子应用

所有的子应用由分支下的base分支基础上开发。base分支完成了，除具体业务以外的功能，如登录。所有子应用可单独登录，信息保持一致，因为统一id。

日志系统

日志系统通过编写依赖包的形式，实现应用快速接入。
目前的web依赖包为@dmhsq_monitor/web
后面可能会搞nodejs的

主要依赖下面三个包

在这里插入图片描述
分别是核心库，处理库，工具库。
使用rollup构建

处理库是上报前的数据的一些处理，如
在这里插入图片描述

核心库主要是处理上报，初始化监控，停止监控，消息队列处理，等等。

使用脚步快速的构建和发布

日志系统前端

构建一个微前端的子应用，处理当是微前端形式启动的时候，隐藏菜单栏和顶部栏目，显示的应用信息通过主应用的共享过去。

if (window.__POWERED_BY_WUJIE__) {let app: any;window.__WUJIE_MOUNT = () => {app = createApp(App);app.use(ElementPlus);app.use(pinia);app.use(router);app.mount("#app");const globalStore = useGlobalStore();globalStore.$reset();nextTick(() => {if (window.$wujie) {const { token, userInfo, nowApp, appList } = window.$wujie.props;// xxxx 处理主应用共享的数据}});};window.__WUJIE_UNMOUNT = () => {app.unmount();};window.__WUJIE.mount();
}`

在这里插入图片描述

在这里插入图片描述

查看上报的数据

  monitor.report({type: 'custom',name: 'userAction',data: { action: 'buttonClick', page: 'home' },});

在这里插入图片描述

日志系统后端

数据存在mongodb。由于需要任何地方都可以掉，所以对上报接口放通了跨域。
在这里插入图片描述

数据定义。

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { Document } from 'mongoose';export type AppLogDocument = AppLog & Document;@Schema()
export class AppLog {@Prop({ required: true })appId: string;@Prop({ default: Date.now })createdAt?: Date;@Prop({ default: Date.now })updatedAt?: Date;@Prop({ default: false })isRead?: boolean;@Prop({ required: true })type: string;@Prop({ required: true })name: string;@Prop({ required: true })day: string;@Prop({ required: true })timestamp: number;@Prop({ required: true })id: string;@Prop({ type: Object })data: any;@Prop({ type: Object })sdk: any;@Prop({ type: Object })device: any;@Prop({ required: true })ip: string;@Prop({ type: Object })browser;@Prop({ required: true })sessionId: string;
}export const AppLogSchema = SchemaFactory.createForClass(AppLog);AppLogSchema.index({ appId: 1, timestamp: 1, type: 1, day: 1, name: 1 });