开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

MDC-Web:如何设置MDC-Web Vanilla

MDC-Web是一个用于构建现代化Web应用程序的开源材料设计组件库。它提供了一套丰富的可重用UI组件和交互模式，帮助开发人员快速构建具有一致外观和交互体验的Web应用程序。

要设置MDC-Web Vanilla，您需要按照以下步骤进行操作：

下载MDC-Web：您可以从MDC-Web的官方GitHub仓库（https://github.com/material-components/material-components-web）中下载最新版本的MDC-Web。
引入MDC-Web库：将下载的MDC-Web文件解压缩，并将其中的CSS和JavaScript文件引入到您的项目中。您可以通过将以下代码添加到您的HTML文件中来引入MDC-Web的CSS和JavaScript文件：

<link rel="stylesheet" href="path/to/mdc-web.min.css">
<script src="path/to/mdc-web.min.js"></script>

请确保将path/to/替换为您实际存储MDC-Web文件的路径。

初始化MDC-Web组件：在您的JavaScript代码中，您需要初始化您想要使用的MDC-Web组件。例如，如果您想要使用MDC-Web的按钮组件，您可以按照以下方式初始化它：

const button = new mdc.button.MDCButton(document.querySelector('.mdc-button'));

请注意，上述代码假设您的HTML中有一个类名为mdc-button的按钮元素。

样式和交互：MDC-Web提供了一套丰富的CSS类和JavaScript API，用于自定义和控制组件的样式和交互。您可以根据需要使用这些类和API来定制您的应用程序。

MDC-Web Vanilla的设置过程就是这样的。通过按照上述步骤，您可以成功地集成MDC-Web组件库到您的Web应用程序中，并开始使用其中的各种组件来构建现代化的用户界面。

腾讯云并没有直接提供与MDC-Web相关的产品或服务。然而，作为一个云计算提供商，腾讯云提供了一系列与Web应用程序开发和部署相关的产品和服务，例如云服务器、云数据库、云存储等。您可以访问腾讯云的官方网站（https://cloud.tencent.com/）了解更多关于这些产品和服务的信息。

相关搜索:MDC-Web:如何切换模式抽屉？MDC-Web:多个简单菜单如何使用MDC-Web方法(例如MDCIconButtonToggle)MDC-Web排版:字体自定义 MDC-Web:复选框的主题颜色 MDC-web如何构建单独的css文件pr组件如何使用vanilla javascript进行拖放？使用Vanilla javascript将元素高度设置为等于宽度如何使用vanilla JS创建引导进度条，如果不是vanilla，则使用如何使用vanilla javascript自动更新？如何使用Vanilla Js循环遍历carousel项如何在react加载后运行vanilla javascript？如何使用Vanilla Javascript检索多个JSON文件如何使用vanilla javascript获取滚动启动事件如何在Vanilla JavaScript中隐藏Firebase API？如何使用Vanilla JS选择直接子元素如何删除所有的div？使用Vanilla JS 如何在vanilla js中创建ApolloClient订阅如何根据Vanilla Javascript中的菜单控制列？如何使用vanilla js返回节点列表的索引？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Spring Boot - 利用MDC（Mapped Diagnostic Context）实现轻量级同步/异步日志追踪

每日一博 - ThreadLocal VS InheritableThreadLocal VS TransmittableThreadLocal

00

logback自定义日志格式

然后在logback.xml配置文件中，定义自定义标签define name代表标签，class指向处理的类。在初始化时调用getPropertyValue()

02

操作日志追踪记录之MDC入门

MDC（Mapped Diagnostic Context，映射调试上下文）是 log4j 和 logback 提供的一种方便在多线程条件下记录日志的功能。某些应用程序采用多线程的方式来处理多个用户的请求。在一个用户的使用过程中，可能有多个不同的线程来进行处理。典型的例子是 Web 应用服务器。当用户访问某个页面时，应用服务器可能会创建一个新的线程来处理该请求，也可能从线程池中复用已有的线程。在一个用户的会话存续期间，可能有多个线程处理过该用户的请求。这使得比较难以区分不同用户所对应的日志。当需要追踪某个用户在系统中的相关日志记录时，就会变得很麻烦。

03

基于Spring Boot + Dubbo的全链路日志追踪(二)

本例直接使用【阿里云·日志服务】进行数据存储和检索，使用Aliyun Log Logback Appender进行日志收集及上传。

02

SpringOne2023峰会总结-02-SpringBoot与Micrometer如何在WebFlux环境下实现的链路日志

我们可以在日志中加入链路信息，这样我们可以找到某个请求，某个事务所有的日志，这样就可以方便的进行问题排查。并且，我们还可以通过 traceId 找到不同微服务调用链路相关的日志。在 Spring Boot 3.x 之前，我们一般用 spring-cloud-sleuth 去实现，但是在 Spring Boot 3.x 之后，已经去掉了对于 sleuth 的原生支持，全面改用了 micrometer。

00

Java应用日志如何与Jaeger的trace关联

本篇概览经过《Jaeger开发入门(java版)》的实战，相信您已经能将自己的应用接入Jaeger，并用来跟踪定位问题了，本文将介绍Jaeger一个小巧而强大的辅助功能，用少量改动大幅度提升定位问题的便利性：将业务日志与Jaeger的trace关联在正式开始前，咱们先来看一个具体的问题：一次web请求可能有多条业务日志(log4j或者logback配置的那种)，这和您写代码执行log.info的次数有关，假设有10条，那么十次请求就有一百条业务日志；通过jaeger发现这十次请求中有一次耗时特别长，

03

微服务的日志规范及链路追踪

日志作为码农的铁杆儿基友,伴随着码农的一生, 特别是在生死关头 , 能拯救码农于水火 ;但是混乱的日志 , 有时候不仅不能协助解决问题 , 反而还会在那种紧张的氛围下让人变的更焦躁 , 毕竟涉及到看日志的时候 , 多半就是出现bug或者出现异常的情况 , 在一个火烧脚背的环境下 , 不能快速找到我们想要的日志 , 那么解决问题的效率将大大下降 ;

03

实战！SpringBoot+MDC实现全链路调用日志跟踪~

前面有一篇文章简单的介绍过MDC，这次结合具体的案例、生产中的具体问题深入了解一下MDC。

03

聊聊reactor异步线程的变量传递

在传统的请求/应答同步模式中，使用threadlocal来传递上下文变量是非常方便的，可以省得在每个方法参数添加公用的变量，比如当前登录用户。但是业务方法可能使用了async或者在其他线程池中异步执行，这个时候threadlocal的作用就失效了。

02

基于SpringBoot实现让日志像诗一样有韵律（日志追踪）

在传统系统中，如果能够提供日志输出，基本上已经能够满足需求的。但一旦将系统拆分成两套及以上的系统，再加上负载均衡等，调用链路就变得复杂起来。

03

Java日志Log4j或者Logback的NDC和MDC功能

Java中使用的日志的实现框架有很多种，常用的log4j和logback以及java.util.logging，而log4j是apache实现的一个开源日志组件（Wrapped implementations），logback是slf4j的原生实现（Native implementations）。需要说明的slf4j是Java简单日志的门面(The Simple Logging Facade for Java)，如果使用slf4j日志门面，必须要用到slf4j-api，而logback是直接实现的，所以不需要其他额外的转换以及转换带来的消耗，而slf4j要调用log4j的实现，就需要一个适配层，将log4j的实现适配到slf4j-api可调用的模式。

02

Spring Boot 之 MDC 实现全链路调用日志跟踪

MDC（Mapped Diagnostic Context，映射调试上下文）是 log4j 、logback及log4j2 提供的一种方便在多线程条件下记录日志的功能。MDC 可以看成是一个与当前线程绑定的哈希表，可以往其中添加键值对。MDC 中包含的内容可以被同一线程中执行的代码所访问。当前线程的子线程会继承其父线程中的 MDC 的内容。当需要记录日志时，只需要从 MDC 中获取所需的信息即可。MDC 的内容则由程序在适当的时候保存进去。对于一个 Web 应用来说，通常是在请求被处理的最开始保存这些数据

02

Spring Boot 实现日志链路追踪，无需引入组件，让日志定位更方便！

有时候一个业务调用链场景，很长，调了各种各样的方法，看日志的时候，各个接口的日志穿插，确实让人头大。

03

SpringBoot如何实现全链路调用日志跟踪

MDC（Mapped Diagnostic Context，映射调试上下文）是 log4j 、logback及log4j2 提供的一种方便在多线程条件下记录日志的功能。MDC 可以看成是一个与当前线程绑定的哈希表，可以往其中添加键值对。MDC 中包含的内容可以被同一线程中执行的代码所访问。当前线程的子线程会继承其父线程中的 MDC 的内容。当需要记录日志时，只需要从 MDC 中获取所需的信息即可。MDC 的内容则由程序在适当的时候保存进去。对于一个 Web 应用来说，通常是在请求被处理的最开始保存这些数据

01

AngularDart Material Design 卡片顶

材料卡是由Google材料团队（也称为mdc-web）提供的卡片样式。这是一个允许在AngularDart应用程序中使用样式的包装器。有关如何使用这些样式的文档，请参阅mdc文档。可以在这里找到示例。

04

手动实现 Spring Boot 日志链路追踪，无需引入组件，日志定位更方便！

有时候一个业务调用链场景，很长，调了各种各样的方法，看日志的时候，各个接口的日志穿插，确实让人头大。

02

log4j统一记录短信操作日志（入库）

MDC（Mapped Diagnostic Context，映射调试上下文）是 log4j 和 logback 提供的一种方便在多线程条件下记录日志的功能。某些应用程序采用多线程的方式来处理多个用户的请求。在一个用户的使用过程中，可能有多个不同的线程来进行处理。典型的例子是 Web 应用服务器。当用户访问某个页面时，应用服务器可能会创建一个新的线程来处理该请求，也可能从线程池中复用已有的线程。在一个用户的会话存续期间，可能有多个线程处理过该用户的请求。这使得比较难以区分不同用户所对应的日志。当需要追踪某个用户在系统中的相关日志记录时，就会变得很麻烦。 MDC 可以看成是一个与当前线程绑定的哈希表，可以往其中添加键值对。MDC 中包含的内容可以被同一线程中执行的代码所访问。当前线程的子线程会继承其父线程中的 MDC 的内容。当需要记录日志时，只需要从 MDC 中获取所需的信息即可。MDC 的内容则由程序在适当的时候保存进去。对于一个 Web 应用来说，通常是在请求被处理的最开始保存这些数据。

01

跟我学Springboot开发后端管理系统8：AOP+logback+MDC日志输出

在比较复杂的应用中，一个请求需要走很多个方法的处理，怎么样才能快速查找一个请求的全部日志呢。在分布式系统中，我们可以用链路追踪，比如zipkin、skywalking去快速查找日志，从而定位问题。在比较复杂的单体管理系统中，我们可以使用slf4j的MDC去实现类似的功能。

01

Spring Boot + MDC 实现全链路调用日志跟踪

写在前面通过本文将了解到什么是MDC、MDC应用中存在的问题、如何解决存在的问题 MDC介绍简介： MDC（Mapped Diagnostic Context，映射调试上下文）是 log4j 、logback及log4j2 提供的一种方便在多线程条件下记录日志的功能。MDC 可以看成是一个与当前线程绑定的哈希表，可以往其中添加键值对。MDC 中包含的内容可以被同一线程中执行的代码所访问。当前线程的子线程会继承其父线程中的 MDC 的内容。当需要记录日志时，只需要从 MDC 中获取所需的信息即可。MDC

02

Consul 集群7

recurse 参数是递归返回所有KV的意思，如果要单独返回指定值可以使用指定key的方式

01

MDC是什么鬼？用法、源码一锅端

近期用到阿里的一款开源的数据同步工具 Canal，不经意之中看到了 MDC 的用法，而且平时项目中也多次用到 MDC，趁机科普一把。

04

SpringBoot + MDC 实现全链路调用日志跟踪

MDC（Mapped Diagnostic Context，映射调试上下文）是 log4j 、logback及log4j2 提供的一种方便在多线程条件下记录日志的功能。MDC 可以看成是一个与当前线程绑定的哈希表，可以往其中添加键值对。MDC 中包含的内容可以被同一线程中执行的代码所访问。当前线程的子线程会继承其父线程中的 MDC 的内容。当需要记录日志时，只需要从 MDC 中获取所需的信息即可。MDC 的内容则由程序在适当的时候保存进去。对于一个 Web 应用来说，通常是在请求被处理的最开始保存这些数据。

05

基于SpringBoot的WEB API项目的安全设计

SpringBoot的开箱即用功能，大大降低了上手一个WEB应用的门槛，友好的REST接口支持，在SpringCloud微服务体系中可编程性大大提高，本篇基于一个面向企业调用方用户的WEB API项目，基于SpringBoot来构建，简单看下接口的安全性模块设计。

03

我不是最后一个知道MDC的吧？

世上知识千千万，还好有我来相伴。大家好久不见，我是walking。今天给大家带来一个日志方面的知识——MDC，不知道大家认识不，反正我是最近刚知道的? 初见MDC 前两天看项目中的代码，无意中看到一

02

手动实现 Spring Boot 日志链路追踪，无需引入组件，日志定位更方便！

有时候一个业务调用链场景，很长，调了各种各样的方法，看日志的时候，各个接口的日志穿插，确实让人头大。

01

日志排查问题困难？分布式日志链路跟踪来帮你

开发排查系统问题用得最多的手段就是查看系统日志，在分布式环境中一般使用ELK来统一收集日志，但是在并发大时使用日志定位问题还是比较麻烦，由于大量的其他用户/其他线程的日志也一起输出穿行其中导致很难筛选出指定请求的全部相关日志，以及下游线程/服务对应的日志。

02

Slf4j+Logback配置文件变量使用小记

项目中须要根据不同的模块，产生出不同的日志文件名，使用的是同一logback.xml配置文件，这里简单调研，说明两种实现方式，以及两种实现方式的区别。测试准备建立一个maven项目，并添加slf4j-api, logback-core, logback-classic 依赖。 <dependencies> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api<

08

从头分析一则traceId穿透问题(附解决方案)

现在常用的开源组件有google的Dapper,Twitter的zipkin和Apache SkyWalking等，商用的比较有代表性的是阿里的Eagleeye(鹰眼)。它们的工作模式不外乎是客户端在同一个trace的不同span上采点上传到server端然后server端进行存储后以web界面的形式将整个链路以traceId和spanId进行关联起来就形成了整个调用链路。用于串起整个链路的id主要分为traceId和spanId。

02

SpringBoot项目traceId生成_日志打印

查看服务日志时，当服务被调过于频繁，日志刷新太快，会影响到联调、测试、线上问题的排查效率，能不能为每一个请求的日志打一个唯一标识呢？后面使用该表示去匹配，直接检索出该请求的日志？引入本文的正题，“traceId”。

03

Zipkin客户端链路追踪源码解析

在spring-cloud-sleuth的spring.factories文件中注入的很多类中包含了一个类：TraceWebServletAutoConfiguration，一看就知道，这是为Servlet环境量身定制的一个自动装配类

02

走进Java接口测试之AOP统一日志记录

上一文走进Java接口测试之日志框架Logback中，介绍了目前接口测试框架中常见的 logback 日志框架的整合知识。在很多时候，我们在开发一个测试框架时，不管出于何种考虑，比如是审计要求，还是调试的角度，一般都会有个全局记录日志的模块功能。此模块一般上会记录每个对数据有进行变更的操作记录，若是在web测试平台上，还会记录请求的url,请求的IP,及当前的操作人，操作的方法说明等等。在很多时候，我们需要记录请求的参数信息时，通常是利用拦截器、过滤器或者 AOP 等来进行统一拦截。

02

聊聊Lustre客户端参数调优

lustre集群环境角色节点版本磁盘 MGS/MDS 10.211.55.16 lustre 2.15 /dev/sdb OSS 10.211.55.17 lustre 2.15 /dev/sdb /dev/sdc Client 10.211.55.18 lustre 2.15 nil 核心参数说明 checksum_pages解说参数说明:为了保护数据在网络中的传输，客户端内置两种数据校验的策略，一种是客户端内存中；另外一种是数据在网络传输中。每一种数据校验类型客户端服务端都会进行计

02

在Java项目中使用traceId跟踪请求全流程日志

最近在项目开发中遇到了一些问题，项目为多机部署，使用kibana收集日志，但并发大时使用日志定位比较麻烦，大量日志输出导致很难筛出指定请求的全部相关日志，以及下游服务调用对应的日志。因此计划对项目日志打印进行一些小改造，使用一个traceId跟踪请求的全部路径，前提是不修改原有的打印方式。

05

Slf4j+Logback MDC使用

MDC 可用于绑定日志上下文信息 Slf4j: org.slf4j.MDC slf4j作为日志门面, 定义了相当多的规范例: 生成一个唯一id, 来区分输出的日志归属于哪次http请求效果 20:43:30.204 [xid=1529443036298219520] [XNIO-1 task-1 ] INFO com.content.system.service.common.web.aop.ControllerLogAop : GET:/test/testLib, args: [] 20:

00

初探lustre中的MGC

基本介绍 lustre 客户端包含了三个主要的组件，分别是MGC(management client)、MDC(metadata client)、若干个OSC(object storage client)。客户端中每个osc对应后端lustre的ost.MGC管理客户端是作为整个lustre vfs和MGS(lustre management server)之间的接口.lustre通过MGT后端设备注册MGS,后续客户端请求MGS来获取文件系统信息 MGC中的核心模块有处理lustre 日志、分布式锁管理、

01

Spring Cloud Sleuth的MDC集成实现自定义跟踪

Spring Cloud Sleuth是一个基于Spring Cloud的分布式跟踪解决方案。它使用了Google Dapper的思想，通过在服务调用链路上添加唯一的traceId和spanId来追踪请求的流转情况。而MDC（Mapped Diagnostic Context）则是log4j和logback等日志框架中的一个功能，它可以在日志输出时动态添加一些关键信息，便于问题的定位和排查。

01

如何提升springboot服务吞吐量

电子商务类型网站大多都是短请求，一般响应时间都在100ms，这时可以将web容器从tomcat替换为undertow，下面介绍下步骤：1、增加pom配置

02

我们老大半小时把我的springboot项目并发提升几倍

电子商务类型网站大多都是短请求，一般响应时间都在100ms，这时可以将web容器从tomcat替换为undertow，下面介绍下步骤：1、增加pom配置

03

Spring Boot 应用如何提高服务吞吐量?

电子商务类型网站大多都是短请求，一般响应时间都在100ms，这时可以将web容器从tomcat替换为undertow，下面介绍下步骤：1、增加pom配置

03

如何提升springboot服务吞吐量

电子商务类型网站大多都是短请求，一般响应时间都在100ms，这时可以将web容器从tomcat替换为undertow，下面介绍下步骤： 1、增加pom配置

02

java 日志处理

common-logging是 apache提供的一个通用的日志接口。用户可以自由选择第三方的日志组件作为具体实现，像log4j，或者jdk自带的logging， common-logging会通过动态查找的机制，在程序运行时自动找出真正使用的日志库。当然，common-logging内部有一个Simple logger的简单实现，但是功能很弱。所以使用common-logging，通常都是配合着log4j来使用。使用它的好处就是，代码依赖是common-logging而非log4j，避免了和具体的日志方案直接耦合，在有必要时，可以更改日志实现的第三方库。使用common-logging的常见代码：

03

java 日志处理[通俗易懂]

common-logging是 apache提供的一个通用的日志接口。用户可以自由选择第三方的日志组件作为具体实现，像log4j，或者jdk自带的logging， common-logging会通过动态查找的机制，在程序运行时自动找出真正使用的日志库。当然，common-logging内部有一个Simple logger的简单实现，但是功能很弱。所以使用common-logging，通常都是配合着log4j来使用。使用它的好处就是，代码依赖是common-logging而非log4j，避免了和具体的日志方案直接耦合，在有必要时，可以更改日志实现的第三方库。使用common-logging的常见代码：

01

推荐开发者使用 Material Design 组件

为了保证您的应用与用户设备中安装的其他应用在视觉和行为上保持一致，我们推荐您遵循 Material Design 规范，因为用户从一个应用中学习的操作模式可以无缝衔接地在另一个应用中使用。

03

log4j.properties连接到数据库中

# For JBoss: Avoid to setup Log4J outside $JBOSS_HOME/server/default/deploy/log4j.xml! # For all other servers: Comment out the Log4J listener in web.xml to activate Log4J. log4j.rootLogger=INFO, stdout, logfile, DATABASE

02

`Spring Boot 中使用 LogBack 配置`

LogBack是一个日志框架，它与Log4j可以说是同出一源，都出自Ceki Gülcü之手。（log4j的原型是早前由Ceki Gülcü贡献给Apache基金会的）下载地址 https://logback.qos.ch/download.html LogBack、Slf4j和Log4j之间的关系 Slf4j是The Simple Logging Facade for Java的简称，是一个简单日志门面抽象框架，它本身只提供了日志Facade API和一个简单的日志类实现，一般常配合Log4j，LogBa

06

`logback自定义json日志输出`

先说下楼主的使用场景吧，将程序的某些方法调用以json格式的内容记录到文件中，提供给大数据做数据分析用。当然这个需求实现起来很简单，通过aop拦截切面统一输出内容到文件即可。下面要介绍的就是通过logback日志体系以及logstash提供的json log依赖将数据以json格式记录到日志文件的例子。

02

`打造 Material 字体样式主题 | 实现篇`

使用 Material 主题 (Theming) 自定义 Material 组件，目的是让组件观感与品牌保持一致。Material 主题包括颜色、字体和形状参数，您可以对这些参数进行调整来获得近乎无限的组件变体，同时保持其核心结构和易用性。

02

`再不迁移到Material Design Components 就out啦`

我们最近宣布了 Material Design Components（MDC）1.1.0 ，这是一个库更新，为您的 Android 应用程序带来了 Material Theming 、新的组件、深色主题和其他令人兴奋的功能。

03

`logback.xml 配置总结`

以下配置会将日志输出到c:/logs/debug.log文件里，此外，日志文件每天或大于10M时会被存档：

05

`Log4j、Log4j2问题汇总`

我们使用的是Log4j框架，框架自身提供了类似的许多api，比如isErrorEnabled()，isInfoEnabled()等，每个Level对有对应的一个判断Level是否启用的api，实际上这些api都是调用的另一个api：isEnabled。

03

`扫码`

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

`相关资讯`

`热门标签`

更多标签

`活动推荐`

`运营活动`

广告关闭