当前位置: 首页> 房产> 建材 > 网站设计远程培训_画网页_廊坊seo整站优化_推推蛙网站诊断

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

时间:2025/7/9 7:54:14来源:https://blog.csdn.net/qq_42027681/article/details/147506183 浏览次数:0次
网站设计远程培训_画网页_廊坊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的创建,方便回滚,应用发布分,构建,发布两个步骤。工作流形式。

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: