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

Layui深入

news 2026/2/7 15:07:49

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

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2026/1/30 3:28:14

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/2/4 16:07:02

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/1/3 7:21:08

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/9/21 23:43:15

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

编程新知 2025/10/31 16:09:12