从零开始配置vim(30)——DAP的其他配置

news2024/9/25 3:21:28

很抱歉这么久才来更新这一系列,主要是来新公司还在试用期,我希望在试用期干出点事来,所以摸鱼的时间就少了。加上前面自己阳了休息了一段时间。在想起来更新就过去一个多月了。废话不多说了,让我们开始进入正题。

在前一章,我们谈论了如何在 neovim 中使用cpptools 这个DAP 的适配器对代码进行调试,目前针对编译型和解释型语言来说我们都有了对应的方法来配置调试器对其进行调试。本节将要介绍关于dap的其他一些功能,主要包括 repl窗口和 gdb的集成

repl 窗口

什么是 repl 呢?它的全称是 Read Eval Print Loop 中文一般翻译为交互式解析器,可能看到这你还是一脸懵逼,你可以想想 python 或者nodejs,在控制台输入python 就可以进入到它的交互式解析器中,随着我们输入python 的语句,它会实时的给出运行的结果。交互式解析器就是这么一个东西,输入命令,它给你一个实时的结果。在调试中使用交互式解析器还是很有用的,比如我想显示当前某个变量的值,当前执行到哪个语句了等等。

nvim-dap已经提供了一个内置的 repl 窗口,我们每次启动调试的时候都会看到它每次都会创建一个新的名为 dap-replbuffer。之前我们没怎么关注它主要还是因为那个时候的重点在于如何进行调试,现在我们将要来优化这部分的显示和功能。

首先我们发现每次调试结束的时候这个buffer 都会被遗留,需要我们手动的进行关闭,除了针对buffer通用的 :q 或者 :bd命令进行关闭,还可以使用 :lua require('dap').repl.close()。当然也可以配套使用 :lua require('dap').repl.open()来打开一个 repl的窗口,既然每次都会自动新建,那么这里我们就不需要进行新建,主要用于想办法关闭就可以了。

还记得之前介绍 nvim-dapui 插件的时候介绍的那两个监听函数吗,同样的我们要在监听调试结束的函数中添加代码来关闭repl 窗口,函数的整个代码如下

dap.listeners.before.event_terminated["dapui_config"] = function()
    dapui.close({})
    dap.repl.close()
end

dap.listeners.before.event_exited["dapui_config"] = function()
    dapui.close({})
    dap.repl.close()
end

再启动调试的时候发现它已经可以在调试结束的时候自动关闭了。

在这里插入图片描述

还有另外一个问题就是我不太喜欢现在这样在最下角显示 repl。我希望它能够在最下方以整行的形式显示。或者可以方便的不显示,只有在需要的时候显示。要达成这个目的我们需要修改 dapui 的配置。
dapui 的配置主要以 element为基础,每个 element 代表一个提供对应功能的窗口。我们先来根据它默认的配置来讲解每部分的含义

require("dapui").setup({
  icons = { expanded = "", collapsed = "", current_frame = "" },
  mappings = {
    -- Use a table to apply multiple mappings
    expand = { "<CR>", "<2-LeftMouse>" },
    open = "o",
    remove = "d",
    edit = "e",
    repl = "r",
    toggle = "t",
  },
  -- Use this to override mappings for specific elements
  element_mappings = {
    -- Example:
    -- stacks = {
    --   open = "<CR>",
    --   expand = "o",
    -- }
  },
  -- Expand lines larger than the window
  -- Requires >= 0.7
  expand_lines = vim.fn.has("nvim-0.7") == 1,
  -- Layouts define sections of the screen to place windows.
  -- The position can be "left", "right", "top" or "bottom".
  -- The size specifies the height/width depending on position. It can be an Int
  -- or a Float. Integer specifies height/width directly (i.e. 20 lines/columns) while
  -- Float value specifies percentage (i.e. 0.3 - 30% of available lines/columns)
  -- Elements are the elements shown in the layout (in order).
  -- Layouts are opened in order so that earlier layouts take priority in window sizing.
  layouts = {
    {
      elements = {
      -- Elements can be strings or table with id and size keys.
        { id = "scopes", size = 0.25 },
        "breakpoints",
        "stacks",
        "watches",
      },
      size = 40, -- 40 columns
      position = "left",
    },
    {
      elements = {
        "repl",
        "console",
      },
      size = 0.25, -- 25% of total lines
      position = "bottom",
    },
  },
  controls = {
    -- Requires Neovim nightly (or 0.8 when released)
    enabled = true,
    -- Display controls in this element
    element = "repl",
    icons = {
      pause = "",
      play = "",
      step_into = "",
      step_over = "",
      step_out = "",
      step_back = "",
      run_last = "",
      terminate = "",
    },
  },
  floating = {
    max_height = nil, -- These can be integers or a float between 0 and 1.
    max_width = nil, -- Floats will be treated as percentage of your screen.
    border = "single", -- Border style. Can be "single", "double" or "rounded"
    mappings = {
      close = { "q", "<Esc>" },
    },
  },
  windows = { indent = 1 },
  render = {
    max_type_length = nil, -- Can be integer or nil.
    max_value_lines = 100, -- Can be integer or nil.
  }
})

首先最上面的 icons 表示,各个部分显示的图标,这里分别定义了展开的,合并的以及当前位置的图标信息,我们可以观察一下变量栏或者调用栈显示信息的左侧就可以看到这里定义的图标。
mappings 代表的是部分窗口动作定义的快捷键。例如上面定义的 expand = { “<CR>”, “<2-LeftMouse>” }表示可以在待展开项上按下回车或者鼠标左键双击来展开。

element_mappings表示的是我们为某些窗口特意定制的一些快捷键。例如上面注释的是针对调用栈定义的快捷键。
layouts代表布局,每个布局都有一个子table,而每个子table主要由 elementssizeposition组成,它们分别代表采取该种布局的元素(也可以说是窗口),窗口大小以及窗口的位置。窗口一般通过id来描述,每种窗口都有固定的ID,根据官方文档的描述,它支持这么几种窗口:

  • scopes显示全局或者当前局部变量,它支持的操作主要是 edit编辑变量的值、expand展开结构化的变量、repl将变量拷贝到repl窗口
  • stacks显示当前正在运行的线程以及它们对应的调用栈,它主要支持的操作是 open :运行代码到当前被选中的位置, toggle:打开或者关闭该窗口
  • watches显示我们需要追踪的变量,它支持的主要操作是 edit: 输入想要追踪的变量或者给对应的变量赋值。expand: 展开结构化的变量,remove:删除当前监视的变量,repl:将变量拷贝到repl窗口
  • breakpoints显示当前激活的断点。它支持的主要操作有 open:执行代码到当前选中的断点处, toggle :激活或者使当前断点无效
  • repl显示repl窗口
  • console显示控制台窗口
    这些窗口的这些操作的快捷键我们已经通过上方的 mappings做了定义了,只要保持光标在对应窗口然后按下快捷键就可以执行对应的窗口命令了。如果想要单独对窗口进行快捷键定义可以在element_mappings 中被注释的代码

controls 部分配置的是在repl窗口上方显示的那一堆调试按钮。由于我们定义了一些快捷键,这些按钮没太大的作用。这里我不需要它显示调试用的按键,所以我就在 controls 项中设置 enabled = false 禁用它。

floatingwindowrender则定义的是悬浮窗口样式和普通窗口的一些样式。这里就不深究了。

下面是改造之后的配置

dapui.setup({
    icons = { expanded = "", collapsed = "", current_frame = "" },
    mappings = {
        -- Use a table to apply multiple mappings
        expand = { "<CR>", "<2-LeftMouse>" },
        open = "o",
        remove = "d",
        edit = "e",
        repl = "r",
        toggle = "t",
    },
    layouts = {
        {
            elements = {
                {
                    id = 'scopes',
                    size = 0.35
                },
                {id = "stacks", size = 0.35},
                {id = "watches", size = 0.15},
                {id = "breakpoints", size = 0.15},
            },
            size = 40,
            position = "left",
        },
        {
            elements = {
                "repl"
            },
            size = 5,
            position = "bottom",
        }
    },

    controls = {enabled = false},
    floating = {
        max_height = nil, -- These can be integers or a float between 0 and 1.
        max_width = nil, -- Floats will be treated as percentage of your screen.
        border = "single", -- Border style. Can be "single", "double" or "rounded"
        mappings = {
            close = { "q", "<Esc>" },
        },
    },
    windows = { indent = 1 },
})

repl 窗口的主要命令如下:

  • .exit: 退出/关闭一个 repl 窗口
  • .c/.continue: 继续执行代码
  • .n/.next: 执行下一行代码
  • .into: 跳转到函数中继续执行
  • .out: 跳出函数
  • .scopes: 打印当前栈的一些变量信息
  • .threads: 打印线程信息
  • .frames: 打印当前线程的调用栈
  • .capabilities: 打印当前适配器实现的一些功能
  • .p 暂停当前运行的程序

更多的命令可以通过在 repl窗口中输入 .help查看
看了这么多无聊的文字描述,不知道小伙伴们有没有觉得头晕眼花呢?我们来通过实际的例子来看看如何应用这些内容来进行调试。

示例1:调试单线程死循环

假设有一段程序在不知不觉中被写成死循环了,程序无法正常执行下面的操作,我们以下面的程序为例

#include <stdio.h>
#include <unistd.h>

void loop_forever(){
    for(unsigned int i = 10; i >= 0; --i){
        // do something
        sleep(0.1);
    }
}

int main (int argc, char *argv[])
{
    // do something
    loop_forever();
    printf("do other things\n");
    return 0;
}

本来我们想的是它执行完函数 loop_forever之后会执行接下来的操作,但是我们死活看不到它执行后面的操作,这个时候我们意识到它可能在某个地方陷入死循环,无法出来了,假设前后都有大断的代码,无法快速定位到死循环的位置,该如何处理这种情况呢?

我们先通过<F5>来执行操作,然后在 repl 中输入 i 进入插入模式,然后执行.p 中断当前程序执行。
在这里插入图片描述

此时程序已经断了下来,接着我们输入.frames 查看当前调用栈信息。
在这里插入图片描述
我们发现此时程序停留在loop_forever 函数的 sleep 中,我们在栈中找到 sleep 的位置并按下回车,这个时候我们发现程序执行到了 sleep() 函数处了。这个时候我们在这里按下<F9>下一个断点,接着使用 <F5> 继续运行到断点位置停止,这个时候我们通过实时显示的 i值已经发现问题所在了。
在这里插入图片描述
原来i 递减到0之后,继续递减,因为它是无符号数所以永远无法达成小于0 的条件。

示例2:调试多线程死锁

我们以下面一个多线程程序为例

#include <cstdio>
#include <thread>
#include <vector>

using namespace std;
void func(int thread_id){
    int var = thread_id;
    while(true);
}
int main (int argc, char *argv[])
{
    vector<thread> vec;
    for(int i = 0; i < 5; i++){
        vec.push_back(thread(func, i));
    }

    // join
    for(int i = 0; i < 5; i++){
        vec[i].join();
    }

    return 0;
}

因为使用了c++ 相关的内容和 thread 库,因此编译的时候需要使用 g++ 并且指定链接 pthread 库,我们采用 g++ main.cpp -g -o main -lpthread 来编译它

我们还是按照之前的步骤,先按下 .p来暂停程序,这个时候我们发现它会提示我们需要暂停哪个线程,遗憾的是根据线程的id还没法判断具体哪个是子线程哪个是主线程。这里我们随便选一个暂停。
在这里插入图片描述
在这里插入图片描述
然后执行 .threads查看当前线程信息,在某个线程下使用回车键可以看到调用的函数栈。我们发现子线程卡在while 这句话,我们还是一样在卡主的位置按下回车跳转到对应代码位置,在此处下一个断点。然后我们在对应线程位置按下 o 命令来继续执行之前暂停的线程。这样就完美的找到了线程卡死的位置了。
在这里插入图片描述
在这里插入图片描述
后面可以使用 .c 来继续执行所有被中断的线程

nvim-gdb 插件

该插件提供了一种方式,可以直接在neovim中进入gdb的session。例如我们可以通过命令 :GdbStart gdb -q a.out来启动一个gdb会话,并且关联了一个 a.out 的程序。后续可以直接使用gdb相关的命令来启动调试这个程序。我们可以使用如下的代码来安装它

use {"sakhnik/nvim-gdb", run="./install.sh"}

我们先来试试效果,直接使用快捷键 <leader>dd 来加载一个程序进行调试。进入到gdb会话之后可以使用gdb 的命令。例如我们使用 b main来在 main函数的位置打一个断点,然后通过r来启动程序运行到断点处。接着可以使用 n来执行下一步或者使用 c来直接运行到下一个断点。最后可以使用 q退出
在这里插入图片描述

基础配置

我们发现使用 nvim-gdb 插件的时候会在对应代码位置显示断点或者当前执行行。这里我们对它做一些配置,先统一使用nvim-gdbnvim-dap这两种情况下的显示信息。
先创建一个新的配置文件为 nvimgdb.lua作为它的配置文件。
因为它暂时还不支持lua的配置所以这里我们使用vim原生的写法。

vim.cmd([[
    let g:nvimgdb_config_override = {
    \ 'sign_breakpoint': [''],
    \ 'sign_current_line': '',
    \ }
]])

在这里定义了断点和执行到当前行的配置,这里只能统一图标,还无法做到完全像使用 dap那样显示。
另外我们可以在 nvimgdb_config_override 这个变量中定义如下快捷键以保证在调试时拥有同样的体验

    \ 'key_next': '<F10>',
    \ 'key_step': '<F11>',
    \ 'key_continue': '<F5>',

在这里插入图片描述
最后我们发现当我们输入文件名进行调试的时候,它会一直闪屏。这是因为它会不断根据我们输入的内容在文件系统中匹配合适的可执行文件,为了解决闪屏问题我们屏蔽它的这个特性,我们可以使用如下的配置来解决这个问题

    let g:nvimgdb_use_find_executables = 0
    let g:nvimgdb_use_cmake_to_find_executables = 0

在这里插入图片描述

显示窗口的配置

定义了显示形式,我们来定义显示的窗口,这里我让它显示常用的像调用栈,变量,以及watch窗口。我们先使用如下代码来将窗口分割为左右两个部分

    let w:nvimgdb_termwin_command = "rightbelow vnew"
    let w:nvimgdb_codewin_command = "vnew"

根据官方文档的描述,nvimgdb_termwin_command 是终端窗口,用来显示repl 相关信息并且与用户交互,后面我们可以对它进行切割用于显示其他信息。nvimgdb_codewin_command 是源代码窗口。这两句代码可以形成一个左右分屏的界面,左侧显示代码,右侧显示repl窗口。
在这里插入图片描述
gdb成功加载之后,我们可以使用命令 :GdbCreateWatch info locals来创建一个显示当前变量的窗口。默认是新创建一个窗口来显示,但是我们可以在命令前加上 belowright来指定在右侧继续分屏,它会在右下角新建窗口来显示变量。需要查看其它窗口可以对应传入不同的参数,例如传入 breakpoints来显示所有断点信息。传入的参数就是gdb中接收的对应参数。

在这里插入图片描述

有了这些基础我们就可以对其进行配置了,我们要实现的目标就是当gdb成功加载的时候自动加载这些窗口。在vim中要实现自动化我们目前知道有两种方式,第一种使用自动命令,第二种使用插件配置中提供的回调函数。遗憾的是在这个插件中我没有找到回调函数,因此我们只能采用自动命令这种方法。根据官方的文档,我们主要使用这么两个事件——NvimGdbStartNvimGdbCleanup。它们一个是成功加载gdb的时候触发,一个是关闭gdb会话的时候触发。

vim.cmd([[augroup GdbSession
autocmd!
autocmd User NvimGdbStart :lua StartGdbSession()
autocmd User NvimGdbCleanup :lua EndGdbSession()
augroup END]])

StartGdbSession 函数中写入如下代码来完成窗口的配置

StartGdbSession = function()
    vim.api.nvim_command(":belowright GdbCreateWatch backtrace")
    vim.api.nvim_command(":wincmd h")
    vim.api.nvim_command(":belowright GdbCreateWatch info locals")
    vim.api.nvim_command(":set wrap")
    vim.api.nvim_command(":wincmd k")
end

不知道各位小伙伴能不能理解这段代码是如何在分屏的。
首先启动gdb的时候会将整个屏幕纵向分为两个部分,左侧为 code右侧为 repl窗口
接着我们执行 :belowright GdbCreateWatch backtrace 它会在右下方创建一个窗口用来展示调用栈
然后执行 :wincmd h来将光标移动到代码窗口上
继续执行 :belowright GdbCreateWatch info locals它会在代码窗口的下方新增一个窗口用于显示变量的信息

这样就将窗口分为4个部分了,左上部分显示代码,左下部分显示变量信息。右上部分是repl窗口,右下部分显示变量信息。
最后我们通过 :set wrap设置窗口中自动换行,不然有些内容显示在一行不容易查看。通过 :wincmd k移动光标到 repl窗口。方便后续调试
启动之后他的效果如下
在这里插入图片描述
最后我们在结束gdb的时候做一些收尾工作,关闭我们创建的窗口

EndGdbSession = function()
    vim.api.nvim_command(":bdelete! backtrace info locals")
end

这里我是根据buffer的名称来进行删除。最后的效果如下
在这里插入图片描述

到此我们已经介绍了关于dap 的所有配置,至于其他语言相信各位小伙伴根据官方给出的示例可以独立完成配置,这里就不一一介绍了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/130180.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JUC 并发进阶学习(一)

该学习笔记是本人依据相关的学习视频整体汇总&#xff0c;相关的视频学习可以自己去搜看看。 【狂神说Java】JUC并发编程最新版通俗易懂_哔哩哔哩_bilibili 一、什么是JUC 从中就可以看出JUC&#xff0c;实质就是三个包&#xff0c;后面晖详细说明三个包下各个类功能。 java.…

程序员的测试课

git项目地址&#xff1a;GitHub - dreamhead/geektime-todo: Geektime Todo is a demo todo project for Geektime column. 1、实现一个Todo应用 设计规范 1、对于输入参数的检测&#xff0c;由入口部分代码进行处理。如空字符串。 2、Repository 的问题以运行时异常 的形式抛…

Django+Celery+Flower实现异步和定时任务及其监控告警

用Django框架进行web开发非常的快捷方便&#xff0c;但Django框架请求/响应是同步的。但我们在实际项目中经常会碰到一些耗时的不能立即返回请求结果任务如&#xff1a;数据爬取、发邮件等&#xff0c;如果常时间等待对用户体验不是很好&#xff0c;在这种情况下就需要实现异步…

SOFA Weekly|2023 我们一起加油、本周 Contributor QA

SOFA WEEKLY | 每周精选 筛选每周精华问答&#xff0c;同步开源进展欢迎留言互动&#xff5e;SOFAStack&#xff08;Scalable Open Financial Architecture Stack&#xff09;是蚂蚁集团自主研发的金融级云原生架构&#xff0c;包含了构建金融级云原生架构所需的各个组件&#…

RocketMQ 搭建

目录 1、什么是MQ&#xff1f;为什么要用MQ&#xff1f; 2、MQ的优缺点 3、几大MQ产品特点比较 4.RocketMQ在Windows的启动 1.下载RocketMQ 4.7.1版本 2.解压到本地磁盘并配置好JAVA_HOME和ROCKETMQ_HOME 3.修改runserver.cmd 4.启动server 5.修改runbroker.cmd 6.启动…

ROS2 基础概念 服务

ROS2 基础概念 服务1. Services2. 服务类型3. 查找服务4. 服务请求1. Services 服务基于 请求-应答 模型&#xff0c;而不是话题的 发布-订阅 模型 虽然话题允许节点订阅数据流并获得持续更新&#xff0c;但服务 仅在客户端专门调用时提供数据 还是启动海龟及其遥控节点为例&…

[标准库]STM32F103R8T6 点灯以及按键扫描

刚开始学32的时候&#xff0c;选择了基于HAL库进行开发&#xff0c;原因是HAL比较容易上手&#xff0c;像点灯、输出PWM、按键输入这种操作都很快捷。但是到ADCDMA这部分的时候发现&#xff0c;HAL库有一些地方我认为不是很合理和方便。比如DMA中断这部分&#xff0c;ST官方给出…

音视频开发系列--H264编解码总结

一、概述 H264&#xff0c;通常也被称之为H264/AVC&#xff08;或者H.264/MPEG-4 AVC或MPEG-4/H.264 AVC&#xff09; 对摄像头采集的每一帧视频需要进行编码&#xff0c;由于视频中存在空间和时间的冗余&#xff0c;需要用算法来去除这些冗余。H264是专门去除这些冗余的算法…

王者荣耀崩溃解决记录

王者荣耀竟然崩溃了 上周玩王者荣耀&#xff0c;突然就进不去了&#xff0c;点击开始游戏后应用直接就崩溃退出了。 第一反应&#xff0c;肯定是反馈给游戏客服。但是果然腾讯的游戏是找不到真客服的&#xff0c;全部都是机器人处理的&#xff0c;给了我一个毫无用处的官方回…

springboot中配置文件优先级以及分类,这你都可以不会吗?不会赶紧进来学( ̄(∞) ̄)

各位小伙伴大家好呀┗( ▔, ▔ )┛&#xff0c;马上过年了&#xff0c;但是感觉没啥期待的哈哈哈哈哈&#xff0c;现在的年说实话真的挺没劲的呜呜。 言归正传&#xff0c;我们大家在使用springboot时难免会写各种各样的配置信息&#xff0c;比如port&#xff0c;jdbc啊这些&am…

2022这一年:阳了、变轨和逆风

又到年末了&#xff0c;2022这一年应该会让人记忆深刻&#xff0c;于我而言这一年的感受有明显的分界线&#xff0c;在此之前的世界温暖一些&#xff0c;提供着能量&#xff0c;让人心生探索它的纷繁多彩&#xff1b;今年世界变得寒冷了&#xff0c;展示着它的严酷与无情。阳了…

再学C语言20:循环控制语句——for循环

在while循环中&#xff0c;建立一个重复执行固定次数的循环涉及到3个动作&#xff1a; 1&#xff09;初始化一个计数器 2&#xff09;计数器与某个有限的值比较 3&#xff09;每次执行循环&#xff0c;要在循环体中让计数器的值递增 其中&#xff0c;计数器的初始化在循环之…

【pandas】教程:6-如何计算摘要统计

Pandas 计算摘要统计 本节使用的数据为 data/titanic.csv&#xff0c;链接为 pandas案例和教程所使用的数据-机器学习文档类资源-CSDN文库 加载数据 import pandas as pdtitanic pd.read_csv("data/titanic.csv") titanic.head()PassengerId Survived Pclass \…

#Z0424. 树上的旅行

题目 Description 给出一棵有N个结点的树&#xff0c;给出Q个询问&#xff0c;求结点xj过结点K到节点yj的最短距离 Format Input 第一行一个数n 接下来共有n-1行&#xff0c;三个数u,v,len表示u和v之间存在一条边长为len 再给你Q&#xff0c;K。代表有Q个询问&#xff0…

视频 | bedtools使用介绍1

点击阅读原文跳转完整教案。基因组中的趣事&#xff08;二&#xff09;- 最长的基因2.7 million&#xff0c;最短的基因只有8 nt却能编码基因组中的趣事&#xff08;一&#xff09;&#xff1a;这个基因编码98种转录本1 Linux初探&#xff0c;打开新世界的大门1.1 Linux系统简介…

10000+条数据的内容滚动功能如何实现?

遇到脑子有问题的产品经理该怎么办&#xff1f;如果有这么一个需求要你在一个可视区范围内不间断循环滚动几千上万条数据你会怎么去实现&#xff1f; 且不说提这个需求的人是不是脑子有问题&#xff0c;这个需求能不能实现&#xff1f;肯定是可以的&#xff0c;把数据请求回来渲…

2022蓝桥杯省赛C++A组初尝试

前言 耗时三个半小时&#xff0c;看看自己不懂的有多少&#xff0c;以便明确后续备赛2023方向 耗时3个半小时&#xff0c;只拿了18分&#xff0c;没学过&#xff0c;时间再多也做不出来&#xff0c;有奥数那感觉了 据说蓝桥杯省3得做对 2填空 2大题&#xff08;30分&#x…

PMP®项目管理|不同场景使用不同沟通方式

不同沟通方式的确有适用场景和不适用场景。无效沟通的重要原因之一就是错误选择沟通方式。 我们会在工作中用到很多沟通方式&#xff0c;每种沟通方式都有适用的场合&#xff0c;也有不适用的场合&#xff0c;错误选择将使沟通变得低效甚至无效。 沟通方式主要有三种&#xf…

一百种语言的LOVE

2023年快要到来啦&#xff0c;很高兴这次我们又能一起度过~ 目录 一、前言 二、详细介绍 三、效果展示 四、代码编写 index.html script.js style.css 五、获取代码 需要源码&#xff0c;可以私信我(⊙o⊙)&#xff1f;关注我&#xff1f; 一、前言 时光荏苒&#xf…

vue element-ui 手机号校验 验证码校验 获取验证码倒数60秒无样式实现

这段时间被迫搞前端搞裂开了&#xff0c;记录一下手机号验证码校验登录的极简无样式前端实现 巨丑&#xff01;希望大佬们不介意 下面是先演示效果 点击登陆后显示校验信息 输入手机号点击获取验证码 输入符合校验的内容后点击登录提示成功 无后端交互&#xff01;&#…