当前位置：首页 > wzjs >正文

公司做网站有什么好处信息流优化师职业规划

wzjs 2025/8/26 0:56:43

公司做网站有什么好处,信息流优化师职业规划,陕西建设机械官方网站,wordpress音乐插件mp3记录搭建自己应用中心应用架构主应用-管理中心系统文件系统子应用日志系统日志系统前端日志系统后端用户系统接入使用暂未完成研发管理需求面板消息推送任务分配应用发布应用架构一直想做个试试，这是一个简易版的，主要是整合下知识的，…

记录搭建自己应用中心

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

应用架构

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

主应用-管理中心

主应用实现应用的管理。新建，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 });