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

NodeJs 中的 HTML 模板

news 文章来源：https://blog.csdn.net/qq_44273429/article/details/129281051 2024/11/19 14:35:23
  • 💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】
  • 🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
  • 💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】

HTML 模板是一种允许我们创建基本 HTML 结构并使用占位符根据从 JSON 文件或数据库中检索到的数据动态生成内容的技术。

让我们考虑一个假设实例，其中我们的网站包含许多产品卡，每个卡都包含从 JSON 文件中检索到的特定产品详细信息。

现在，如果我们要从 JSON 文件中添加或删除任何产品，我们将如何在前端动态更新相应的卡片？

考虑到我们基于内容的数据存储在 JSON 文件中，我们可以继续从现有的 HTML 代码创建可重用的模板。

第 1 步：构建模板

作为开发人员，您可能熟悉提供动态 Web 内容的概念。实现这一目标的一种方法是使用模板。

我们将创建两个 HTML 模板，一个用于产品概览页面，一个用于单个产品卡片。

第一个模板template-card.html用作单个产品卡片的蓝图，第二个模板template-overview.html用作概览页面的蓝图。这些模板包含占位符，当用户请求页面时，这些占位符将被替换为实际内容。

确保您的占位符不包含任何属于 HTML 代码的符号。占位符的常用语法是{%PLACEHOLDER_NAME%}.

这是template-card.html我们的第一个模板，用作根据需要动态创建尽可能多的卡片的蓝图。

<figure class="card"><div class="card__emoji">{%IMAGE%}{%IMAGE%}</div><div class="card__title-box"><h2 class="card__title">{%PRODUCTNAME%}</h2></div><div class="card__details"><div class="card__detail-box"><h6 class="card__detail card__detail {%NOT_ORGANIC%}"> Organic!</h6></div><div class="card__detail-box"><h6 class="card__detail">{%QUANTITY%} per 📦</h6></div><div class="card__detail-box"><h6 class="card__detail card__detail--price"> {%PRICE%}€</h6></div></div><a class="card__link" href="/product?id={%ID%}"><span>Detail <i class="emoji-right">👉</i></span></a></figure>

由于此卡片将用作模板，因此其中包含的信息也应替换为占位符。添加占位符后，卡片将类似于以下内容：

<figure class="card"><div class="card__emoji">🥦🥦</div><div class="card__title-box"><h2 class="card__title">Apollo Broccoli</h2></div><div class="card__details"><div class="card__detail-box"><h6 class="card__detail card__detail--organic">Organic!</h6></div><div class="card__detail-box"><h6 class="card__detail">3🥦 per 📦</h6></div><div class="card__detail-box"><h6 class="card__detail card__detail- price">5.50€</h6></div></div><a class="card__link" href="/product?id="><span>Detail <i class="emoji-right">👉</i></span></a></figure>

锚标记包含一个 href 链接，其中包含一个 ID 的占位符。这表明我们的 JSON 文件中的每张卡或产品都有一个不同的 ID。这些 ID 是唯一的，将用于在路由过程中识别每个产品。

此外，当我们需要根据元素的类别设置元素样式时，CSS 类和 ID 可以用占位符代替，就像在图像示例中所做的那样。这种方法在这种情况下特别有用。

<body><div class="container"><h1>🌽 Node Farm 🥦</h1><div class="cards-container">{%PRODUCT_CARDS%}</div></div>
</body>

在此示例中，我们已将模板卡片替换为占位符。请务必记住，我们将使用这个单一模板卡片动态生成多张卡片。

注意：这是我们的第二张模板卡，template-overview.html

第 2 步：填充模板

有趣的部分来了，通过用实际内容替换我们的占位符来填充我们的模板。

当用户请求 URL 时，代码会同步读取相关模板文件（或者template-overview.html或template-card.html），用 JSON 文件中的内容动态填充它，并将相关内容作为响应发回给用户。

这是通过使用函数实现的replaceTemplate，该函数用实际内容替换模板中的占位符。

// SECOND STEP:
const replaceTemplate = (temp, product) => {let output = temp.replace(/{%PRODUCTNAME%}/g, product.productName);output = output.replace(/{%IMAGE%}/g, product.image);output = output.replace(/{%PRICE%}/g, product.price);output = output.replace(/{%ID%}/g, product.id); // /g is a regex global flagreturn output;
}// FIRST STEP:
const tempOverview = fs.readFileSync(`${__dirname}/templates/template-overview.html`, 'utf-8');
const tempCard = fs.readFileSync(`${__dirname}/templates/template-card.html`, 'utf-8');
const data = fs.readFileSync(`${__dirname}/dev-data/data.json`, 'utf-8');
const dataObj = JSON.parse(data);// THIRD STEP:
const server = http.createServer((req, res) => {const pathName = req.url;//FOURTH STEP://Here is the Overviewif(pathName === '/' || pathName === '/overview') {res.writeHead(200, {'Content-type': 'text/html'});const cardsHtml = dataObj.map(el => replaceTemplate(tempCard, el)).join('');const output = tempOverview.replace('{%PRODUCT_CARDS%', cardsHtml);res.end(output);//API} else if(pathName === '/api') {res.writeHead(200, {'Content-type': 'application/json'});res.end(data);// Not Found} else {res.writeHead(404, {'Content-type': 'text/html', //standard header'my-header': 'hello-world'});res.end('<h1>This page cannot be found.</h1>');}
});server.listen(8000, '127.0.0.1', () => {console.log('Listening to requests on port 8000');
});res.writeHead(404, {'Content-type': 'text/html', //standard header'my-header': 'hello-world'});res.end('<h1>This page cannot be found.</h1>');}
});server.listen(8000, '127.0.0.1', () => {console.log('Listening to requests on port 8000');
});

别担心，我们将仔细研究上面的大块代码，并用更简单的术语弄清楚它的作用。

  • 首先，读取两个 HTML 模板文件和存储在 JSON 文件中的产品数据
  • 其次，定义一个函数，用特定于产品的数据替换模板中的占位符。在这里，我们的函数被命名为replaceTemplate
  • 第三、监听传入的 HTTP 请求并检查请求 URL 的路径名
  • 第四，如果路径名为/或/overview，则使用replaceTemplatefunction和JSON文件中的产品数据替换tempCard模板中的占位符，为每个产品卡生成HTML代码。
  • 然后连接每张卡片的结果 HTML 以创建字符串cardsHtml。然后修改模板tempOverview以包含 cardsHtml 字符串，并将生成的 HTML 代码作为响应发回。
  • 此外，如果路径名是，/api它会以 JSON 格式发回产品数据作为响应
  • 最后，如果路径名是其他任何内容，则发回 404 错误消息。

哇，那段代码看起来确实很多，但如果我们仔细看，一步一步来，它并没有那么复杂。

它所做的只是用真实信息替换一些特殊词并将其发送回网站，以便人们可以看到它！

HTML 模板的好处

HTML 模板提供了几个好处，使其成为 Web 开发人员的热门选择：

  • 通过使用 HTML 模板，我们将内容与表示分离，允许开发人员生成可重复使用的模板，这些模板可以处理来自多个来源的不同数量的数据，并维护类似代码的多个副本。
  • HTML 模板为呈现数据、改善用户体验和轻松导航站点提供了标准结构。
  • 模板的灵活性使得修改底层数据变得更加容易。这节省了时间和精力，因为开发人员不需要手动更改 HTML 代码。
  • 由于 HTML 模板可重复使用，因此更易于维护和更新。可以在不修改模板代码的情况下对基础数据进行更改，从而降低出错的可能性。
  • HTML 模板可以在不影响性能的情况下处理大量数据。这使其成为具有大量动态内容的网站的理想选择。

总之，HTML 模板是一种高效、一致、灵活且可扩展的技术，可简化动态 Web 内容的开发和维护。

通过将内容与表示分离，HTML 模板使开发人员能够创建可重用的模板，这些模板可以处理不同数量的数据，而无需将内容硬编码到每个页面中。

拓展部分：

Node.js 中还有其他几个可用的模板引擎，例如 EJS、Pug（以前称为 Jade）、Handlebars 和 Mustache 等。

要在 Node.js 中使用模板引擎，您需要通过 npm 安装它，然后在您的代码中需要它。这些引擎提供了一种通过将数据插入模板内的占位符来生成 HTML 的方法。

⭐️ 好书推荐

《特效师手册：影视剪辑与特效制作从入门到精通（剪映版）》

在这里插入图片描述

【内容简介】

本书根据作者多年的特效制作经验，结合目前年轻人喜爱的短视频特效，设计、讲解了 11 章内容，包括影视剪辑与特效基础、画面特效与人物特效、使用蒙版合成画面、混合模式合成效果、用关键帧制作特效、掌握剪映抠图特效、剪辑影视解说视频、制作影视字幕特效，以及制作热门的武侠类特效、仙侠类特效和科幻类特效等，帮助读者在较短的时间内，从新手成为剪映影视剪辑和特效制作高手。本书既讲解了如何在剪映电脑版中进行影视剪辑与特效制作，也讲解了剪映手机版的案例制作步骤，让读者买一本书精通剪映的两个版本，轻松玩转剪映电脑版 + 手机版，随时随地制作出精彩的影视混剪与特效视频。

📚 京东自营购买链接：《特效师手册：影视剪辑与特效制作从入门到精通（剪映版）》

相关文章：

NodeJs 中的 HTML 模板

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 HTML 模板是一种允许我…...

编程日记 2023/3/1 17:24:32

3.ffmpeg命令行环境搭建、ffmpeg命令行初步了解

在上章,我们讲过: ffmpeg.exe: 主要用于转码或者剪切的应用程序, 也可以从url/现场音频/视频源抓取输入源ffplay.exe: 主要用于播放视频的应用程序,该应用程序源码是开源的,我们后面章节会去源码分析ffprobe.exe: 主要用于分析视频码流的应用程序, 可以获取媒体文件的详细信息,…...

编程日记 2023/3/1 17:23:26

Kubernetes初始化容器

初始化容器 之前了解了容器的健康检查的两个探针&#xff1a;liveness probe&#xff08;存活探针&#xff09;和readiness probe&#xff08;可读性探针&#xff09;的使用方法&#xff0c;我们说在这两个探针是可以影响容器的生命周期的&#xff0c;包括我们之前提到的容器的…...

编程日记 2023/3/1 17:22:19

leetcode: Swapping Nodes in a Linked List

leetcode: Swapping Nodes in a Linked List1. 题目描述2. 题目解答3. 总结1. 题目描述 You are given the head of a linked list, and an integer k.Return the head of the linked list after swapping the values of the kth node from the beginning and the kth node f…...

编程日记 2023/3/1 17:21:10

Nydus 在约苗平台的容器镜像加速实践

文 | 向申 约苗平台运维工程师 关注云原生领域 本文字数 9574阅读时间24分钟 本文是来自向申同学的分享&#xff0c;介绍了其在 K8s 生产环境集群部署 Nydus 的相关实践。 Nydus 是蚂蚁集团&#xff0c;阿里云和字节等共建的开源容器镜像加速项目&#xff0c;是 CNCF Dragon…...

编程日记 2023/3/1 17:19:59

企业对不同形态CRM系统价格需求不同

很多企业在选型时关心CRM客户管理系统的价格&#xff0c;有人对CRM的价格完全没有概念&#xff0c;也有的人先问价格再看其他。CRM价格在系统选型中到底有多重要&#xff1f;不同类型CRM系统的价格是否有所不同&#xff1f; CRM的不同产品形态也会影响价格 通常情况下&#x…...

编程日记 2023/3/1 17:18:48

「JVM 高效并发」线程安全

面向过程编程&#xff0c;把数据和过程分别作为独立的部分考虑&#xff0c;数据代表问题空间中的客体&#xff0c;程序代码则用于处理这些数据&#xff1b;面向对象编程&#xff0c;把数据和行为都看做对象的一部分&#xff0c;以符合现实世界的思维方式来编写和组织程序&#…...

编程日记 2023/3/1 17:17:40

微信扫码登录

一、准备工作 微信开发者平台&#xff1a;https://open.weixin.qq.com 1、注册 2、邮箱激活 3、完善开发者资料 4、开发者资质认证&#xff1a;仅能企业注册&#xff08;后面提供学习的使用渠道&#xff09;准备营业执照&#xff0c;1-2个工作日审批、300元 5、创建网站应用&…...

编程日记 2023/3/1 17:16:32

Unity协程的简单应用

Unity协程是一种特殊的函数&#xff0c;可以让你在Unity中创建一种类似于多线程的异步操作。它可以在需要等待某个操作完成时&#xff0c;暂停执行当前代码&#xff0c;等待某个条件满足后再继续执行。 在一般情况下 unity中调用函数时&#xff0c;函数将运行到完成状态&#x…...

编程日记 2023/3/1 17:15:25

LeetCode 1250. Check If It Is a Good Array【数论】

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

编程日记 2023/3/1 17:14:16

ETHDenver 2023

ETHDenver是全球最大、持续时间最长的以太坊活动之一&#xff0c;今年的活动定于2月24日至3月5日在美国科罗拉多州丹佛市盛大举行。这次活动将面向以太坊和其他区块链协议爱好者、设计者和开发人员。Moonbeam作为ETHDenver 2023的Meta赞助商&#xff0c;将在本次活动中展示令人…...

编程日记 2023/3/1 17:13:10

React架构演变

老版React架构 React 16之前的架构 其实就分为两个部分&#xff1a; Reconciler协调器Render渲染器 Reconciler协调器负责本次更新有什么组件需要被渲染&#xff0c;diff算法就发生在这个步骤中&#xff0c;在diff算法中会将上次更新的组件和本次更新的组件做一个对比&…...

编程日记 2023/3/1 17:12:02

安全认证--JWT介绍及使用

安全认证--JWT介绍及使用1.无状态登录原理1.1.什么是有状态&#xff1f;1.2.什么是无状态1.3.如何实现无状态1.4.JWT1.4.1.简介1.4.2.数据格式2.编写JWT工具2.1.添加JWT依赖2.2.载荷对象2.3.工具2.4.测试2.4.1.配置秘钥2.4.2.测试类1.无状态登录原理 有状态登录和无状态登录详…...

编程日记 2023/3/1 17:10:53

【计算机组成原理】计算机硬件的基础组成、认识各个硬件部件

计算机组成原理&#xff08;一&#xff09; 计算机内部是通过电信号传递数据 电信号&#xff1a;分为高电平和低电平&#xff0c;分别代表1/0 数字、文字、图像如何用二进制表示? CPU如何对二进制数进行加减乘除? 如何存储这些二进制数的? 如何从内存中取出想要的数…...

编程日记 2023/3/1 17:09:47

使用ChIPSeeker进行ChIP-seq， ATAC-seq，cuttag等富集峰的基因组注释

二代测序产生的数据类型 常规的下一代高通量测序&#xff08;next generation sequencing, NGS&#xff09;实验通常产生大量短片段(reads)&#xff0c;通常我们需要将这些reads比对到参考基因组/转录组上&#xff0c;即将它们置于生物学上有意义的基因背景下&#xff0c;才能…...

编程日记 2023/3/1 17:08:42

第九届蓝桥杯省赛——7缩位求和

题目&#xff1a;在电子计算机普及以前&#xff0c;人们经常用一个粗略的方法来验算四则运算是否正确。比如&#xff1a;248 * 15 3720把乘数和被乘数分别逐位求和&#xff0c;如果是多位数再逐位求和&#xff0c;直到是1位数&#xff0c;得2 4 8 14 > 1 4 5;1 5 65…...

编程日记 2023/3/1 17:07:30

【c++】STL常用容器5—list容器

文章目录list基本概念list构造函数list赋值和交换list大小操作list插入和删除list数据存取list反转和排序list基本概念 功能&#xff1a;将数据进行链式存储。 链表&#xff08;list&#xff09;是一种物理存储单元上非连续的存储结构&#xff0c;数据元素的逻辑顺序是通过链…...

编程日记 2023/3/1 17:06:23

【牛客刷题专栏】0x0D:JZ5 替换空格(C语言编程题)

前言 个人推荐在牛客网刷题(点击可以跳转)&#xff0c;它登陆后会保存刷题记录进度&#xff0c;重新登录时写过的题目代码不会丢失。个人刷题练习系列专栏&#xff1a;个人CSDN牛客刷题专栏。 题目来自&#xff1a;牛客/题库 / 在线编程 / 剑指offer&#xff1a; 目录前言问题…...

编程日记 2023/3/1 17:05:16

聚观早报 | 苹果2024年放弃高通；腾讯回应进军类 ChatGPT

今日要闻&#xff1a;苹果2024年放弃高通&#xff1b;腾讯回应进军类 ChatGPT&#xff1b;小米发布无线AR眼镜探索版&#xff1b;50%的美国企业已在使用ChatGPT&#xff1b;Snap推出ChatGPT驱动的聊天机器人 苹果2024年放弃高通 高通公司 CEO 兼总裁克里斯蒂亚诺・安蒙&#xf…...

编程日记 2023/3/1 17:04:07

Elasticsearch：如何正确处理 Elasticsearch 摄取管道故障

在我之前的文章 “Elastic&#xff1a;开发者上手指南” 中的 “Ingest pipeline” 章节中个&#xff0c;我有很多文章是关于 ingest pipeline 的。在今天的文章中&#xff0c;我将重点介绍如何处理在摄取管道中的错误。在我之前的文章 “Elasticsearch&#xff1a;如何处理 in…...

编程日记 2023/3/1 17:02:59

指标体系—北极星指标体系

北极星指标体系 每个产品都有很多指标，每个指标都反映了对应业务的经营情况。但是在实际业务经营中，却要求我们在不同的产品阶段寻找到合适的指标，让这个指标可以代表当前产品阶段的方向和目标，让这个指标不仅对业务经营团队，而且对产品的用户、对产品的价值都能有很好的…...

编程日记 2023/3/1 17:01:53

【操作系统】内存管理

虚拟内存 虚拟内存的目的是为了让物理内存扩充成更大的逻辑内存&#xff0c;从而让程序获得更多的可用内存。 为了更好的管理内存&#xff0c;操作系统将内存抽象成地址空间。每个程序拥有自己的地址空间&#xff0c;这个地址空间被分割成多个块&#xff0c;每一块称为一页。…...

编程日记 2023/3/1 17:00:44

家庭消耗品跟踪管理软件HomeLists

什么是 HomeLists &#xff1f; HomeLists 是一款自托管耗材统计软件&#xff0c;能通过提醒等帮助您跟踪家庭消耗品。 安装 在群晖上以 Docker 方式安装。 在注册表中搜索 homelists &#xff0c;选择第一个 aceberg/homelists&#xff0c;版本选择 latest。 本文写作时&…...

编程日记 2023/3/1 16:59:37

django模型简要(1)

1. AbstractUser(内置用户模型类)的使用 ### 需要在settings.py中添加如下&#xff1a; AUTH_USER_MODEL app.MyUser 说明&#xff1a;这是为了覆盖django默认的User model&#xff1b;app即模型所属app&#xff0c;MyUser即AbstractUser实现类。 2.on_delete选项 从django3.…...

编程日记 2023/3/1 16:58:31

【shell 编程大全】sed详解

sed详解1. 概述 今天单独拉出一章来讲述下sed命令。因为sed命令确实内容太多&#xff0c;不过也是比较灵活的&#xff0c;好了不废话了。我们开始吧 1.2 原理解析 shell脚本虽然功能很多&#xff0c;但是它最常用的功能还是处理文本文件&#xff0c;尤其是在正常的业务操作流程…...

编程日记 2023/3/1 16:57:24

关于sudo配置

前言这里做一个小补充&#xff0c;主要讲一下关于利用sudo对指令提权以及普通用户无法使用sudo指令的问题。在前面的文章【Linux】一文掌握Linux权限中&#xff0c;我们讲到了关于权限的一些问题。我们知道root身份下&#xff0c;一切畅通无阻&#xff0c;而权限只是用来限制我…...

编程日记 2023/3/1 16:56:16

EEGLAB处理运动想象脑电数据

最近在看论文时&#xff0c;经常看到作者处理数据的过程&#xff0c;之前都是一代而过&#xff0c;知道怎么处理就可以了&#xff0c;一直没有实践&#xff0c;最近需要一些特殊的数据&#xff0c;需要自己处理出来&#xff0c;这里尝试着自己用MATLAB处理数据&#xff0c;记录…...

编程日记 2023/3/1 16:55:09

span标签的使用场景

目录 前言 一、span标签是什么&#xff1f; 二、span常用 1.可以嵌套a标签。 2.直接使用 3.加样式使用 4.加按钮使用 5.加a标签的综合使用 6.跟table结合使用 总结 前言 本篇章主要记录一下开发日常中&#xff0c;所常遇见的使用span标签的场景。 一、span标签是什么…...

编程日记 2023/3/1 16:54:01

Kafka面试问题总结

kafka架构2.基础概念Producer&#xff08;生产者&#xff09; : 产生消息的一方。Consumer&#xff08;消费者&#xff09; : 消费消息的一方。Broker&#xff08;代理&#xff09; : 可以看作是一个独立的 Kafka 实例。多个 Kafka Broker 组成一个 Kafka Cluster。同时&#x…...

编程日记 2023/3/1 16:52:54

FPGA案例开发手册——基于全志T3＋Logos FPGA核心板

前 言 本文档主要提供评估板FPGA端案例测试方法，适用的开发环境为Windows 7 64bit和Windows 10 64bit。 本文案例基于创龙科技的全志T3＋Logos FPGA核心板，它是一款基于全志科技T3四核ARM Cortex-A7处理器 + 紫光同创Logos PGL25G/PGL50G FPGA设计的异构多核全国产工业核心板…...

编程日记 2023/3/1 16:51:44

廊坊网站建设精灵/外贸网站推广的方法

swal()方法是一个提示框&#xff1b;swal({title: "",text: "请扫描用户手机上的付款码",type: "input",showCancelButton: true,closeOnConfirm: false,cancelButtonText: "取消",confirmButtonText: "确认",imageUrl: &qu…...

编程日记 2024/11/19 13:50:43

龙岗做棋牌网站建设/谷歌推广开户

这两天体检&#xff0c;抽了下血给我这营养不良抽的浑身无力...刚开始可能String用到的比较多&#xff0c;但是String可能不适用于很多情况&#xff0c;于是就写一下StringBuilder和StringBuffer。Java平台提供了两种字符串类型&#xff1a;String和StringBuffer、StringBuilde…...

编程日记 2024/11/19 7:44:52

做电影的网站赚什么钱/tool站长工具

【重学webpack系列——webpack5.0】 1-15节主要讲webpack的使用&#xff0c;当然&#xff0c;建议结合《webpack学完这些就够了》一起学习。 从16节开始&#xff0c;专攻webpack原理&#xff0c;只有深入原理&#xff0c;才能学到webpack设计的精髓&#xff0c;从而将技术点运用…...

编程日记 2024/11/18 23:06:16

wordpress 新安装 慢/金戈西地那非片

复制文件。 语法 FileCopy源&#xff0c;目标 FileCopy 语句语法包含以下命名参数&#xff1a; 部分说明source必需。 指定要复制的文件的名称的字符串表达式。 _源_可能包含目录或文件夹&#xff0c;和驱动器。目标必需。 指定的目标文件名称的字符串表达式。 _目标_可能包含目…...

编程日记 2024/11/18 21:14:40

餐饮公司做网站的好处/什么叫seo优化

1040: [ZJOI2008]骑士 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4859 Solved: 1869[Submit][Status][Discuss]Description Z国的骑士团是一个很有势力的组织&#xff0c;帮会中汇聚了来自各地的精英。他们劫富济贫&#xff0c;惩恶扬善&#xff0c;受到社会各 界的赞…...

编程日记 2024/11/18 19:03:28

保定seo建站/长沙seo外包

1、pushbutton->default属性为true&#xff0c;按回车相当于点击该按钮。 2、选中checkable后&#xff0c;Button变成切换按钮(toggle button)&#xff0c;可以有两种状态&#xff1a;按下/弹起&#xff0c;默认状况下checkable是不选中的&#xff0c;Button默认为触发按钮(…...

编程日记 2024/11/18 18:31:05