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

Layui深入

news 2025/7/8 21:11:55

1、代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>注册页面</title>
  <style>
      .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      
      .register-form {
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      }
      
      h2 {
        text-align: center;
        margin-bottom: 20px;
      }
      
      .form-group {
        margin-bottom: 20px;
      }
      
      label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
      }
      
      input[type="text"],
      input[type="email"],
      input[type="password"],
      select {
        display: block;
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: none;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
        font-size: 16px;
        margin-top: 5px;
      }
      
      input[type="checkbox"] {
        margin-right: 10px;
      }
      
      input[type="submit"] {
        background: #007bff;
        color: #fff;
        padding: 10px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
      }
      
      input[type="submit"]:hover {
        background: #0062cc;
      }
      
      a {
        color: #007bff;
        text-decoration: none;
      }
      
      a:hover {
        text-decoration: underline;
      }

  </style>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
 
    <div class="container">
      <form class="register-form">
        <h2>注册</h2>
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" id="email" name="email" required>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
          <label for="confirm-password">确认密码</label>
          <input type="password" id="confirm-password" name="confirm-password" required>
        </div>
        <div class="form-group">
          <label for="gender">性别</label>
          <select id="gender" name="gender">
            <option value="male">男</option>
            <option value="female">女</option>
          </select>
        </div>
        <div class="form-group">
          <label for="agree-to-terms">我同意 <a href="#">Lyui注册条款</a></label>
          <input type="checkbox" id="agree-to-terms" name="agree-to-terms" required>
        </div>
        <input type="submit" value="注册">
      </form>
    </div>

<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
  layui.use('form', function(){
    var form = layui.form;
    
    //监听提交
    form.on('submit(formDemo)', function(data){
      layer.msg(JSON.stringify(data.field));
      return false;
    });
  });
</script>
 
</body>
</html>

效果图：

2、代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Layui弹出层</title>
  <style>
      .layui-container{
        max-width: 1200px;
        margin: 0 auto;
      }
      .layui-form-item{
        margin-bottom: 20px;
      }

  </style>
  <link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.6/css/layui.css">
</head>
<body>

<div class="layui-container" style="margin-top: 30px;">
  <div class="layui-row">
    <div class="layui-col-md12">
      <button class="layui-btn" id="btn-layer">点击弹出层</button>
    </div>
  </div>
</div>

<!-- 弹出层模板 -->
<div id="layer-template" style="display:none;">
  <div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="username" placeholder="请输入姓名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-block">
      <input type="text" name="age" placeholder="请输入年龄" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="form-demo">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layui/2.5.6/layui.js"></script>
<script>

//点击弹出层按钮
$('#btn-layer').click(function(){
  layer.open({
    type: 1,
    title: '请输入个人信息',
    area: ['500px', '300px'],
    content: $('#layer-template').html()
  });
});

//监听表单提交事件
layui.use('form', function(){
  var form = layui.form;
  form.on('submit(form-demo)', function(data){
    layer.msg('提交成功！');
    return false;
  });
});

</script>
</body>
</html>

效果图：

3、代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui弹出层示例</title>
    <style>
        /* 自定义对话框的样式 */
        .layui-layer-demo .layui-layer-btn{
            text-align: center;
            margin-top: 15px;
        }

    </style>
    <link rel="stylesheet" href="//cdn.bootcss.com/layui/2.5.6/css/layui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/5.11.2/css/all.min.css">
</head>
<body>

<div class="container">
    <br>
    <div class="row">
        <div class="col-sm-6">
            <button class="layui-btn layui-btn-normal" οnclick="showMsg()">普通提示框</button>
            <button class="layui-btn layui-btn-normal" οnclick="showConfirm()">确认框</button>
            <button class="layui-btn layui-btn-normal" οnclick="showDialog()">自定义对话框</button>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/layui/2.5.6/layui.min.js"></script>
<script src="//cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<script src="//cdn.bootcss.com/jquery.form/4.2.2/jquery.form.js"></script>

<script>
    //普通提示框
    function showMsg(){
        layer.msg('Hello World!');
    }

    //确认框
    function showConfirm(){
        layer.confirm('您确定要删除吗？', {
            icon: 3,
            title: '提示'
        }, function(index){
            layer.close(index);
            //此处调用删除函数
            console.log('删除操作');
        });
    }

    //自定义对话框
    function showDialog(){
        layer.open({
            type: 1,
            title: '自定义对话框',
            skin: 'layui-layer-demo',
            area: ['500px', '300px'],
            content: $('#dialog'),
            btn: ['确定', '取消'],
            yes: function(index, layero){
                //提交表单
                $('#form').ajaxSubmit({
                    success: function(data){
                        console.log(data);
                        layer.msg(data.message);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        console.log(XMLHttpRequest);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
                layer.close(index);
            },
            btn2: function(index, layero){
                layer.close(index);
            },
            cancel: function(){
                layer.msg('已取消');
            }
        });
    }

    layui.use(['layer'], function(){
        var layer = layui.layer;
    });
</script>

<!-- 自定义对话框 -->
<div id="dialog" style="display: none;">
    <form id="form" action="submit.php" method="post">
        <div class="form-group">
            <label for="title">标题</label>
            <input type="text" class="form-control" id="title" name="title" placeholder="请输入标题">
        </div>
        <div class="form-group">
            <label for="content">内容</label>
            <textarea class="form-control" id="content" name="content" placeholder="请输入内容"></textarea>
        </div>
    </form>
</div>

</body>
<script>
    //使用layui弹出层
    layui.use(['layer'], function(){
        var layer = layui.layer;
    });
    
    //普通提示框
    function showMsg(){
        layer.msg('Hello World!');
    }
    
    //确认框
    function showConfirm(){
        layer.confirm('您确定要删除吗？', {
            icon: 3,
            title: '提示'
        }, function(index){
            layer.close(index);
            //此处调用删除函数
            console.log('删除操作');
        });
    }
    
    //自定义对话框
    function showDialog(){
        layer.open({
            type: 1,
            title: '自定义对话框',
            skin: 'layui-layer-demo',
            area: ['500px', '300px'],
            content: $('#dialog'),
            btn: ['确定', '取消'],
            yes: function(index, layero){
                //提交表单
                $('#form').ajaxSubmit({
                    success: function(data){
                        console.log(data);
                        layer.msg(data.message);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        console.log(XMLHttpRequest);
                        console.log(textStatus);
                        console.log(errorThrown);
                    }
                });
                layer.close(index);
            },
            btn2: function(index, layero){
                layer.close(index);
            },
            cancel: function(){
                layer.msg('已取消');
            }
        });
    }

</script>
</html>

效果图：

这是三个按钮：

4、代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>年度销量</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/layui/2.5.6/css/layui.min.css">
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/layui/2.5.6/layui.min.js"></script>
    <script src="//cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

    <script>
        layui.use(['element', 'layer'], function(){
            var element = layui.element;
            var layer = layui.layer;

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('chart'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'Layui柱状图示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        });
    </script>
</body>
</html>

效果图：

5、代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Layui选项卡示例</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.6/css/layui.css" />
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/layui/2.5.6/layui.js"></script>
</head>

<body>

  <div class="layui-tab layui-tab-card">
    <ul class="layui-tab-title">
      <li class="layui-this">选项卡1</li>
      <li>选项卡2</li>
      <li>选项卡3</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">内容1</div>
      <div class="layui-tab-item">内容2</div>
      <div class="layui-tab-item">内容3</div>
    </div>
  </div>

</body>
    <script>
        layui.use('element', function() {
          var element = layui.element;
        
          //监听Tab切换，以改变地址hash值
          element.on('tab(tabDemo)', function(data) {
            location.hash = 'tab=' + this.getAttribute('lay-id');
          });
        
          //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
          var layid = location.hash.replace(/^#tab=/, '');
          element.tabChange('tabDemo', layid);
        });

    </script>
</html>

效果图：

6、代码图：

<!DOCTYPE html> <html>

<head> 
<meta charset="UTF-8"> 
<title>Layui弹出层选项卡</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css" /> 
    <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js">
        
    </script>
     </head>

<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <button class="layui-btn" id="btn">打开弹出层</button> 
                </div>
                 </div>
                  </div>

<script>
    layui.use(['layer', 'jquery'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;

        //弹出层选项卡
        function openTabLayer() {
            layer.open({
                type: 1,
                title: '弹出层选项卡',
                area: ['800px', '600px'],
                content: '<div class="layui-tab layui-tab-card">' +
                    '<ul class="layui-tab-title">' +
                    '<li class="layui-this">选项卡1</li>' +
                    '<li>选项卡2</li>' +
                    '<li>选项卡3</li>' +
                    '</ul>' +
                    '<div class="layui-tab-content">' +
                    '<div class="layui-tab-item layui-show">选项卡1的内容</div>' +
                    '<div class="layui-tab-item">选项卡2的内容</div>' +
                    '<div class="layui-tab-item">选项卡3的内容</div>' +
                    '</div>' +
                    '</div>'
            });
        }

        //按钮点击事件
        $('#btn').click(function () {
            openTabLayer();
        });
    });
</script>
</body>
</html>

效果图：

相关文章：

Layui深入

1、代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>注册页面</title> <style> .container { max-width: 600px; margin: 0 auto; padding: 20px; …...

编程日记 2023/12/15 17:24:34

网络层--TCP/UDP协议

目录 一、TCP/UDP协议介绍 1、UDP(User Datagram Protocol)--用户数据报协议 1.1 UDP报文格式 1.2 UDP协议的特性 2、TCP(Transmission Control Protocol )--传输控制协议 2.1 TCP报文格式 2.2 TCP协议的特性 2.3 TCP三次握手 2.4 四次挥手 三、TCP和UDP的区别 四、t…...

编程日记 2023/12/15 17:21:31

前端发送请求之参数处理---multipart/form-data与application/x-www-form-urlencoded

Content-Type就是指 HTTP 发送信息至服务器时的内容编码类型&#xff0c;服务器根据编码类型使用特定的解析方式&#xff0c;获取数据流中的数据。 其实前后端发送请求的方式有 text/plain、application/json、application/x-www-form-urlencoded、 multipart/form-data等&…...

编程日记 2023/12/15 17:19:29

解决Ubuntu16.04没声音

第一步&#xff1a;安装 PulseAudio Volum Control Ubuntu没有声音&#xff08;听不到声音&#xff09;的解决方法 第二步&#xff1a;No cards available for configuration 【解决Ubuntu18.04没声音&#xff1a;No cards available for configuration】 完美解决&#xf…...

编程日记 2023/12/15 17:16:26

12.14每日一题（备战蓝桥杯归并排序）

12.14每日一题&#xff08;备战蓝桥杯归并排序&#xff09; 题目 归并排序 给定你一个长度为 n 的整数数列。 请你使用归并排序对这个数列按照从小到大进行排序。 并将排好序的数列按顺序输出。 输入格式 输入共两行&#xff0c;第一行包含整数 n。 第二行包含 n 个整数&…...

编程日记 2023/12/15 17:15:26

面试__Java常见异常有哪些？

java.lang.IllegalAccessError&#xff1a;违法访问错误。当一个应用试图访问、修改某个类的域&#xff08;Field&#xff09;或 者调用其方法&#xff0c;但是又违反域或方法的可见性声明&#xff0c;则抛出该异常。 java.lang.InstantiationError&#xff1a;实例化错误。当…...

编程日记 2023/12/15 17:13:24

linux 网络子系统 摘要

当你输入一个网址并按下回车键的时候&#xff0c;首先&#xff0c;应用层协议对该请求包做了格式定义;紧接着传输层协议加上了双方的端口号&#xff0c;确认了双方通信的应用程序;然后网络协议加上了双方的IP地址&#xff0c;确认了双方的网络位置;最后链路层协议加上了双方的M…...

编程日记 2023/12/15 17:12:23

java发起http、https请求，并携带cookie、header，post参数放body并可选关闭ssl证书验证，高可用版

公司有个需求是发起https请求对接国家数据接口&#xff0c;需要带header、cookie&#xff0c;并关闭ssl证书验证&#xff0c;搜了很多文章&#xff0c;都说用HttpsURLConnection发起请求&#xff0c;但不知为啥在封装body参数的时候一直报400封装出错&#xff0c;也欢迎指出不足…...

编程日记 2023/12/15 17:08:20

windows系统nodeJs报错node-sass npm ERR! command failed

报错信息 npm WARN deprecated request2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated tar2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asa…...

编程日记 2023/12/15 17:07:19

从零构建属于自己的GPT系列5：模型部署1（文本生成函数解读、模型本地化部署、文本生成文本网页展示、代码逐行解读）

&#x1f6a9;&#x1f6a9;&#x1f6a9;Hugging Face 实战系列 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在PyCharm中进行 本篇文章配套的代码资源已经上传 从零构建属于自己的GPT系列1&#xff1a;数据预处理 从零构建属于自己的GPT系列2&#xff1a;模型训…...

编程日记 2023/12/15 17:05:16

电脑篇——360浏览器打开新标签页自定义，和关闭360导航（强迫症福音）

1.点击“”按钮打开新标签页时会自动打开“资讯聚合”页面&#xff0c;如下图。 如何让我们打开新标签页可以自定义呢&#xff08;如我这般强迫症必须要新打开的页面干干净净&#xff09;&#xff1f; 方法&#xff1a;点击号打开新标签页后&#xff0c;在新标签页界面上找到…...

编程日记 2023/12/15 17:00:12

常见的Linux基本指令

目录 什么是Linux&#xff1f; Xshell如何远程控制云服务器 Xshell远程连接云服务器 Linux基本指令 用户管理指令 pwd指令 touch指令 mkdir指令 ls指令 cd指令 rm指令 man命令 cp指令 mv指令 cat指令 head指令 ​编辑 tail指令 ​编辑echo指令 find命令 gr…...

编程日记 2023/12/15 16:58:10

ESXI 6.7升级update3

一、适用场景 1、企业已有专业服务器&#xff0c;通过虚拟化环境搭建了vm server&#xff1b; 2、备份整个vm server时&#xff0c;需要使用ovftool工具完成&#xff0c;直接导出ovf模板时报错&#xff1b; 3、升级EXSI6.7的build 8169922版本为update 3版本后&#xff0c;已保…...

编程日记 2023/12/15 16:57:09

bugku--source

dirsearch扫一下 题目提示源代码&#xff08;source&#xff09; 也就是源代码泄露&#xff0c;然后发现有.git 猜到是git泄露 拼接后发现有文件 但是点开啥也没有 kali里面下载下来 wegt -r 下载网站的所有内容 ls 查看目录 cd 进入到目录里面 gie reflog 引用日志使用…...

编程日记 2023/12/15 16:46:01

SpringBoot Maven 项目打包的艺术--主清单属性缺失与NoClassDefFoundError的优雅解决方案

Maven项目的Jar包打包问题-没有主清单属性&&ClassNotFoundException 与 NoClassDefFoundError 文章目录 Maven项目的Jar包打包问题-没有主清单属性&&ClassNotFoundException 与 NoClassDefFoundError1、问题出现1.1、Jar包运行&#xff1a;没有主清单属性解决方…...

编程日记 2023/12/15 16:45:00

2023-12-14 二叉树的最大深度和二叉树的最小深度以及完全二叉树的节点个数

二叉树的最大深度和二叉树的最小深度以及完全二叉树的节点个数 104. 二叉树的最大深度 思想&#xff1a;可以使用迭代法或者递归&#xff01;使用递归更好&#xff0c;帮助理解递归思路&#xff01;明确递归三部曲–①确定参数以及返回参数 ②递归结束条件 ③单层逻辑是怎么样…...

编程日记 2023/12/15 16:43:59

利用闭包与高阶函数实现缓存函数的创建

缓存函数是一种用于存储和重复利用计算结果的机制。其基本思想是&#xff0c;当一个函数被调用并计算出结果时&#xff0c;将该结果存储在某种数据结构中 (通常是一个缓存对象)以备将来使用。当相同的输入参数再次传递给函数时&#xff0c;不再执行实际的计算&#xff0c;而是直…...

编程日记 2023/12/15 16:42:58

P1042 [NOIP2003 普及组] 乒乓球 JAVA 题解

题目背景 国际乒联现在主席沙拉拉自从上任以来就立志于推行一系列改革&#xff0c;以推动乒乓球运动在全球的普及。其中11分制改革引起了很大的争议&#xff0c;有一部分球员因为无法适应新规则只能选择退役。华华就是其中一位&#xff0c;他退役之后走上了乒乓球研究工作&…...

编程日记 2023/12/15 16:41:57

最大公因数，最小公倍数详解

前言 对于初学编程的小伙伴们肯定经常遇见此类问题&#xff0c;而且为之头疼&#xff0c;今天我来给大家分享一下&#xff0c;最大公因数和最小公倍数的求法。让我们开始吧&#xff01; 文章目录 1&#xff0c;最大公因数法1法2法3 2&#xff0c;最小公倍数3&#xff0c;尾声 …...

编程日记 2023/12/15 16:40:56

无脑利用API实现文心一言AI对话功能？(附代码)

前言&#xff1a;在当今数字化的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正在不断演进&#xff0c;为开发者提供了丰富的工具和资源。其中&#xff0c;API&#xff08;应用程序接口&#xff09;成为构建强大AI应用的关键组成部分之一。本文将介绍如何利用API来…...

编程日记 2023/12/15 16:39:55

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/7/7 17:33:09

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/7/2 5:30:43

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/6/27 7:21:20

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/6/17 16:58:36

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/7/7 21:55:30

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

编程新知 2025/7/5 1:17:25

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/7/8 7:17:15

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2025/7/3 14:45:13

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/7/8 4:36:52

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/6/16 18:42:13