2020大厂web前端面试常见问题总结

本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题。通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。

1.web前端项目的结构是怎样的?文件有哪些命名规范?

项目结构规范

页面文件:以项目名命名,例如:shop

js文件:命名为js

css文件:命名为css

图片文件:命名为images

数据文件:命名为data

文件存储规范:按项目模块分类存储,例如:用户信息管理

页面文件存放: shop/userinfo/userlist.html

js文件:js/userinfo/userlist.js

css样式:css/userinfo/userlist.css

注意:图片的分类一般按照功能作用划分,比如: 小图标、动画图片

动画图片:images/gif/…

图标库:images/flags/…

项目文件命名规范

页面/js/css文件规范:项目名称-模块名称-页面名称,例如:shop-user-index.html用户模块的首页。

注意:js一般会包含 公共js 习惯命名commo.js;css样式会包含公共css,习惯命名为 common.css。

2.谈谈浏览器的兼容性

这个问题是非常抽象的,越是抽象的问题越能表现出我们的表达能力,而面试官就喜欢根据你的回答来追问,不断地打断你的思路,这个时候不要慌,一定要坚信自己。
回答思路

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本,我之前的项目要求兼容IE8.0以上的版本,Chrome 48以上,FireFox 44以上。有了这些最基本的要求,在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了

html部分
1.H5新标签在IE9以下的浏览器识别

2.ul标签内外边距问题ul标签在IE6\IE7中,有个默认的外边距,但是在IE8以上及其他浏览器中有个默认的内边距。解决方法:统一设置ul的内外边距为0

CSS样式的兼容性

1.css的hack问题:主要针对IE的不同版本,不同的浏览器的写法不同
IE的条件注释hack:

2.IE6双边距问题:IE6在浮动后,又有横向的margin,此时,该元素的外边距是其值的2倍
解决办法:display:block;

3.IE6下图片的下方有空隙
解决方法:给img设置display:block;

4.IE6下两个float之间会有个3px的bug
解决办法:给右边的元素也设置float:left;

5.IE6下没有min-width的概念,其默认的width就是min-width

6.IE6下在使用margin:0 auto;无法使其居中
解决办法:为其父容器设置text-align:center;

7.被点击过后的超链接不再具有hover和active属性
解决办法:按lvha的顺序书写css样式,
":link": a标签还未被访问的状态;
":visited": a标签已被访问过的状态;
":hover": 鼠标悬停在a标签上的状态;
":active": a标签被鼠标按着时的状态;

8.在使用绝对定位或者相对定位后,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但是父元素默认为0, 子高父低,所以不会改变显示的顺序

9.IE6下无法设置1px的行高,原因是由其默认行高引起的
解决办法:为期设置overflow:hidden;或者line-height:1px;

JavaScript的兼容性

1.标准的事件绑定方法函数为addEventListener,但IE下是attachEvent;

2.事件的捕获方式不一致,标准浏览器是由外至内,而IE是由内到外,但是最后的结果是将IE的标准定为标准

3.window.event获取的。并且获取目标元素的方法也不同,标准浏览器是event.target,而IE下是event.srcElement

4.在低版本的IE中获取的日期处理函数的值不是与1900的差值,但是在高版本的IE中和标准浏览器保持了一致,获取的值也是与1900的差值。
比如:var year= new Date().getYear();

5.ajax的实现方式不同,这个我所理解的是获取XMLHttpRequest的不同,IE下是activeXObject

6.IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同
其他浏览器:parentNode parentNode.childNodes
IE:parentElement parentElement.children

3.页面优化有哪些方法

页面优化的方法非常多,最好能够对这些优化方案进行分类,这些方案最好能够结合实际开发遇到的问题来表述。

优化的方案

减少操作量

  • 尽量减少 HTTP 请求
    1) 合并文件,比如把多个 CSS 文件合成一个;
    2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位;
  • 不要在 HTML 中使用缩放图片
    缩放图片并没有减少图片的容量,只是控制了图片的大小。
  • Image压缩
    使用工具对图片进行压缩,保证质量的同时减少了图片的大小。
  • 减少对DOM的操作
    减少对DOM的操作,减少页面的重绘。

提前做加载操作

  • 对域名进行预解析
    例如京东的做法
  • 预载入组件或延迟载入组件
  • 把 CSS 放到代码页上端
    CSS 放到最顶部,浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。
  • 使用 new Image对象,对图片进行缓存

提升并行加载

切分组件到多个域 ,提升服务器的响应能力

JavaScript和CSS优化

  • 从页面中剥离 JavaScript 与 CSS
    剥离后,能够有针对性的对其进行单独的处理策略,比如压缩或者缓存策略。
  • 精简 JavaScript 与 CSS
    使用工具压缩JavaScript和CSS文件
  • 脚本放到 HTML 代码页底部
    减少对页面的阻塞。

异步加载

使用Ajax实现异步加载,例如,滚动页面加载后面的内容,这种也比较常见。

4.页面渲染原理是什么?

这是一道纯理论的题目,只要能够将浏览器的渲染过程很专业的表述出来,一定会得到面试官的青睐,作为一枚前端人员确实有必要了解一下浏览器的渲染过程是怎样的,对于页面性能的提升是有帮助的。

解题思路

渲染引擎是干什么的
渲染引擎可以显示html、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件可以显示PDF格式。

渲染引擎

不同的浏览器有不同的渲染引擎,对于渲染引擎的使用总结如下:
Trident(MSHTML)内核:IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上
Webkit内核:Safari,Chrome等

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

步骤详细解释
第一步:渲染引擎开始解析html,根据标签构建DOM节点
第二步:根据css样式构建渲染树,包括元素的大小、颜色,隐藏的元素不会被构建到该树中。
第三步:根据css样式构建布局树,主要是确定元素要显示的位置。
第四步:根据前面的信息,绘制渲染树。

5.什么是响应式开发?

响应式开发是前端开发工作比较常见的工作内容,随着移动互联网的发展,移动端设计越来越重要,很多项目都是移动端项目先开发,而后是PC端的开发,为了降低运营成本和开发成本,同一个网站要能兼容PC端和移动端显示呼之欲出,进而响应式开发成了前端开发人员必备的技能,所以响应式开发的技术必须掌握。

什么是响应式

顾名思义,同一个网站兼容不同的大小的设备。如PC端、移动端(平板、横屏、竖排)的显示风格。

需要用到的技术

1. Media Query(媒体查询)

用于查询设备是否符合某一特定条件,这些特定条件包括屏幕尺寸,是否可触摸,屏幕精度,横屏竖屏等信息。

2. 使用em或rem做尺寸单位

用于文字大小的响应和弹性布局。

3. 禁止页面缩放

4. 屏幕尺寸响应

a) 固定布局:页面居中,两边留白,他能适应大于某个值一定范围的宽度,但是如果太宽就会有很多留白,太窄会出现滚动条,在PC页面上很常见。

b) 流动布局:屏幕尺寸在一定范围内变化时,不改变模块布局,只改变模块尺寸比例。比固定布局更具响应能力,两边不留白,但是也只能适应有限的宽度变化范围,否则模块会被挤(拉)得不成样子。

c) 自定义布局:上面几种布局方式都无法跨域大尺寸变化,所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

d) 栅格布局:这种布局方式使得模块之间非常容易对齐,易于模块位置的改变用于辅助自定义布局。

响应式设计注意事项

1.宽度不固定,可以使用百分比

head{width:100%;}

content{width:50%;}

2. 图片处理

图片的宽度和高度设置等比缩放,可以设置图片的width为百分比,height:auto;

背景图片可以使用background-size 指定背景图片的大小。

6.html5有哪些新特性、移除了那些元素?

题目涉及到范围非常的大,如果要面面俱到显然半天都答不完,可以先罗列出H5的一些新特性,不要回答那么具体,等面试官提具体的问题,所以在面试之前也要把这里的技术过一遍,至少每个技术也要做个小程序出来体验一下。

H5新特性

增强了图形渲染、影音、数据存储、多任务处理等处理能力主要表现在

绘画 canvas;

类似windows自带的画图板,可绘制线、框、路径、图……,InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 及其属性和方法。

画图需要的要素

a) 笔,用笔可以画线、圆、矩形、文本等

b) 颜色

c) 画板

由于画布案例比较多,代码比较复杂,可以在w3cschool上查看相关教程

2) 本地离线存储 localStorage

长期存储数据,浏览器关闭后数据不丢失;

1.特点

数据永久存储,没有时间限制;大小限制5M(够用了);只存储字符串。

2.数据存取方式

localStorage.a = 3;//设置a为"3"  
localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值  
localStorage.setItem("b","isaac");//设置b为"isaac"  
var a1 = localStorage["a"];//获取a的值  
var a2 = localStorage.a;//获取a的值  
var b = localStorage.getItem("b");//获取b的值  
var b2= localStorage.key(0);//获取第一个key的内容  
localStorage.removeItem("c");//清除c的值  
localStorage.clear();//清除所有的数据

推荐使用:

getItem()

setItem()

removeItem()

3.事件监听

if(window.addEventListener){  
 window.addEventListener("storage",handle_storage,false);//  
}else if(window.attachEvent){ //兼容IE  
 window.attachEvent("onstorage",handle_storage);  
}  
function handle_storage(e){  
 }

对象e为localStorage对象,Chrome、Firefox支持差,IE支持较好。

3) sessionStorage的数据在浏览器关闭后自动删除;操作参考localStorage

4) 用于媒介回放的 video和 audio 元素;

5) 语意化更好的内容元素,比如article、footer、header、nav、section;

6) 表单控件,calendar、date、time、email、url、search;

7) 新的技术webworker(专用线程)

8) websocketsocket通信

9) Geolocation 地理定位

移除的元素

纯表现的元素

  • 默认字体,不设置字体,以此渲染
  • 字体标签
  • 水平居中
  • 下划线
  • 大字体
  • 中横线
  • 文本等宽

框架集

  • </li> <li><frame></li> </ul> <p><a href="https://bbs.huaweicloud.com/blogs/194300?utm_source=segmentfault&utm_medium=bbs-ex&utm_campaign=other&utm_content=content" rel="nofollow noreferrer"><strong>点击关注,第一时间了解华为云新鲜技术~</strong></a></p> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1295882922414383104"></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">你可能感兴趣的:(前端,浏览器,css样式,响应式,面试)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902608149060317184.htm" title="金三银四快过去一半了,是时候加把劲了" target="_blank">金三银四快过去一半了,是时候加把劲了</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AFgo%E6%89%BE%E5%B7%A5%E4%BD%9C%E9%9D%A2%E8%AF%95/1.htm">后端go找工作面试</a> <div>从复旦春招会的15000+岗位争夺战,到AI算法岗年薪百万的“神仙打架”,再到游戏行业20:1的残酷竞争比,今年的金三银四像极了《三体》里的黑暗森林:机会看似遍地,但稍有不慎就成了别人的“背景板”。但现实真的是“投晚了就凉了”吗?数据告诉你真相:智联研究院统计显示,算法工程师、机器人算法工程师等岗位需求同比激增44%,而中小企业的“捡漏窗口”才刚开启。这半个月,我整理了20+场面试实录(含小鹅通、</div> </li> <li><a href="/article/1902599516868112384.htm" title="2025React岗位前端面试题180道及其答案解析,看完稳了,万字长文,持续更新...." target="_blank">2025React岗位前端面试题180道及其答案解析,看完稳了,万字长文,持续更新....</a> <span class="text-muted">祈澈菇凉</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.什么是React?它的主要特点是什么?答案解析:React是一个用于构建用户界面的JavaScript库,主要用于构建单页应用。其主要特点包括:组件化:React应用由多个可重用的组件组成,便于管理和维护。虚拟DOM:React使用虚拟DOM提高性能,通过最小化实际DOM操作来优化渲染过程。单向数据流:数据在组件之间以单向流动的方式传递,简化了数据管理和调试。声明式编程:React允许开发者以</div> </li> <li><a href="/article/1902594848398045184.htm" title="Python前端开发" target="_blank">Python前端开发</a> <span class="text-muted">PITSU</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>Python前端开发1.前端三剑客(HTML,CSS和JavaScript)1.1HTML1.1.1HTML简介HyperTextMark-upLanguage,指的是超文本标记语言;html是开发网页的语言;html中的标签大多数都是成对出现的,格式:1.1.2HTML结构第一行是文档声明部分HTML:分为页头,页身和页脚。标签大部分是成对出现1.1.3第一行文档声明部分HTML在vscode中</div> </li> <li><a href="/article/1902585006262382592.htm" title="MySQL 面试题" target="_blank">MySQL 面试题</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/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>1.数据库基础问题:请解释数据库(DB)、数据库管理系统(DBMS)、SQL三者的区别。参考答案:DB:存储数据的结构化仓库DBMS:管理数据库的软件(如MySQL、Oracle)SQL:操作关系型数据库的标准化语言2.SQL分类问题:SQL分为哪几类?分别写出对应的关键字(至少3个)。参考答案:DDL:CREATE/DROP/ALTERDML:INSERT/UPDATE/DELETEDQL:SE</div> </li> <li><a href="/article/1902581729210724352.htm" title="FastAPI测试策略:参数解析单元测试" target="_blank">FastAPI测试策略:参数解析单元测试</a> <span class="text-muted">qcidyu</span> <a class="tag" taget="_blank" href="/search/%E6%96%87%E7%AB%A0%E5%BD%92%E6%A1%A3/1.htm">文章归档</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8%E4%BC%A0%E6%92%AD%E9%AA%8C%E8%AF%81/1.htm">异常传播验证</a><a class="tag" taget="_blank" href="/search/%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5%E6%B5%8B%E8%AF%95/1.htm">依赖注入测试</a><a class="tag" taget="_blank" href="/search/%E8%AF%B7%E6%B1%82%E6%A8%A1%E6%8B%9F%E6%8A%80%E6%9C%AF/1.htm">请求模拟技术</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E8%A6%86%E7%9B%96%E7%8E%87%E4%BC%98%E5%8C%96/1.htm">测试覆盖率优化</a><a class="tag" taget="_blank" href="/search/Pydantic%E9%AA%8C%E8%AF%81%E6%B5%8B%E8%AF%95/1.htm">Pydantic验证测试</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95%E7%AD%96%E7%95%A5/1.htm">单元测试策略</a><a class="tag" taget="_blank" href="/search/%E5%8F%82%E6%95%B0%E8%A7%A3%E6%9E%90%E6%B5%8B%E8%AF%95/1.htm">参数解析测试</a> <div>扫描二维码关注或者微信搜一搜:编程智域前端至全栈交流与成长探索数千个预构建的AI应用,开启你的下一个伟大创意第一章:核心测试方法论1.1三层测试体系架构#第一层:模型级测试deftest_user_model_validation():withpytest.raises(ValidationError):User(age=-5)#第二层:依赖项测试deftest_auth_dependency()</div> </li> <li><a href="/article/1902578448728125440.htm" title="【前端网络深潜行者】信息化人员必备知识&面试宝典:TCP连接中断,客户端突然“玩失踪”怎么办?" target="_blank">【前端网络深潜行者】信息化人员必备知识&面试宝典:TCP连接中断,客户端突然“玩失踪”怎么办?</a> <span class="text-muted">DTcode7</span> <a class="tag" taget="_blank" href="/search/IT%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E7%9B%B8%E5%85%B3/1.htm">IT信息技术相关</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8C%96%E6%8A%80%E8%83%BD%E9%9D%A2%E8%AF%95%E5%AE%9D%E5%85%B8/1.htm">信息化技能面试宝典</a><a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</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/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83/1.htm">前端三大核心</a><a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a> <div>【前端网络深潜行者】信息化人员必备知识&面试宝典:TCP连接中断,客户端突然“玩失踪”怎么办?TCP的忠诚卫士:保活与重传保活机制(Keepalive)超时重传与超时前端策略:优雅的应对与重连案例一:心跳检测案例二:断线重连逻辑安全与性能考量实战经验之谈排错思路结语与探讨在网络通信的迷宫中,TCP/IP协议犹如稳固的桥梁,承载着数据的往来。然而,当客户端这个“信使”突然玩起了失踪”,我们如何确保这</div> </li> <li><a href="/article/1902577816931725312.htm" title="【微信小程序变通实现DeepSeek支持语音】" target="_blank">【微信小程序变通实现DeepSeek支持语音】</a> <span class="text-muted">技术与健康</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%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序实现录音转文字,并调用后端服务(Node.js)进行语音识别和,然后调用DeepSeek处理的完整实现。整体架构前端(微信小程序):实现录音功能。将录音文件上传到后端。接收后端返回的语音识别结果,并显示在可编辑的文本框中。调用DeepSeek处理文本。后端(Node.js):接收小程序上传的录音文件。调用腾讯云语音识别(ASR)服务,将语音转换为文字。返回识别结果给小程序。提供DeepS</div> </li> <li><a href="/article/1902573271463817216.htm" title="localStorage在上面位置?数据存放文件名是什么?" target="_blank">localStorage在上面位置?数据存放文件名是什么?</a> <span class="text-muted">2301_79698214</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在上述代码中,数据并不是以传统文件的形式存放在某个具体的文件里,而是存储在浏览器的localStorage中。localStorage是HTML5新增的一个会话存储对象,它用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页后数据仍然存在。数据存储位置和文件名存储位置:localStorage是浏览器提供的一个存储机制,数据存储在浏览器的本地存储区域,不同的浏览器存储位置不同,例如:Chro</div> </li> <li><a href="/article/1902558531052171264.htm" title="微前端 qiankun vite vue3" target="_blank">微前端 qiankun vite vue3</a> <span class="text-muted">可缺不可滥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E6%A1%86%E6%9E%B6/1.htm">前端项目框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>文章目录简介主应用qiankun-mainvue3vite子应用qiankun-app-vue2webpack5子应用qiankun-reactwebpack5子应用quankun-vue3vite遇到的问题简介主要介绍以qiankun框架为基础,vite搭建vue3项目为主应用,wepackvue2和webpackreact搭建的子应用,形成的一个微前端框架。主应用qiankun-mainvue</div> </li> <li><a href="/article/1902553103970922496.htm" title="Browser-Use WebUI项目启动指南" target="_blank">Browser-Use WebUI项目启动指南</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><a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>摘要此前发布《Browser-UseWebUI使用体验》博文后,鉴于部分朋友运行时出现问题,重新运行并整理相关内容。本文详细记录WebUI项目启动全过程,涵盖Python3.11+、Chrome浏览器及APIKeys等环境要求,Python环境检查、依赖安装等环境配置步骤,.env文件中环境变量的设置方法。同时,针对启动中如lxml.html.clean依赖缺失、连接被拒等问题给出解决方案,介绍启</div> </li> <li><a href="/article/1902542509297430528.htm" title="【Vue+TypeScript实战指南:提高代码质量和开发效率】" target="_blank">【Vue+TypeScript实战指南:提高代码质量和开发效率】</a> <span class="text-muted">小怪兽9699</span> <a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</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> <div>前言在现代前端开发中,Vue.js是一个非常流行且强大的框架,而TypeScript则是增强代码类型安全性和可维护性的利器。本文将详细介绍如何结合Vue和TypeScript来构建高质量的应用程序。无论你是有一定基础的开发者还是希望进一步提升技能的高手,本文都将为你提供详细的步骤和代码示例。1.环境搭建首先,确保你已经安装了Node.js和npm。然后,全局安装VueCLI:npminstall-</div> </li> <li><a href="/article/1902542130807631872.htm" title="若依框架入门指南:快速上手SpringBoot+前后端分离版" target="_blank">若依框架入门指南:快速上手SpringBoot+前后端分离版</a> <span class="text-muted">小小鸭程序员</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><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/intellij-idea/1.htm">intellij-idea</a> <div>若依(RuoYi)是一款基于SpringBoot的快速开发平台,集成了权限管理、代码生成、监控管理等功能。本文将以SpringBoot+Vue前后端分离版本为例,带你快速上手若依框架。一、环境准备基础环境:JDK1.8+MySQL5.7+Redis5.0+Maven3.6+Node.js14+(前端)下载项目:#后端项目gitclonehttps://gitee.com/y_project/Ruo</div> </li> <li><a href="/article/1902540414116753408.htm" title="SSL证书失效?用户数据还安全吗?" target="_blank">SSL证书失效?用户数据还安全吗?</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/ssl%E8%AF%81%E4%B9%A6/1.htm">ssl证书</a> <div>一、SSL证书:数据安全的“护盾”SSL证书,全称为安全套接层证书,它通过在浏览器和服务器之间建立加密通道,确保数据传输的保密性、完整性与真实性。当用户访问一个启用SSL证书的网站时,数据被加密成密文,外人难以窃取或篡改,犹如给数据穿上了一层坚固的铠甲。SSL证书申请流程↓快速申请入口直接访问JoySSL,注册一个账号,记得填写注册码230931,获得技术支持二、证书失效瞬间:风险乍现一旦SSL证</div> </li> <li><a href="/article/1902539980882898944.htm" title="Vue.js的watch监听" target="_blank">Vue.js的watch监听</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录引言`watch`选项的基本概念`watch`选项的基本语法`watch</div> </li> <li><a href="/article/1902538393464664064.htm" title="为什么有免费 SSL 证书大家还用付费的" target="_blank">为什么有免费 SSL 证书大家还用付费的</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/ssl%E8%AF%81%E4%B9%A6%E6%95%B0%E5%AD%97%E8%AF%81%E4%B9%A6/1.htm">ssl证书数字证书</a> <div>一、信任基石:权威与否大不同免费SSL证书通常由一些非权威的证书颁发机构提供,在浏览器地址栏中显示时,可能会出现诸如“不安全”的提示标识,容易引发用户对网站可信度的质疑。付费SSL证书多来自全球知名、广受认可的权威机构,这些大机构经过长期的行业深耕,有着严苛的审核流程,其颁发的证书能让网站瞬间提升“可信度”,用户看到熟悉且信任的锁形图标,更愿意放心地在网站上输入敏感信息,如登录密码、银行卡号等,这</div> </li> <li><a href="/article/1902536958496796672.htm" title="Java面试八股之Redis集群Cluster" target="_blank">Java面试八股之Redis集群Cluster</a> <span class="text-muted">天哥不爱学习</span> <a class="tag" taget="_blank" href="/search/Java%E9%9D%A2%E8%AF%95%E5%85%AB%E8%82%A1%E6%96%87/1.htm">Java面试八股文</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>Redis集群ClusterRedisCluster是一种基于数据分片(Sharding)的分布式缓存和存储系统,它实现了数据的水平扩展、高可用性和自动故障转移。以下是对RedisCluster模式详细实现流程的描述:1.初始化与配置部署节点:在不同的服务器上部署多个Redis节点,每个节点既可以作为主节点也可以作为从节点。配置集群模式:为每个节点启用Cluster模式,指定Cluster所需的端</div> </li> <li><a href="/article/1902535699349958656.htm" title="基于Puppeteer与Selenium的跨浏览器自动化测试全攻略——从环境搭建到实战优化,万字详解自动化测试落地" target="_blank">基于Puppeteer与Selenium的跨浏览器自动化测试全攻略——从环境搭建到实战优化,万字详解自动化测试落地</a> <span class="text-muted">追寻向上</span> <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>自动化测试的价值与工具选型为什么需要自动化测试?效率提升:减少重复人工操作,回归测试耗时降低80%精准覆盖:支持高频次、多场景、多设备验证质量保障:避免人为疏忽导致的漏测问题Puppeteer与Selenium的互补性Puppeteer:专精Chrome生态,适用于高性能截图、动态渲染、复杂交互场景Selenium:支持多浏览器(Firefox/Safari/Edge),适合跨平台兼容性测试协同方</div> </li> <li><a href="/article/1902530903490490368.htm" title="【unity&Node.js篇】多人联机游戏开发代码规范" target="_blank">【unity&Node.js篇】多人联机游戏开发代码规范</a> <span class="text-muted">雅鸦</span> <a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/1.htm">代码规范</a> <div>多人联机游戏前端(Unity)与后端(Node.js)代码规范说明书这份代码规范旨在帮助多人联机游戏的开发团队建立一致性和高质量的代码标准,涵盖前端(Unity)和后端(Node.js)开发部分。无论是游戏逻辑的实现、多人同步机制、网络通信还是错误处理,都需要清晰的规范来确保代码的可维护性、可扩展性与高效性。1.Unity前端代码规范1.1命名规范变量、函数命名:使用PascalCase(大驼峰)</div> </li> <li><a href="/article/1902527877098827776.htm" title="java八股之redis面试题" target="_blank">java八股之redis面试题</a> <span class="text-muted">MinusZXX</span> <a class="tag" taget="_blank" href="/search/%E5%85%AB%E8%82%A1%E6%96%87-redis/1.htm">八股文-redis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</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/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>目录1、redis是单线程还是多线程2、Redis为什么那么快3、Redis底层数据是如何用跳表来存储的4、RedisKey过期了为什么内存没释放(附删除策略)5、Redis没设置key的过期时间,为什么被Redis主动删除了(淘汰策略)6、Redis主从、哨兵、集群架构优缺点比较7、Redis集群数据分片8、Redis主从切换导致缓存雪崩9、Redis持久化RDB、AOF和混合持久化AOF4.0</div> </li> <li><a href="/article/1902512115617427456.htm" title="python-56-基于Vue和Flask进行前后端分离的项目开发示例实战" target="_blank">python-56-基于Vue和Flask进行前后端分离的项目开发示例实战</a> <span class="text-muted">皮皮冰燃</span> <a class="tag" taget="_blank" href="/search/python3/1.htm">python3</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a> <div>文章目录1创建Vue前端项目1.1运行demo1.2实现需求2flask部署上述dist(前后端未分离)2.1代码app.py2.2运行访问3nginx部署(前后端分离)3.1nginx前端服务3.3.1windows安装nginx3.3.2修改nginx.conf配置文件3.3.3启动nginx3.3.3停止nginx3.2启动后端服务3.2.1app.py(去除前端渲染)3.2.2启动flas</div> </li> <li><a href="/article/1902509463449956352.htm" title="高通成都linux engineer intern 一面面经" target="_blank">高通成都linux engineer intern 一面面经</a> <span class="text-muted">han_xue_feng</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>题解|#KNN算法#在*******里有个叫《题解--2024华南理工校赛.pdf》的文件高通成都linuxengineerintern一面面经两个面试官共25min就结束了,面试氛围还可以,问的很快。1.自我介绍2.问对高通了解多少3.对牛客鼠人传(第四十四集,2024/4/22)刷题:尝试补昨天D,题解看了半天似懂非懂,遂放弃改天再补。做题老是把复杂的问题想简单,简单的问题想复京东物流管理培训</div> </li> <li><a href="/article/1902507194079834112.htm" title="什么是 XSS(跨站脚本攻击)?" target="_blank">什么是 XSS(跨站脚本攻击)?</a> <span class="text-muted">Aishenyanying33</span> <a class="tag" taget="_blank" href="/search/web%E6%BC%8F%E6%B4%9E/1.htm">web漏洞</a><a class="tag" taget="_blank" href="/search/owastop10/1.htm">owastop10</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/xss%E6%BC%8F%E6%B4%9E/1.htm">xss漏洞</a> <div>XSS(Cross-SiteScripting)是黑客通过在网页中注入恶意JavaScript代码,让受害者的浏览器执行这些代码的攻击方式。常见攻击场景XSS攻击通常发生在网站允许用户提交内容的地方,例如:论坛、留言板(黑客发布恶意评论)博客文章(黑客在评论区插入恶意代码)搜索框(黑客让受害者访问特定链接)XSS实战演示1️⃣漏洞场景:不安全的留言板假设一个网站vulnerable.com允许用户</div> </li> <li><a href="/article/1902504163389009920.htm" title="pipost 如何提升团队协作效率 [特殊字符]" target="_blank">pipost 如何提升团队协作效率 [特殊字符]</a> <span class="text-muted">Kairo_01</span> <a class="tag" taget="_blank" href="/search/postman/1.htm">postman</a> <div>开发团队中的沟通障碍在许多开发团队中,前端工程师、后端工程师和QA测试人员之间的同步往往会浪费大量时间。不断的会议和对齐会话减慢了整个过程,严重影响了生产力。以下是一些常见的痛点:前端和后端团队需要不断对API接口进行同步。测试人员必须反复确认API行为。产品经理必须确保每个人都对项目需求达成一致。这些沟通障碍导致开发周期延长、团队士气下降和项目发布推迟。通过Apipost提高协作效率1.精简的A</div> </li> <li><a href="/article/1902502651820568576.htm" title="Cookies 详解:工作原理、使用方法及安全性" target="_blank">Cookies 详解:工作原理、使用方法及安全性</a> <span class="text-muted">才华是浅浅的耐心</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>1.什么是Cookie?Cookie是存储在用户浏览器中的小型文本数据,通常用于保存用户会话信息、个性化设置以及跨页面的数据共享。它是Web服务器与客户端浏览器之间的一种状态管理机制,常用于爬虫的会话凭证。查看方式:打开网站-登录-打开开发正工具-点击网络-刷新-点击一个包-查看表头(有的需要禁用缓存才能看见)2.Cookie的作用会话管理:如用户登录状态的保持。个性化设置:存储用户偏好,如主题、</div> </li> <li><a href="/article/1902499499805306880.htm" title="现代前端开发框架对比:React、Vue 和 Svelte 的选择指南" target="_blank">现代前端开发框架对比:React、Vue 和 Svelte 的选择指南</a> <span class="text-muted">zhyoobo</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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> <div>引言在当今快速发展的Web开发领域,前端框架的选择往往直接影响项目的开发效率、维护成本和用户体验。React、Vue和Svelte作为当前最受关注的三大框架,各自拥有独特的设计哲学与技术实现。本文将通过5000字的深度解析,从架构设计、开发体验、性能特征到生态系统四个维度进行全方位对比,并针对不同场景提供选型决策框架。无论您是初创团队的技术负责人,还是正在构建企业级应用的架构师,都能在此找到面向2</div> </li> <li><a href="/article/1902497602121822208.htm" title="高级java每日一道面试题-2025年3月03日-微服务篇[Eureka篇]-Eureka自我保护机制是什么?" target="_blank">高级java每日一道面试题-2025年3月03日-微服务篇[Eureka篇]-Eureka自我保护机制是什么?</a> <span class="text-muted">java我跟你拼了</span> <a class="tag" taget="_blank" href="/search/java%E6%AF%8F%E6%97%A5%E4%B8%80%E9%81%93%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">java每日一道面试题</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/eureka/1.htm">eureka</a><a class="tag" taget="_blank" href="/search/SpringCloud/1.htm">SpringCloud</a><a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E6%88%91%E4%BF%9D%E6%8A%A4%E6%9C%BA%E5%88%B6/1.htm">自我保护机制</a><a class="tag" taget="_blank" href="/search/%E5%87%BA%E5%8F%91%E6%9D%A1%E4%BB%B6/1.htm">出发条件</a> <div>如果有遗漏,评论区告诉我进行补充面试官:Eureka自我保护机制是什么?我回答:在Java高级面试中,Eureka的自我保护机制(Self-PreservationMode)是一个非常重要且常被提及的话题。理解这一机制的工作原理及其应用场景对于构建高可用性的微服务架构至关重要。以下是结合提供的内容对Eureka自我保护机制的详细解析和综合概述:自我保护机制的概念Eureka的自我保护机制是一种容错</div> </li> <li><a href="/article/1902497224248586240.htm" title="JVM技术八股文" target="_blank">JVM技术八股文</a> <span class="text-muted">小麟School</span> <a class="tag" taget="_blank" href="/search/JVM/1.htm">JVM</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JVM面试八股文,整理了出来。排版不太好!目录JVM入门部分为什么要学习JVM?你了解哪些JVM产品?JVM的构成有哪几部分?JVM类加载部分你知道哪些类加载器?为什么需要多个类加载器?什么是双亲委派类加载模型?双亲委派方式加载类有什么优势、劣势?描述一下类加载时候的基本步骤是怎样的?什么情况下会触发类的加载?类加载时静态代码块一定会执行吗?如何理解类的主动加载和被动加载?为什么要自己定义类加载器</div> </li> <li><a href="/article/1902496972112195584.htm" title="`fetch` 和 `axios`的前端使用区别" target="_blank">`fetch` 和 `axios`的前端使用区别</a> <span class="text-muted">Studying_swz</span> <a class="tag" taget="_blank" href="/search/blog/1.htm">blog</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>欢迎访问的个人博客:https://swzbk.site/,加好友,拉你入福利群fetch和axios`是前端常用的两种HTTP客户端,以下是它们的核心区别及适用场景:一、本质区别特性fetchaxios类型浏览器原生API(部分环境需polyfill)第三方库(需通过npm/yarn安装)底层实现基于Promise基于Promise,封装了XMLHttpRequest二、核心功能对比1.请求与响</div> </li> <li><a href="/article/1902496717601828864.htm" title="史上最全JVM面试八股文合集" target="_blank">史上最全JVM面试八股文合集</a> <span class="text-muted">Java小海.</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>简述JVM内存模型线程私有的运行时数据区:程序计数器、Java虚拟机栈、本地方法栈。线程共享的运行时数据区:Java堆、方法区。简述程序计数器程序计数器表示当前线程所执行的字节码的行号指示器。程序计数器不会产生StackOverflowError和OutOfMemoryError。简述虚拟机栈Java虚拟机栈用来描述Java方法执行的内存模型。线程创建时就会分配一个栈空间,线程结束后栈空间被回收。</div> </li> <li><a href="/article/1902490784205172736.htm" title="高级java每日一道面试题-2025年3月06日-微服务篇[Eureka篇]-Eureka Server和Eureka Client关系?" target="_blank">高级java每日一道面试题-2025年3月06日-微服务篇[Eureka篇]-Eureka Server和Eureka Client关系?</a> <span class="text-muted">java我跟你拼了</span> <a class="tag" taget="_blank" href="/search/java%E6%AF%8F%E6%97%A5%E4%B8%80%E9%81%93%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">java每日一道面试题</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">微服务</a><a class="tag" taget="_blank" href="/search/eureka/1.htm">eureka</a> <div>如果有遗漏,评论区告诉我进行补充面试官:EurekaServer和EurekaClient关系?我回答:在微服务架构中,Eureka作为Netflix开源的服务发现组件,由EurekaServer(服务端)和EurekaClient(客户端)两大部分组成。这两者通过紧密协作实现服务的注册、发现与健康管理,是确保微服务间通信顺畅的关键。以下是对EurekaServer和EurekaClient关系的</div> </li> <li><a href="/article/121.htm" title="jquery实现的jsonp掉java后台" target="_blank">jquery实现的jsonp掉java后台</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div> 什么是JSONP? 先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,小可不才,试着用自己的方式来阐释一下这个问题,看看是否有帮助。 1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准; 2、</div> </li> <li><a href="/article/248.htm" title="Struts2学习笔记" target="_blank">Struts2学习笔记</a> <span class="text-muted">caoyong</span> <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a> <div>SSH : Spring + Struts2 + Hibernate 三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 分层原则:单向依赖,接口耦合 1、Struts2&nbsp; =&nbsp; Struts&nbsp; + Webwork 2、搭建struts2开发环境 &nbsp;&nbsp; a&gt;、到www.apac</div> </li> <li><a href="/article/375.htm" title="SpringMVC学习之后台往前台传值方法" target="_blank">SpringMVC学习之后台往前台传值方法</a> <span class="text-muted">满城风雨近重阳</span> <a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a> <div>springMVC控制器往前台传值的方法有以下几种: 1.ModelAndView &nbsp; &nbsp;通过往ModelAndView中存放viewName:目标地址和attribute参数来实现传参: &nbsp; &nbsp; &nbsp;ModelAndView mv=new ModelAndView(); &nbsp;mv.setViewName=&quot;success</div> </li> <li><a href="/article/502.htm" title="WebService存在的必要性?" target="_blank">WebService存在的必要性?</a> <span class="text-muted">一炮送你回车库</span> <a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div>做Java的经常在选择Webservice框架上徘徊很久,Axis &nbsp;Xfire Axis2 CXF ,他们只有一个功能,发布HTTP服务然后用XML做数据传输。 是的,他们就做了两个功能,发布一个http服务让客户端或者浏览器连接,接收xml参数并发送xml结果。 当在不同的平台间传输数据时,就需要一个都能解析的数据格式。 但是为什么要使用xml呢?不能使json或者其他通用数据</div> </li> <li><a href="/article/629.htm" title="js年份下拉框" target="_blank">js年份下拉框</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java+web+ee/1.htm">java web ee</a> <div> &lt;div id=&quot;divValue&quot;&gt;test...&lt;/div&gt;测试 //年份 &lt;select id=&quot;year&quot;&gt;&lt;/select&gt; &lt;script type=&quot;text/javascript&quot;&gt; window.onload = </div> </li> <li><a href="/article/756.htm" title="简单链式调用的实现技术" target="_blank">简单链式调用的实现技术</a> <span class="text-muted">归来朝歌</span> <a class="tag" taget="_blank" href="/search/%E6%96%B9%E6%B3%95%E8%B0%83%E7%94%A8/1.htm">方法调用</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E5%BC%8F%E5%8F%8D%E5%BA%94/1.htm">链式反应</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E6%80%9D%E6%83%B3/1.htm">编程思想</a> <div>在编程中,我们可以经常遇到这样一种场景:一个实例不断调用它自身的方法,像一条链条一样进行调用 这样的调用你可能在Ajax中,在页面中添加标签: $(&quot;&lt;p&gt;&quot;).append($(&quot;&lt;span&gt;&quot;).text(list[i].name)).appendTo(&quot;#result&quot;); &nbsp; 也可能在HQ</div> </li> <li><a href="/article/883.htm" title="JAVA调用.net 发布的webservice 接口" target="_blank">JAVA调用.net 发布的webservice 接口</a> <span class="text-muted">darkranger</span> <a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a> <div> /** * @Title: callInvoke * @Description: TODO(调用接口公共方法) * @param @param url 地址 * @param @param method 方法 * @param @param pama 参数 * @param @return * @param @throws BusinessException </div> </li> <li><a href="/article/1010.htm" title="Javascript模糊查找 | 第一章 循环不能不重视。" target="_blank">Javascript模糊查找 | 第一章 循环不能不重视。</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/Way/1.htm">Way</a> <div> 最近受我的朋友委托用js+HTML做一个像手册一样的程序,里面要有可展开的大纲,模糊查找等功能。我这个人说实在的懒,本来是不愿意的,但想起了父亲以前教我要给朋友搞好关系,再加上这也可以巩固自己的js技术,于是就开始开发这个程序,没想到却出了点小问题,我做的查找只能绝对查找。具体的js代码如下: function search(){ var arr=new Array(&quot;my</div> </li> <li><a href="/article/1137.htm" title="狼和羊,该怎么抉择" target="_blank">狼和羊,该怎么抉择</a> <span class="text-muted">atongyeye</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>狼和羊,该怎么抉择 在做一个链家的小项目,只有我和另外一个同事两个人负责,各负责一部分接口,我的接口写完,并全部测联调试通过。所以工作就剩下一下细枝末节的,工作就轻松很多。每天会帮另一个同事测试一些功能点,协助他完成一些业务型不强的工作。 今天早上到公司没多久,领导就在QQ上给我发信息,让我多协助同事测试,让我积极主动些,有点责任心等等,我听了这话,心里面立马凉半截,首先一个领导轻易说</div> </li> <li><a href="/article/1264.htm" title="读取android系统的联系人拨号" target="_blank">读取android系统的联系人拨号</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/sqlite%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">sqlite数据库</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AE%B9%E6%8F%90%E4%BE%9B%E8%80%85/1.htm">内容提供者</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9C%8D%E5%8A%A1%E7%9A%84%E4%BD%BF%E7%94%A8/1.htm">系统服务的使用</a> <div>&nbsp; &nbsp; &nbsp; &nbsp;联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢 &nbsp; 关键代码: &nbsp; &nbsp; 1, 使用javabean操作存储读取到的数据 package com.example.bean; /** * * @author Admini</div> </li> <li><a href="/article/1391.htm" title="ORACLE自定义异常" target="_blank">ORACLE自定义异常</a> <span class="text-muted">bijian1013</span> <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/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%82%E5%B8%B8/1.htm">自定义异常</a> <div>实例: CREATE OR REPLACE PROCEDURE test_Exception ( ParameterA IN varchar2, ParameterB IN varchar2, ErrorCode OUT varchar2 --返回值,错误编码 ) AS /*以下是一些变量的定义*/ V1 NUMBER; V2 nvarc</div> </li> <li><a href="/article/1518.htm" title="查看端号使用情况" target="_blank">查看端号使用情况</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>一、查看端口 在windows命令行窗口下执行: &gt;netstat -aon|findstr &quot;8080&quot; 显示结果: TCP&nbsp;&nbsp;&nbsp;&nbsp; 127.0.0.1:80&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0.0.0.0:0&nbsp;&nbsp;&nbsp;&nbsp;&</div> </li> <li><a href="/article/1645.htm" title="【Spark二十】运行Spark Streaming的NetworkWordCount实例" target="_blank">【Spark二十】运行Spark Streaming的NetworkWordCount实例</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/wordcount/1.htm">wordcount</a> <div>Spark Streaming简介 &nbsp; NetworkWordCount代码 &nbsp; /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with </div> </li> <li><a href="/article/1772.htm" title="Struts2 与 SpringMVC的比较" target="_blank">Struts2 与 SpringMVC的比较</a> <span class="text-muted">BlueSkator</span> <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a><a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>1. 机制:spring mvc的入口是servlet,而struts2是filter,这样就导致了二者的机制不同。&nbsp;2. 性能:spring会稍微比struts快。spring mvc是基于方法的设计,而sturts是基于类,每次发一次请求都会实例一个action,每个action都会被注入属性,而spring基于方法,粒度更细,但要小心把握像在servlet控制数据一样。spring</div> </li> <li><a href="/article/1899.htm" title="Hibernate在更新时,是可以不用session的update方法的(转帖)" target="_blank">Hibernate在更新时,是可以不用session的update方法的(转帖)</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/update/1.htm">update</a> <div>地址:http://blog.csdn.net/plpblue/article/details/9304459 public void synDevNameWithItil() {Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran</div> </li> <li><a href="/article/2026.htm" title="读《研磨设计模式》-代码笔记-观察者模式" target="_blank">读《研磨设计模式》-代码笔记-观察者模式</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; import java.util.Observable; import java.util.Observer; /** * “观</div> </li> <li><a href="/article/2153.htm" title="重置MySQL密码" target="_blank">重置MySQL密码</a> <span class="text-muted">chenhbc</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E7%BD%AE%E5%AF%86%E7%A0%81/1.htm">重置密码</a><a class="tag" taget="_blank" href="/search/%E5%BF%98%E8%AE%B0%E5%AF%86%E7%A0%81/1.htm">忘记密码</a> <div>如果你也像我这么健忘,把MySQL的密码搞忘记了,经过下面几个步骤就可以重置了(以Windows为例,Linux/Unix类似): 1、关闭MySQL服务 2、打开CMD,进入MySQL安装目录的bin目录下,以跳过权限检查的方式启动MySQL mysqld --skip-grant-tables &nbsp;3、新开一个CMD窗口,进入MySQL mysql -uroot &nbsp</div> </li> <li><a href="/article/2280.htm" title="再谈系统论,控制论和信息论" target="_blank">再谈系统论,控制论和信息论</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a><a class="tag" taget="_blank" href="/search/%E8%83%BD%E6%BA%90/1.htm">能源</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E5%BA%94%E7%94%A8/1.htm">企业应用</a><a class="tag" taget="_blank" href="/search/%E9%A2%86%E5%9F%9F%E6%A8%A1%E5%9E%8B/1.htm">领域模型</a> <div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 再谈系统论,控制论和信息论 &nbsp;&nbsp;&nbsp; 偶然看</div> </li> <li><a href="/article/2407.htm" title="oracle moving window size与 AWR retention period关系" target="_blank">oracle moving window size与 AWR retention period关系</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>转自: http://tomszrp.itpub.net/post/11835/494147 晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. SQL&gt; select * from v$version; BANNER -------------------</div> </li> <li><a href="/article/2534.htm" title="Python版B树" target="_blank">Python版B树</a> <span class="text-muted">dieslrae</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 首先是数据实体对象,很简单,只存放key,value class Entity(object): '''数据实体''' def __init__(self,key,value)</div> </li> <li><a href="/article/2661.htm" title="C语言冒泡排序" target="_blank">C语言冒泡排序</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>代码示例: # include &lt;stdio.h&gt; //冒泡排序 void sort(int * a, int len) { int i, j, t; for (i=0; i&lt;len-1; i++) { for (j=0; j&lt;len-1-i; j++) { if (a[j] &gt; a[j+1]) // &gt;表示升序 </div> </li> <li><a href="/article/2788.htm" title="自定义导航栏样式" target="_blank">自定义导航栏样式</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89/1.htm">自定义</a> <div>-(void)setupAppAppearance { [[UILabel appearance] setFont:[UIFont fontWithName:@&quot;FZLTHK—GBK1-0&quot; size:20]]; [UIButton appearance].titleLabel.font =[UIFont fontWithName:@&quot;FZLTH</div> </li> <li><a href="/article/2915.htm" title="11.性能优化-优化-JVM参数总结" target="_blank">11.性能优化-优化-JVM参数总结</a> <span class="text-muted">frank1234</span> <a class="tag" taget="_blank" href="/search/jvm%E5%8F%82%E6%95%B0/1.htm">jvm参数</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>1.堆 -Xms --初始堆大小 -Xmx --最大堆大小 -Xmn --新生代大小 -Xss --线程栈大小 -XX:PermSize&nbsp; --永久代初始大小 -XX:MaxPermSize&nbsp; --永久代最大值 -XX:SurvivorRatio --新生代和suvivor比例,默认为8 -XX:TargetSurvivorRatio --survivor可使用</div> </li> <li><a href="/article/3042.htm" title="nginx日志分割 for linux" target="_blank">nginx日志分割 for linux</a> <span class="text-muted">HarborChung</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>nginx日志分割 for linux 默认情况下,nginx是不分割访问日志的,久而久之,网站的日志文件将会越来越大,占用空间不说,如果有问题要查看网站的日志的话,庞大的文件也将很难打开,于是便有了下面的脚本 &nbsp; 使用方法,先将以下脚本保存为 cutlog.sh,放在/root 目录下,然后给予此脚本执行的权限 &nbsp; 复制代码代码如下: chmo</div> </li> <li><a href="/article/3169.htm" title="Spring4新特性——泛型限定式依赖注入" target="_blank">Spring4新特性——泛型限定式依赖注入</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B%E5%BC%8F%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5/1.htm">泛型式依赖注入</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC&nbsp; Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API&nbsp; Spring4新</div> </li> <li><a href="/article/3296.htm" title="centOS安装GCC和G++" target="_blank">centOS安装GCC和G++</a> <span class="text-muted">liuxihope</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/gcc/1.htm">gcc</a> <div>Centos支持yum安装,安装软件一般格式为yum install .......,注意安装时要先成为root用户。 按照这个思路,我想安装过程如下: 安装gcc:yum install gcc 安装g++: yum install g++ 实际操作过程发现,只能有gcc安装成功,而g++安装失败,提示g++ command not found。上网查了一下,正确安装应该</div> </li> <li><a href="/article/3423.htm" title="第13章 Ajax进阶(上)" target="_blank">第13章 Ajax进阶(上)</a> <span class="text-muted">onestopweb</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &lt;html xmlns=&quot;http://www.w3.org/</div> </li> <li><a href="/article/3550.htm" title="How to determine BusinessObjects service pack and fix pack" target="_blank">How to determine BusinessObjects service pack and fix pack</a> <span class="text-muted">blueoxygen</span> <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/ &nbsp; The table below is helpful. Reference &nbsp; BOE XI 3.x 12.0.0. y BOE XI 3.0 12.0. x. y BO</div> </li> <li><a href="/article/3677.htm" title="Oracle里的自增字段设置" target="_blank">Oracle里的自增字段设置</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div> 大家都知道吧,这很坑,尤其是用惯了mysql里的自增字段设置,结果oracle里面没有的。oh,no   我用的是12c版本的,它有一个新特性,可以这样设置自增序列,在创建表是,把id设置为自增序列 create table t ( id       number generated by default as identity (start with 1 increment b</div> </li> <li><a href="/article/3804.htm" title="Spring Security(01)——初体验" target="_blank">Spring Security(01)——初体验</a> <span class="text-muted">yang_winnie</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Security/1.htm">Security</a> <div>Spring Security(01)——初体验 &nbsp;&nbsp;&nbsp; 博客分类: spring Security Spring Security入门安全认证 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 首先我们为Spring Security专门建立一个Spring的配置文件,该文件就专门用来作为Spring Security的配置</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>