css自学框架之消息弹框
首先我们还是看看消息弹框效果:
主要实现代码分为三部分
一、CSS部分,这部分主要是定义样式,也就是我们看到的外表,主要代码:
/* - 弹窗 */notice{top: 0;left: 0;right: 0;z-index: 10;padding: 1em;position: fixed;user-select: none;pointer-events: none;} .myth-notice{color: var(--white);display: table;background: #333;border-radius: 3em;pointer-events: auto;margin: 0 auto 1em auto;box-shadow: 0 5px 5px -2px rgba(0, 0, 0, .2);animation: fade-small-large .3s both;-webkit-animation: fade-small-large .3s both;} .myth-notice.remove{animation: fade-in-top .3s both reverse;-webkit-animation: fade-in-top .3s both reverse;}/* -- 弹窗颜色 */.myth-notice.red{color: var(--red-color);background: var(--red);}.myth-notice.yellow{color: var(--yellow-color);background: var(--yellow);}.myth-notice.blue{color: var(--blue-color);background: var(--blue);}.myth-notice.green{color: var(--green-color);background: var(--green);}.myth-notice > span{padding: .5em 1em;display: table-cell;vertical-align: middle;}.myth-notice .close{cursor: pointer;border-radius: 0 1em 1em 0;transition: background .3s;}.myth-notice .close:hover{background: rgba(0, 0, 0, .1);}.myth-notice .close:after{content: '×';font: inherit;}
二、JavaScript部分,这部分我们主要实现单击按钮显示根据不同输入,显示不同消息弹框,功能包括自动关闭消息弹框和手动关闭消息弹框;样式包括红色、黄色、蓝色、绿色和黑色五种消息弹框,代码如下:
; //JavaScript 弱语法的特点,如果前面刚好有个函数没有以";"结尾,那么可能会有语法错误
var myth = (function(selector) {'use strict';Array.prototype.remove = function(val) {var index = this.indexOf(val);if (index > -1) {this.splice(index, 1);}};var _myth = function(selector) {//如果默认参数不设置,自动赋值documentif (!selector) {selector = document;}//获取selector数据类型,代码后面序号1有详细用法解释var selectorType = typeof(selector);//根据selector数据类型,进行同操作,代码后面序号2有详细用法解释switch (selectorType) {case 'string': //如果是字符串类型,使用querySelectorAll获取selector对象,结果记录到reObj内var doms = document.querySelectorAll(selector); //通过该方法查找HMTL中select对象,代码后面序号2有详细用法解释//reObj是个数据对象,目前设置了两个属性:dom是Javascript数据对象,length表示doms对象数量var reObj = {dom: doms,length: doms.length};break;case 'object': //如果是object类型,结果直接记录到reObj内var reObj = {dom: [selector],length: 1};break;default: //除了上述两种类型外,其它返回null对象return null;}reObj.__proto__ = mythExtends;//__proto__:表示一个对象拥有的内置属性,是JS内部使用寻找原型链的属性。可以理解为它是一个指针,用于指向创建它的函数对象的原型对象prototype(即构造函数的prototype),简单理解为“为reObj添加了一些扩展属性,myth(selector)选择对象后,可以进一步执行mythExtends中的方法。return reObj;};//myth(selector)对象的扩展方法var mythExtends = { create:function(tag,prop){var obj=document.createElement(tag)//alert(prop)if (prop) {if(prop.id) obj.id = prop.id;if(prop.src) obj.src = prop.src;if(prop.href) obj.href = prop.href;if(prop.class) obj.className = prop.class;if(prop.text) obj.innerText = prop.text;if(prop.html) obj.innerHTML = prop.html;if(prop.parent) prop.parent.appendChild(obj);;}return obj;},showInfo:function(content, attr){if(!document.querySelector("body > notice")){this.create('notice',{parent:document.body});}var item = this.create("div", {class: "myth-notice", html: "<span class='content'>" + content + "</span>",parent:document.querySelector("body > notice")});if(attr && attr.color){item.classList.add(attr.color);}if(attr && attr.time){setTimeout(this.notice_remove.bind(null,item), attr.time)}else{ var close = this.create("span", {class: "close", parent: item});var that = this;close.onclick = function(e){that.notice_remove(item);}}},notice_remove:function(item){item.classList.add("remove");if(document.querySelector("body > notice")){item.remove()}},infoTip:function(content, attr){var that = this;this.click(function(){that.showInfo(content,attr);});},/* dom 元素遍历 */each: function(callBack) {if (!callBack) {return;}for (var i = 0; i < this.length; i++) {this.dom[i].index = i;callBack(this.dom[i]); //返回每一个dom对象}},// 设置或读取htmlhtml: function(html) {if (this.length < 1) {return this;}//设置HTMLif (typeof(html) != 'undefined') {for (var i = 0; i < this.length; i++) {this.dom[i].innerHTML = html;}return this;}//读取HTMLtry {return this.dom[0].innerHTML;} catch (e) {return null;}},/*读取或设置属性开始*/attr: function(attrName, val) {if (val) {this.setAttr(attrName, val);} else {return this.getAttr(attrName);}},getAttr: function(attrName) {try {return this.dom[0].getAttribute(attrName);} catch (e) {console.log(_lang.domEmpty);return null;}},setAttr: function(attrName, val) {for (var i = 0; i < this.length; i++) {this.dom[i].setAttribute(attrName, val);}return this;},/*读取或设置属性结束*//* 样式操作开始 */css: function(csses) {for (var i = 0; i < this.length; i++) {var styles = this.dom[i].style;for (var k in csses) {styles[k] = csses[k];}}return this;},hasClass: function(cls) {if (this.length != 1) {return false;}return this.dom[0].className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));},addClass: function(cls) {for (var i = 0; i < this.length; i++) {if (!this.dom[i].className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))) {this.dom[i].className += " " + cls;}}return this;},removeClass: function(cls) {var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');for (var i = 0; i < this.length; i++) {this.dom[i].className = this.dom[i].className.replace(reg, ' ');}return this;},/* 样式操作结束 */// 隐藏元素。isAnimate为真,动画方式隐藏元素hide: function(isAnimate) {for (var i = 0; i < this.length; i++) {if (isAnimate) {var ctdom = myth(this.dom[i]);ctdom.addClass('myth-fade-out');setTimeout(function() {ctdom.dom[0].style.display = 'none';ctdom.removeClass('myth-fade-out');}, 300);} else {this.dom[i].style.display = 'none';}}return this;},// 显示元素 isAnimate为真,动画方式显示元素show: function(isAnimate) {for (var i = 0; i < this.length; i++) {if (isAnimate) {var ctdom = _myth(this.dom[i]);ctdom.addClass('myth-fade-in');setTimeout(function() {ctdom.dom[0].style.display = 'block';ctdom.removeClass('myth-fade-in');}, 300);} else {this.dom[i].style.display = 'block';}}return this;},// 单击事件click: function(callBack) {for (var i = 0; i < this.length; i++) {if (callBack == undefined) {_myth(this.dom[i]).trigger('click');}this.dom[i].addEventListener('click', callBack);}},setWidth: function(swidth) { //设置myth(selector)对象宽度this.dom[0].style.width = swidth;},getWidth: function() { //获取myth(selector)对象宽度return this.dom[0].offsetWidth;},setHeight: function(sheight) { //设置myth(selector)对象高度this.dom[0].style.height = sheight;},getHeight: function() { //获取myth(selector)对象高度return this.dom[0].offsetHeight;},appendChild:function(aobject){this.dom[0].appendChild(aobject);},config:function(opts, options) {//默认参数if (!opts) return options;for (var key in opts) {if (!!opts[key]) {options[key] = opts[key];}}return options;}}_myth.version = 'myth 1.0'; //设置版本return _myth;
})(document);
三、HTML部分,该部分就是如何使用第一、二部分的代码。
一是引入CSS代码,引入JavaScript代码。
<link rel="stylesheet" href="css/myth.css">
<script src="js/myth.js"></script>
二是THML展示代码
<div class="mythBox mid"><br/>手动关闭的提示信息:<button class="btn red" id="infoTrip1">红色信息提示</button><button class="btn blue" id="infoTrip2">红色信息提示</button><button class="btn green" id="infoTrip3">红色信息提示</button><button class="btn yellow" id="infoTrip4">红色信息提示</button><button class="btn " id="infoTrip5">默认消息提示</button><br/><br/>自动关闭的提示信息:<button class="btn blue" id="infoTrip6">自动关闭信息提示</button></div>
三是JavaScript调用代码。
<script type="text/javascript">myth('#infoTrip1').infoTip('数据加载完毕....',{color:'red'});myth('#infoTrip2').infoTip('数据加载完毕....',{color:'blue'});myth('#infoTrip3').infoTip('数据加载完毕....',{color:'green'});myth('#infoTrip4').infoTip('数据加载完毕....',{color:'yellow'});myth('#infoTrip5').infoTip('数据加载完毕....');myth('#infoTrip6').infoTip('数据加载完毕....',{color:'blue',time:3000});
</script>
ok,这样就完成了。
源代码下载:请单击
相关文章:
![](https://img-blog.csdnimg.cn/384ba19014d74fd197eaa427387bf32c.png)
css自学框架之消息弹框
首先我们还是看看消息弹框效果: 主要实现代码分为三部分 一、CSS部分,这部分主要是定义样式,也就是我们看到的外表,主要代码: /* - 弹窗 */notice{top: 0;left: 0;right: 0;z-index: 10;padding: 1em;position: fix…...
![](https://img-blog.csdnimg.cn/2f6ab30987e041e3aeac8882d88301cf.png)
42、Flink 的table api与sql之Hive Catalog
Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…...
![](https://www.ngui.cc/images/no-images.jpg)
PAT 1145 Hashing - Average Search Time
个人学习记录,代码难免不尽人意。 The task of this problem is simple: insert a sequence of distinct positive integers into a hash table first. Then try to find another sequence of integer keys from the table and output the average search time (the…...
![](https://img-blog.csdnimg.cn/bb073dd52b1244a7b36a1b354fb0df61.png)
C++调用Python Win10 Miniconda虚拟环境配置
目录 前言1. Win10 安装 Miniconda2. 创建虚拟环境3. 配置C调用python环境4. C调用Python带参函数5.遇到的问题6. 总结 前言 本文记录了Win10 系统下Qt 应用程序调用Python时配置Miniconda虚拟环境的过程及遇到的问题,通过配置Python虚拟环境,简化了Qt应…...
![](https://img-blog.csdnimg.cn/da90b30472dc46ccb629711e2ad79437.jpeg)
从0到1学会Git(第一部分):Git的下载和初始化配置
1.Git是什么: 首先我们看一下百度百科的介绍:Git(读音为/gɪt/)是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。 也是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。 …...
![](https://img-blog.csdnimg.cn/55114077745d453881f24e36ce5bf59e.jpeg)
【记录】手机QQ和电脑QQ里的emoji种类有什么差异?
版本 手机 QQ:V 8.9.76.12115 电脑 QQ:QQ9.7.15(29157) 偶然发现,有一种emoji手机上怎么找都找不到,一开始以为自己失忆了,后来发现这种emoji只在电脑上有。 接下来简单说一下找emoji差异的方式…...
![](https://img-blog.csdnimg.cn/9f9d6876d27a42fd9795fa09240e8954.png)
blender界面认识01
学习视频 【基础篇】1.2 让手听话_哔哩哔哩_bilibili 目录 控制视角 控制物体 选择对象1 小结 控制视角 长按鼠标中键-----视角旋转 shift鼠标中键-----视角平移 滚动鼠标中键-----视角缩放 也可以通过界面的快捷工具实现 这个视角旋转有一点像catia中罗盘,…...
![](https://img-blog.csdnimg.cn/7d8425d004f949c18b4bdcf01b9f53fe.jpeg)
TCP数据报结构分析(面试重点)
在传输层中有UDP和TCP两个重要的协议,下面将针对TCP数据报的结构进行分析 关于UDP数据报的结构分析推荐看UDP数据报结构分析(面试重点) TCP结构图示 TCP报头结构的分析 一.16位源端口号 源端口表示发送数据时,发送方的端口号&am…...
![](https://img-blog.csdnimg.cn/424f5144db014265a577976f9f316372.png)
合并两个有序的单链表,合并之后的链表依然有序
定义节点 class ListNode {var next: ListNode _var x: Int _def this(x: Int) {thisthis.x x}override def toString: String s"x>$x" } 定义方法 class LinkedList {var head new ListNode(0)def getHead(): ListNode this.headdef add(listNode: Li…...
![](https://img-blog.csdnimg.cn/img_convert/3d1a91071db6c3e3adb3b3c3a0fbc6ea.png)
eureka迁移到nacos--双服务中心注册
服务注册中心的迁移有多种方式,官网使用nacos sync,还有民间开发的双注册中心组件eureka-nacos-proxy,但是我用了不太顺利,所以用的是阿里巴巴的双注册中心组件edas-sc-migration-starter spring boot:2.5.3 引入依赖 …...
![](https://www.ngui.cc/images/no-images.jpg)
线程池使用不规范导致线程数大以及@Async的规范使用
文章详细内容来自:线程数突增!领导:谁再这么写就滚蛋! 下面是看完后文章的,一个总结 线程池的使用不规范,导致程序中线程数不下降,线程数量大。 临时变量的接口,通过下面简单的线…...
![](https://img-blog.csdnimg.cn/deac17012f5a47809abc69d0d3bbe6bc.png)
启莱OA treelist.aspx SQL注入
子曰:“为政以德,譬如北辰,居其所,而众星共之。” 漏洞复现 访问漏洞url: 使用SQLmap对参数 user 进行注入 漏洞证明: 文笔生疏,措辞浅薄,望各位大佬不吝赐教,万分感…...
![](https://img-blog.csdnimg.cn/99eb721ddf104b5dbb621ecbb4cd5520.png)
ES是一个分布式全文检索框架,隐藏了复杂的处理机制,核心数据分片机制、集群发现、分片负载均衡请求路由
ES是一个分布式框架,隐藏了复杂的处理机制,核心数据分片机制、集群发现、分片负载均衡请求路由。 ES的高可用架构,总体如下图: 说明:本文会以pdf格式持续更新,更多最新尼恩3高pdf笔记,请从下面…...
![](https://img-blog.csdnimg.cn/3d607fec0bd94bfa83b7f8037382b940.png)
xml和json互转工具类
分享一个json与xml互转的工具类,非常好用 一、maven依赖 <!-->json 和 xm 互转</!--><dependency><groupId>org.dom4j</groupId><artifactId>dom4j</artifactId><version>2.1.3</version></dependency&g…...
![](https://img-blog.csdnimg.cn/img_convert/373709aaf7453751aacc1a34e6c5bbe8.png)
Windows系统下MMDeploy预编译包的使用
Windows系统下MMDeploy预编译包的使用 MMDeploy步入v1版本后安装/使用难度大幅下降,这里以部署MMDetection项目的Faster R-CNN模型为例,将PyTorch模型转换为ONNX进而转换为Engine模型,部署到TensorRT后端,实现高效推理,…...
![](https://img-blog.csdnimg.cn/7866dd95ef2d4c29af3d62a867b623f1.png)
yolov5自定义模型训练二
前期准备好了用于训练识别是否有火灾的数据集后就可以开始修改yolo相关文件来进行训练 数据集放到yolov5目录里 在data目录下新建yaml文件设置数据集信息如下 在model文件夹下新增新的model文件 开始训练 训练出错 确认后是对训练数据集文件夹里的文件名字有要求,原…...
![](https://www.ngui.cc/images/no-images.jpg)
Spring框架获取用户真实IP(注解式)
文章目录 一、最终使用效果(ClientIp 注解获取)二、实现代码1.注解2.方法参数解析器(Resolver)3.全局增加Resolver配置 Spring 框架没有现成工具可以方便提取客户端的IP地址,普遍做法就是通过 HttpServletRequest 的 g…...
![](https://img-blog.csdnimg.cn/img_convert/f695e437b51f8d2c312bc9539e71c031.png)
利用 IDEA IDE 的轻量编辑模式快速查看和编辑工程外的文本文件
作为程序员, 我们都知道 IDE 的很好用的, 它的文本编辑器功能也非常的强大, 用起来非常便捷. 在长年累月的使用中, 我们也变得对其非常熟悉, 以致于使用起其它简单地轻量级的文本编辑器来, 比如什么记事本, Notepad, UltraEdit 等等呀, 觉得既不方便又不熟悉. 关键是很多的操作…...
![](https://img-blog.csdnimg.cn/dca54f5e48134d2e90535e814ff0f527.png)
MyBatisx代码生成
MyBatisx代码生成 1.创建数据库表 CREATE TABLE sys_good (good_id int(11) NOT NULL,good_name varchar(255) COLLATE utf8mb4_general_ci DEFAULT NULL,good_desc varchar(255) COLLATE utf8mb4_general_ci DEFAULT NULL,PRIMARY KEY (good_id) ) ENGINEInnoDB DEFAULT CHA…...
![](https://www.ngui.cc/images/no-images.jpg)
【日记】文章更新计划
首发博客地址[1] 状态 这两天也没加班,也没干什么活。不知道怎么回事,到家就想睡觉。所以这两天睡得很早,基本上 11 点之前就睡了,文章也就鸽了两天。 计划 今早起来感觉还是要自律,我写文章的初衷是为了学习。基于这个…...
![](https://img-blog.csdnimg.cn/f29796bee07b4835a7848106e5108ce5.png)
UML用例图三种关系(重点)-架构真题(十七)
某项目包括A、B、C、D四道工序,各道工序之间的衔接关系、正常进度下各工序所需的时间和直接费用、赶工进度下所需的时间和直接费用如下表所示。该项目每天需要间接费用为4.5万元,根据此表,最低成本完成需要()天。&…...
![](https://www.ngui.cc/images/no-images.jpg)
分层解耦介绍
三层架构 Controller:控制层,接受前端发送的请求,对请求进行处理,并响应数据 service:业务逻辑层,处理具体业务逻辑 dao:数据访问层,负责数据访问操作,包括数据的增、删、…...
![](https://img-blog.csdnimg.cn/4a8576f67aab4b34a29b965e1578224e.png)
Nginx百科之gzip压缩、黑白名单、防盗链、零拷贝、跨域、双机热备
引言 早期的业务都是基于单体节点部署,由于前期访问流量不大,因此单体结构也可满足需求,但随着业务增长,流量也越来越大,那么最终单台服务器受到的访问压力也会逐步增高。时间一长,单台服务器性能无法跟上业…...
![](https://img-blog.csdnimg.cn/img_convert/e8e08a7b428cdb49ad8ab2acefe22fc5.png)
git通过fork-merge request实现多人协同
一、问题 对于一个项目,如果需要多人协同开发,大家都在原始仓库中进行修改提交,经常会发生冲突,而且一不小心会把别人的代码内容覆盖掉。为了避免这样的问题,git提供了fork-merge request这样的协同方式。 二、仓库框…...
![](https://img-blog.csdnimg.cn/7aafce98acab4a3cbf2c84dfad892bc8.png)
元素居中的方法总结
目录 垂直居中 行内元素垂直居中 单行文本垂直居中 1.line-height: 200px; 多行文本垂直居中 1.tablevertical-align:middle 块级元素垂直居中 1.display: flex;align-items: center; 2.使用position top margin-top 水平居中 行内元素水平居中 1.text-align:cente…...
![](https://www.ngui.cc/images/no-images.jpg)
后端面试话术集锦第一篇:spring面试话术
这是后端面试集锦第一篇博文——spring面试话术❗❗❗ 1. 介绍一下spring 关于spring,我们平时做项目一直都在用,不管是使用ssh还是使用ssm,都可以整合。 Spring主要就三点,也就是核心思想: IOC控制反转 DI依赖注入 AOP切面编程 我先说说IOC吧,IOC就是spring里的控制反…...
![](https://img-blog.csdnimg.cn/802b2cd259a44ae3a4e170f38011ef78.png)
elasticsearch8.9.1集群搭建
目录 1.官网文档 2.安装步骤 2.1 环境准备 2.2 添加用户 2.3 修改文件profile文件 2.4 修改elasticsearch.yml 2.5 修改 sysctl.conf 3.启动 3.1 切换到kibana 3.2 启动elasticsearch 3.3 启动kibana 3.4 验证节点情况 1.官网文档 elasticsearch文档:ht…...
![](https://img-blog.csdnimg.cn/65a7674787e64432a2a1e2e1f8a9169e.png)
前端调用电脑摄像头
项目中需要前端调用,所以做了如下操作 先看一下效果吧 主要是基于vue3,通过canvas把画面转成base64的形式,然后是把base64转成 file文件,最后调用了一下上传接口 以下是代码 进入页面先调用一下摄像头 navigator.mediaDevices.ge…...
![](https://www.ngui.cc/images/no-images.jpg)
网络编程day1——进程间通信-socket套接字
基本特征:socket是一种接口技术,被抽象了一种文件操作,可以让同一计算机中的不同进程之间通信,也可以让不同计算机中的进程之间通信(网络通信) 本地进程间通信编程模型: 进程A …...
![](https://img-blog.csdnimg.cn/img_convert/0e3df64ceacd75a5a5fb9ea4194300c7.png)
Android-关于页面卡顿的排查工具与监测方案
作者:一碗清汤面 前言 关于卡顿这件事已经是老生常谈了,卡顿对于用户来说是敏感的,容易被用户直接感受到的。那么究其原因,卡顿该如何定义,对于卡顿的发生该如何排查问题,当线上用户卡顿时,在线…...
![](https://img-blog.csdnimg.cn/1ab40ebf2bfd49cd9e6976c3ea3e0855.png)
VueX 与Pinia 一篇搞懂
VueX 简介 Vue官方:状态管理工具 状态管理是什么 需要在多个组件中共享的状态、且是响应式的、一个变,全都改变。 例如一些全局要用的的状态信息:用户登录状态、用户名称、地理位置信息、购物车中商品、等等 这时候我们就需要这么一个工…...
![](https://img-blog.csdnimg.cn/b809fd69ea6d47b8bae0d36eb6b725a9.png)
指针与空间按钮的交互
文章目录 原理案例:“直线指针”和“点击按钮”的交互1、效果2、步骤 原理 指针不能直接和空间按钮交互,得借助一个中间层——分发器——它分发指针的进入、退出、选择事件,空间按钮自动监听这些事件 案例:“直线指针”和“点击…...
![](https://img-blog.csdnimg.cn/d54656a3210248848f295102f83265f2.png)
java八股文面试[数据库]——慢查询优化
分析慢查询日志 直接分析慢查询日志, mysql使用explain sql语句进行模拟优化器来执行分析。 oracle使用explain plan for sql语句进行模拟优化器来执行分析。 table | type | possible_keys | key |key_len | ref | rows | Extra EXPLAIN列的解释: ta…...
![](https://img-blog.csdnimg.cn/img_convert/7184722d58c203c31b7bdd40e84c47d0.png)
《Flink学习笔记》——第十章 容错机制
10.1 检查点(Checkpoint) 为了故障恢复,我们需要把之前某个时间点的所有状态保存下来,这份“存档”就是“检查点” 遇到故障重启的时候,我们可以从检查点中“读档”,恢复出之前的状态,这样就可以…...
![](https://img-blog.csdnimg.cn/a7ee497664bb4f338952c8c34c24abcb.png)
【LeetCode-中等题】230. 二叉搜索树中第K小的元素
文章目录 题目方法一:层序遍历 集合排序方法二:中序遍历(栈 或者 递归 )方法三(方法二改进):中序遍历(栈 ) 题目 该题最大的特点就是这个树是二叉树: 所以…...
![](https://img-blog.csdnimg.cn/058f39a3562f42038ebf86bbef15acdb.png#pic_center)
DQL语句的用法(MySQL)
文章目录 前言一、DQL语句间接和语法1、DQL简介2、DQL语法 二、DQL语句使用1、基础查询(1)查询多个字段(2)为字段设置别名(3)去除重复记录 总结 前言 本文主要介绍SQL语句中DQL语句的功能和使用方法&#…...
![](https://img-blog.csdnimg.cn/4a7a014f5eea47a78349c5ce53312921.png)
【Navicat Premium 16】使用Navicat将excel的数据进行单表的导入,详细操作
业务场景:经常与数据打交道嘛,有的时候会需要将excel的数据导入到数据库中,后面发现对于单表的数据导入,使用Navicat还是非常方便的,仅仅需要将字段关系映射好就可以了 一、开始操作 前提条件:已经成功连接…...
![](https://img-blog.csdnimg.cn/e07398b3317f49ac9da19ca9f632d5cc.png)
学习笔记230810--vue项目中get请求的两种传参方式
问题描述 今天写了一个对象方式传参的get请求接口方法,发现没有载荷,ip地址也没有带查询字符串,数据也没有响应。 代码展示 错误分析 实际上这里的query是对象方式带参跳转的参数名,而get方法对象方式传参的参数名是parmas 解…...
![](https://img-blog.csdnimg.cn/6155a73978a1451ba4c0f78c2f3f533b.png)
分享一种针对uni-app相对通用的抓包方案
PART1,前言 近年来混合开发APP逐渐成为主流的开发模式,与传统的开发模式相比混合开发极大的提升了开发效率,同时跨平台的特性也降低了开发成本,一直以来混合开发被诟病的性能问题随着技术的发展也得到改善。技术的发展往往是一把…...
![](https://img-blog.csdnimg.cn/1b35a0de6e43438ebb8df8809a865026.png)
【2023百度之星备赛】码蹄集 BD202301 公园(BFS求最短路)
题目 https://www.matiji.net/exam/brushquestion/1/4347/179CE77A7B772D15A8C00DD8198AAC74?from1 题目大意: 给定一个无向图,有两个人往同一个目的地走,分别消耗体力TE、FE。如果他们到某个点汇合了,然后一起走向目的地&…...
![](https://img-blog.csdnimg.cn/6448c4ae972d4da08256bc68cc103325.png)
2022年下半年系统架构设计师真题(下午带答案)
试题一 (25分) 某电子商务公司拟升级其会员与促销管理系统,向用户提供个性化服务,提高用户的粘性。在项目立项之初,公司领导层一致认为本次升级的主要目标是提升会员管理方式的灵活性,由于当前用户规模不大,业务也相对…...
![](https://img-blog.csdnimg.cn/895e6136aa024a2baa2e9947125b9d65.png)
26、ADS瞬时波形仿真-TRANSIENT仿真(以共射放大器为例)
26、ADS瞬时波形仿真-TRANSIENT仿真(以共射放大器为例) 在本科期间,学习模电的时候总是要对各种三极管电路进行MULTISIM仿真,其实ADS具备相同的功能,而且对于射频电路,使用ADS进行仿真可以结合版图进行&am…...
![](https://img-blog.csdnimg.cn/16c4ec5c5e94451a99927f52986693f2.png)
【微服务部署】02-配置管理
文章目录 1.ConfigMap1.1 创建ConfigMap方式1.2 使用ConfigMap的方式1.3 ConfigMap使用要点建议 2 分布式配置中心解决方案2.1 什么时候选择配置中心2.2 Apollo配置中心系统的能力2.2.1 Apollo创建配置项目2.2.2 项目使用2.2.3 K8s中使用Apollo 1.ConfigMap ConfigMap是K8s提供…...
![](https://img-blog.csdnimg.cn/21cc0ddfde444edfbaa66edb56bccbf4.png)
NTP时钟同步服务器
目录 一、什么是NTP? 二、计算机时间分类 三、NTP如何工作? 四、NTP时钟同步方式(linux) 五、时间同步实现软件(既是客户端软件也是服务端软件) 六、chrony时钟同步软件介绍 七、/etc/chrony.conf配置文件介…...
![](https://img-blog.csdnimg.cn/fc2004e7f17c4321b329b8aba3ebd61a.png)
webassembly003 ggml GGML Tensor Library part-2 官方使用说明
https://github.com/ggerganov/whisper.cpp/tree/1.0.3 GGML Tensor Library 官方有一个函数使用说明,但是从初始版本就没修改过 : https://github1s.com/ggerganov/ggml/blob/master/include/ggml/ggml.h#L3-L173 This documentation is still a work in progres…...
![](https://www.ngui.cc/images/no-images.jpg)
ES主集群的优化参考点
因为流量比较大, 导致ES线程数飙高,cpu直往上窜,查询耗时增加,并传导给所有调用方,导致更大范围的延时。如何解决这个问题呢? ES负载不合理,热点问题严重。ES主集群一共有几十个节点࿰…...
![](https://www.ngui.cc/images/no-images.jpg)
全国范围内-二手房小区数据-2023-8月更新
收录融合去重多个平台数据:80万,仅供数字参考 数据纬度字段名注释枚举值基础信息id主键id:名称城市来源生成 md5值00001073838501125ec4473463ead9ccname名称瑞祥安文创园address地址(朝阳)双桥路东柳村口南口lng经度116.581903lat纬度39.89…...
![](https://www.ngui.cc/images/no-images.jpg)
第4章 循环变换
4.1 适配体系结构特征的关键技术 由于高级语言隐藏了底层硬件体系结构的大量细节,如果不经过优化直接将高级程序设计语言编写的程序部署在底层硬件上,往往无法充分利用底层硬件体系结构的处理能力。 算子融合不仅可以提…...
![](https://www.ngui.cc/images/no-images.jpg)
spring cloud使用git作为配置中心,git开启了双因子认证,如何写本地配置文件
问题 spring cloud使用git作为配置中心,git开启了双因子认证,死活认证不成功!!!!! 报错关键字 org.eclipse.jgit.api.errors.TransportException: https://git.qualink.com/zhaoxin15/sc-confi…...
![](https://img-blog.csdnimg.cn/29f67c4cbe604174902ac89ff3a4afcf.png)
JVM内存管理、内存分区:堆、方法区、虚拟机栈、本地方法栈、程序计数器
内存管理 内存分区 线程共享 堆 存放实例,字符串常量(直接引用),静态变量,线程分配缓冲区(TLAB线程私有)。垃圾收集器管理的区域 方法区 非堆,和堆相对的概念。存储已被虚拟机加载的…...