前端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/1891979733613211648.htm"
title="深度求索-DeepSeek-R1本地部署指南" target="_blank">深度求索-DeepSeek-R1本地部署指南</a>
<span class="text-muted">0小和尚化缘12</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a>
<div>1、参考：部署指南2、参考：deepseek本地部署只需三步DeepSeek本地部署只需三步：1、安装运行环境：安装Ollama：Ollama官网：官网2、下载模型：参数越大，需要物里硬件越多3、安装部署前端交互程序：都是现成的开源架构</div>
</li>
<li><a href="/article/1891959043426152448.htm"
title="请解释设备像素、CSS 像素、设备独立像素、DPR、PPI 之间的区别 ？" target="_blank">请解释设备像素、CSS 像素、设备独立像素、DPR、PPI 之间的区别 ？</a>
<span class="text-muted">程序员黄同学</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/Java%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">Java面试题</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</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>
<div>一、核心概念解释1.设备像素（PhysicalPixel）定义：屏幕物理发光点的最小单位，硬件决定不可变。例如iPhone12的屏幕分辨率2532×1170表示横向2532个物理像素点。特点：不同设备物理像素密度不同，高密度屏幕（如Retina）单位面积像素更多。2.CSS像素（CSSPixel）定义：前端开发中使用的逻辑像素单位，如width:300px。浏览器根据DPR自动换算为物理像素。特点</div>
</li>
<li><a href="/article/1891942406304100352.htm"
title="防重复提交思路" target="_blank">防重复提交思路</a>
<span class="text-muted">harmful_sheep</span>
<a class="tag" taget="_blank" href="/search/springboot/1.htm">springboot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>本文将从以下几个方面展开：（1）重复提交产生的原因（2）什么是幂等性（3）针对重复提交，前后端的解决方案（4）如果实现一个防重复提交工具产生原因由于重复点击或者网络重发eg:点击提交按钮两次;点击刷新按钮;使用浏览器后退按钮重复之前的操作，导致重复提交表单;使用浏览器历史记录重复提交表单;浏览器重复的HTTP请求;nginx重发等情况;分布式RPC的try重发等;主要有2个部分：（1）前端用户操作</div>
</li>
<li><a href="/article/1891933572399427584.htm"
title="html5 二进制数据解析,JavaScript读写二进制数据的方法详解" target="_blank">html5 二进制数据解析,JavaScript读写二进制数据的方法详解</a>
<span class="text-muted">如果有片海</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E8%A7%A3%E6%9E%90/1.htm">二进制数据解析</a>
<div>前言二进制是计算技术中广泛采用的一种数制。二进制数据是用0和1两个数码来表示的数，如果想要在前端中处理音频和视频。那你必须要对二进制数据有很好地掌握和操作能力。下面话不多说了，来一起看看详细介绍的吧类型化数组的出现类型化数组是HTML5中引入的API，它能够让开发者使用JavaScript直接操作二进制数据。在类型化数组出现之前，我们是无法直接通过JavaScript操作二进制数据，通常都是操作J</div>
</li>
<li><a href="/article/1891924486438055936.htm"
title="前端如何播放二进制音频数据" target="_blank">前端如何播放二进制音频数据</a>
<span class="text-muted">尼古拉斯网页匠</span>
<a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/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>
<div>音频数据播放数据consttryListen=async(row)=>{awakenPlay(row.sid).then((res)=>{//请求接口，拿到二进制音频数据constbinaryData=atob(res.data);//将二进制数据转换为Uint8ArrayconstbyteArray=newUint8Array(binaryData.length);for(leti=0;i<bi</div>
</li>
<li><a href="/article/1891880690992082944.htm"
title="前端面试题" target="_blank">前端面试题</a>
<span class="text-muted">阿芯爱编程</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>以下是一些前端面试题：一、HTML/CSS部分请描述HTML的语义化标签的重要性，并列举一些常用的语义化标签。答案：重要性：对搜索引擎优化（SEO）有帮助，搜索引擎能够更好地理解页面结构，从而提高网站在搜索结果中的排名。提高代码的可读性和可维护性，使开发者更容易理解页面布局和功能逻辑。对于辅助技术（如屏幕阅读器）更友好，能够准确地向用户传达页面内容。常用语义化标签：：定义页面或区域的头部内容，通常</div>
</li>
<li><a href="/article/1891878027105726464.htm"
title="【linux numa】 NUMA 绑核" target="_blank">【linux numa】 NUMA 绑核</a>
<span class="text-muted">Dayu_log</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
<div>1.NUMA的前世今生NUMA（NonUniformMemoryAccess）和UMA（UniformMemoryAccess）是两种CPU相关的硬件架构。在早期的UMA架构中，CPU通过前端总线（FSB，FrontSideBus）连接到北桥芯片，然后北桥芯片连接到内存，即内存控制器集成在北桥芯片中。外部IO设备与南桥芯片相连，南桥芯片与北桥芯片通过内部总线相连。下图为UMA架构图下图为早期的UM</div>
</li>
<li><a href="/article/1891873861125861376.htm"
title="前端高级面试题" target="_blank">前端高级面试题</a>
<span class="text-muted">阿芯爱编程</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>以下是一些前端高级面试可能涉及到的内容：一、前端工程化如何构建一个适合大型团队的前端代码规范和构建流程？答案：代码规范方面：使用ESLint结合Prettier来统一JavaScript和CSS（包括预处理器如Sass或Less）的语法风格。例如，规定变量命名采用驼峰命名法，函数名要有明确含义等。对于HTML结构，制定语义化标签的使用规范，如导航栏使用标签，页脚使用标签等。确定组件化的规范，包括组</div>
</li>
<li><a href="/article/1891850152411459584.htm"
title="Vue 实现全球国家国旗的使用，附全球国家的JSON数据" target="_blank">Vue 实现全球国家国旗的使用，附全球国家的JSON数据</a>
<span class="text-muted">Song_Estelle</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/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>有时在前端展示中需要用到全球国家的国旗图标，我们可以用到flag-icon-css这个插件。1.安装flag-icon-cssnpminstallflag-icon-css2.在main.js中全局引用import'flag-icon-css/css/flag-icons.css'3.在界面中使用换不同的国旗，将flag-icon-后的国家代码换掉就行，国家代码对照表iso-3166-1全球国家名</div>
</li>
<li><a href="/article/1891849521944653824.htm"
title="服务器数据传输协议,详解前端websocket服务器之数据传输协议 前言 服务器发送数据 服务端接受数据 总结..." target="_blank">服务器数据传输协议,详解前端websocket服务器之数据传输协议 前言 服务器发送数据 服务端接受数据 总结...</a>
<span class="text-muted">weixin_39980575</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%95%B0%E6%8D%AE%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE/1.htm">服务器数据传输协议</a>
<div>前言上一篇文章我们初步搭建了一个websocket，但是还不能发送和接收数据，这篇文章我们聊一聊它是如何收发数据的。websocket支持文本和二进制的传输，内部是如何接收和发送数据的对使用者来说是不可见的，虽然这不影响使用，但是为了更加深入了解websocket的原理，我们还是有必要一探究竟！我们首先来看一张数据结构的二进制图，如下：如图1，乍一看可能看不懂，我先来解释一下：图1最上面表示的是二</div>
</li>
<li><a href="/article/1891842321465536512.htm"
title="JS(1-69)" target="_blank">JS(1-69)</a>
<span class="text-muted">小箌</span>
<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%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>01_JS介绍1.1JS是什么1.JavaScript（是什么？)是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2.作用（做什么？)网页特效（监听用户的一些行为让网页作出对应的反馈)表单验证（针对表单数据的合法性进行判断）数据交互（获取后台的数据，渲染到前端服务端编程（node.js)3.JavaScript的组成（有什么？)ECMAScript:规定了js基础语法核心知识。口比如：变</div>
</li>
<li><a href="/article/1891841060418678784.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/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>撮合前端平台在低代码平台上的落地探索：解锁中台架构的更多可能前言在当前技术高速发展的环境中，中台架构的应用早已成为大规模企业的常态，尤其是在拥有多业务线的公司。中台不仅简化了跨部门协作的流程，还提高了业务的响应速度和创新能力。这种架构的核心在于复用已有能力，实现快速上线和低成本运维。然而，前端业务高度依赖用户需求的变化，需要更灵活的动态能力，因此构建一个灵活的“前端中台”成为我们新的探索方向。在撮</div>
</li>
<li><a href="/article/1891823144788881408.htm"
title="成功撒花特效" target="_blank">成功撒花特效</a>
<span class="text-muted">吉吉安</span>
<a class="tag" taget="_blank" href="/search/css%E7%89%B9%E6%95%88/1.htm">css特效</a><a class="tag" taget="_blank" href="/search/%E6%92%92%E8%8A%B1%E7%89%B9%E6%95%88/1.htm">撒花特效</a><a class="tag" taget="_blank" href="/search/%E6%92%92%E8%8A%B1%E5%8A%A8%E7%94%BB/1.htm">撒花动画</a><a class="tag" taget="_blank" href="/search/%E6%88%90%E5%8A%9F%E7%89%B9%E6%95%88/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%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a>
<div>基础效果：前端安装并引入canvas-confetti包如有问题请使用满血版DeepSeek/国内直连GPT/Claude解答1.安装npminstall--savecanvas-confetti2.在前端代码中引用importconfettifrom'canvas-confetti';2.在前端代码中使用把下面这个直接放到你的函数里面，调用即可，调用时机由自己控制，比如成功状态或者其他时机con</div>
</li>
<li><a href="/article/1891800509359124480.htm"
title="基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件" target="_blank">基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件</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/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7</div>
</li>
<li><a href="/article/1891800126494666752.htm"
title="java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署" target="_blank">java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署</a>
<span class="text-muted">花样1999</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ</div>
</li>
<li><a href="/article/1891800127509688320.htm"
title="java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署" target="_blank">java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署</a>
<span class="text-muted">沪港</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码</div>
</li>
<li><a href="/article/1891784613878099968.htm"
title="springboot029网上购物商城系统" target="_blank">springboot029网上购物商城系统</a>
<span class="text-muted">Q_97095639</span>
<a class="tag" taget="_blank" href="/search/springboot%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">springboot毕业设计</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a>
<div>版权声明所有作品均为本人原创，提供参考学习使用，如需要源码+数据库+配套文档请移步www.taobysj.com搜索获取技术实现开发语言：Java+vue。框架：后端spingboot+前端vue。模式：B/S。数据库：mysql。开发工具：idea。论文字数：1万左右。数据库表个数：10个左右。运行环境：jdk+idea+mysql。版本不限制，包安装运行！项目优点：前后端分离，注释详细，代码简</div>
</li>
<li><a href="/article/1891781835067813888.htm"
title="前端布局的方式有哪些" target="_blank">前端布局的方式有哪些</a>
<span class="text-muted">IT木昜</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E7%99%BD%E8%AF%9D%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">大白话前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端布局的方式有哪些在前端开发里，布局就像是装修房子，把不同的东西合理地摆放在合适的位置，让整个空间既美观又实用。下面给你介绍几种常见的前端布局方式：1.普通流布局（标准文档流布局）这就像是按顺序往书架上摆书，一本挨着一本，从左到右，从上到下依次排列。在网页里，元素默认就是按照这种方式排列的。比如段落、标题这些元素，一个接一个地显示在页面上。块级元素（像、等）会独占一行，就像大本书会占一整层书架；</div>
</li>
<li><a href="/article/1891780445150965760.htm"
title="HTML CSS整理笔记（建议收藏）" target="_blank">HTML CSS整理笔记（建议收藏）</a>
<span class="text-muted">程序员的生活1</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/html%2Bcss/1.htm">html+css</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><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/css3/1.htm">css3</a>
<div>点击链接后退页面：回到上一个网页——修改placeholder提示的样式：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-</div>
</li>
<li><a href="/article/1891779940672663552.htm"
title="一些我不知道的HTML前端基础知识笔记" target="_blank">一些我不知道的HTML前端基础知识笔记</a>
<span class="text-muted">han1140521792</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/1.htm">学习资料</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>点击链接后退页面：回到上一个网页——修改placeholder提示的样式：1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-space:nowrap）、省略号（text-overflow:ellipsis）——常见</div>
</li>
<li><a href="/article/1891768465165971456.htm"
title="Vue3CompositionAPI" target="_blank">Vue3CompositionAPI</a>
<span class="text-muted">jpruby</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
<div>Vue3CompositionAPI第一章最终效果演示1.下载依赖npminstall2.启动前端npmrundev3.启动数据json-server--watchdata/db.json--port=3003第二章创建项目1.vite创建项目npminitvite@latestvite-blog----templatevue2.App.vueApp.vue3.Home.vue1.测试setup的</div>
</li>
<li><a href="/article/1891748658613907456.htm"
title="前端现代年轻人的“通病”：我们该如何应对？" target="_blank">前端现代年轻人的“通病”：我们该如何应对？</a>
<span class="text-muted">人民广场吃泡面</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%8D%E7%AB%AF%E5%8F%91%E5%B1%95%E6%8E%A2%E8%AE%A8/1.htm">大前端发展探讨</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>引言随着互联网技术的飞速发展，前端开发已经成为IT行业中最热门的领域之一。越来越多的年轻人选择投身前端开发，追求高薪、自由和创造力。然而，在前端开发的浪潮中，许多年轻人也暴露出了一些“通病”。这些“通病”不仅影响了他们的职业发展，还可能对整个团队和项目产生负面影响。本文将深入探讨现代年轻前端开发者常见的“通病”，分析其背后的原因，并提出一些实用的建议，帮助大家更好地应对这些挑战。目录前端年轻人的“</div>
</li>
<li><a href="/article/1891740714824429568.htm"
title="pnpm、npm、yarn 包管理工具『优劣对比』及『环境迁移』" target="_blank">pnpm、npm、yarn 包管理工具『优劣对比』及『环境迁移』</a>
<span class="text-muted">「已注销」</span>
<a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a>
<div>前言博主在开发前端网站的时候，发现随着开发的项目的逐渐增多，安装的依赖包越来越臃肿，依赖包的安装速度也是非常越来越慢，多项目开发管理也是比较麻烦。之前我就了解过pnpm，但是当时担心更换包管理环境可能会出现的依赖等问题，并且也没有急切的需求，所以当时并没有立即更换综上所述，随着上面问题的出现，更换包管理环境也逐渐提上日程，所以本文主要将会简单对比pnpm和npm/yarn，并且详细讲解如何在多项目</div>
</li>
<li><a href="/article/1891728725976870912.htm"
title="前端项目git提交时做代码规范验证" target="_blank">前端项目git提交时做代码规范验证</a>
<span class="text-muted">一个水货程序员</span>
<a class="tag" taget="_blank" href="/search/git/1.htm">git</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%E8%A7%84%E8%8C%83/1.htm">代码规范</a>
<div>前端项目git提交时做代码规范验证需要使用到的插件：husky，是一个GitHook工具，为git客户端增加hook的。lint-staged，在git提交前，进行代码规则检查确保入库的代码都符合代码规则，如果对整个项目进行lint这样速度太慢，lint-staged可以让lint只检测暂存区的文件，提高检测速度。当前依赖版本：husky版本：^8.0.1，lint-staged版本：^13.0.</div>
</li>
<li><a href="/article/1891721912220971008.htm"
title="QEMU-Manager：Mac上的QEMU图形化管理利器" target="_blank">QEMU-Manager：Mac上的QEMU图形化管理利器</a>
<span class="text-muted">苏承根</span>
<div>QEMU-Manager：Mac上的QEMU图形化管理利器项目地址:https://gitcode.com/gh_mirrors/qe/QEMU-Manager在探索虚拟化的浩瀚世界时，找到一个既强大又易用的工具至关重要。今天，我们要向您隆重推荐QEMU-Manager——一款专为macOS设计的QEMU图形前端，由Swift语言精心打造。通过这篇文章，我们将深入挖掘QEMU-Manager的魅力</div>
</li>
<li><a href="/article/1891721658436218880.htm"
title="VB.NET基于WEB房地产评估系统(源代码+文档)" target="_blank">VB.NET基于WEB房地产评估系统(源代码+文档)</a>
<span class="text-muted">csdn663648</span>
<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/1.htm">前端</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a>
<div>资料介绍：--------------摘要--------------房地产评估系统是典型的信息管理系统(MIS),其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的库。而对于后者则要求应用程序功能完备,易使用等特点。本系统特有的房屋基本情况、专业评估人员、估价方法等。经过分析,我们使用MICROSOFT公司的VISUALBA</div>
</li>
<li><a href="/article/1891716738052059136.htm"
title="通用评估系统（五）- 前端部分总体说明" target="_blank">通用评估系统（五）- 前端部分总体说明</a>
<span class="text-muted">一个水货程序员</span>
<a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/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/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
<div>通用评估系统（五）-前端部分总体说明相关链接Gitee地址通用评估系统（一）-介绍通用评估系统（二）-原型设计通用评估系统（三）-前端部分通用评估系统（四）-前端部分计算脚本编辑组件文档说明本节中说明前端总体显示相关信息。具体数据交互待后端开发时同步进行。目录结构实际显示效果全局搜索评估模型管理数据模型管理指标体系管理评估任务管理部分代码说明评估模型管理组件import{ref,h,compute</div>
</li>
<li><a href="/article/1891709421277474816.htm"
title="ASP.NET MVC实现layui富文本编辑器应用" target="_blank">ASP.NET MVC实现layui富文本编辑器应用</a>
<span class="text-muted">福伴</span>
<div>先看看视图层在视图层,使用的是视图助手–HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型。通过视图助手，为我们生成id和name属性相同的textarea标签。备注：在ASP.NETMVC中，能提交表单数据的元素（各种类型的input标签，textarea等），其属性name的值于实体模型中的属性名相同时，传递到控制器中的实体模型或参数，会自动进行映射，方便前端到后台的</div>
</li>
<li><a href="/article/1891707799231066112.htm"
title="Dify rerank model is deprecated in knowledge base" target="_blank">Dify rerank model is deprecated in knowledge base</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a>
<div>这是可优化的细节。这里过时的提示倾向于说工作空间有一个默认的重新排名模型，但在执行一些前端逻辑后我们发现当前的重新排名模型是空的或未定义的，因此这个当前模型已过时。但这里默认模型实际上是一个所有字段都是空字符串的模型结构：{"provider":"","model":""}在这种情况下，缺省模型实际上是空的且无效。因此，在这里我们不会显示过时标志，而是更有可能告诉用户为工作区配置至少一个重排序模型</div>
</li>
<li><a href="/article/1891704624444928000.htm"
title="AI前端开发：重塑工作环境与企业文化" target="_blank">AI前端开发：重塑工作环境与企业文化</a>
<span class="text-muted">suibian5235</span>
<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/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>近年来，人工智能（AI）技术的飞速发展深刻地改变着各个行业，前端开发领域也不例外。随着AI写代码工具的涌现，AI前端开发模式逐渐兴起，并对传统的前端开发模式带来了巨大的冲击。本文将深入探讨AI前端开发如何影响我们的工作环境和企业文化，并对未来的发展趋势进行展望。……AI前端开发对工作环境的影响AI前端开发的出现，最直接的影响体现在工作效率的提升和工作压力的变化上。许多AI工具，例如ScriptEc</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>