前端 终端 实战vue
撮合前端平台在低代码平台的落地实践
基于传统认知，前端产品直接触达消费者，往往具有高度的定制化、需求变更频繁等特点，要求具有很好的动态性, 能够满足不同客户的需求。那么能否建设类似的前端中台产品，我们姑且称之为“前端领域产品”，实现接入团队端到端能力复用呢？我们在撮合业务线中进行了一系列思考和探索。 ......
Prometheus监控实战系列十一：可视化
前面我们通过Prometheus获取到了node-exporter提供的主机监控指标，本文将学习如何将监控指标可视化。Prometheus自身提供了对于指标的查询以及简单的图表展示功能，但对于企业级的监控展示而言，这是远远不够的。对此，Promethes官方推荐的可视化方案是与grafana结合，来 ......
Prometheus监控实战系列十二：配置告警规则
在上篇的文章中，我们通过Grafana实现了监控可视化。而对于运维监控而言，除了监控展示以外，另一个重要的需求无疑就是告警了。良好的告警可以帮助运维人员及时的发现问题，处理问题并防范于未然，是运维工作中不可或缺的重要手段。 在Prometheus的架构中，告警功能由Prometheus Server ......
前端面试笔记
#css ###常见的水平居中实现方案 * flex布局方案 ```html ``` ```css .father{ width:100%; height:20%; background-color:red; display:flex; justify-content: center; align- ......
Prometheus监控运维实战十： 主机监控指标
在上一篇文章中我们学习了如何通过node-exporter获取主机监控信息。但安装好监控只是第一步，我们还需要知道哪些监控指标是我们需要关注的。 本文将对Prometheus相关的主机监控指标进行介绍。 一. CPU监控 CPU负载 node_load1node_load5node_load15 以 ......
Prometheus监控实战系列八：标签重写
标签重写（Relabeling)是Prometheus一个非常有用的功能，它可以在任务拉取(scraping)阶段前，修改target和它的labels。该功能在日常的监控中常常会使用到，值得我们好好了解。 一. 默认标签 默认情况下，Prometheus加载targets后，都会包含一些默认的标签 ......
Prometheus监控实战系列九：主机监控
前面我们介绍了Prometheus的基础概念，包括数据格式 、PromQL语法等，本节我们将讲解如何通过Prometheus实现主机的监控 。 Prometheus使用各种Exporter来监控资源。Exporter可以看成是监控的agent端，它负责收集对应资源的指标，并提供接口给到Prometh ......
Vue【原创】基于elementui的分组多选下拉框【group-list】
效果图： 如图分为多选模式和单选模式。 group-select： 1 <template> 2 <div> 3 <el-select 4 v-model="innerValue" 5 :placeholder="placeholder" 6 @change="changeSelect" 7 :cl ......
Prometheus监控实战系列七：任务与实例
一. 功能概述 任务与实例，是Prometheus监控中经常会提到的词汇。在其术语中，每一个提供样本数据的端点称为一个实例(instance），它可以是各种exporter，如node-exporter、mysql-exporter，也可以是你自己开发的一个服务。只要提供符合prometheus要求 ......
Prometheus监控实战系列六：PromQL语法(下篇）
一. 操作符 在PromQL的查询中，还可以通过表达式操作符，进行更加复杂的结果查询，常见的操作有下列几种。 数学运算符 数据运算符使用的加、减、乘、除等方式，对样本值进行计算，并返回计算后的结果。 例如，通过process_virtual_memory_bytes获取到的内存值单位为byte，我们 ......
Prometheus监控实战系列五：PromQL语法(上篇）
PromQL是Prometheus内置的数据查询DSL(Domain Specific Language)语言，其提供对时间序列丰富的查询功能，聚合以及逻辑运算能力的支持。当前，PromQL被广泛应用在Prometheus的日常使用中，包括数据查询、可视化、告警处理等，可以说，掌握PromQL是熟练 ......
Prometheus监控实战系列二： 安装部署
Prometheus支持多种操作系统，例如Linux、Windows和Max OSX等。在产品官网上提供了独立的二进制文件进行下载，可下载对应的tar包并在相应系统的服务器上进行安装部署。 当然，做为与容器有着紧密联系的监控系统，Promethesu也可以很方便的通过docker、kubernete ......
Prometheus监控实战系列三：配置介绍
Prometheus使用名为prometheus.yml的配置文件进行设置，通过在启动时指定相关的文件，对配置内容进行加载。 该配置文件分为四个模块：global(全局配置）、alerting（告警配置）、rule_files（规则配置）、scrape_configs（目标拉取配置），本文将分别对其 ......
Prometheus监控实战系列四：数据格式
在Prometheus监控中，对于采集到服务端的指标，称为metrics数据。metrics指标为时间序列数据，它们按相同的时序，以时间维度来存储连续数据的集合。 metrics有自定义的一套数据格式，不管对于日常运维管理或者监控开发来说，了解并对其熟练掌握都是非常必要的，本文将对此进行详细介绍。 ......
Prometheus监控实战系列一： 产品介绍
一. 概述 Promehteus是一款近年来非常火热的容器监控系统，它使用go语言开发，设计思路来源于Google的Borgmom(一个监控容器平台的系统）。 产品由前谷歌SRE Matt T.Proudd发起开发，并在其加入SoundCloud公司后，与另一位工程师Julius Volz合伙推出， ......
Vue【原创】时间轴 【time-axis】&【date-axis】
封装了关于时间轴的组件，有时候统计页面会用到。 效果图： 时间轴分为2种，一种是time-axis：范围选择模式，一种是date-axis：步长选择模式。 代码中涉及到的工具类和图片资源，请移步页面底部的gitee地址下载源码。 time-axis： 1 <template> 2 <div clas ......
值得收藏的前端开发必备工具类函数
/** * 空值： [undefined, null, NaN, [], {}], 注意非空：0, false; * @param {*} value * @returns Boolean */ function isEmpty(value) { switch (Object.prototype.t ......
前端token获取存储
// 存储的token的KEY export const TOKEN_KEY = 'token-user'; // 获取token 接口url export const TOKEN_URL = ''; // 跳转登录地址 export const LOGIN_URL = ''; // 获取 toke ......
Vue项目element-ui 添加动态校验
需求：一个表单中某个字段，根据另一个字段变化，校验是否必填 <el-form ref="detail" :model="detail" :rules="ruleData" size="small" label-width="100px"> <el-card> <el-row> <el-col :sp ......
前端编辑器
、 5年及以上前端开发工作经验； 2、 精通javascript、html5等前端技术； 3、 熟练ueditor、wangEditor、TinyMCE、kindeditor等编辑器中一种及以上的二次开发工作； 4、 对有ueditor二次开发经验者优先； 5、 能有积极主动的工作态度和团队合作精神 ......
vue3学习笔记1 - Vue2和 Vue3生命周期区别
1.vue2常用生命周期：创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数 创建后：Created() 是最早使用data和methods中数据的钩子函数 挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树 挂载后：Mounted() dom渲染完 ......
code-runner 在外部终端中执行代码并暂停它
修改配置文件settings.json "code-runner.executorMap": { "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt -finput-charset=UTF-8 -fexec-charset=GBK && sta ......
【Javascript】前端对文件进行md5计算再上传，以节省OSS云端存储空间
## 安装插件 browser-md5-file [browser-md5-file 用于计算文件md5](https://www.npmjs.com/package/browser-md5-file)，文档介绍较少，看看就能使用↓  => { 3 const newResform = { . ......
【个人杂谈】假如我是一个前端工程师，我该如何在日常的学习过程中使用费曼学习法？
## 什么是费曼学习法？ 费曼学习法是一种学习方法，它由诺贝尔物理学奖得主理查德·费曼（美籍犹太裔物理学家，加州理工学院物理学教授，1965年诺贝尔物理奖得主）提出。该方法的核心思想是**通过将所学的知识以简单明了的方式解释给别人**，来加深自己对知识的理解和掌握。 具体来说，费曼学习法包括以下几个 ......
【Vue】vue3 v-draggable 拖拽指令封装
## 说明 需求：实现一个拖拽指令，可在父元素区域任意拖拽元素，同时如果传入的值为 father，则拖拽的时候以父元素为拖拽对象 思路： 1、设置需要拖拽的元素为absolute，其父元素为relative。 2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。 3 ......
【Vue】vue3 中 如何将el-table的表格数据下载为.xlsx格式文件
## 安装依赖 首先，你需要安装 xlsx 和 file-saver 这两个库。 ```bash npm install xlsx file-saver --save ``` 有兴趣可以看看两个库的官方说明，直接看下面使用也没问题。 [xlsx 官方介绍](https://www.npmjs.com ......
Vue3 Refs模板
Refs模板用来获取页面DOM元素或者组件，类似于Vue2.X中的$refs。Refs模板的使用方法如下。 (1)在setup()中创建ref对象，其值为null。 (2)为元素添加ref属性，其值为步骤(1)中创建的ref对象名。 (3)完成页面渲染之后，获取DOM元素或者组件。 src\view ......
前端实现复制文字和图片，原来这么简单！
前端实现复制文字和图像并不困难。本文主要介绍了两大类复制相关API，一是document.execCommand()，二是clipboard 相关api。通过举例讲解了这些api的使用和功能的实现 ......
在vue项目中使用链判断、null判断运算符报错
链判断运算符的安装 在vue项目中使用es6新的[运算符]（例如链判断运算符，null判断运算符）会报错，编译不成功需要安装babel依赖,并添加到babel.config.js中。 1.安装依赖 //NULL判断运算符 ?? npm install @babel/plugin-proposal-n ......