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

应用架构

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

主应用-管理中心

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

用户系统

接入使用

快速的接入微信扫码登录。
使用依赖包，@dmhsq_app/vue

然后查询登录状态，做轮询。

扫码后会显示具体的应用的logo的名称，以及提示登录。

换个账号登录。用户的头像默认和应用头像一致。


这里的用户会新增。

暂未完成

后端服务已经完成了，注销，踢下线，暂时没想到别的管理，用户还是应该交由具体应用具体使用。后续用户管理的依赖包，会整合后端服务，比如修改用户信息，注销，踢人下线等等。

研发管理

需求面板

还没开始，主要是参考jira的设计，实现面板管理，拖动，消息推送。

消息推送

实现为调用应用设置的推送接口url。

任务分配

其实也是一个消息推送。

应用发布

结合面板，面板上线后，可选更新版本，大版本，迭代版本，补丁版本，来更新版本号。结合git来实现标签tag的创建，方便回滚，应用发布分，构建，发布两个步骤。工作流形式。