前端开发中实用小技巧

news2024/11/20 16:30:37
  1. 运行javascript小技巧
// 1.直接在浏览器的地址栏中输入一下代码：
	javascript:alert('hello world')
// 2.注意事项
	ie和chrom回自动去掉开头的 【javascript:】需要手动添加
	火狐浏览器不支持这个技巧
// 3.场景
	快速测试一段js代码
  1. 运行HTML代码的神奇技巧
// 1.直接在浏览器中运行
data:text/html,<h1>Hello,world</h1>
// 2.玩转HTML代码
可以尝试输入更复杂的代码，样式、脚本
// 3.兼容性和注意事项
不是所有的浏览器都支持
// 4.使用场景
没有专门的编辑器，想快速验证一段HTML代码的效果
  1. 将浏览器地址栏的秘密功能：将浏览器变身原始编辑器
// 1.怎么做
data:text/html,<html contenteditable>
// 2.功能
不仅仅只限于文字，可以写HTML，CSS，JS
// 注意事项
适合快速编辑和测试
  1. 一行代码使整个页面成为你的编辑器
// 1.鼠标右键或者f12打开编辑器 在控制台输入
document.body.contentEditable="true"
// 2.创造和探索
	不仅仅可以让页面可编辑
	可以轻松的修改页面内容，实时查看效果
// 3.注意事项
	编辑页面的时候，要确保保存了重要的更改
// 4.场景
	快速编辑页面、演示效果、临时调整
  1. .利用a标签轻松解析URL，轻松提取所需信息
// 1.怎么做
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href=""></a>
</body>
<script>
    var a = document.createElement('a')
    a.href = "http://www.baidu.com"
    console.log(a.host)
    console.log(a.pathname)// 获取路径
    console.log(a.search)// 获取查询字符串
</script>
</html>
// 2.场景
获取当前页面的域名
解析一个包含参数的url
// 3.注意事项
兼容性
  1. HTML元素ID与全局变量：JavaScript中的巧妙链接
// 1.怎么用 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    console.log(box)
</script>
</html>
// 2.注意事项
id属性就是创建全局变量 可能导致命名冲突 谨慎使用id确保代码的可读性和可维护性
// 3. 常规做法
document.getElementById
// 4.场景
在小型项目或者个人实验
  1. 优雅而安全：CDN文件加载时省略HTTP标识
// 1.怎么做
<script src="https://baidu.com/path/to/jq.js"></script>
通过省略协议标识，加载文件，这样会让浏览器自动去匹配对应的协议 提升安全性
<script src="//baidu.com/path/to/jq.js"></script>
// 2.注意事项
实际使用时注意CDN服务器是否支持这两种协议
// 3.应用
JQ , Bootstap..这些常用库
  1. script标签的隐秘功能:利用type=‘text’ 存储任意信息
// 1.怎么用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body></body>
<script type="text" id="box">
    <h1>122456</h1>
    789
    <p>我们的祖国是花园花园的花朵真鲜艳</p>
</script>
<script>
    var text = document.getElementById('box').innerHTML
    console.log(text)
</script>

</html>
// 2.场景
在页面中存入一些配置信息、模板内容
// 3.注意事项
注意不要存储敏感信息
  1. 隐藏鼠标光标，开启无形模式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        cursor: none !important;
    }
</style>
<body></body>
</html>
  1. 用两行代码打造文字模糊效果
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p {
        color: transparent;
        text-shadow: #111 0 0 5px;
    }
</style>
<body>
    <div>关关雎鸠，在河之洲</div>
    <div>窈窕淑女，君子好逑</div>
    <div>参差荇菜，左右流之</div>
    <div>窈窕淑女，寤寐求之。</div>
    <p>求之不得， 寤寐思服</p>
    <div>悠哉悠哉，辗转反侧</div>
    <div>参差荇菜， 左右采之。</div>
    <div>窈窕淑女， 琴瑟友之</div>
</body>
</html>
  1. CSS3打造多重边框
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 400px;
        height: 200px;
        margin: 50px auto;
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2)
    }
</style>

<body>
    <div></div>
</body>

</html>

在这里插入图片描述

  1. CSS实时编辑：逆天技巧让样式在眼前变换
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style contentEditable style="display: block;height: 100px;overflow: auto;">
        div {
            width: 100px;
            height: 100px;
        }
    </style>
    <div>(｡･∀･)ﾉﾞ嗨</div>
</body>
</html>
// 1. 显示编辑区域
	把style标签的contentEditable属性设置位可编辑，可以让变迁样式成为一个实时编辑区域
// 2.实时调试效果

在这里插入图片描述

  1. CSS运算：calc方法让样式动起来
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: calc(200px - 50px);
        height: calc(200px - 50px);
        border: 1px solid;
    }
</style>
<body>
    <div>(｡･∀･)ﾉﾞ嗨</div>
</body>
</html>
// 1.calc 方法
简单的数学运算
// 2.动态指定
// 3.适用性和响应式
// 4.兼容考虑
适度的选用calc方法
// 5.注意
calc方法 运算符 两端需要空格 没有空格不生效
  1. 用Math.random和toString打造随机字符串
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div-style {
        width: calc(200px - 50px);
        height: calc(200px - 50px);
        border: 1px solid;
    }
</style>

<body>
    <div class="div-style">
        (｡･∀･)ﾉﾞ嗨
        <div id="math"></div>
    </div>
</body>
<script>
    // 1.Math.random的随机性
    // 2.toString方法的妙用（36 代表转换成36进制的字符串）
    // 3.循环拼接字符串 利用substr()截取字符串
    // 4.返回指定长度的随机字符串
    function getStrNum(len) {
        var rdmStr = '';
        for (; rdmStr.length < len; rdmStr += Math.random().toString(36).substr(2));
        return rdmStr.substr(0, len)

    }
    var div = document.getElementById('math')
    div.innerHTML = getStrNum(15)
</script>

</html>
  1. 高效处理整数，妙用 | 0和 ~~！
  // 1.位操作符还是双取反 都会巧妙的把浮点数转换成整数
    // 2.高效性能 在处理像素和动画位移 提高运算效率
    // 3.对比性 它们都能快速的把结果转成整数，比传统的方法更为高效（传统的方法：parseInt,math.random 等等）
    // 4.轻松转换 在需要浮点转成整数的情况下 我们使用位操作符更快更有效率
    // 5.在前端开发中 特别时在性能要求较高的一些场景，合理运用这些操作符，能够使代码更为精炼，并且运行更为迅速
    var a = (12.4 / 4.13) | 0
    var b = ~~(12.4 / 4.13)
    console.log(a, b) // 3 3
  1. 突破枷锁，快速转换布尔值的巧妙方法
    // 快速判断真假
    // 简洁高效
    // 对象存在性检测
    var win = !!0
    console.log(win)// false
  1. 通过重写浏览器方法揭秘弹窗次数的奇妙秘密
  (function () {
        var oldAlert = window.alert, count = 0;
        window.alert = function (a) {
            count++;
            oldAlert(a + '\n 弹出次数:' + count + '快停下')
        }
    })()
    alert('hello word 0')
    alert('hello word 1')
    alert('hello word 2')
    alert('hello word 3')
  1. console.log搞笑恶作剧
    // 1.重写console.log方法
    var _log = console.log;
    console.log = function () {
        _log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 9px rgba(0,0,0,.5);')
    }
    console.log('123456哈哈哈哈哈')
  1. JavaScript变量值的不寻常交换方式：巧用数据解构
    // 1.数据结构
    var a = 1, b = 2;
    a = [b, b = a][0]
    console.log(a, b)// a=2 b=1
  1. 禁止iframe加载页面
    // 防范iframe加载
    // 这行代码就是当前页面是否是作为iframe的子页面加载的 如果是 那就通过父页面的location设置位当前页面的location
    // 迫使整个页面跳转到当前页面从而达到放在在iframe当中加载的目的
    //  安全性增强 可以有效的减少不必要的嵌套风险 给网站带来更安全的一个性能 代码简洁高效 易于理解和维护
    if (window.location != window.parent.location) window.parent.location = window.location
  1. console.table
  var table = [
        {
            name: 'zs', age: '18'
        },
        {
            name: 'ls', age: '16'
        },
    ]
    console.table(table)

在这里插入图片描述
22. HTML中被忽略的宝藏 -<datalist>元素</title>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input list="animalslist" name="animal" id="animal">
    <datalist id="animalslist">
        <option value="cat"></option>
        <option value="dog"></option>
        <option value="cow"></option>
        <option value="pig"></option>
    </datalist>
</body>
<script>
</script>
</html>

在这里插入图片描述
23. lable元素与复选框

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
    <input type="checkbox" name="" checkbox id="checkbox_id" value="value" />
    <label for="checkbox_id">我同意</label> 
    -->
    <label>
        <input type="checkbox" name="" checkbox id="checkbox_id" value="value" />
        我同意
    </label>
</body>
</html>

24.Writing Mode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        width: 200px;
    }
    .box2 {
        writing-mode: vertical-lr;
    }
</style>

<body>
    <div class="box1">日照香炉生紫烟</div>
    <div class="box2">日照香炉生紫烟</div>
</body>

</html>

在这里插入图片描述

  1. JavaScript的In操作符
  // 通过 in 轻松检查是否存在索引
    // in 操作符提供了一种简洁的方式来检查数组中特定索引是否存在，避免了繁琐的遍历操作
    // 一行代码就完成了索引的检查，减少了冗余代码
    let cars = ['audi', 'bmw', 'mini', 'bentley', 'porsche']
    console.log(0 in cars)// true
    console.log(3 in cars)// true
    console.log(6 in cars)// false
    console.log(9 in cars)// false
  1. 巧用逗号，JavaScript中的if语句省略大括号
// 利用逗号省略大括号，代码看起来更为简洁，适用于短小的if语句 在某些情况下，避免了输入大括号的冗余，提高了代码的整体可读性
<script>
  if (1 === 1)
        alert('alert 1'), alert('alert 2')
   if (abc)
        alert('alert 1'), alert('alert 2')
    else
       alert('no')
</script>
  1. inset属性的妙用 简洁明了
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        width: 50px;
        height: 50px;
        border: 1px solid;
        position: relative;
    }

    .box2 {
        position: absolute;
        width: 20px;
        height: 20px;
        border: 1px solid red;
        inset: 5px 0 0 10px;
    }
</style>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
<script>

</script>

</html>

在这里插入图片描述

  1. 不借助CSS和JavaScript，元素本地消失
// 无需额外代码，使用hidden属性，就可以轻松实现
  <div hidden>
        鹅鹅鹅
    </div>
  1. 将我JavaScript黑科技：轻松检测你的网络带宽
<body>
    网络带宽
    指在一定时间内通过互联网链接传输的数据量
    通常以兆位每秒位单位Mbps
</body>
<script>
    var banWidth = navigator.connection.downlink
    console.log('带宽位：' + banWidth + ' Mpbs')
</script>
  1. 护航隐私
   // 1.阻止F12快捷键   
    window.onkeydown = function (e) {
        if (e.keyCode = 123) {
            return false
        }
    }
    // 2.禁用右键菜单
    document.addEventListener('contextmenu', function (e) {
        e.preventDefault()
    })
  1. JavaScript中的无穷奇迹：解析 a===a-1的神秘真相
<script>
    // 在js中 无穷大 减去或者加上任意数值 仍然是无穷大
    let a = Infinity
    console.log(a === a - 1) //true
    let b = -Infinity
    console.log(b === b - 1) //true
</script>
  1. JavaScript之冰封守卫：Object.freeze()的神奇力量
    // 即便对当前对象做各种行为 初始对象都不会改变
    // 确保对象不被更改
    const obj = {
        name: '张三',
        age: 20
    }
    Object.freeze(obj)

    obj.name = '李四'
    obj.age = 18
    delete obj.age
    console.log(obj)// {name: '张三', age: 20}
  1. JavaScript巧思：用闭包谱写防抖函数
<script>
    // 防抖：防抖函数的作用就是确保某个时间段内，无论触发多少次时间，只执行一次回调
    function debounce(callback, delay) {
        let timer;
        return function (...args) {
            clearTimeout(timer)
            timer = setTimeout(() => {
                callback.apply(this, args)
            }, delay)
        }
    }
    // 使用
    const fun = debounce(() => {
        console.log('防抖函数触发，执行一次')
    }, 3000)
    for (let i = 0; i < 10; i++) {
        fun()
    }

</script>
  1. …扩展运算符
<script>
    const arr1 = [1, 2, 3]
    const arr2 = [2, 4, 5, 6]
    const arr3 = [...arr1, ...arr2]
    console.log(arr3)// [1, 2, 3, 2, 4, 5, 6]
</script>

.

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

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

相关文章

TensorFlow安装CPU版本和GPU版本

TensorFlow安装CPU版本和GPU版本

文章目录 前言一、TensorFlow安装CPU版本1.新建虚拟环境2.激活虚拟环境3.下载tensorflow4.验证是否下载成功 二、TensorFlow安装GPU版本1.新建虚拟环境2.激活虚拟环境3.安装tensorflow-gpu4.验证是否下载成功 前言 下载的Anaconda是Anaconda3-2024.02-1-Windows-x86_64版本 一…
阅读更多...
firewalld防火墙转发流量到其他端口forward port rules

firewalld防火墙转发流量到其他端口forward port rules

假设云主机eth0: 47.93.27.106 tun0: inet 10.8.0.1 netmask 255.255.255.0 Show rules for a specific zone (public) sudo firewall-cmd --zonepublic --list-all Add the tun0 interface to the public zone: sudo firewall-cmd --zonepublic --add-interfacetun0 --…
阅读更多...
MTK7621交换芯片配置

MTK7621交换芯片配置

MTK7621上自带的交换芯片为mt7530 admin@OpenWrt:~# /sbin/swconfig list Found: switch0 - mt7530 交换芯片的配置工具为swconfig程序。MTK7621采用内部的MDIO（Management Data Input/Output）接口管理MT7530的switch芯片。 MT7530共有7个物理口，通过/sbin/swconfig dev …
阅读更多...
isupper()方法——判断字符串是否全由大写字母组成

isupper()方法——判断字符串是否全由大写字母组成

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 isupper()方法用于判断字符串中所有的字母是否都是大写。isupper()方法的语法格式如下&#xff1a; str.isupper() 如果字符串中包含至少…
阅读更多...
linux虚拟机部署的MySQL如何使用外网访问？教你轻松使用cpolar在centos搭建内网穿透

linux虚拟机部署的MySQL如何使用外网访问？教你轻松使用cpolar在centos搭建内网穿透

文章目录 写在前面实现Linux的内网穿透1、官网账号注册2、在Linux部署我们自己的项目3、一键自动下载安装cpolar4、设置自己的token5、启动cpolar服务6、MySQL穿透测试 卸载方法 写在前面 相信很多小伙伴在本地搭建了一个MySQL数据库&#xff0c;想让其他同事或者合作者一起使…
阅读更多...
【AI大模型】跌倒监控与健康：技术实践及如何改变未来

【AI大模型】跌倒监控与健康：技术实践及如何改变未来

文章目录 1. **背景与意义**2. **关键技术与方法**2.1 传感器数据融合2.2 深度学习模型2.3 行为模式识别2.4 预测与预防 3. **应用场景**3.1 老年人跌倒预警3.2 康复患者监测3.3 高风险职业防护 4. **实践案例**案例1&#xff1a;某老年社区的跌倒预警系统案例2&#xff1a;康复…
阅读更多...
【FreeRTOS】空闲任务

【FreeRTOS】空闲任务

目录 空闲任务及其钩子函数介绍使用钩子函数的前提 实际操作任务如何退出&#xff1f;IDLE函数 空闲任务及其钩子函数 介绍 空闲任务(Idle任务)的作用之一&#xff1a;释放被删除的任务的内存。 除了上述目的之外&#xff0c;为什么必须要有空闲任务? 这是一个良好的程序&…
阅读更多...
使vim创建.sh文件时自动添加头部描述信息

使vim创建.sh文件时自动添加头部描述信息

目录 需求解决方案vimrc配置文件常见选项 修改vimrc功能解释 效果 需求 在编写shell脚本时&#xff0c;为了便于后续阅读或修改或SOP需求&#xff0c;我们常常会在shell脚本前添加一些描述信息&#xff0c;用于标注其作用和shell版本&#xff0c;例如&#xff1a; #!/bin/bas…
阅读更多...
mongodb在windows环境安装部署

mongodb在windows环境安装部署

一、mongodb 1.释义 MongoDB 是一种开源的文档型 NoSQL 数据库管理系统&#xff0c;使用 C 编写&#xff0c;旨在实现高性能、高可靠性和易扩展性。MongoDB 采用了面向文档的数据模型&#xff0c;数据以 JSON 风格的 BSON&#xff08;Binary JSON&#xff09;文档存储&#x…
阅读更多...
Android经典面试题之Glide的缓存大揭秘

Android经典面试题之Glide的缓存大揭秘

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 Glide缓存 关联类&#xff1a;Engine、LruResourceCache、LruCache、ActiveResources ActiveResources&#xff1a;弱引用缓存池 VisibleForTe…
阅读更多...
React-Native优质开源项目

React-Native优质开源项目

React Native 是一个由 Facebook 开发的开源框架&#xff0c;允许开发者使用 JavaScript 和 React 来构建原生移动应用。它允许开发者编写一次代码&#xff0c;然后可以在 iOS 和 Android 平台上运行&#xff0c;而无需为每个平台单独编写代码。以下是 React Native 的一些关键…
阅读更多...
现代信息检索笔记（二）——布尔检索

现代信息检索笔记（二）——布尔检索

目录 信息检索概述 IR vs数据库: 结构化vs 非结构化数据 结构化数据 非结构化数据 半结构化数据 传统信息检索VS现代信息检索 布尔检索 倒排索引 一个例子 建立词项&#xff08;可以是字、词、短语、一句话&#xff09;-文档的关联矩阵。 关联向量 检索效果的评价 …
阅读更多...
ESP32-C3(基本信息)

ESP32-C3(基本信息)

ESP32-C3 是一款低功耗、高集成度的 MCU 系统级芯片 (SoC)&#xff0c;它集成了 2.4 GHz Wi-Fi 和低功耗蓝牙 (Bluetooth LE) 无线通信功能&#xff0c;并拥有丰富的外设接口和先进的电源管理机制。 主要特性&#xff1a; 无线通信&#xff1a; 支持 2.4 GHz Wi-Fi (802.11b/…
阅读更多...
JVM（13）：虚拟机性能分析和故障解决工具之Visual VM

JVM（13）：虚拟机性能分析和故障解决工具之Visual VM

1 Visual VM作用 是到目前为止随JDK发布的功能最强大的运行监视和故障处理程序&#xff0c;并且可以遇见在未来一段时间内都是官方主力发展的虚拟机故障处理工具。官方在VisualVM的软件说明中写上了“All-in-One”的描述字样&#xff0c;预示着他除了运行监视、故障处理外&…
阅读更多...
SpringBoot实现文章点赞功能

SpringBoot实现文章点赞功能

提示&#xff1a;今日是2024年的6月30日&#xff0c;未来的你看到这篇文章&#xff0c;希望你依旧快乐 文章目录 前言 首先在这里前缀部分我就不做要求了,比如说登录信息什么的 数据库表格 这里实现点赞功能&#xff0c;主要是围绕论坛项目完成的 user_info代表用户信息表 for…
阅读更多...
动态系统开发方法（DSDM）: 基于RAD的全面指导与管理

动态系统开发方法（DSDM）: 基于RAD的全面指导与管理

目录 前言1. 动态系统开发方法概述1.1 DSDM的起源与背景1.2 DSDM的核心理念 2. DSDM的关键原则2.1 用户主动参与2.2 频繁交付2.3 时间盒管理2.4 高效的合作 3. DSDM的主要阶段3.1 可行性研究阶段3.2 业务研究阶段3.3 原型开发阶段3.4 设计与构建阶段3.5 部署阶段3.6 维护与支持…
阅读更多...
MicroBin好用的粘贴板工具

MicroBin好用的粘贴板工具

有时候你可能想从一台电脑上粘贴文本到另一台电脑上&#xff0c;或者是你想要分享一张图片或者是一些文件&#xff0c;某些设备上登陆qq和微信有不太方便&#xff0c;那么就可以使用MicroBin&#xff0c;它不但可以实现跨设备复制粘贴的功能&#xff0c;还支持文件上传等功能 …
阅读更多...
基于改进滑模、经典滑模、最优滑模控制的永磁同步电机调速系统MATLAB仿真

基于改进滑模、经典滑模、最优滑模控制的永磁同步电机调速系统MATLAB仿真

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介 针对永磁同步电机调速系统的响应性能和抗干扰能力问题&#xff0c;本文做了四个仿真&#xff0c;分别为&#xff1a;永磁同步电机的PID控制调速系统、基于传统滑模控制的永磁同步电机的调速系统、最…
阅读更多...
Windows 系统 Solr 8.11.3 安装详细教程（最新）

Windows 系统 Solr 8.11.3 安装详细教程（最新）

Windows 系统 Solr 8.11.3 安装详细教程 说明什么是Solr下载与解压如何启动启动命令&#xff1a;浏览器中打开dashboard其他命令查看关闭命令 说明 本次只是简单安装&#xff0c;为了在项目中使用&#xff0c;如果在公开服务器中安装需要更改开放端口&#xff0c;配置权限等。 …
阅读更多...
echarts 图例有数值但是柱子不显示问题

echarts 图例有数值但是柱子不显示问题

如图所示在做echarts图表时发现柱状图有数值&#xff0c;但是柱子没展示&#xff0c;后来发现这个没展示的数值是最小值和左侧y轴的最小值保持持平了&#xff0c;所以没有展示出来。 将下图中设置y轴最小值为0就可以了 yAxis: [{type: value,name: 产出,min: 0max: dataMax,ax…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023