夕山雨

前端发展历程与技术应用概述

前言

随着web2.0时代的到来，前端在web开发中所占的比重越来越大，专注于内容呈现和网站交互的前端开发人员也逐渐展现出其不可替代性。前端所涉及的领域甚至不限于web应用，如HTML5技术允许我们开发原生的移动应用；React Native、Flutter等跨平台框架可以用于开发跨平台的移动应用；还有近些年相当流行的微信/支付宝小程序等。此外，随着微软的新项目React Native for Windows的发布，使用前端技术开发Windows桌面应用也成为了可能。

那么前端如此繁荣的生态是如何一步步形成的呢？本文将带领大家回顾从web1.0到web2.0时代前端的主要发展历程和代表性的技术，希望帮助大家对前端有一个整体的认识（不懂前端的可以作为科普文章哦）。

前端发展简述

web 1.0时代 - 静态内容呈现

随着1994年美国的Netscape公司推出第一款浏览器NCSAMosaic（后改名Navigator），web1.0时代正式到来（web的概念可追溯到更早）。安装了该浏览器的用户，可以浏览来自于其他网站的信息（主要是文字和图片），当时的浏览器长这样（图片来自网络）：

web诞生后的相当长的一段时间内，“前端”的工作完全是由后端开发人员来完成的。那时候的网站更偏向于静态内容展示。用户在浏览网站时，几乎不会与网页产生交互行为（如果你浏览的网页全是文字和图片，只能提交个表单，那可能就是上世纪穿越来的网页…），这时候开发一个网站的成本是比较低的，这个时代我们称为web1.0时代。

这个时代前端的代表技术主要是HTML 4.01，CSS 2.0，ECMA 4.0（JavaScript语言核心规范，两者的关系后面会有介绍）。三者的关系可以描述为：HTML告诉浏览器网页上有什么，CSS告诉浏览器他们长什么样，JavaScript描述他们有什么行为。直至今日，这三者仍是前端开发的三大核心（以JavaScript为重中之重）。

这个时代最具代表性的事件莫过于被前端开发人员津津乐道的Netscape与IE的浏览器之争（毫无疑问那是前端开发者的噩梦），后文会详细介绍。

这时候的前端专注于静态内容的呈现，但由于技术的限制，前端的呈现能力显得非常不足。

web 2.0时代 - 交互时代

web 2.0的概念正式诞生于 2004 年 3 月 O’Reilly Media 公司和 MediaLive 国际公司的一次头脑风暴会议中，在“What Is Web2.0”一文中首次被提及。

简单来说，web2.0更强调网页的交互性，它不再将用户局限在对网页的浏览上，而是根据用户的操作，来展现不同的网页内容。用户可以在不刷新页面的情况下，通过简单的点击、按键输入等获取不同的内容。除此之外，得益于JavaScript的发展，前端可以执行少量的数据处理甚至数据存储（如浏览器端数据库indexeddb），而这种能力，也是前后端发展逐渐走向平衡的一种表现。一个典型的web2.0网页如下（图片来自截图）：

在web2.0时代，网页具备了展示更多媒体应用的能力，如播放音频，视频，查看PDF文档等。同时技术的标准化使前端开发人员逐渐从浏览器之争的创伤之中走出来，也大大推动了互联网技术的进步。

web2.0时代最具代表性的前端技术莫过于HTML5 + CSS3和ES5 / ES6了，其中HTML5为网页提供了诸多能力，包括播放音视频，canvas，svg，多线程，本地存储，离线应用，websocket，web worker等等；CSS3则大大增强了网页的渲染能力，包括阴影，渐变，新的布局模型，2D/3D变形和动画等等；ES5和ES6对网页的增强则是整个web2.0发展的核心，它赋予了网页越来越强的交互能力。其中ES5诞生于web2.0的早期，目前正在逐渐被ES6及其后续版本所取代。

除了在web中的应用，前端开发还触及到了其他相当多的领域，包括原生移动应用(主要借助HTML5相关技术)，跨平台移动开发（React Native和Flutter），微信小程序，以及后续的Windows桌面应用开发等，此外，在一些新兴领域，如智能设备，智能医疗，计算机视觉，大数据等，前端技术都占有一席之地。因为前端最重要的工作，就是负责内容的呈现和与用户的交互。

这时候的前端把更多注意力放在了用户交互上，并大大增强了内容呈现的能力，致力于带给用户更好的浏览体验。

web 3.0时代（参考自百度百科，不做详述）

实际上web3.0时代并未真正到来，它只是业内一种概念性的描述，并且本质上不是技术的革新，而是web理念的一种革新。我们先来看一下web2.0时代遇到的一些问题。

随着web2.0时代的蓬勃发展，大量的网站涌现出来，web中的数据量呈指数级增长。对于普通浏览器用户来说，web技术不止带来了大量的免费信息，也带来了筛选信息的烦恼。如今的互联网上充斥着大量的数据，如何找到准确、可靠、最新的信息，即使对专业的计算机开发人员来说，也是个不小的问题。此外，各个网站之间相对独立，信息只有通过同时浏览过这些网站的人才能发生交互。我们知道，数据的整合会创造更大的价值，而目前这种整合几乎完全依赖于每个web参与者，这显然无法完全发挥这些数据的价值。

web3.0则会通过第三方平台来整合数据，为用户筛选和提炼更有价值的信息，这可能需要借助其他领域的技术来实现，如人工智能、大数据等等。另外web3.0的实践者希望所有的应用都完全基于web，即使用web技术实现需要复杂的系统应用才能实现的功能，例如微软的基于web的在线office应用等。

web3.0背景下，前端需要具备呈现更加复杂的数据的能力，并提供不亚于复杂的系统应用的交互能力和业务逻辑处理能力。

前端发展史及代表性技术

web1.0的诞生与发展

这里我们以Netscape推出第一款浏览器作为前端发展的开始。

HTML规范

1994年，HTML2.0版本发布（1990年诞生的最初的HTML版本没有官方规范，因此HTML是从2.0版本开始发布的），同年Netscape推出第一款浏览器Mosaic，以HTML作为通用的标记语言。

HTML本身是一种标记语言，用类似于<>的标签来标识一段内容，如…表示标签内的部分是HTML文档，而

…

表示中间的内容是一个段落。一段简单的HTML代码可能长这样：

<!DOCTYPE html>
<html>
<head>
	<title>一个网页</title>
	<meta charset="utf-8">
</head>
<body>
	<p>这里是一个段落</p>
</body>
</html>

如果你想制作自己的第一个网页，可以按以下步骤执行：

新建一个文本文档（如test.txt）
将上述内容粘贴进去
将文件的后缀改为html（如test.html）

现在你就完成了一个网页的制作，你只需要双击该文档（或在打开方式中选择任意一个浏览器），就可以在浏览器中打开该HTML文档，然后你就可以看到如下内容：

没错，这就是一个标准的网页（尽管它几乎不能再简单了）。

第一行告诉浏览器，这是个html文档（也就是网页）。

…里面的内容将被浏览器认为是整个文档的所有内容（里面的所有内容都会被浏览器解析）。

…中的内容是对这个网页的描述，…<title>中的内容是文档的名字，将显示在顶部标签栏中（浏览器最顶部的一个个标签页），meta标签定义了文档的编码格式（主要防止中文乱码）。</p> <p><body>…</body>中的内容就是页面上需要显示的内容，<p>…</p>定义了一个段落，本文当中网页上的内容只有一个段落，而段落里显示的内容就是“这里是一个段落”（如图所见）。</p> <p>现在你已经不是对前端一无所知了，不是吗？</p> <h5>JavaScript的诞生</h5> <p>1995年，Netscape公司的Brendan Eich开发出了决定web前端发展的一门编程语言–JavaScript（此处应有掌声~~）。</p> <p>设计JavaScript的最初目的，是为了进行网页上的表单验证。在那个年代，人们的上网速度极慢。设想，假如你正在填写一个表单，需要你输入用户名和密码，但是你还没填用户名就手残地点了提交，过了30秒，你收到一条服务器返回来的数据，告诉你用户名没填，你会作何感想？</p> <p>为了在数据发给服务器之前，就提前对数据进行一定的验证（如数据是否为空，邮箱格式是否正确等），JavaScript被设计出来了。现在我们可以在前端拦截要发送的表单，验证里面的数据，验证通过后再发动给服务器，多好！（实际上正是因为JavaScript最初的功能如此简单，它在相当长一段时间内都被认为是一门玩具语言，完全没有人想到它能像现在这样统治web前端！）</p> <p><em><strong>关于JavaScript的小科普</strong></em><br> JavaScript最初名叫LiveScript，因为那时的Java刚好受到媒体的热捧，借着这个浪潮，Netscape将LiveScript更名为JavaScript。</p> <p>JavaScript与ECMAScript的关系：<br> ECMAScript，通常简写为es，是JavaScript语言的核心规范，它定义了这门语言本身的语法规范和编程特性等，由ECMA国际组织（前身为欧洲计算机制造协会）定义。</p> <p>es1.0实际上是基于已有的JavaScript定义的，于1997年发布。目前广泛使用的是es5版本，并逐渐被es6及其后续版本所取代。JavaScript以ECMAScript为语言核心，并进行了必要的扩展。为了在HTML中使用JavaScript，它提供了文档对象模型（DOM，Document Object Model），而为了访问浏览器提供的接口，它提供了浏览器对象模型（BOM，Browser Object Model）。因此JavaScript由ECMAScript、DOM、BOM三部分构成。而ECMAScript同时也是某些其他脚本语言的核心规范，如JScript、VBScript等。</p> <h5>CSS规范</h5> <p>通过上面短短的十行代码，我们已经可以写出自己的第一个网页了，但是网页长成这样，怎么拿出去给别人看？</p> <p>于是在1996年，CSS1.0规范发布，目的就是解决网页的样式问题。下面我们给body中的p段落加一点小小的改动：</p> <pre><code class="prism language-javascript"> <span class="token operator"><</span>p style<span class="token operator">=</span><span class="token string">"color: red;"</span><span class="token operator">></span>这里是一个段落<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> </code></pre> <p>这里的style表示后面的字符串是为了描述这个段落的样式的，color: red表示我想让这个段落显示为红色，将这个p标签放回到我们的html文件里，网页就变成了这样：<br> <a href="http://img.e-com-net.com/image/info8/6f34c0967b0c45a6a88f5ee79897f3db.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6f34c0967b0c45a6a88f5ee79897f3db.jpg" alt="前端发展历程与技术应用概述_第4张图片" width="496" height="359" style="border:1px solid black;"></a><br> 看到了吗，现在我们的段落变成了红色，你还可以继续写style=“color: red;text-indent: 2em;”，这样段落的开始就会缩进两格：<br> <a href="http://img.e-com-net.com/image/info8/bcebef1a2e0c44dca54418cf5574c155.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bcebef1a2e0c44dca54418cf5574c155.jpg" alt="前端发展历程与技术应用概述_第5张图片" width="496" height="382" style="border:1px solid black;"></a><br> 简单却很酷，不是吗？</p> <p>CSS赋予了我们美化页面的能力（随着CSS3的发布，这种能力变得越发的强大和不可思议！），它描述了HTML页面上的每一部分内容长什么样，这是那些绚丽多彩的网站实现的基础，你甚至可以直接使用CSS来定义一个动画效果（现在的网站通常都会这么做）。比如下面这种效果（实际点击照片会动态切换，这里只是截图）：<br> <br> 这才是前端该有的样子吧！</p> <h3>web1.0的落幕</h3> <h5>浏览器之争 - 前端开发者的噩梦</h5> <p>浏览器之争的两大对立方，分别是Netscape公司和操作系统巨头微软，而这场争端则是从微软1996年推出其第一款浏览器Internet Explore 3（简称IE3）开始的。</p> <p>由于Netscape更早地入驻web领域，它一度将自己视为web发展的领头羊。而微软作为操作系统领域的巨头，自然也不想放过web领域这块肥肉。仅仅两年之后，微软就推出了自己的浏览器IE3，使用的脚本语言是JScript（如此命名是为了避免与Netscape的版权冲突）。随后两者的发展几乎是各自独立的，两者都在为浏览器提供新的功能扩展，但是由于当时没有一个标准化组织可以对技术进行统一，因此两者对同一功能的实现往往大相径庭。鉴于当时两者都具有很高的市场份额，网站开发者不得不开发出能同时在两个浏览器上运行的代码（这种痛苦即使到了今天也依然存在），这样开发者的工作量成倍地增加，还需要忍受浏览器中存在的大量bug。<br> <a href="http://img.e-com-net.com/image/info8/6806c3a74b034e6ebd249a6699addc1c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6806c3a74b034e6ebd249a6699addc1c.jpg" alt="前端发展历程与技术应用概述_第6张图片" width="450" height="325" style="border:1px solid black;"></a></p> <p>当然浏览器之争对前端发展的好处也是有目共睹的。由于没有受到任何约束，浏览器厂商可以随心所欲地向浏览器添加有用的功能，用户几乎能切身地感受到web技术的迅猛发展。就在这样的客观背景下，前端技术向前迈进了一大步。</p> <p>但是到了20世纪末，随着微软将IE浏览器捆绑到操作系统，免费提供给用户使用，几乎完全靠浏览器来盈利的Netscape公司迅速败下阵来，并最终在1998年被收购，浏览器之争到此落下了帷幕（此举至今仍备受指责，并一度被认为是一种垄断行为）。浏览器之争结束后，web领域涌现出了一大批优秀的浏览器，如谷歌的Chrome浏览器，继承了Netscape衣钵的Firefox（火狐）浏览器，苹果的Safari浏览器等，IE因为遗留下来的大量技术问题，市场份额逐渐减少，趋于被web领域所抛弃。</p> <h5>技术标准化 - 前端发展的根基</h5> <p>为了应对浏览器之争带来的种种弊端，各大标准化组织开始对已有的技术进行大规模标准化。将web1.0带向成熟的规范包括HTML4.01，CSS2.0，ES3.0，在这三者的推动下，web领域的技术趋于稳定。但此时的前端开发者可谓寥寥无几，因为这时的网站通常是一堆的静态页面，主要功能是向用户展示来自服务器的数据，页面复杂度相对较低，因此前端的工作通常是由有经验的后端开发人员来承担，使用诸如基于java的jsp技术，以及基于C#的asp技术等，将后台代码嵌入模板，生成页面，发送给浏览器。</p> <p>但是随着页面复杂度的不断增加，使用模板生成页面的成本也不断增加，后端开发人员逐渐变得力不从心。此外，后端开发人员开发的页面，通常对页面美化不够重视，网站风格也偏于古板，无法满足用户的审美需求。</p> <p>前后端分离成为了一种必然趋势！</p> <h3>web2.0时代的兴起</h3> <h5>AJAX技术 - 异步加载数据</h5> <p>当技术发展到一定程度，人们就会对它产生更多的期待，web技术同样如此。1.0时代的静态页面虽然足够承载大量的信息，但却无法满足人们与网页进行交互的需求（这种需求也正是推动技术进步的最大动力）。</p> <p>以前如果你需要从服务器获取数据，无论多么少量的数据，网页都必须全部刷新一次，这带来了很不好的用户体验。用户希望页面更加“智能”，不要每次请求数据都刷新页面。</p> <p>随着这种需求的日益强烈，AJAX技术诞生了！这项技术最初用在谷歌2004-2005年推出的两款革命性产品Gmail（邮件服务）和Google Map（谷歌地图）中，用户可以在不刷新页面的情况下，直接从服务器获取数据。这在当时是史无前例的，而这两款产品也迅速占领了市场！<br> <a href="http://img.e-com-net.com/image/info8/8cd74cc022464b98a657b921d10049e9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8cd74cc022464b98a657b921d10049e9.jpg" alt="前端发展历程与技术应用概述_第7张图片" width="416" height="302" style="border:1px solid black;"></a></p> <p>AJAX技术现在已经成为当前web发展的基础技术之一，对web技术的发展起到了极大的推动作用。</p> <h5>兼容性框架的出现</h5> <p>作为浏览器之争的受害者，一直到web1.0时代结束，前端开发者都不得不为了兼容主流浏览器，而开发大量的兼容性代码，这给前端开发工作带来了极大的障碍。这个时期，前端中涌现了许多可以处理浏览器兼容问题的库，而这其中最优秀的当属jQuery了。<br> <a href="http://img.e-com-net.com/image/info8/966e1d91c675452f9ed030d1f0e7edc7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/966e1d91c675452f9ed030d1f0e7edc7.jpg" alt="前端发展历程与技术应用概述_第8张图片" width="500" height="260" style="border:1px solid black;"></a><br> 2006年，John Resig正式发布了jQuery，随后其便迅速成为各大网站的标配（直至今日，jQuery的市场份额仍然不可低估）。它为各大主流浏览器提供了统一的接口，也就是说，如果你想实现一个功能，那么可以直接使用jQuery提供的功能，然后jQuery会根据用户使用的浏览器自动进行兼容性处理。这样开发者只需要写一份符合jQuery规范的代码，即可保证在各大浏览器上正常运行，这在当时是多么了不起的一件事啊！比如我们只需要下面一行代码就可以产生让div元素向上收起的动画效果：</p> <pre><code class="prism language-javascript"> <span class="token operator">...</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slideUp</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> </code></pre> <p>除了进行浏览器兼容，jQuery还对JavaScript本身提供了很多的扩展，提供了诸如DOM操作、css选择器、异步队列、数据缓存、动画、属性操作、事件封装、ajax请求封装等一系列的功能，使前端开发进入了一个崭新的时代。此外，jQuery的生态系统极其丰富，它具有很强的可扩展性，吸引了大量的插件开发者开发高质量的jQuery插件来扩展其功能（这些高质量的插件可能是jQuery仍然占据大量市场份额的一个原因）。</p> <h5>HTML5标准的问世</h5> <p>这里的HTML5标准不单指HTML自身，还包括了CSS3和ES5 / ES6相关的规范。<br> HTML5规范极大地扩展了浏览器所能呈现内容的范围。在HTML5规范下，我们可以很容易地嵌入一段音频、一个视频等等，也可以使用canvas画布或者svg，在网页上随心所欲地绘制一幅图片，拖拽、动画、2D/3D变换等操作都成为了可能，这要归功于HTML5+CSS3规范所提供的强大能力。<br> <a href="http://img.e-com-net.com/image/info8/b23f75d500084e4fb3ba937afd2fcf1b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b23f75d500084e4fb3ba937afd2fcf1b.jpg" alt="前端发展历程与技术应用概述_第9张图片" width="343" height="214" style="border:1px solid black;"></a><br> ES5规范的提出，使JavaScript进一步成熟，在编程语言市场占有了一席之地。紧接着，ECMA标准组织又推出了ES6规范，为这门语言提供了相当多的现代语言特性，大大增强了其对前端环境的适应力。同时也为JavaScript进入后端开发奠定了基础。</p> <h3>当前的前端生态</h3> <h5>nodejs的兴起</h5> <p>由于JavaScript单线程的语言特性以及不具备如java般严谨的面向对象特征，它一度被认为只能用于前端开发，不能适应后端复杂业务逻辑的开发，这主要基于三点：</p> <ol> <li>单线程特性，无法充分利用多核CPU强大的计算能力，不利于开发分布式应用</li> <li>不够安全，一旦主线程出错，整个执行过程就会崩溃</li> <li>没有严谨的面向对象特性，封装程度不够，无法处理复杂的业务逻辑</li> </ol> <p>但同时作为面向前端浏览器环境所设计的一门语言，JavaScript也具有一些其他大部分语言没有的特性，最典型的包括其事件循环机制，同时单线程的特点也可以说是有利有弊。</p> <p>利用JavaScript的这些语言特点，Ryan Dahl于2009年发布了JavaScript的服务器端运行环境nodejs。它基于谷歌浏览器广受好评的JavaScript引擎–V8引擎，是一个事件驱动的非阻塞I/O模型。它将所有的客户端请求都交给事件循环机制来处理，从而将I/O代价降到极低。由于单线程的语言机制，它不需要处理复杂的线程同步问题，更不会发生死锁等线程问题。随着ES6规范中web worker的出现，nodejs也具备了利用多核CPU的能力（当然仍然无法与java相提并论）。<br> <a href="http://img.e-com-net.com/image/info8/9e04c2f1d172488a8f1dbca1b7142494.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9e04c2f1d172488a8f1dbca1b7142494.jpg" alt="前端发展历程与技术应用概述_第10张图片" width="650" height="398" style="border:1px solid black;"></a><br> 总的来说，JavaScript和nodejs的发展仍有不足，使用nodejs开发完整后端应用的网站仍然微乎其微，但是有相当多的网站使用nodejs来开发中间件，利用其优秀的I/O性能，处理大量的I/O请求。</p> <p>nodejs的发展仍然值得期待。</p> <h5>组件化开发和MVVM的兴起</h5> <p>英雄终有落幕，尽管jQuery红极一时，但是终究无法应对越来越复杂的前端开发工作。一方面，jQuery大量的优秀特性已经被吸纳为JavaScript标准。另一方面，占有其60%代码量的DOM操作已经被公认为网页的性能杀手，因为DOM操作需要反复地操作文档，并触发网页的重绘和重排，这会严重影响网页的性能，最严重的可能导致页面卡死。此外，使用jQuery开发的网站，会因为大量的DOM操作，需要书写大量的代码，从而变得难以维护。</p> <p>我们需要有一种更优雅的方式来操作页面，以获得更优秀的用户体验。</p> <p>为了解决这些问题，前端兴起了组件化开发和MVVM开发模型。</p> <p>目前对国内影响比较大的当属React和Vue了（Angular没有接触过，所以就不讨论了）。2013年，Facebook的前端团队设计了一个崭新的前端框架，它将网页的各个部分拆分成一个个的组件，使用虚拟DOM将页面上的节点存储在内存中，将视图和数据进行绑定。视图的显示完全由数据和模板来驱动，这样当数据发生变化时，开发者不需要考虑如何去进行DOM操作，框架会自动以高效的方式去更新虚拟DOM，然后更新网页内容。开发者只需要专注于数据的操作即可。这样就实现了视图与业务逻辑的分离。<br> <a href="http://img.e-com-net.com/image/info8/5055a8d0f9b54fc99e1c19d667cbaad8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5055a8d0f9b54fc99e1c19d667cbaad8.jpg" alt="前端发展历程与技术应用概述_第11张图片" width="578" height="270" style="border:1px solid black;"></a></p> <p>作为国内的一款优秀的前端框架，Vue在前端开发中的地位毋庸置疑。以我个人看来，Vue的设计更加符合人们的思维方式，所以上手更快，学习成本更低。但Vue本身并不是严格基于MVVM模型的框架，只是借鉴了MVVM的设计原理。这里就不详述了。<br> <a href="http://img.e-com-net.com/image/info8/b6ddb8cca49a4c178efecd7cbc112730.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b6ddb8cca49a4c178efecd7cbc112730.jpg" alt="前端发展历程与技术应用概述_第12张图片" width="533" height="300" style="border:1px solid black;"></a></p> <h5>前端技术在其他领域的应用</h5> <p>HTML5的出现赋予了JavaScript开发原生移动应用的能力，但是性能与java、kotlin等开发的移动应用相比稍差一些。</p> <p>同样是Facebook推出的前端框架React Native，可以用于开发跨安卓和iOS平台的移动应用。</p> <p>此外，备受瞩目的Google开发框架Flutter（基于Dart语言）同样提供了这种能力，目前两者均占有一定的市场份额。</p> <p>近些年流行的小程序，如微信小程序、支付宝小程序等，也是前端技术的应用之一。</p> <p>此外，微软推出了基于React Native的项目React Native for Windows，可以使用JavaScript来编写Windows桌面应用，该项目目前处于发展初期。</p> <p>另外，人工智能领域，大数据领域等也都可以看到JavaScript的身影，主要用于内容的呈现，数据的展示，与用户的交互等。在很多应用场景中，前端的形式已经发生了巨大的变化，但是本质还是用于内容的呈现和与用户的交互。</p> <h2>总结</h2> <p>前端的发展经历了上古的混乱时期，到后来的规范化、标准化时期，再到近些年的快速发展时期，现在已经成为了web领域中不可缺少的一环。作为前端开发者，我们致力于以更好的方式为用户呈现内容，以及向用户提供更好的交互体验。作为初涉前端的开发人员，我对前端的认识尚浅，另外由于篇幅有限，本文有大量的前端知识点没有涉及，如有兴趣可自行查阅。本文的目的主要是向对前端了解较少，但对前端充满兴趣的开发者分享一些个人对前端的理解和认识，也是对我这一年前端开发经历的小总结，如有错误，还望指正。</p> <h2>参考资料</h2> <p>前端开发进化史，你经历过哪几个时期？<br> 前端发展简史<br> web 百度百科<br> web3.0 百度百科</p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1274468829853925376"></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">  <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>  <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>  <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/1883076966500855808.htm" title="前端 | 浏览器安全：XSS攻击、CSRF攻击、中间人攻击" target="_blank">前端 | 浏览器安全：XSS攻击、CSRF攻击、中间人攻击</a> <span class="text-muted">酒酿泡芙1217</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/csrf/1.htm">csrf</a> <div>1.XSS攻击1.1什么是XSS攻击XSS攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗用用户的信息如cookie等本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨那些脚本是可信的，从而导致了恶意代码的执行攻击者通过这种攻击方式可以进行一下操作：获取页面的数据，如DOM、cookie、localStora</div> </li> <li><a href="/article/1883050103674040320.htm" title="HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？" target="_blank">HTML&CSS ：如此优雅丝滑的导航栏，你不看看吗？</a> <span class="text-muted">前端Hardy</span> <a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>这段代码创建了一个动态的导航栏，通过CSS技术实现了按钮的激活和悬停效果，以及动态背景效果，为页面添加了视觉吸引力和用户交互体验。大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你演示效果HTML&CSS公众号关注：前端Hardybody{margin:0;padding:0;background-color:#07</div> </li> <li><a href="/article/1883007741149114368.htm" title="mybatisplus获取返回对象（自增ID）" target="_blank">mybatisplus获取返回对象（自增ID）</a> <span class="text-muted">笑发财了1</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/jar/1.htm">jar</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a> <div>需求有时候我们在数据库里设置了属性自增，在添加对象后，前端需要我们返回这个属性（对象）。做法1.在该实体类的自增主键上加上注解@TableId(value="journey_location_id")，后面的type是默认值可以不写。value为数据表中的字段名@TableId(value="journey_location_id",type=IdType.AUTO)privateintjourn</div> </li> <li><a href="/article/1882995514832646144.htm" title="Vue组件的概念与复用" target="_blank">Vue组件的概念与复用</a> <span class="text-muted">2401_85969651</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</a> <div>目录一、引言二、为什么使用组件二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的世界里，组件是构建用户界面的基石。它们让我们能够以一种高效、可维护的方式开发复杂的前端应用。无论是初涉Vue的新手，还是有一定经验的开发者，深入理解组件的概念与复用机制，都能极大提升开发效率与代码质量。二、为什么使用组件随着前端应用日益复杂，页面功能愈发繁多，传统的</div> </li> <li><a href="/article/1882995513733738496.htm" title="Vue 组件的概念与复用" target="_blank">Vue 组件的概念与复用</a> <span class="text-muted">2401_85969651</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</a> <div>目录一、引言二、什么是Vue组件三、组件的复用优势四、组件复用的实现方式五、组件通信六、总结一、引言在Vue.js的奇妙天地里，组件宛如熠熠生辉的基石，稳稳撑起用户界面构建的大厦。无论你是刚踏入Vue领域的新手，还是久经沙场的开发者，吃透组件的概念与复用窍门，都如同掌握了一把开启高效开发、优质代码大门的金钥匙，能让你的前端开发之旅畅行无阻。二、什么是Vue组件本质上，Vue组件就是一个被赋予独特魅</div> </li> <li><a href="/article/1882972815779491840.htm" title="LogicFlow 一款流程图编辑框架" target="_blank">LogicFlow 一款流程图编辑框架</a> <span class="text-muted">小毛驴850</span> <a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%9B%BE/1.htm">流程图</a> <div>LogicFlow是什么LogicFlow是一款流程图编辑框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端自定义开发各种逻辑编排场景，如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。官方网站更多资料请查看LogicFlow系列文章特性可视化模型：通过LogicFlow提供的直观可视化界</div> </li> <li><a href="/article/1882960844577370112.htm" title="跨域问题及其解决方案" target="_blank">跨域问题及其解决方案</a> <span class="text-muted">山禾女鬼001</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a> <div>在现代Web开发中，跨域问题是开发者经常遇到的一个难题，尤其是在前后端分离架构中。跨域问题的核心在于浏览器的同源策略，这种策略的设计目的是防止恶意网站窃取用户的数据。然而，在一些场景下，比如前后端分离的Web应用中，前端需要访问不同域的资源，这时就会遇到跨域请求的问题。为了解决这个问题，CORS（跨域资源共享）机制应运而生。本文将详细探讨跨域问题的成因、CORS机制的工作原理以及常见的跨域解决方案</div> </li> <li><a href="/article/1882960466586693632.htm" title="基于Springboot用axiospost请求接收字符串参数为null的解决方案" target="_blank">基于Springboot用axiospost请求接收字符串参数为null的解决方案</a> <span class="text-muted">呀243</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>问题今天在用前端post请求后端时发现，由于是以Json对象的形式传输的，后端用两个字符串形参无法获取到对应的参数值前端代码如下：axios.post('http://localhost:8083/test/postParams',{a:'1',b:'2'},{'Content-Type':'application/json'}).then(response=>{console.log(respo</div> </li> <li><a href="/article/1882957438848659456.htm" title="vscode 前端常用插件安装大全" target="_blank">vscode 前端常用插件安装大全</a> <span class="text-muted">weixin_42113341</span> <a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>在使用VisualStudioCode(VSCode)进行前端（特别是Vue.js）和Node.js开发时，安装合适的扩展插件可以大大提升开发效率和代码质量。以下是推荐的Vue.js和Node.js开发相关的VSCode插件，涵盖了代码编辑、调试、格式化、版本控制、代码质量等多个方面。您可以根据自己的需求选择安装：1.核心开发插件1.1Vetur功能：为Vue.js提供语法高亮、智能提示、错误检查</div> </li> <li><a href="/article/1882953652755296256.htm" title="Rasa的工作流程" target="_blank">Rasa的工作流程</a> <span class="text-muted">不会编程的程序猿ᅟ</span> <a class="tag" taget="_blank" href="/search/rasa/1.htm">rasa</a> <div>Rasa的工作流程分为两个主要部分：NLU（自然语言理解）和Core（对话管理）。整个流程包括从用户输入到最终响应的多个步骤，下面是详细的工作流程解析：1.用户输入用户通过聊天界面（如微信、Telegram、Slack或Web前端）发送自然语言消息，例如："我想预订一张明天去北京的火车票"2.自然语言理解（NLU）Rasa的NLU模块解析用户输入，提取意图和实体。2.1意图识别NLU模块会识别用户</div> </li> <li><a href="/article/1882938518662082560.htm" title="使用 Intersection Observer 实现高效懒加载和滚动监听" target="_blank">使用 Intersection Observer 实现高效懒加载和滚动监听</a> <span class="text-muted">桂月二二</span> <a class="tag" taget="_blank" href="/search/macos/1.htm">macos</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%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>在前端开发中，性能优化是提升用户体验的核心之一。随着网页内容的日益增多，如何高效地加载图片、视频等资源，以及如何监听用户的滚动行为，成为了前端开发者需要解决的难题。传统的滚动事件监听往往会带来性能瓶颈，尤其是在需要频繁触发的情况下。为此，IntersectionObserverAPI应运而生，它能让开发者更高效、灵活地处理懒加载和滚动监听等需求。本文将深入介绍如何使用IntersectionObs</div> </li> <li><a href="/article/1882931081586470912.htm" title="一个上亿用户的电商平台的架构设计" target="_blank">一个上亿用户的电商平台的架构设计</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> <div>一.总体架构Listitem客户端层(ClientLayer)Web客户端：使用现代前端框架（如React,Angular,Vue.js）开发响应式网页，保证在不同设备上的良好用户体验。移动客户端：开发iOS和Android原生应用，利用平台特性提供优质用户体验。或者使用ReactNative或Flutter等跨平台框架来节省开发成本。2.API层(APILayer)API设计：设计RESTful</div> </li> <li><a href="/article/1882928304432934912.htm" title="基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署" target="_blank">基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署</a> <span class="text-muted">小朱科技</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVA软件技术课程学习系统设计与实现计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ</div> </li> <li><a href="/article/1882921874455851008.htm" title="java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署" target="_blank">java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署</a> <span class="text-muted">雪夜科技</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</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计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Wi</div> </li> <li><a href="/article/1882889103159128064.htm" title="25-5 SQL 注入攻击 - insert注入" target="_blank">25-5 SQL 注入攻击 - insert注入</a> <span class="text-muted">技术探索</span> <a class="tag" taget="_blank" href="/search/Web%E5%AE%89%E5%85%A8%E6%94%BB%E9%98%B2%E5%85%A8%E8%A7%A3%E6%9E%90/1.htm">Web安全攻防全解析</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客一、注入原理描述：insert注入是指通过前端注册的信息被后台通过insert操作插入到数据库中。如果后台没有做相应的处理，就可能导致insert注入漏洞。原因：后台未对用户输入进行充分验证和过滤，导致恶意用户可以利用特定的输入构造恶意代码，从而影响数据库的插入操作，或者获取敏感数据。二、注入方法注入手段</div> </li> <li><a href="/article/1882881282514415616.htm" title="Docker多架构镜像构建踩坑记" target="_blank">Docker多架构镜像构建踩坑记</a> <span class="text-muted">一直学下去</span> <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/adm64/1.htm">adm64</a><a class="tag" taget="_blank" href="/search/arm64/1.htm">arm64</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E6%9E%B6%E6%9E%84/1.htm">多架构</a> <div>背景公司为了做信创项目的亮点，需要将现有的一套在X86上运行的应用系统迁移到ARM服务器上运行，整个项目通过后端Java，前端VUEJS开发通过CICD做成Docker镜像在K8S里面运行。但是当前的CICD产品不支持ARM的镜像构建，于是只能手工构建ARM镜像。以下是一些踩坑的记录，希望能帮大家少踩坑构建环境本地电脑DeepinLinux23(Windows的WSL和其他的Linux系统都可以）</div> </li> <li><a href="/article/1882873837956165632.htm" title="前端力扣刷题 | 1：Hot100之哈希" target="_blank">前端力扣刷题 | 1：Hot100之哈希</a> <span class="text-muted">酒酿泡芙1217</span> <a class="tag" taget="_blank" href="/search/%E5%8A%9B%E6%89%A3hot100/1.htm">力扣hot100</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C%E7%AE%97%E6%B3%95/1.htm">哈希算法</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.两数之和给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返回答案。示例：输入：nums=[2,7,11,15],target=9输出：[0,1]解释：因为nums[0]+nums[1]==9，返回[0,1]。法一：暴力解法vartw</div> </li> <li><a href="/article/1882868165558464512.htm" title="vue使用pdf.js实现移动端在线PDF文件预览" target="_blank">vue使用pdf.js实现移动端在线PDF文件预览</a> <span class="text-muted">yujin0213</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>背景产品需求涉及到动态的PDF展示，PDF是由后端去生成的，然后下发给前端在线的cdn地址，H5需要实现在线PDF预览的能力方案H5展示合同PDF，有很多实现方式。但是通过尝试后发现在不同操作系统会存在兼容性问题方案表现iframe的形式iOS：只能展示第一页，多页不能展示Android：弹出下载弹窗PC：正常展示embed标签iOS：只能展示第一页Android：弹出下载弹窗PC：显示不出来vu</div> </li> <li><a href="/article/1882867278895181824.htm" title="WPF之comboBox可模糊查询" target="_blank">WPF之comboBox可模糊查询</a> <span class="text-muted">白驹……过隙</span> <a class="tag" taget="_blank" href="/search/WPF/1.htm">WPF</a><a class="tag" taget="_blank" href="/search/wpf/1.htm">wpf</a> <div>前言本文采用了prism框架的基础。0、先准备一个类publicclassComboBoxItemModel{publicstringName{get;set;}publicstringValue{get;set;}}一、xaml代码。前端这里需添加两个属性，还有keyUp事件等。1、IsEditable="True"（开启可编辑）2、IsTextSearchEnabled="False"（开启可</div> </li> <li><a href="/article/1882866774752423936.htm" title="PC端后台管理系统实现在线预览文件" target="_blank">PC端后台管理系统实现在线预览文件</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>PC端后台管理系统实现在线预览文件后台管理系统是每个新手前端必然接触的项目，当产品要求在线预览文件的预览的时候，我收集了两种在线预览的方法，希望对一些刚入门的小白有所帮助1.使用iframe标签微软有一个解析地址，Word、Xls、PPT这些文件需要使用微软官方的解析地址，如微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地</div> </li> <li><a href="/article/1882863119022223360.htm" title="如何实现 Handy Control DataGrid 全选功能" target="_blank">如何实现 Handy Control DataGrid 全选功能</a> <span class="text-muted">东百牧码人</span> <a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>如何实现HandyControlDataGrid全选功能在使用HandyControl的DataGrid控件时，经常会有全选的需求。今天我们就结合一段代码，详细介绍如何实现HandyControlDataGrid的全选功能。代码实现前端XAML代码代码解释DataGrid是主要的表格控件，ItemsSource绑定到TrendTagCollection，这是数据源集合。DataGridCheckB</div> </li> <li><a href="/article/1882861352947609600.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/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>随着单页面应用（SPA）和前端框架如React、Vue、Angular的快速发展，现代前端应用的复杂度日益提升。尤其是当应用规模逐渐增大时，单一的代码库往往难以应对不同团队的协作和版本管理问题。为了应对这一挑战，微前端架构（MicroFrontends）应运而生，它为前端开发提供了一种新的思路，让大型前端应用能够像后端的微服务架构一样，通过拆分模块来降低复杂度。在这篇文章中，我们将探讨微前端架构的</div> </li> <li><a href="/article/1882846853955907584.htm" title="Go分布式爬虫笔记(八)_golang分布式爬虫" target="_blank">Go分布式爬虫笔记(八)_golang分布式爬虫</a> <span class="text-muted">2401_87299701</span> <a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>+爬虫引擎为基础的推送系统+提供-快速的热点事件-事件预警用户需求快速了解自己感兴趣的最新新闻事件预警机制帮助快速决策功能需求用户填写或选择自己感兴趣的话题、感兴趣的网站还有消息接受频率用户接收最新热点事件的推送用户通过点击获取与该事件关联的事件，并得到相关的事件预测、预警，甚至可能在网站中进行快速的交易用户可以查看历史记录，可视化呈现某一个事件的来龙去脉，并进行复盘产品需求前端页面设计用户交互设</div> </li> <li><a href="/article/1882836897324134400.htm" title="web速览" target="_blank">web速览</a> <span class="text-muted">qzhqbb</span> <a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a> <div>web速览1.前端开发概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端技术栈：HTML（超文本标记语言）：用于创建网页的结构和内容。CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。JavaScript：用于实现网页的交互性和动态效果。前端框架：React：一个用于构建用户界面的JavaScript库，采用组件化设计。Vue.js：一个渐进式的</div> </li> <li><a href="/article/1882831474986643456.htm" title="Spring MVC 中的 DispatcherServlet：工作流程与应用场景解析" target="_blank">Spring MVC 中的 DispatcherServlet：工作流程与应用场景解析</a> <span class="text-muted">码农小灰</span> <a class="tag" taget="_blank" href="/search/SpringMVC/1.htm">SpringMVC</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录一、初始化阶段二、请求处理阶段三、异常处理四、使用场景说明在SpringMVC框架中，DispatcherServlet扮演着至关重要的角色，它作为前端控制器（FrontController），负责接收客户端的HTTP请求，并根据配置将其分发给相应的处理器进行处理。以下是对其工作流程的详细解析，并结合使用场景进行说明。一、初始化阶段加载配置文件：DispatcherServlet在启动时会读取</div> </li> <li><a href="/article/1882801335192055808.htm" title="使用 AI 助手提升前端代码质量：自动代码审查实战" target="_blank">使用 AI 助手提升前端代码质量：自动代码审查实战</a> <span class="text-muted">技术出海录</span> <a class="tag" taget="_blank" href="/search/%E8%BF%9C%E6%B4%8B%E5%BD%95%C2%B7%E6%8A%80%E6%9C%AF%E7%AF%87/1.htm">远洋录·技术篇</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>最近在带团队的时候，发现代码审查（CodeReview）总是成为项目进度的一个瓶颈。一方面，高级工程师的时间很宝贵，不可能审查每一行代码；另一方面，初级工程师又急需及时的反馈来提升。于是我就在想：能不能用AI来解决这个问题？经过一番研究和实践，我搭建了一个AI代码审查助手，效果出乎意料的好！今天就来分享下这个小工具是怎么做的。为什么需要AI代码审查？说实话，最开始团队里有不少质疑的声音：“AI能审</div> </li> <li><a href="/article/1882777133370109952.htm" title="用Python写前端" target="_blank">用Python写前端</a> <span class="text-muted">eternity_ld</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>分享一个让开发交互式Webapp超级简单的工具。不会HTML，CSS，JAVASCRIPT也没事。交互式Webapp非常实用，比如说做一个问卷调查页面、一个投票系统、一个信息收集表单，上传文件等等，因为网页是可视化的，因此还可以作为一个没有服务端的图片界面应用程序而使用。如果你有这样的开发需求，那用Python真的是太简单了。借助于PyWebIO（pipinstallpywebio），你可以分分钟</div> </li> <li><a href="/article/1882772468708470784.htm" title="【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法" target="_blank">【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法在进行前端开发之前，需要熟悉vue的一些基本用法，这里举例了一些常见的基本用法1.v-if,v-else,v-else-if用于条件渲染元素。当条件为真时，元素会被渲染；否则不会渲染。示例TypeATypeBNotA/B2.v-show也用于条件渲染，但它总是会渲染并保留，只是通过CSS的display属性控制可见性。示例显示/</div> </li> <li><a href="/article/1882736653412397056.htm" title="SpringBoot3+Vue3+NaiveUI博客后台管理系统源码 | 小蚂蚁云" target="_blank">SpringBoot3+Vue3+NaiveUI博客后台管理系统源码 | 小蚂蚁云</a> <span class="text-muted">小蚂蚁开源</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a> <div>项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、NaiveUI、MySQL等技术栈实现的单体前后端分离后台管理系统；后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈，前端基于Vue3、TypeScript、Vite等技术栈实现，采用Naiv</div> </li> <li><a href="/article/1882736527025434624.htm" title="小蚂蚁云后台管理系统|XiaoMaYi" target="_blank">小蚂蚁云后台管理系统|XiaoMaYi</a> <span class="text-muted">小蚂蚁开源</span> <a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统；后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈，前端基于Vue3、TypeScript、Vite等技术栈实现，采用</div> </li> <li><a href="/article/89.htm" title="java责任链模式" target="_blank">java责任链模式</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%B4%A3%E4%BB%BB%E9%93%BE%E6%A8%A1%E5%BC%8F/1.htm">责任链模式</a><a class="tag" taget="_blank" href="/search/%E6%9D%91%E6%B0%91%E5%91%8A%E5%8E%BF%E9%95%BF/1.htm">村民告县长</a> <div>责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。下面代码模拟这样的效果：创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** * </div> </li> <li><a href="/article/216.htm" title="linux、mysql、nginx、tomcat 性能参数优化" target="_blank">linux、mysql、nginx、tomcat 性能参数优化</a> <span class="text-muted">ronin47</span> <div>一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大</div> </li> <li><a href="/article/343.htm" title="php命令行界面" target="_blank">php命令行界面</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/cli/1.htm">cli</a> <div>常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("</div> </li> <li><a href="/article/470.htm" title="Filter&Session" target="_blank">Filter&Session</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge</div> </li> <li><a href="/article/597.htm" title="连接池与Spring,Hibernate结合" target="_blank">连接池与Spring,Hibernate结合</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> 前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。 1.下载相关内容： &nb</div> </li> <li><a href="/article/724.htm" title="[简单]mybatis判断数字类型" target="_blank">[简单]mybatis判断数字类型</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> 昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下: Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis</div> </li> <li><a href="/article/851.htm" title="项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space" target="_blank">项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space</a> <span class="text-muted">程序员是怎么炼成的</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/catalina.sh/1.htm">catalina.sh</a><a class="tag" taget="_blank" href="/search/eclipse.ini/1.htm">eclipse.ini</a> <div> 在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space. 解决办法是点击eclipse里的tomcat，在</div> </li> <li><a href="/article/978.htm" title="我的crm小结" target="_blank">我的crm小结</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/crm/1.htm">crm</a> <div>各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主</div> </li> <li><a href="/article/1105.htm" title="spring里配置使用hibernate的二级缓存几步" target="_blank">spring里配置使用hibernate的二级缓存几步</a> <span class="text-muted">antonyup_2006</span> <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/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi</div> </li> <li><a href="/article/1232.htm" title="JAVA基础面试题" target="_blank">JAVA基础面试题</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E5%AE%9E%E7%8E%B0%E6%8E%A5%E5%8F%A3/1.htm">抽象实现接口</a><a class="tag" taget="_blank" href="/search/String%E7%B1%BB/1.htm">String类</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3%E7%BB%A7%E6%89%BF/1.htm">接口继承</a><a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E7%B1%BB%E7%BB%A7%E6%89%BF%E5%AE%9E%E4%BD%93%E7%B1%BB/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>/* * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、 *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于 * 寄存器（register），快于堆。堆（heap）：用于存储对象。 */ &</div> </li> <li><a href="/article/1359.htm" title="让sqlmap文件 "继承" 起来" target="_blank">让sqlmap文件 "继承" 起来</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/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/sqlmap/1.htm">sqlmap</a> <div> 多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项</div> </li> <li><a href="/article/1486.htm" title="精通Oracle10编程SQL(13)开发触发器" target="_blank">精通Oracle10编程SQL(13)开发触发器</a> <span class="text-muted">bijian1013</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%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O</div> </li> <li><a href="/article/1613.htm" title="【EhCache三】EhCache查询" target="_blank">【EhCache三】EhCache查询</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a> <div>本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu</div> </li> <li><a href="/article/1740.htm" title="CXF框架入门实例" target="_blank">CXF框架入门实例</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/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/webservice/1.htm">webservice</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。在apache cxf官网提供</div> </li> <li><a href="/article/1867.htm" title="angular.equals" target="_blank">angular.equals</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/AnguarJS+%E4%B8%AD%E6%96%87API/1.htm">AnguarJS 中文API</a><a class="tag" taget="_blank" href="/search/angular.equals/1.htm">angular.equals</a> <div>angular.equals 描述: 比较两个值或者两个对象是不是相等。还支持值的类型，正则表达式和数组的比较。两个值或对象被认为是相等的前提条件是以下的情况至少能满足一项：两个值或者对象能通过=== （恒等）的比较两个值或者对象是同样类型，并且他们的属性都能通过angular</div> </li> <li><a href="/article/1994.htm" title="java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]" target="_blank">java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>这道题的具体思路请参看何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A</div> </li> <li><a href="/article/2121.htm" title="FastDFS 的安装和配置修订版" target="_blank">FastDFS 的安装和配置修订版</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/fastDFS/1.htm">fastDFS</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F/1.htm">分布式文件系统</a> <div>FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.</div> </li> <li><a href="/article/2248.htm" title="[强人工智能]拓扑扫描与自适应构造器" target="_blank">[强人工智能]拓扑扫描与自适应构造器</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> 当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢? 那么,现在我们必须设计新的模块和代码包来处理上面的问题</div> </li> <li><a href="/article/2375.htm" title="oracle merge into的用法" target="_blank">oracle merge into的用法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/merget+into/1.htm">merget into</a> <div>Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE</div> </li> <li><a href="/article/2502.htm" title="不适合使用Hadoop的场景" target="_blank">不适合使用Hadoop的场景</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>转自：http://dev.yesky.com/296/35381296.shtml。　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop! 实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha</div> </li> <li><a href="/article/2629.htm" title="YII findAll的用法" target="_blank">YII findAll的用法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10)); 第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值；更完善的查询需要</div> </li> <li><a href="/article/2756.htm" title="vim 常用 NERDTree 快捷键" target="_blank">vim 常用 NERDTree 快捷键</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳</div> </li> <li><a href="/article/2883.htm" title="Java把目录下的文件打印出来" target="_blank">Java把目录下的文件打印出来</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/%E5%88%97%E5%87%BA%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">列出目录下的文件</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E5%A4%B9%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">文件夹下面的文件</a><a class="tag" taget="_blank" href="/search/%E7%9B%AE%E5%BD%95%E4%B8%8B%E7%9A%84%E6%96%87%E4%BB%B6/1.htm">目录下的文件</a> <div>Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:</div> </li> <li><a href="/article/3010.htm" title="linux远程桌面----VNCServer与rdesktop" target="_blank">linux远程桌面----VNCServer与rdesktop</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/Desktop/1.htm">Desktop</a> <div>windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。 linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。下面分别介绍，以windo</div> </li> <li><a href="/article/3137.htm" title="guava中的join和split功能" target="_blank">guava中的join和split功能</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>guava库中，包含了很好的join和split的功能，例子如下： 1）将LIST转换为使用字符串连接的字符串 List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom"); </div> </li> <li><a href="/article/3264.htm" title="Web开发技术十年发展历程" target="_blank">Web开发技术十年发展历程</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a</div> </li> <li><a href="/article/3391.htm" title="架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)" target="_blank">架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好)</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/buffer/1.htm">buffer</a> <div>1.前言。如题。 2.代码。 IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession</div> </li> <li><a href="/article/3518.htm" title="ORA-00054:resource busy and acquire with NOWAIT specified" target="_blank">ORA-00054:resource busy and acquire with NOWAIT specified</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a><a class="tag" taget="_blank" href="/search/Lock/1.htm">Lock</a> <div>[Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。 step1，查看被lock的session： select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj</div> </li> <li><a href="/article/3645.htm" title="javascript学习笔记" target="_blank">javascript学习笔记</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div> javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是</div> </li> <li><a href="/article/3772.htm" title="Java enum的用法详解" target="_blank">Java enum的用法详解</a> <span class="text-muted">xieke90</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E6%9E%9A%E4%B8%BE/1.htm">枚举</a> <div>Java中枚举实现的分析：示例： public static enum SEVERITY{ INFO,WARN,ERROR } enum很像特殊的class，实际上enum声明定义的类型就是一个类。而这些类都是类库中Enum类的子类 (java.l</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.  </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>