前端H5笔记---五、javascript基础+canvas画布
如果有人问我你的梦是什么，我会说：“买得起自己喜欢的东西，做自己喜欢的事，来场说走就走的旅行。带着父母去再拍一次婚纱照、一次属于他们的旅行 。要是喜欢的人也喜欢自己，那就太完美了，如果不合适，那也不会因此的损失生活质量，反而会因为花自己的钱，变得更加有底气，这可能就是努力的原因吧。”
学习画布之前要掌握javascript的基础知识
●JavaScript的引 入
●在HTML文档中引入JavaScript文件与引入CSS文件的方法类似,分为两种方式:
●数据类型
● JavaScript中有5种基本数据类型。
●变量
● 在JavaScript中使用var进行局部变量的声明。
var str="变量名";
var num=1.5;
age=23;
var str=new String;
var cars=new Array("A","B","C);//数组
JavaScript中，“new” 关键字用于声明变量,所有的变量均为对象，声明了一个变量时,就创建了一个新的对象。
●函数
●函数( function )也可以叫做方法,是将- -些代码组织在一起,形成一个用于完成某个具体功能的代码块,在需要时可以进行重复调用。
● 对象
●在JavaScript中,对象是拥有属性和方法的数据。属性是对象相关的值,方法是对象可以执行的动作。
●事件处理
● 采用事件驱动是JavaScript语言的一个最基本特征,所谓的事件是指用户在访问页面时执行的操作,常用的事件类型如右表所示。
●事件处理
●另外事件有很多属性,常用的事件属性如下表所示。
●JavaScript HTML DOM
●DOM的全称为文档对象模型( Document Object Model )。当网页被加载时,浏览器会将HTMLDOM模型被构造为对象的树。
●通过JavaScript来创建动态的HTML。主要表现在4个方面。
●要想操作HTML元素及其属性,首先应该获得这个元素.对象, document对象的常用获取HTML元素对象的方法如下表所示。
●getBoundingClientRect()方 法
一getBoundingClientRect()方法用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置, 或者说一个Element元素的坐标现在已经是一个W3C标准。
— 该访法返回一个Object对象,该对象有6个属性: top、left、 right 、bottom、width、 height ,具体应用如下所示。
初识canvas
canvas意为画布,现实生活中的画布是用来作画的, HTML5中的canvas与之类似,我们可以称它为"网页中的画布”有了这个画布便可以轻松的在网页中绘制图形、文字、图片等。
●创建画布
●HTML5中提供了标签,使用标签可以在网页中创建一个矩形区域的画布。
画布本身不具有绘制功能,可以通过脚本语言( -般为JavaScript )操作绘制图形的API进行绘制操作。可以使用getElementByld()方法获取画布对象:
●准备画笔
●有了画布之后,要开始作画需要准备- -只画笔,这只画笔就是context对象,该对象可以使用JavaScript脚本获得。
●坐标和起点
●接下来需要设置上下文开始的绘制点,也就是“从哪里开始画”
●绘制线条
●lineTo()方法用于定义从"x,y" 的位置绘制- 条直线到起点或上一 个线头点。
●路径
●绘制直线确定了起始点和线头点后,便形成了-条绘制路径,如果复杂路径绘制必须使用路径开始和结束。
●描边和填充
●在canvas图形绘制中 ,路径只是草稿,真正绘制线必须执行stroke()方法根据路径进行描边,还可以使用fill()方法进行图形的填充。
使用canvas绘制图形的基本步骤：
a) 创建画布：< canvas>< /canvas>
b) 准备画笔（获取上下文对象）：canvas.getContext(‘2d’);
c) 开始路径规划 ：context.beginPath();
d)移动起始点 ：context.moveTo(x, y);
e) 绘制线(矩形、圆形、图片…) ：context.lineTo(x, y);
f) 闭合路径：context.closePath();
g) 绘制描边 ：context.stroke();
案例：网页涂鸦板
效果：这画工也太low了，大家将就看一下
思路
①该涂鸦板要在屏幕中间显示,所以< canvas>标签可以嵌套在< center>标签中。
②编写JavaScript代码,首先要创建画布、准备画笔,并粗为画布设置宽高和边框;然后将鼠标指针看成画笔,当鼠标按下触发onmousedown事件时,使用moveTo()方法确定起点,当鼠标移动触发onmousemove事件时使用lineTo进行划线。
③获取鼠标的x , Y坐标很简单,可以使用clientX和clientY来获取,当鼠标作用在一个对象上时,例如画布,就要考虑这个对象在浏览器窗口的位置,这时便要使用getBoundingClientRect0方法来获取canvas这个矩形对象,并且使用鼠标的坐标减去这个矩形对象到浏览器左上角的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CANVAS画布</title>
</head>
<body>
<center>
<canvas id="cavsElem">
您的浏览器不支持canvas，请升级浏览器
</canvas>
</center>
<script type="text/javascript">
// 当前立即执行function
(function(){
// 初始化画布
var canvas =document.getElementById('cavsElem');
canvas.width= 900;
canvas.height=600;
canvas.style.border='1px solid #000';
// 拿到画布对象
var context=canvas.getContext('2d');
// 在鼠标按下的时候开始绘制线条
canvas.onmousedown =function(e){
// 绘制直线的开始位置
// alert(e.clientX+""+e.clientY);
// 需要知道画布原点的坐标
var pos =canvas.getBoundingClientRect();
// alert(pos.left+""+ pos.top);
// 需要知道距离画布原点的坐标
// alert((e.clientX-pos.left)+":"+(e.clientY-pos.top));
context.beginPath();
context.moveTo((e.clientX-pos.left),(e.clientY-pos.top));
// 监听鼠标移动的事件
canvas.onmousemove= function(e){
console.log((e.clientX-pos.left),(e.clientY-pos.top));
// 不停地绘制线条
context.lineTo((e.clientX-pos.left),(e.clientY-pos.top));
// context.closePath();
context.stroke();
}
canvas.onmouseup =function(){
canvas.onmousemove =null;
}
}
});
</script>
</body>
</html>
canvas绘制矩形和清除矩形
- canvas中分别使用strokeRect()和fillRect()方法来绘制矩形边框和填充矩形。
context.strokeRect(x,y,width,height);
context.fillRect(x,y,width,height);
在canvas中还有一个相当于橡皮擦的方法,使用它可以清除矩形内绘制的内容。
context.clearRect(x, y,width,height);
canvas中使用arc()方法来绘制弧形和圆形。
context.arc( x, y, radius , startAngle , endAngle , bAntiClockwise);
x,y:中心点 radius：半径长度 startAngle:开始弧度 endAngle :结束弧度 bAntiClockwise:是否逆时针（false：顺时针、true：逆时针）
canvas绘制图片
●canvas中的绘制图片其实就是把一幅图放在画布上。
//绘制原图
context.drawlmage(image, dx, dy))
//缩放绘图
context.drawlmage(image, dx, dy, dWidth, dHeight )
//切片绘图
context.drawlmage(image ,sx,Sy, sWidth,sHeigh ,dx,dy,dWidth,dHeight)
-----image：图片来源 ----- dx,dy:目标中的坐标 ----- dWidth，dHeight:目标的宽和高 -----sx,sy:Image在源中的起始坐标 ----- sWidth,sHeight:源中图片的宽和高
canvas其他方法
●canvas中提供的有关图形绘制的方法还有很多,接下来介绍几个本项目涉及到的方法,具体如下。
案例：发红包才能看得照片
说明：当点击想看我时：圆圈会随机在画布上选择区域，你只可以看到一点点内容，当你点击收到红包就可以看到完整的照片，这种是营销中常用的方法。
思路：
发红包才能看得照片
①使用< a>标签做两个按钮,并为按钮设置样式。
②图片模糊的效果使用CSS滤镜"fiter: blur(px)”来实现,该属性可以实现近视眼忘了戴眼镜看东西的模糊效果
③各元素的定位都与< div>标签相对定位,需要注意,两个按钮要显示在最上层，Z-index值最大,可以设置为999，其次是< canvas>标签,最后是< img>标签,圆形可显示的部分是使用canvas绘制圆形来实现的。
2 HTML+CSS :
①绘制圆形: setRegion(Region) ,该方法中需要使用clip()方法剪切圆形区域,然后在圆形区域中绘制图片,就是图5-24中的圆形效果啦。
②绘制图片: draw(image)方法中需要调用setRegion(Region)方法,并使用dlearRect()方法清除上- -次绘制的圆形,保证只显示一个圆形区域。
③初始画布: initCanvas()方法中调用draw(image)方法。
④“想看我么” 按钮单击事件reset()方法,在该方法中调用initCanvas()方法,每次在不同的位置绘制圆形区域。
⑤“收到红包” 按钮单击事件show()方法,在该方法中调用draw(image)方法,使圆形半径大于画布,这时就可以绘制完整的图片了,也就是收到红包的效果。
html代码：
<!DOCTYPE html>
"en">
"UTF-8">
发红包<<span class="token operator">/</span>title>
<link rel=<span class="token string">"stylesheet"</span> <span class="token function">type</span>=<span class="token string">"text/css"</span> href=<span class="token string">"css/photo.css"</span><span class="token operator">/</span>>
<<span class="token operator">/</span>head>
<body>
<div <span class="token keyword">class</span>=<span class="token string">"blurDiv"</span>>
<img <span class="token keyword">class</span>=<span class="token string">"blurImg"</span> src=<span class="token string">"pic.jpg"</span> alt=<span class="token string">"#"</span><span class="token operator">/</span>>
<canvas id=<span class="token string">"mycanvas"</span>><<span class="token operator">/</span>canvas>
<a <span class="token keyword">class</span>=<span class="token string">"button"</span> id=<span class="token string">"buttonreset"</span> href=<span class="token string">"javascript:reset()"</span>>想看我<<span class="token operator">/</span>a>
<a <span class="token keyword">class</span>=<span class="token string">"button"</span> href=<span class="token string">"javascript:show()"</span> id=<span class="token string">"buttonshow"</span>> 收到红包<<span class="token operator">/</span>a>
<<span class="token operator">/</span>div>
<script <span class="token function">type</span>=<span class="token string">"text/javascript"</span> src=<span class="token string">"js/photo.js"</span>><<span class="token operator">/</span>script>
<<span class="token operator">/</span>body>
<<span class="token operator">/</span>html>
</code></pre>
<p><strong>css代码：</strong></p>
<pre><code class="prism language-php"><span class="token punctuation">.</span>body<span class="token punctuation">{</span>
margin<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
padding<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>blurDiv<span class="token punctuation">{</span>
position<span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
width<span class="token punctuation">:</span> <span class="token number">877</span>px<span class="token punctuation">;</span>
height<span class="token punctuation">:</span> <span class="token number">672</span>px<span class="token punctuation">;</span>
margin<span class="token punctuation">:</span><span class="token number">50</span>px auto <span class="token number">0</span>px<span class="token punctuation">;</span><span class="token comment">/*定义外边距：顶部50px，左右水平居中，距离底部0px*/</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>blurDiv <span class="token punctuation">.</span>blurImg<span class="token punctuation">{</span>
width<span class="token punctuation">:</span> <span class="token number">877</span>px<span class="token punctuation">;</span>
height<span class="token punctuation">:</span> <span class="token number">672</span>px<span class="token punctuation">;</span>
display<span class="token punctuation">:</span> block<span class="token punctuation">;</span><span class="token comment">/*把行元素强制转换为块级元素*/</span>
filter<span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span><span class="token number">20</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">/*滤镜，设置模糊度*/</span>
<span class="token operator">-</span>webkit<span class="token operator">-</span>filter<span class="token punctuation">:</span><span class="token function">blur</span><span class="token punctuation">(</span><span class="token number">20</span>px<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">/*webkit保留filter*/</span>
position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
left<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
top<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
z<span class="token operator">-</span>index<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>blurDiv <span class="token shell-comment comment">#mycanvas{</span>
position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
top<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
left<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
z<span class="token operator">-</span>index<span class="token punctuation">:</span> <span class="token number">99</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/*按钮*/</span>
<span class="token punctuation">.</span>blurDiv <span class="token punctuation">.</span>button<span class="token punctuation">{</span>
display<span class="token punctuation">:</span> block<span class="token punctuation">;</span>
width<span class="token punctuation">:</span> <span class="token number">240</span>px<span class="token punctuation">;</span>
height<span class="token punctuation">:</span> <span class="token number">60</span>px<span class="token punctuation">;</span>
border<span class="token operator">-</span>radius<span class="token punctuation">:</span> <span class="token number">5</span>px<span class="token punctuation">;</span>
line<span class="token operator">-</span>height<span class="token punctuation">:</span> <span class="token number">60</span>px<span class="token punctuation">;</span>
text<span class="token operator">-</span>align<span class="token punctuation">:</span> center<span class="token punctuation">;</span>
position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
top<span class="token punctuation">:</span> <span class="token number">105</span><span class="token operator">%</span><span class="token punctuation">;</span>
font<span class="token operator">-</span>family<span class="token punctuation">:</span> arial<span class="token punctuation">;</span>
font<span class="token operator">-</span>size<span class="token punctuation">:</span> <span class="token number">1.5</span>em<span class="token punctuation">;</span><span class="token comment">/*相当于24px*/</span>
color<span class="token punctuation">:</span> <span class="token shell-comment comment">#fff;</span>
text<span class="token operator">-</span>decoration<span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token comment">/*清除字体样式*/</span>
z<span class="token operator">-</span>index<span class="token punctuation">:</span><span class="token number">999</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>blurDiv <span class="token shell-comment comment">#buttonreset{</span>
left<span class="token punctuation">:</span> <span class="token number">7</span><span class="token operator">%</span><span class="token punctuation">;</span>
background<span class="token operator">-</span>color<span class="token punctuation">:</span> <span class="token shell-comment comment">#c85814;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>blurDiv <span class="token shell-comment comment">#buttonreset:hover{</span>
background<span class="token operator">-</span>color<span class="token punctuation">:</span> <span class="token shell-comment comment">#ffb151;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>blurDiv <span class="token shell-comment comment">#buttonshow{</span>
right<span class="token punctuation">:</span><span class="token number">7</span><span class="token operator">%</span><span class="token punctuation">;</span>
background<span class="token operator">-</span>color<span class="token punctuation">:</span> <span class="token shell-comment comment">#ff2f2e;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">.</span>blurDiv <span class="token shell-comment comment">#buttonshow:hover{</span>
background<span class="token operator">-</span>color<span class="token punctuation">:</span> <span class="token shell-comment comment">#ff596b;</span>
<span class="token punctuation">}</span>
</code></pre>
<p><strong>js代码:</strong></p>
<pre><code class="prism language-powershell"><span class="token keyword">var</span> canvasWidth =877<span class="token punctuation">;</span><span class="token operator">/</span><span class="token operator">/</span>声明画布的宽度
<span class="token keyword">var</span> canvasHeight =672<span class="token punctuation">;</span>
<span class="token keyword">var</span> canvas = document<span class="token punctuation">.</span>getElementById<span class="token punctuation">(</span><span class="token string">'mycanvas'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> context =canvas<span class="token punctuation">.</span>getContext<span class="token punctuation">(</span><span class="token string">'2d'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
canvas<span class="token punctuation">.</span>width=canvasWidth<span class="token punctuation">;</span>
canvas<span class="token punctuation">.</span>height=canvasHeight<span class="token punctuation">;</span>
<span class="token keyword">var</span> image = new Image<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
image<span class="token punctuation">.</span>src=<span class="token string">'pic.jpg'</span><span class="token punctuation">;</span>
image<span class="token punctuation">.</span>οnlοad=<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
initCanvas<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator">/</span><span class="token operator">*</span>注：<span class="token operator">*</span><span class="token operator">/</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> radius=50<span class="token punctuation">;</span>
<span class="token keyword">function</span> initCanvas<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
Region = <span class="token punctuation">{</span>
x:Math<span class="token punctuation">.</span>random<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">(</span>canvasWidth<span class="token operator">-</span>2<span class="token operator">*</span>radius<span class="token punctuation">)</span><span class="token operator">+</span>radius<span class="token punctuation">,</span>
y:Math<span class="token punctuation">.</span>random<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token punctuation">(</span>canvasHeight<span class="token operator">-</span>2<span class="token operator">*</span>radius<span class="token punctuation">)</span><span class="token operator">+</span>radius<span class="token punctuation">,</span>
r:radius
<span class="token punctuation">}</span><span class="token punctuation">;</span>
draw<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> setRegion<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
context<span class="token punctuation">.</span>beginPath<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
context<span class="token punctuation">.</span>arc<span class="token punctuation">(</span>Region<span class="token punctuation">.</span>x<span class="token punctuation">,</span>Region<span class="token punctuation">.</span>y<span class="token punctuation">,</span>Region<span class="token punctuation">.</span>r<span class="token punctuation">,</span>2<span class="token operator">*</span>Math<span class="token punctuation">.</span>PI<span class="token punctuation">,</span>false<span class="token punctuation">)</span><span class="token punctuation">;</span>
context<span class="token punctuation">.</span>clip<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> draw<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
context<span class="token punctuation">.</span>clearRect<span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>canvas<span class="token punctuation">.</span>width<span class="token punctuation">,</span>canvas<span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">;</span>
context<span class="token punctuation">.</span>save<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
setRegion<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
context<span class="token punctuation">.</span>drawImage<span class="token punctuation">(</span>image<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
context<span class="token punctuation">.</span>restore<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">/</span> 单击事件reset方法，在该方法调用initCanvas<span class="token punctuation">(</span><span class="token punctuation">)</span>方法，每一次在不同的位置绘制圆形区域
<span class="token keyword">function</span> reset<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
initCanvas<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> show<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
Region<span class="token punctuation">.</span>r=2<span class="token operator">*</span>Math<span class="token punctuation">.</span>max<span class="token punctuation">(</span>canvas<span class="token punctuation">.</span>width<span class="token punctuation">,</span>canvas<span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">;</span>
draw<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1290833306803314688"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- 文章页-底部 动态广告位 -->
<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- 文章页-右侧1 动态广告位 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>
<!-- 文章页-右侧2 动态广告位 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1883315324950999040.htm"
title="vue 无法 局域网内访问" target="_blank">vue 无法 局域网内访问</a>
<span class="text-muted">m0_75101866</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/1.htm">开发工具</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>资料Vue项目设置可以局域网访问_vue.js_脚本之家过程上午，前端vue服务能够在局域网内访问，下午就不行了，但是后端服务能够正常访问，本机也能正常访问ip：端口号前端服务判定不是下面的问题：同一局域网下访问vue项目_vue在局域网内访问-CSDN博客然后，关闭防火墙尝试。。-_-!netshadvfirewallfirewalladdrulename="Allow8080"dir=inac</div>
</li>
<li><a href="/article/1883311792134877184.htm"
title="微信小程序部分用户报错ERR_CONNECTION_REFUSED连接被拒绝" target="_blank">微信小程序部分用户报错ERR_CONNECTION_REFUSED连接被拒绝</a>
<span class="text-muted">木雷双雄7</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a>
<div>【问题描述】部分微信小程序用户出现连接被拒绝的错误，报错信息为{"code":0,"message":"{\"errno\":600001,\"errMsg\":\"request:failerrcode:-102cronet_error_code:-102error_msg:net::ERR_CONNECTION_REFUSED\"}"}【问题排查】后端没有错误日志，前端没有js报错，那报错从何</div>
</li>
<li><a href="/article/1883307627673350144.htm"
title="vue 前端显示图片加token_手摸手，带你用vue撸后台 系列二(登录权限篇)" target="_blank">vue 前端显示图片加token_手摸手，带你用vue撸后台 系列二(登录权限篇)</a>
<span class="text-muted">weixin_39562579</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87%E5%8A%A0token/1.htm">前端显示图片加token</a><a class="tag" taget="_blank" href="/search/vue%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8/1.htm">vue本地存储</a><a class="tag" taget="_blank" href="/search/vue%E7%BC%96%E8%BE%91%E9%A1%B5%E9%9D%A2%E5%92%8C%E6%96%B0%E5%A2%9E/1.htm">vue编辑页面和新增</a>
<div>完整项目地址：vue-element-adminhttps://github.com/PanJiaChen/vue-element-admin前言拖更有点严重，过了半个月才写了第二篇教程。无奈自己是一个业务猿，每天被我司的产品虐的死去活来，之前又病了一下休息了几天，大家见谅。进入正题，做后台项目区别于做其它的项目，权限验证与安全性是非常重要的，可以说是一个后台项目一开始就必须考虑和搭建的基础核心功</div>
</li>
<li><a href="/article/1883305733085261824.htm"
title="Vite + Vue3 + TS项目配置前置路由守卫" target="_blank">Vite + Vue3 + TS项目配置前置路由守卫</a>
<span class="text-muted">洛*璃</span>
<a class="tag" taget="_blank" href="/search/Vue.js/1.htm">Vue.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/Vue-Router/1.htm">Vue-Router</a><a class="tag" taget="_blank" href="/search/Pinia/1.htm">Pinia</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a>
<div>在现代前端开发中，使用Vue3和TypeScript的组合是一种流行且高效的开发方式。Vite是一个极速的构建工具，可以显著提升开发体验。本文博主将指导你如何在Vite+Vue3+TypeScript项目中配置前置路由守卫（NavigationGuards）。前置条件在开始配置项目前置路由守卫前，博主希望你能够先达成以下前置条件：1.完成Vue3前端项目搭建:Vite创建Vue3+TS项目2.引入</div>
</li>
<li><a href="/article/1883301698601021440.htm"
title="JHipster入门 - 生成单体架构的应用" target="_blank">JHipster入门 - 生成单体架构的应用</a>
<span class="text-muted">yorkwu1977</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">软件工程</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>JHipster入门-生成单体架构的应用目标准备工作生成基础功能输入指令开始问答环节问答环节结束，开始自动生成基础功能代码生成业务功能输入指令开始问答环节问答环节结束，开始自动生成业务功能代码调试启动启动后端服务启动前端服务访问前端页面打包启动构建启动访问前端页面关于数据库交给JHipster自己启动目标30分钟内生成一个开箱即用的单体架构应用。生成SpringBoot后端代码和Vue前端代码。基</div>
</li>
<li><a href="/article/1883280007913074688.htm"
title="【Blazor】使用C#替代Java编写代码的前端开发框架" target="_blank">【Blazor】使用C#替代Java编写代码的前端开发框架</a>
<span class="text-muted">雕技小虫</span>
<a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/1.htm">系统开发</a><a class="tag" taget="_blank" href="/search/Windows/1.htm">Windows</a><a class="tag" taget="_blank" href="/search/Server/1.htm">Server</a><a class="tag" taget="_blank" href="/search/Blazor/1.htm">Blazor</a><a class="tag" taget="_blank" href="/search/.NET/1.htm">.NET</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A1%86%E6%9E%B6/1.htm">前端开发框架</a><a class="tag" taget="_blank" href="/search/webassembly/1.htm">webassembly</a>
<div>Blazor是微软于2019年下半年开始陆续全新推出的前端开发框架。优势无需插件，基于Web标准可与JavaScript交互利用.NETCore优势Blazor有两个版本：Server||WebAssemblyBlazorServer可以理解为在服务器上运行的Blazor，客户端与服务器间通过SignalR实进通信，2019年09月正式发布。BlazorWebAssembly2020年05月正式发</div>
</li>
<li><a href="/article/1883243422161104896.htm"
title="fuadmin" target="_blank">fuadmin</a>
<span class="text-muted">jcsx</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E5%AD%A6%E4%B9%A0/1.htm">开源学习</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>fu-admin-web采用VUE3，TS开发。fu-admin-backend采用Python，Django和Django-Ninija开发。数据库支持MySql，SqlServer，Sqlite。前端采用VbenAdmin、Vue3、AntDesignVue。后端采用Python语言Django框架以及强大的DjangoNinja。支持加载动态权限菜单，多方式轻松权限控制。Vue2项目移步</div>
</li>
<li><a href="/article/1883242286221946880.htm"
title="docker容器基础入门" target="_blank">docker容器基础入门</a>
<span class="text-muted">霉逝</span>
<a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
<div>docker容器技术基础入门文章目录docker容器技术基础入门@[toc]1.docker基本概念2.Docker的引擎的组成以及功能3.docker的架构4.docker安装、配置加速器以及常用指令4.1安装docker软件包4.2开启docker并查看状态4.3配置阿里云镜像加速器4.4docker常用命令1.docker基本概念docker是容器技术的一个前端工具，容器是内核的一项技术，d</div>
</li>
<li><a href="/article/1883217441463529472.htm"
title="前端构建工具" target="_blank">前端构建工具</a>
<span class="text-muted">光影少年</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%9E%84%E5%BB%BA/1.htm">软件构建</a>
<div>前端构建工具是开发现代Web应用时不可或缺的工具，用于优化代码、提升开发效率、以及实现高效的构建和部署。以下是常见的前端构建工具及其作用：1.模块打包工具Webpack特点：功能强大，插件与配置灵活。作用：将模块（JS、CSS、图片等）打包成浏览器可运行的文件。适用场景：中大型项目，需高度自定义。Vite特点：轻量、快速构建，基于ESModules。作用：适合现代框架如Vue、React，热更新速</div>
</li>
<li><a href="/article/1883209494624792576.htm"
title="Vue.js组件开发研究" target="_blank">Vue.js组件开发研究</a>
<span class="text-muted">清北互联木材</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>摘要随着前端技术的快速发展，Vue.js以其轻量级、高性能和组件化开发的优势，在前端开发领域占据了重要地位。本研究深入探讨了Vue.js组件开发的理论基础、开发方法以及实际应用。通过系统梳理Vue.js框架的核心特性、组件化思想及Vue.js组件的基本概念，本研究为Vue.js组件开发提供了全面的理论支撑。进一步地，本研究详细介绍了Vue.js组件的设计原则、组成要素及组件之间的关系，并阐述了组件</div>
</li>
<li><a href="/article/1883206217493442560.htm"
title="什么是vue.js组件开发，我们需要做哪些准备工作？" target="_blank">什么是vue.js组件开发，我们需要做哪些准备工作？</a>
<span class="text-muted">大懒猫软件</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>Vue.js是一个非常流行的前端框架，用于构建用户界面。组件开发是Vue.js的核心概念之一，通过将界面拆分为独立的组件，可以提高代码的可维护性和复用性。以下是一个详细的Vue.js组件开发指南，包括基础概念、开发流程和代码示例。一、Vue.js组件开发基础1.组件的基本结构Vue.js组件是一个独立的、可复用的UI元素。每个组件都有自己的模板、逻辑和样式。组件的基本结构如下：vue复制{{tit</div>
</li>
<li><a href="/article/1883203064614154240.htm"
title="1.7K star！AI Cover：开源的红包封面[特殊字符]生成器，赶快收藏！" target="_blank">1.7K star！AI Cover：开源的红包封面[特殊字符]生成器，赶快收藏！</a>
<span class="text-muted">前端后花园</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%83%AD%E9%97%A8%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/1.htm">前端热门开源项目</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5/1.htm">代码片段</a>
<div>欢迎来到前端后花园！我们专注分享前端开源项目，目标是探索分享精选100个高质量的开源项目。这是系列的第3篇文章，分享一个AI红包封面生成开源项目。大家好，我是小前！想要制作一款红包封面？却不懂PS，没关系，小前今天分享的开源项目-AI红包封面生成，输入提示词（eg.蛇年快乐）即可生成符合设计规范的红包封面，快来看看吧！简介AICover是一款开源的红包封面生成器，输入要生成的红包描述，即可快速生成</div>
</li>
<li><a href="/article/1883197394531708928.htm"
title="python实战项目34：基于flask的天气数据可视化系统1.0" target="_blank">python实战项目34：基于flask的天气数据可视化系统1.0</a>
<span class="text-muted">wp_tao</span>
<a class="tag" taget="_blank" href="/search/Python%E5%89%AF%E4%B8%9A%E6%8E%A5%E5%8D%95%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE/1.htm">Python副业接单实战项目</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>基于flask的天气数据可视化系统1.0一、效果展示二、flask简介三、图表绘制四、前端页面编写五、完整代码一、效果展示该flask项目相对简单入门，使用了flask框架、bootstrap前端技术，数据使用的是上一篇scrapy爬取城市天气数据中爬取到的数据。二、flask简介Flask是一个基于Python的Web开发框架，它以灵活、微框架著称，基于werkzeug的轻量级web框架，可提高</div>
</li>
<li><a href="/article/1883182244529500160.htm"
title="GB/T28181 全栈开发日记[6]：React 快速接入 jessibuca.js 播放器" target="_blank">GB/T28181 全栈开发日记[6]：React 快速接入 jessibuca.js 播放器</a>
<span class="text-muted">gospace</span>
<a class="tag" taget="_blank" href="/search/%E4%BB%8E/1.htm">从</a><a class="tag" taget="_blank" href="/search/0/1.htm">0</a><a class="tag" taget="_blank" href="/search/%E5%88%B0%E5%AE%9E%E7%8E%B0/1.htm">到实现</a><a class="tag" taget="_blank" href="/search/GB%2FT/1.htm">GB/T</a><a class="tag" taget="_blank" href="/search/28181/1.htm">28181</a><a class="tag" taget="_blank" href="/search/%E5%8D%8F%E8%AE%AE%E7%9A%84%E5%AE%8C%E6%95%B4%E5%AE%9E%E8%B7%B5/1.htm">协议的完整实践</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a>
<div>GB/T28181全栈开发日记[6]：React快速接入jessibuca.js播放器服务端源代码github.com/gowvp/gb28181前端源代码github.com/gowvp/gb28181_web介绍GoWVP(GolangWebVideoPlatfrom)是一个Go语言实现的，基于GB28181-2022标准实现的网络视频平台，负责实现核心信令与设备管理后台部分，支持海康、大华、</div>
</li>
<li><a href="/article/1883174041729167360.htm"
title="DB项目前端分支思考" target="_blank">DB项目前端分支思考</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>背景一般的项目基本是一个主分支持续的迭代开发。比如有一个master分支，这个分支是可以随时发布版本的。还有一个开发分支，比如develop，是从master检出的。当迭代开始的时候，从develop分支检出feature-xxx分支来做开发需求功能。当联调完成后，提MR合并到develop分支。以此类推，这里就不展开讲了。一般的项目往往只有一个环境，比如开发-测试-生产。但DB项目会存在各种各样</div>
</li>
<li><a href="/article/1883172537957937152.htm"
title="Nginx部署前端Vue项目的深度解析" target="_blank">Nginx部署前端Vue项目的深度解析</a>
<span class="text-muted">egekm_sefg</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a>
<div>目录一、准备工作1.1开发环境1.2服务器环境1.3Nginx安装二、构建Vue项目三、上传静态文件到服务器四、配置Nginx五、测试并重新加载Nginx六、访问Vue应用七、高级配置7.1启用HTTPS7.2启用Gzip压缩7.3缓存控制八、常见问题与解决方案8.1404错误8.2权限问题8.3跨域问题九、总结在现代Web开发中，Vue.js因其组件化、响应式数据绑定和易于上手的特点，成为了前端</div>
</li>
<li><a href="/article/1883150221274312704.htm"
title="70.在 Vue 3 中使用 OpenLayers 拖拽实现放大区域的效果（DragZoom）" target="_blank">70.在 Vue 3 中使用 OpenLayers 拖拽实现放大区域的效果（DragZoom）</a>
<span class="text-muted">吉檀迦俐</span>
<a class="tag" taget="_blank" href="/search/OpenLayers/1.htm">OpenLayers</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/openlayers/1.htm">openlayers</a>
<div>引言在现代Web开发中，地图功能已经成为许多应用的重要组成部分。OpenLayers是一个功能强大的开源地图库，支持多种地图源和交互操作。Vue3是一个流行的前端框架，以其响应式数据和组件化开发著称。本文将介绍如何在Vue3中集成OpenLayers，并实现拖拽放大区域的效果（DragZoom）。实现效果按住Shift键，使用鼠标左键圈选区域，地图会自动放大到选中的区域。支持地图的拖拽、缩放等基本</div>
</li>
<li><a href="/article/1883129801779245056.htm"
title="免费开源的后端API服务-supabase安装和使用-简直是前端学习者福音" target="_blank">免费开源的后端API服务-supabase安装和使用-简直是前端学习者福音</a>
<span class="text-muted">前端三评</span>
<a class="tag" taget="_blank" href="/search/strapi/1.htm">strapi</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7/1.htm">工具</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/supabase/1.htm">supabase</a>
<div>文章目录它是什么安装和部署关于安装关于部署1、注册用户2、创建组织3、创建项目创建数据库表（填充内容）填充数据库表使用postman联调API它是什么一个开源免费的后端框架，firebase的替代品。可以简单理解类似于headlesscms，但是不仅仅只提供内容，它还集成了服务订阅、即时API，用户身份认证（包括第三方身份认证，比如使用github、Google等账号实现快速登录和注册）、边缘函数</div>
</li>
<li><a href="/article/1883112025350008832.htm"
title="前端新手如何用vite构建小程序中使用的模块（以AES加密模块crypto-js为例）" target="_blank">前端新手如何用vite构建小程序中使用的模块（以AES加密模块crypto-js为例）</a>
<span class="text-muted">warmbook</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>如果你只是想简单地把在vite项目中使用的模块引入到小程序中，不妨试试库模式。以crypto-js为例，你需要写两个JS文件：一个是构建脚本，类似于vite.config.js；//build.cjsconst{build}=require('vite'),path=require('path');build({publicDir:false,configFile:false,runtimeCom</div>
</li>
<li><a href="/article/1883111898992406528.htm"
title="【原生JS】如何优雅地读、改location.search（queryString或GET参数）" target="_blank">【原生JS】如何优雅地读、改location.search（queryString或GET参数）</a>
<span class="text-muted">warmbook</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>应用场景location.search完全由JS脚本管理，并且需要不刷新页面地修改其内容。例如在Oauth2授权中，如果是前端取参提交给后端API向平台方请求accessToken，需要及时删除GET参数中的code，以防用户刷新浏览器导致用失效的code处理登录。实现思路将queryString转为对象并用ES6的Proxy代理，在set、delete钩子中调用history.replaceSt</div>
</li>
<li><a href="/article/1883085285055590400.htm"
title="基于 Node.js 的天气查询系统实现(附源码）" target="_blank">基于 Node.js 的天气查询系统实现(附源码）</a>
<span class="text-muted">Kasper0121</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>项目概述这是一个基于Node.js的全栈应用，前端使用原生JavaScript和CSS，后端使用Express框架，通过调用第三方天气API实现天气数据的获取和展示。主要功能默认显示多个主要城市的天气信息支持城市天气搜索响应式布局设计深色主题界面优雅的加载动画技术栈后端：Node.js+Express前端：HTML5+CSS3+JavaScriptHTTP客户端：AxiosAPI：天气API(v1</div>
</li>
<li><a href="/article/1883076966500855808.htm"
title="前端 | 浏览器安全：XSS攻击、CSRF攻击、中间人攻击" target="_blank">前端 | 浏览器安全：XSS攻击、CSRF攻击、中间人攻击</a>
<span class="text-muted">酒酿泡芙1217</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/csrf/1.htm">csrf</a>
<div>1.XSS攻击1.1什么是XSS攻击XSS攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗用用户的信息如cookie等本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨那些脚本是可信的，从而导致了恶意代码的执行攻击者通过这种攻击方式可以进行一下操作：获取页面的数据，如DOM、cookie、localStora</div>
</li>
<li><a href="/article/1883050103674040320.htm"
title="HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？" target="_blank">HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？</a>
<span class="text-muted">前端Hardy</span>
<a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>这段代码创建了一个动态的导航栏，通过CSS技术实现了按钮的激活和悬停效果，以及动态背景效果，为页面添加了视觉吸引力和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你演示效果HTML&CSS公众号关注：前端Hardybody{margin:0;padding:0;background-color:#07</div>
</li>
<li><a href="/article/1883007741149114368.htm"
title="mybatisplus获取返回对象（自增ID）" target="_blank">mybatisplus获取返回对象（自增ID）</a>
<span class="text-muted">笑发财了1</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/jar/1.htm">jar</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a>
<div>需求有时候我们在数据库里设置了属性自增，在添加对象后，前端需要我们返回这个属性（对象）。做法1.在该实体类的自增主键上加上注解@TableId(value="journey_location_id")，后面的type是默认值可以不写。value为数据表中的字段名@TableId(value="journey_location_id",type=IdType.AUTO)privateintjourn</div>
</li>
<li><a href="/article/1882995514832646144.htm"
title="Vue组件的概念与复用" target="_blank">Vue组件的概念与复用</a>
<span class="text-muted">2401_85969651</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</a>
<div>目录一、引言二、为什么使用组件二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的世界里，组件是构建用户界面的基石。它们让我们能够以一种高效、可维护的方式开发复杂的前端应用。无论是初涉Vue的新手，还是有一定经验的开发者，深入理解组件的概念与复用机制，都能极大提升开发效率与代码质量。二、为什么使用组件随着前端应用日益复杂，页面功能愈发繁多，传统的</div>
</li>
<li><a href="/article/1882995513733738496.htm"
title="Vue 组件的概念与复用" target="_blank">Vue 组件的概念与复用</a>
<span class="text-muted">2401_85969651</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</a>
<div>目录一、引言二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的奇妙天地里，组件宛如熠熠生辉的基石，稳稳撑起用户界面构建的大厦。无论你是刚踏入Vue领域的新手，还是久经沙场的开发者，吃透组件的概念与复用窍门，都如同掌握了一把开启高效开发、优质代码大门的金钥匙，能让你的前端开发之旅畅行无阻。二、什么是Vue组件本质上，Vue组件就是一个被赋予独特魅</div>
</li>
<li><a href="/article/1882972815779491840.htm"
title="LogicFlow 一款流程图编辑框架" target="_blank">LogicFlow 一款流程图编辑框架</a>
<span class="text-muted">小毛驴850</span>
<a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%9B%BE/1.htm">流程图</a>
<div>LogicFlow是什么LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。官方网站更多资料请查看LogicFlow系列文章特性可视化模型：通过LogicFlow提供的直观可视化界</div>
</li>
<li><a href="/article/1882960844577370112.htm"
title="跨域问题及其解决方案" target="_blank">跨域问题及其解决方案</a>
<span class="text-muted">山禾女鬼001</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a>
<div>在现代Web开发中，跨域问题是开发者经常遇到的一个难题，尤其是在前后端分离架构中。跨域问题的核心在于浏览器的同源策略，这种策略的设计目的是防止恶意网站窃取用户的数据。然而，在一些场景下，比如前后端分离的Web应用中，前端需要访问不同域的资源，这时就会遇到跨域请求的问题。为了解决这个问题，CORS（跨域资源共享）机制应运而生。本文将详细探讨跨域问题的成因、CORS机制的工作原理以及常见的跨域解决方案</div>
</li>
<li><a href="/article/1882960466586693632.htm"
title="基于Springboot用axiospost请求接收字符串参数为null的解决方案" target="_blank">基于Springboot用axiospost请求接收字符串参数为null的解决方案</a>
<span class="text-muted">呀243</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>问题今天在用前端post请求后端时发现，由于是以Json对象的形式传输的，后端用两个字符串形参无法获取到对应的参数值前端代码如下：axios.post('http://localhost:8083/test/postParams',{a:'1',b:'2'},{'Content-Type':'application/json'}).then(response=>{console.log(respo</div>
</li>
<li><a href="/article/1882957438848659456.htm"
title="vscode 前端常用插件安装大全" target="_blank">vscode 前端常用插件安装大全</a>
<span class="text-muted">weixin_42113341</span>
<a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a>
<div>在使用VisualStudioCode(VSCode)进行前端（特别是Vue.js）和Node.js开发时，安装合适的扩展插件可以大大提升开发效率和代码质量。以下是推荐的Vue.js和Node.js开发相关的VSCode插件，涵盖了代码编辑、调试、格式化、版本控制、代码质量等多个方面。您可以根据自己的需求选择安装：1.核心开发插件1.1Vetur功能：为Vue.js提供语法高亮、智能提示、错误检查</div>
</li>
<li><a href="/article/71.htm"
title="Linux的Initrd机制" target="_blank">Linux的Initrd机制</a>
<span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>Linux 的 initrd 技术是一个非常普遍使用的机制，linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式，变化不仅反映在文件格式上， linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术，然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin</div>
</li>
<li><a href="/article/198.htm"
title="maven本地仓库路径修改" target="_blank">maven本地仓库路径修改</a>
<span class="text-muted">bitcarter</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
<div>默认maven本地仓库路径：C:\Users\Administrator\.m2
修改maven本地仓库路径方法：
1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml
2.找到
</div>
</li>
<li><a href="/article/325.htm"
title="XSD和XML中的命名空间" target="_blank">XSD和XML中的命名空间</a>
<span class="text-muted">darrenzhu</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xsd/1.htm">xsd</a><a class="tag" taget="_blank" href="/search/schema/1.htm">schema</a><a class="tag" taget="_blank" href="/search/namespace/1.htm">namespace</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E5%90%8D%E7%A9%BA%E9%97%B4/1.htm">命名空间</a>
<div>http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml
http://blog.csdn.net/wanghuan203/article/details/9203621
http://blog.csdn.net/wanghuan203/article/details/9204337
http://www.cn</div>
</li>
<li><a href="/article/452.htm"
title="Java 求素数运算" target="_blank">Java 求素数运算</a>
<span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%B4%A0%E6%95%B0/1.htm">素数</a>
<div>网络上对求素数之解数不胜数，我在此总结归纳一下，同时对一些编码，加以改进，效率有成倍热提高。
第一种：
原理: 6N(+-)1法 任何一个自然数，总可以表示成为如下的形式之一： 6N，6N+1，6N+2，6N+3，6N+4，6N+5 (N=0，1，2，…) </div>
</li>
<li><a href="/article/579.htm"
title="java 单例模式" target="_blank">java 单例模式</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>想必单例模式大家都不会陌生，有如下两种方式来实现单例模式：
class Singleton {
private static Singleton instance=new Singleton();
private Singleton(){}
static Singleton getInstance() {
return instance;
}</div>
</li>
<li><a href="/article/706.htm"
title="Linux下Mysql源码安装" target="_blank">Linux下Mysql源码安装</a>
<span class="text-muted">510888780</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz
(1)创建mysql的安装目录及数据库存放目录
解压缩下载的源码包，目录结构，特殊指定的目录除外：
</div>
</li>
<li><a href="/article/833.htm"
title="32位和64位操作系统" target="_blank">32位和64位操作系统</a>
<span class="text-muted">墙头上一根草</span>
<a class="tag" taget="_blank" href="/search/32%E4%BD%8D%E5%92%8C64%E4%BD%8D%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">32位和64位操作系统</a>
<div>32位和64位操作系统是指：CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的，但是这些CPU并不是真正意义上的64 位CPU，里面依然保留了大部分32位的技术，只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面，32位系统的最大寻址空间是2 的32次方= 4294967296（bit）= 4（GB）左右，而64位系统的最大寻址空间的寻址空间则达到了</div>
</li>
<li><a href="/article/960.htm"
title="我的spring学习笔记10-轻量级_Spring框架" target="_blank">我的spring学习笔记10-轻量级_Spring框架</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a>
<div>一、问题提问：
→ 请简单介绍一下什么是轻量级？
轻量级（Leightweight）是相对于一些重量级的容器来说的，比如Spring的核心是一个轻量级的容器，Spring的核心包在文件容量上只有不到1M大小，使用Spring核心包所需要的资源也是很少的，您甚至可以在小型设备中使用Spring。
</div>
</li>
<li><a href="/article/1087.htm"
title="mongodb 环境搭建及简单CURD" target="_blank">mongodb 环境搭建及简单CURD</a>
<span class="text-muted">antlove</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Install/1.htm">Install</a><a class="tag" taget="_blank" href="/search/curd/1.htm">curd</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a><a class="tag" taget="_blank" href="/search/mongo/1.htm">mongo</a>
<div>一 搭建mongodb环境
1. 在mongo官网下载mongodb
2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db"
3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\</div>
</li>
<li><a href="/article/1214.htm"
title="数据字典和动态视图" target="_blank">数据字典和动态视图</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%AD%97%E5%85%B8/1.htm">数据字典</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%86%E5%9B%BE/1.htm">动态视图</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%92%8C%E5%AF%B9%E8%B1%A1%E6%9D%83%E9%99%90/1.htm">系统和对象权限</a>
<div>数据字典（data dictionary）是 Oracle 数据库的一个重要组成部分，这是一组用于记录数据库信息的只读（read-only）表。随着数据库的启动而启动,数据库关闭时数据字典也关闭 数据字典中包含
数据库中所有方案对象（schema object）的定义(包括表，视图，索引，簇，同义词，序列，过程，函数，包，触发器等等)
数据库为一</div>
</li>
<li><a href="/article/1341.htm"
title="多线程编程一般规则" target="_blank">多线程编程一般规则</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a>
<div> 如果两个工两个以上的线程都修改一个对象，那么把执行修改的方法定义为被同步的，如果对象更新影响到只读方法，那么只读方法也要定义成同步的。
不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据，就不要将方法设置为synchronized的。
</div>
</li>
<li><a href="/article/1468.htm"
title="将文件或目录拷贝到另一个Linux系统的命令scp" target="_blank">将文件或目录拷贝到另一个Linux系统的命令scp</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/scp/1.htm">scp</a>
<div>一.功能说明 scp就是security copy，用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议，保证了数据传输的安全，其格式如下： scp 远程用户名@IP地址：文件的绝对路径</div>
</li>
<li><a href="/article/1595.htm"
title="【持久化框架MyBatis3五】MyBatis3一对多关联查询" target="_blank">【持久化框架MyBatis3五】MyBatis3一对多关联查询</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Mybatis3/1.htm">Mybatis3</a>
<div>以教员和课程为例介绍一对多关联关系，在这里认为一个教员可以叫多门课程，而一门课程只有1个教员教，这种关系在实际中不太常见，通过教员和课程是多对多的关系。
示例数据：
地址表：
CREATE TABLE ADDRESSES
(
ADDR_ID INT(11) NOT NULL AUTO_INCREMENT,
STREET VAR</div>
</li>
<li><a href="/article/1722.htm"
title="cookie状态判断引发的查找问题" target="_blank">cookie状态判断引发的查找问题</a>
<span class="text-muted">bitcarter</span>
<a class="tag" taget="_blank" href="/search/form/1.htm">form</a><a class="tag" taget="_blank" href="/search/cgi/1.htm">cgi</a>
<div>先说一下我们的业务背景：
1.前台将图片和文本通过form表单提交到后台，图片我们都做了base64的编码，并且前台图片进行了压缩
2.form中action是一个cgi服务
3.后台cgi服务同时供PC，H5，APP
4.后台cgi中调用公共的cookie状态判断方法（公共的，大家都用，几年了没有问题）
问题：（折腾两天。。。。）
1.PC端cgi服务正常调用，cookie判断没</div>
</li>
<li><a href="/article/1849.htm"
title="通过Nginx,Tomcat访问日志(access log)记录请求耗时" target="_blank">通过Nginx,Tomcat访问日志(access log)记录请求耗时</a>
<span class="text-muted">ronin47</span>
<div>一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间
nginx.conf使用配置方式：
log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r</div>
</li>
<li><a href="/article/1976.htm"
title="java-67- n个骰子的点数。 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。" target="_blank">java-67- n个骰子的点数。 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class ProbabilityOfDice {
/**
* Q67 n个骰子的点数
* 把n个骰子扔在地上，所有骰子朝上一面的点数之和为S。输入n，打印出S的所有可能的值出现的概率。
* 在以下求解过程中，我们把骰子看作是有序的。
* 例如当n=2时，我们认为（1，2）和（2，1）是两种不同的情况
*/
private stati</div>
</li>
<li><a href="/article/2103.htm"
title="看别人的博客，觉得心情很好" target="_blank">看别人的博客，觉得心情很好</a>
<span class="text-muted">Cb123456</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a><a class="tag" taget="_blank" href="/search/%E5%BF%83%E6%83%85/1.htm">心情</a>
<div> 以为写博客，就是总结，就和日记一样吧，同时也在督促自己。今天看了好长时间博客:
职业规划:
http://www.iteye.com/blogs/subjects/zhiyeguihua
android学习:
1.http://byandby.i</div>
</li>
<li><a href="/article/2230.htm"
title="[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析" target="_blank">[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a>
<div>
我们已经不满足于仅仅跳跃一次，通过对引擎的升级，今天我测试了一下循环反馈模式，大概跑了200圈，引擎报一个溢出错误
在一个流程图的结束节点中嵌入一段方程，每次引擎运行到这个节点的时候，通过实时编译器GM模块，计算这个方程，计算结果与预设值进行比较，符合条件则跳跃到开始节点，继续新一轮拓扑分析，直到遇到</div>
</li>
<li><a href="/article/2357.htm"
title="JS常用的事件及方法" target="_blank">JS常用的事件及方法</a>
<span class="text-muted">cwqcwqmax9</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
<div>事件 描述
onactivate 当对象设置为活动元素时触发。
onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
onbeforeactivate 对象要被设置为当前元素前立即触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即</div>
</li>
<li><a href="/article/2484.htm"
title="正则表达式验证日期格式" target="_blank">正则表达式验证日期格式</a>
<span class="text-muted">dashuaifu</span>
<a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/IT%E5%85%B6%E5%AE%83/1.htm">IT其它</a><a class="tag" taget="_blank" href="/search/java%E5%85%B6%E5%AE%83/1.htm">java其它</a>
<div> 正则表达式验证日期格式
function isDate(d){
var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i);
if(!v) {
this.focus();
return false;
}
}
<input value="2000-8-8" onblu</div>
</li>
<li><a href="/article/2611.htm"
title="Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证" target="_blank">Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
<div>public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则，应重写此方法。 每个规则是数组具有以下结构：array('attribute list', 'validator name', 'on'=>'scenario name', ...validation </div>
</li>
<li><a href="/article/2738.htm"
title="UITextAttributeTextColor = deprecated in iOS 7.0" target="_blank">UITextAttributeTextColor = deprecated in iOS 7.0</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a>
<div>In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0."
Ins</div>
</li>
<li><a href="/article/2865.htm"
title="判断一个数是质数的几种方法" target="_blank">判断一个数是质数的几种方法</a>
<span class="text-muted">EmmaZhao</span>
<a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>质数也叫素数，是只能被1和它本身整除的正整数，最小的质数是2，目前发现的最大的质数是p=2^57885161-1【注1】。
判断一个数是质数的最简单的方法如下：
def isPrime1(n):
for i in range(2, n):
if n % i == 0:
return False
return True
但是在上面的方法中有一些冗余的计算，所以</div>
</li>
<li><a href="/article/2992.htm"
title="SpringSecurity工作原理小解读" target="_blank">SpringSecurity工作原理小解读</a>
<span class="text-muted">坏我一锅粥</span>
<a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a>
<div>
SecurityContextPersistenceFilter
ConcurrentSessionFilter
WebAsyncManagerIntegrationFilter
HeaderWriterFilter
CsrfFilter
LogoutFilter
Use</div>
</li>
<li><a href="/article/3119.htm"
title="JS实现自适应宽度的Tag切换" target="_blank">JS实现自适应宽度的Tag切换</a>
<span class="text-muted">ini</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>效果体验：http://hovertree.com/texiao/js/3.htm
该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。
HTML文件代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"</div>
</li>
<li><a href="/article/3246.htm"
title="Hbase Rest API : 数据查询" target="_blank">Hbase Rest API : 数据查询</a>
<span class="text-muted">kane_xie</span>
<a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a>
<div>hbase（hadoop）是用java编写的，有些语言（例如python）能够对它提供良好的支持，但也有很多语言使用起来并不是那么方便，比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口，它内嵌了jetty作为servlet容器。
启动命令：./bin/hbase rest s</div>
</li>
<li><a href="/article/3373.htm"
title="JQuery实现鼠标拖动元素移动位置（源码+注释）" target="_blank">JQuery实现鼠标拖动元素移动位置（源码+注释）</a>
<span class="text-muted">明子健</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/%E6%8B%96%E5%8A%A8/1.htm">拖动</a><a class="tag" taget="_blank" href="/search/%E9%BC%A0%E6%A0%87/1.htm">鼠标</a>
<div>欢迎讨论指正！
print.html代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>发票打印</title>
&l</div>
</li>
<li><a href="/article/3500.htm"
title="Postgresql 连表更新字段语法 update" target="_blank">Postgresql 连表更新字段语法 update</a>
<span class="text-muted">qifeifei</span>
<a class="tag" taget="_blank" href="/search/PostgreSQL/1.htm">PostgreSQL</a>
<div>下面这段sql本来目的是想更新条件下的数据，可是这段sql却更新了整个表的数据。sql如下：
UPDATE tops_visa.visa_order
SET op_audit_abort_pass_date = now()
FROM
tops_visa.visa_order as t1
INNER JOIN tops_visa.visa_visitor as t2
ON t1. </div>
</li>
<li><a href="/article/3627.htm"
title="将redis,memcache结合使用的方案?" target="_blank">将redis,memcache结合使用的方案?</a>
<span class="text-muted">tcrct</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a>
<div>公司架构上使用了阿里云的服务，由于阿里的kvstore收费相当高，打算自建，自建后就需要自己维护，所以就有了一个想法，针对kvstore(redis)及ocs(memcache)的特点，想自己开发一个cache层，将需要用到list，set，map等redis方法的继续使用redis来完成，将整条记录放在memcache下，即findbyid，save等时就memcache，其它就对应使用redi</div>
</li>
<li><a href="/article/3754.htm"
title="开发中遇到的诡异的bug" target="_blank">开发中遇到的诡异的bug</a>
<span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/bug/1.htm">bug</a>
<div>今天我们服务器组遇到个问题：
我们的服务是从Kafka里面取出数据，然后把offset存储到ssdb中，每个topic和partition都对应ssdb中不同的key，服务启动之后，每次kafka数据更新我们这边收到消息，然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了，最开始我们是在代码中打印存储的日志，发现没什么问题，后来去查看ssdb的日志，才发现里面每次set的时候都会对同一个key</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</div>
</div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>
</body>
</html>