React16+react-router-dom初步使用心得
本文不讲怎么安装，讲怎么使用。
单位做项目用的React，在闲的时候想自己试试，写写小demo练下手。React上手没几天，主要是以前学过，但是后来偷懒用Vue写页面，不知不觉已经React16了，按照记忆的路线，删删改改脚手架的文件夹后，惊讶的发现并不能start，看了看package.json后，更一头雾水。
度娘了一下，关于这方面的资料比较少，多数的解释是你看看node_modules的源文件，可以看到XXXXX。。。远水治不了近渴，首要的，是让我的小demo能够运行起来，经过我的多次失败的尝试，总结出来了两点：
1、在public下面要有一个index.html，并且名字一定是index，不然会报错文件找不到。这个文件是用来放最核心的html结构的文件，我的内容如下：
<!DOCTYPE html>
"utf-8">
<<span class="token operator">/</span>title>
<<span class="token operator">/</span>head>
<body>
<div id=<span class="token string">"root"</span>><<span class="token operator">/</span>div>
<<span class="token operator">/</span>body>
</code></pre>
<p>然后有个点，就是一定要注意自己将要被添加Dom节点的名字，因为在后面ReactDOM.render()的时候会去根据你写的条件查找Dom节点，节点名字没对会报错。例如我这里是要在id='root’这个点添加内容，那么我的ReactDOM就这么写：</p>
<pre><code class="prism language-powershell">ReactDOM<span class="token punctuation">.</span>render<span class="token punctuation">(</span><Router <span class="token operator">/</span>><span class="token punctuation">,</span> document<span class="token punctuation">.</span>getElementById<span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre>
<p>2、在src中一定要有一个名字为index.js的文件，并且名字一定是index，原因同上。这个文件放app.js等内容，也可以是Router组件的引用等等。我的文件内容如下：</p>
<pre><code class="prism language-powershell">import ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
import Router <span class="token keyword">from</span> <span class="token string">'./router'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span>render<span class="token punctuation">(</span><Router <span class="token operator">/</span>><span class="token punctuation">,</span> document<span class="token punctuation">.</span>getElementById<span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre>
<p>内容虽然简单，已经精简到精炼了。</p>
<p>也看到我到index.js文件中引用了路由，那么我们下一步要解决的，就是路由的问题，这里为了学习新知识，没有用react-router而是用的react-router-dom，区别就在于，react-router-dom会提供更多的api，更多功能。<br> 先看看我的router.js 文件：</p>
<pre><code class="prism language-powershell">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> Route<span class="token punctuation">,</span> <span class="token keyword">Switch</span><span class="token punctuation">,</span> HashRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span>
import A <span class="token keyword">from</span> <span class="token string">'./a'</span><span class="token punctuation">;</span>
import B <span class="token keyword">from</span> <span class="token string">'./b'</span><span class="token punctuation">;</span>
import Home <span class="token keyword">from</span> <span class="token string">'./home'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> Router extends Component <span class="token punctuation">{</span>
render<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<HashRouter>
<<span class="token keyword">Switch</span>>
<Route exact path=<span class="token string">'/'</span> component=<span class="token punctuation">{</span>Home<span class="token punctuation">}</span> <span class="token operator">/</span>>
<Route exact path=<span class="token string">'/a'</span> component=<span class="token punctuation">{</span>A<span class="token punctuation">}</span> <span class="token operator">/</span>>
<Route exact path=<span class="token string">'/a/:id'</span> component=<span class="token punctuation">{</span>A<span class="token punctuation">}</span> <span class="token operator">/</span>>
<Route exact path=<span class="token string">'/b'</span> component=<span class="token punctuation">{</span>B<span class="token punctuation">}</span> <span class="token operator">/</span>>
<<span class="token operator">/</span><span class="token keyword">Switch</span>>
<<span class="token operator">/</span>HashRouter>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
export default Router<span class="token punctuation">;</span>
</code></pre>
<p><em>HashRouter：路由使用hash模式，可以用Router<br> exact：精确匹配<br> Switch：当有匹配的路由的时候，只渲染一个路由。<br> eg:<br> 前提：有Switch 无exact<br> /a 渲染根路径<br> /a/xxxxxx渲染根路径<br> 前提：有Switch 有 exact<br> /a 渲染当前路径<br> /a/xxx 渲染/a路径</em></p>
<p>url传参有两个方式定义：<br> 1、可以由/a/:id定义，取值的时候可以用</p>
<pre><code class="prism language-powershell">this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params
</code></pre>
<p>例如，我在home.js中定义两个按钮</p>
<pre><code class="prism language-powershell">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
import <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> Home extends Component <span class="token punctuation">{</span>
constructor<span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
super<span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
aClick = <span class="token punctuation">(</span><span class="token punctuation">)</span> => <span class="token punctuation">{</span>
this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span>push<span class="token punctuation">(</span><span class="token string">'/a/123456'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
bClick = <span class="token punctuation">(</span><span class="token punctuation">)</span> => <span class="token punctuation">{</span>
this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span>push<span class="token punctuation">(</span><span class="token string">'/b'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
render<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<div >
<Button onClick=<span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> => <span class="token punctuation">{</span> this<span class="token punctuation">.</span>aClick<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> >跳到A页面<<span class="token operator">/</span>Button>
<Button onClick=<span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> => <span class="token punctuation">{</span> this<span class="token punctuation">.</span>bClick<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> >跳到B页面<<span class="token operator">/</span>Button>
<<span class="token operator">/</span>div>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
export default Home<span class="token punctuation">;</span>
</code></pre>
<p>a.js的页面：</p>
<pre><code class="prism language-powershell">import React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> A extends Component <span class="token punctuation">{</span>
componentDidMount<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span>log<span class="token punctuation">(</span>this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>match<span class="token punctuation">.</span>params<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
render<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<div >
我是A页面
<<span class="token operator">/</span>div>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
export default A<span class="token punctuation">;</span>
</code></pre>
<p>效果：<br> <a href="http://img.e-com-net.com/image/info8/4025af57673f45c7b544665e2ce32214.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4025af57673f45c7b544665e2ce32214.jpg" alt="React16+react-router-dom初步使用心得_第2张图片" width="650" height="244" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/338a0dfd59884e63afc66a80ef551f80.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/338a0dfd59884e63afc66a80ef551f80.jpg" alt="React16+react-router-dom初步使用心得_第3张图片" width="650" height="173" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/7965538f50fa4de7b6198b91c038e233.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7965538f50fa4de7b6198b91c038e233.jpg" alt="在这里插入图片描述" width="362" height="60"></a></p>
<p>2、在函数里面定义pathname、state<br> 我将代码修改了一下，将home.js中’跳到A页面’按钮的回调函数改成：</p>
<pre><code class="prism language-powershell"> aClick = <span class="token punctuation">(</span><span class="token punctuation">)</span> => <span class="token punctuation">{</span>
this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span>push<span class="token punctuation">(</span>
<span class="token punctuation">{</span>
pathname: <span class="token string">'/a'</span><span class="token punctuation">,</span>
state: <span class="token punctuation">{</span>
id: 777888999
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
<p>相同的，我取值的方法也会发生改变，在a.js我也做出了修改。</p>
<pre><code class="prism language-powershell"> componentDidMount<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span>log<span class="token punctuation">(</span>this<span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span>location<span class="token punctuation">.</span>state<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
<p>效果：<br> <a href="http://img.e-com-net.com/image/info8/72cbb93433a3407aacd13b2023ea833a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/72cbb93433a3407aacd13b2023ea833a.jpg" alt="React16+react-router-dom初步使用心得_第4张图片" width="644" height="202" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/0c88a96d4cb4469987c29a609ddd96a3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0c88a96d4cb4469987c29a609ddd96a3.jpg" alt="在这里插入图片描述" width="412" height="44"></a></p>
<p>到这里，就说得差不多了，但是还有很多有趣的点没有说：eject的具体使用、react-router-dom的鉴权登陆、嵌套路由等等，如果要仔细了说，应该每个点都可以拆成一片文章，如果有机会我也会总结出来的。最后，附上我的文件结构图：<br> <a href="http://img.e-com-net.com/image/info8/ed80f445598c4470acb916426190a18b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ed80f445598c4470acb916426190a18b.jpg" alt="React16+react-router-dom初步使用心得_第5张图片" width="622" height="664" style="border:1px solid black;"></a><br> 如果有不正确的，欢迎指正，我及时修改。</p>
<p>本文参考：<br> https://www.jianshu.com/p/8954e9fb0c7e<br> https://www.cnblogs.com/guanghao/p/10827599.html</p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1727280524537442304"></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">你可能感兴趣的:(前端,react)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1892581971289239552.htm"
title="rem、em、vw区别" target="_blank">rem、em、vw区别</a>
<span class="text-muted">IT木昜</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E7%99%BD%E8%AF%9D%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">大白话前端面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>在前端开发里，rem、em、vw都是用来设置元素大小的单位，下面就用大白话讲讲它们的区别。参考标准不一样rem：就像大家都用同一把“大尺子”来量东西，这把“大尺子”就是网页里根元素（也就是标签）的字体大小。不管元素在网页里的哪个位置，只要用rem做单位，它的大小就按照这把“大尺子”来算。比如根元素字体大小是16px，那么1rem就是16px，2rem就是32px。em：每个元素自己有一把“小尺子”</div>
</li>
<li><a href="/article/1892580705813196800.htm"
title="【无标题】" target="_blank">【无标题】</a>
<span class="text-muted">是懒羊羊吖～</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>一.WED前端应用软件：c/s架构b/s架构web前端：html5css3javascripthtml5：超文本标记语言----超链接，文字，标签标签语法规范：结束-----双标签标签体------可以嵌套inputimg---------单标签属性：定制元素的行为，属性是不通用的，每一个标签存在自身的属性，当属性名等于属性值时,只需要写属性名，不需要写属性值。二.HTML1.样式//文档声明：告</div>
</li>
<li><a href="/article/1892562803177353216.htm"
title="前端：纯前端快速实现html导出word和pdf" target="_blank">前端：纯前端快速实现html导出word和pdf</a>
<span class="text-muted">m0_74823715</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a>
<div>实现html导出word，需要使用两个库。html-docx-js和file-saver导出word的js方法>npminstallhtml-docx-js>npminstallfile-saverjs引入importFileSaverfrom“file-saver”;importhtmlDocxfrom“html-docx-js/dist/html-docx”;/**导出word方法*/expo</div>
</li>
<li><a href="/article/1892558265254998016.htm"
title="FPGA设计怎么学？薪资前景好吗？" target="_blank">FPGA设计怎么学？薪资前景好吗？</a>
<span class="text-muted">博览鸿蒙</span>
<a class="tag" taget="_blank" href="/search/FPGA/1.htm">FPGA</a><a class="tag" taget="_blank" href="/search/fpga%E5%BC%80%E5%8F%91/1.htm">fpga开发</a>
<div>FPGA前端设计和各岗位之间有着很多联系，是一个薪资待遇高，前景发展好的岗位。但这个岗位的门槛也比较高，很多人不知道怎么学习，下面就和宸极教育一起来了解一下吧。数字前端设计必备技能1、熟悉数字电路设计2、熟悉Verilog或VHDL3、熟悉异步电路设计4、熟悉FIFO的设计5、熟悉UNIX系统及其工具的使用6、熟悉脚本语言Perl、Shell、Tcl等7、熟悉C/C++语言、SystemVeril</div>
</li>
<li><a href="/article/1892555361173434368.htm"
title="Vue-纯前端导出word文档" target="_blank">Vue-纯前端导出word文档</a>
<span class="text-muted">2501_90252408</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a>
<div>varbuf=doc.getZip().generate({type:‘nodebuffer’});//bufisanodejsbuffer,youcaneitherwriteittoafileordoanythingelsewithit.fs.writeFileSync(path.resolve(__dirname,‘output.docx’),buf);####jszip-utils[jszi</div>
</li>
<li><a href="/article/1892544893620908032.htm"
title="纯前端导入导出txt文件" target="_blank">纯前端导入导出txt文件</a>
<span class="text-muted">今天吃了嘛o</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AF%BC%E5%85%A5%E5%AF%BC%E5%87%BAtxt%E6%96%87%E4%BB%B6/1.htm">前端导入导出txt文件</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>1.html部分导入导出{{alone}}2.js部分导出的时候我尝试了很多次改变编码格式为gb2312的，但是无果，所以我再读取的时候先读取文件判断了文件编码格式，然后再去根据编码格式读取文件并展示页面。exportdefault{data(){return{works:[],};},methods:{handleBeforeUpload(file){this.fileList=[file];c</div>
</li>
<li><a href="/article/1892543379292614656.htm"
title="vue中使用ueditor上传到服务器_vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]..." target="_blank">vue中使用ueditor上传到服务器_vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]...</a>
<span class="text-muted">小西超人</span>
<div>写在最前面的话：鉴于近期很多的博友讨论，说我按照文章的一步一步来，弄好之后，怎么会提示后端配置项http错误，文件上传会提示上传错误。这里提别申明一点，ueditor在前端配置好后，需要与后端部分配合进行，后端部分的项目代码git地址：https://github.com/coderliguoqing/UeditorSpringboot，然后将配置ueditor.config.js里的server</div>
</li>
<li><a href="/article/1892540853390471168.htm"
title="vuecli项目实战--管理系统" target="_blank">vuecli项目实战--管理系统</a>
<span class="text-muted">团团kobebryant</span>
<a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</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/java/1.htm">java</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/vue.js/1.htm">vue.js</a>
<div>一、项目搭建HBuider直接：新建--项目--填项目名称、选地址、下拉选vue项目（2.6.10）项目结构这个样子：二、前端配置1.路由配置（地址）在src文件夹下创建router文件夹在router文件夹下面创建js文件index.js---配置组件的地址还有导航守卫、路由嵌套也配在这里1.组件路由2.组件路由嵌套3.路由导航记得跟vue对象关联还有导出路由嗷importVuefrom'vue</div>
</li>
<li><a href="/article/1892538707169308672.htm"
title="若依前后端分离集成CAS详细教程" target="_blank">若依前后端分离集成CAS详细教程</a>
<span class="text-muted">Roc-xb</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%82%B9%E7%99%BB%E5%BD%95/1.htm">单点登录</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/1.htm">前后端分离</a><a class="tag" taget="_blank" href="/search/CAS/1.htm">CAS</a>
<div>目录一、后端配置1、添加cas依赖2、修改配置文件3、修改LoginUser.java4、修改Constants.java5、添加CasProperties.java6、添加CasUserDetailsService.java7、添加CasAuthenticationSuccessHandler.java8、修改SecurityConfig9、启动后端二、前端配置1、修改settings.js2、</div>
</li>
<li><a href="/article/1892528229797916672.htm"
title="使用vue3框架vue-next-admin导出列表数据" target="_blank">使用vue3框架vue-next-admin导出列表数据</a>
<span class="text-muted">乐多_L</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>在Vue3中实现Excel导出功能可以通过以下步骤完成，这里使用xlsx库来实现前端Excel导出：1.安装依赖npminstallxlsxfile-saver#或yarnaddxlsxfile-saver2.实现代码示例需要在当前页引入import*asXLSXfrom"xlsx";注释：我导出的数据为列表的全部数据（datum）；自定义我需要的表头，大家可以根据自己的需要进行替换。还可以只导出</div>
</li>
<li><a href="/article/1892516757122379776.htm"
title="spring boot基于知识图谱的阿克苏市旅游管理系统python-计算机毕业设计" target="_blank">spring boot基于知识图谱的阿克苏市旅游管理系统python-计算机毕业设计</a>
<span class="text-muted">QQ1963288475</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/%E7%9F%A5%E8%AF%86%E5%9B%BE%E8%B0%B1/1.htm">知识图谱</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</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/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a>
<div>目录功能和技术介绍具体实现截图开发核心技术：开发环境开发步骤编译运行核心代码部分展示系统设计详细视频演示可行性论证软件测试源码获取功能和技术介绍该系统基于浏览器的方式进行访问，采用springboot集成快速开发框架，前端使用vue方式，基于es5的语法，开发工具IntelliJIDEAx64，因为该开发工具，内嵌了Tomcat服务运行机制，可不用单独下载Tomcatserver服务器。由于考虑到</div>
</li>
<li><a href="/article/1892510471286747136.htm"
title="【OpenTiny调研征集】共创技术未来，分享您的声音！" target="_blank">【OpenTiny调研征集】共创技术未来，分享您的声音！</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFvue.js%E5%BC%80%E6%BA%90/1.htm">前端vue.js开源</a>
<div>欢迎参与2025年OpenTiny开源社区用户调研征集调研背景随着OpenTiny开源项目的不断发展，我们一直致力于为开发者提供高质量的Web前端开发解决方案。为了更好地满足用户需求，提升项目的实用性和易用性，我们决定发起一项用户调研活动，诚挚邀请您参与。调研目的了解用户需求：收集您在使用OpenTiny开源项目过程中的需求、问题和建议，以便我们更好地改进和优化。提升用户体验：通过您的反馈，我们将</div>
</li>
<li><a href="/article/1892506293600579584.htm"
title="cesium（vue）一些面试问题（包含Three.js）" target="_blank">cesium（vue）一些面试问题（包含Three.js）</a>
<span class="text-muted">GIS瞧葩菜</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/cesium/1.htm">cesium</a>
<div>1.在不同的应用场景和技术栈中，模型加载方法和格式有所不同，下面主要从Web前端三维场景（使用Three.js和cesium）使用Three.js加载模型常见模型格式及加载方法GLTF/GLB格式格式特点：GLTF（GraphicsLibraryTransmissionFormat）是一种开放的、基于JSON的三维模型传输格式，GLB是其二进制版本。它们具有文件小、加载快、支持动画、材质和骨骼等优</div>
</li>
<li><a href="/article/1892474879861649408.htm"
title="探索 TypeScript Redux：构建大规模JavaScript应用的终极指南" target="_blank">探索 TypeScript Redux：构建大规模JavaScript应用的终极指南</a>
<span class="text-muted">柳旖岭</span>
<div>探索TypeScriptRedux：构建大规模JavaScript应用的终极指南去发现同类优质开源项目:https://gitcode.com/在当今快速发展的前端开发领域中，组合正确工具集来应对复杂性和扩展性挑战至关重要。今天，我们将深入了解一个令人兴奋的开源项目——TypeScriptRedux，它结合了TypeScript、JSPM、typings、React和Redux的强大功能，为开发者</div>
</li>
<li><a href="/article/1892471976795107328.htm"
title="前端导出word文件—包含canvas(echarts图表)" target="_blank">前端导出word文件—包含canvas(echarts图表)</a>
<span class="text-muted">Liuer_Qin</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/canvas/1.htm">canvas</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</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>一、使用的插件html-docx-js二、整体思路因为canvas是运行在内存中的，所以不能简单的通过dom获取canvas图片，需要手动的先将canvas转为image。三、实现先克隆要下载的DOM的副本。因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的）。我们这里将原DOM中的canvas转成图片，然后插入到副本的对应位置，这样操作不会影响原DOM</div>
</li>
<li><a href="/article/1892433617058066432.htm"
title="使用Odoo Shell卸载模块" target="_blank">使用Odoo Shell卸载模块</a>
<span class="text-muted">odoo中国</span>
<a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/odoo/1.htm">odoo</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6/1.htm">开源软件</a><a class="tag" taget="_blank" href="/search/erp/1.htm">erp</a>
<div>使用OdooShell卸载模块我们在Odoo使用过程中，因为模块安装错误或者前端错误等导致odoo无法通过界面登录，这时候你可以使用OdooShell来卸载模块。OdooShell是一个交互式Pythonshell，允许你直接与Odoo数据库和模型进行交互。以下是使用OdooShell卸载模块的详细步骤：步骤1：启动OdooShell要启动OdooShell，你需要在终端中运行以下命令。确保你已经</div>
</li>
<li><a href="/article/1892431724265140224.htm"
title="React学习笔记（组件通信）_千峰教育 react" target="_blank">React学习笔记（组件通信）_千峰教育 react</a>
<span class="text-muted">m0_54846402</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>reduxprinciple-+//定义一个dispatch的方法，接收到动作之后，自动调用constdispatch=(action)=>{changeState(action)renderCount(countState)}```创建createStore方法Reduxprinciple02reduxprinciple-+//定义一个方法，用于集中管理state和dispatchconstcr</div>
</li>
<li><a href="/article/1892426166254497792.htm"
title="基于 Spring Boot 的社区居民健康管理系统部署说明书" target="_blank">基于 Spring Boot 的社区居民健康管理系统部署说明书</a>
<span class="text-muted">小星袁</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1%E5%8E%9F%E6%96%87/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><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>目录1系统概述2准备资料3系统安装与部署3.1数据库部署3.1.1MySQL的部署3.1.2Navicat的部署3.2服务器部署3.3客户端部署4系统配置与优化5其他基于SpringBoot的社区居民健康管理系统部署说明书1系统概述本系统主要运用了SpringBoot框架，前端页面的设计主要依托Vue框架来构建，实现丰富且交互性强的用户界面，后台管理功能则采用SpringBoot框架与MySQL数</div>
</li>
<li><a href="/article/1892407882675187712.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%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>1.将样式表放在头部首先说明一下，将样式表放在头部对于实际页面加载的时间并不能造成太大影响，但是这会减少页面首屏出现的时间，使页面内容逐步呈现，改善用户体验，防止“白屏”。我们总是希望页面能够尽快显示内容，为用户提供可视化的回馈，这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素，浏览器会阻塞内容逐步呈现，造成“白屏”。这源自浏览器的</div>
</li>
<li><a href="/article/1892407376435277824.htm"
title="前端开发入门指南：HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南：HTML、CSS和JavaScript基础知识</a>
<span class="text-muted">方向感超强的</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与</div>
</li>
<li><a href="/article/1892404728181092352.htm"
title="React 渲染 Flash 接口数据" target="_blank">React 渲染 Flash 接口数据</a>
<span class="text-muted">ox0080</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%8C%97%E6%BC%82%2B%E6%BB%B4%E6%BB%B4%E5%87%BA%E8%A1%8C/1.htm">北漂+滴滴出行</a><a class="tag" taget="_blank" href="/search/VIP/1.htm">VIP</a><a class="tag" taget="_blank" href="/search/%E6%BF%80%E5%8A%B1/1.htm">激励</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>1.后端Python代码使用Flask创建多个接口，每个接口返回不同的数据，并使用自定义装饰器来绑定路由。代码：#app.pyfromflaskimportFlask,jsonifyapp=Flask(__name__)defapi_route(route,methods=['GET']):"""自定义装饰器，用于将函数与HTTP路由绑定"""defdecorator(func):app.rout</div>
</li>
<li><a href="/article/1892404729082867712.htm"
title="前端504错误分析" target="_blank">前端504错误分析</a>
<span class="text-muted">ox0080</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%8C%97%E6%BC%82%2B%E6%BB%B4%E6%BB%B4%E5%87%BA%E8%A1%8C/1.htm">北漂+滴滴出行</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/VIP/1.htm">VIP</a><a class="tag" taget="_blank" href="/search/%E6%BF%80%E5%8A%B1/1.htm">激励</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端出现504错误（网关超时）通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案：1.确认错误来源504含义：代理服务器（如Nginx、Apache）在等待后端服务响应时超时。常见架构：前端→代理服务器→后端服务，问题通常出在代理与后端之间。2.排查步骤（1）检查后端服务状态确认服务是否运行：通过日志或监控工具（如systemctlstatus,KubernetesPod</div>
</li>
<li><a href="/article/1892398803407925248.htm"
title="部署前端项目2" target="_blank">部署前端项目2</a>
<span class="text-muted">augenstern416</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V</div>
</li>
<li><a href="/article/1892398677004185600.htm"
title="对象的操作" target="_blank">对象的操作</a>
<span class="text-muted">augenstern416</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>在前端开发中，JavaScript提供了许多内置对象和方法，用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧：1.Object对象Object是JavaScript中最基础的对象，几乎所有对象都继承自Object。常用方法Object.keys(obj)：返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key</div>
</li>
<li><a href="/article/1892390738520502272.htm"
title="前端基础入门：HTML、CSS 和 JavaScript" target="_blank">前端基础入门：HTML、CSS 和 JavaScript</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/%E5%89%8D%E7%AB%AF/1.htm">前端</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/js/1.htm">js</a>
<div>在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元</div>
</li>
<li><a href="/article/1892360084474884096.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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main</div>
</li>
<li><a href="/article/1892346975152566272.htm"
title="前端框架虚拟DOM的产生" target="_blank">前端框架虚拟DOM的产生</a>
<span class="text-muted">大橙子-</span>
<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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>直接说结论：为了找出与命令式(原生实现步骤)所执行代码的最小差异化，从而优化代码性能。命令式：可以理解为面向过程编程，需要写好每个实现步骤constdiv=document.querySelector('#app')//获取divdiv.innerText='helloworld'//设置文本内容如果需要修改文字内容为“你好”div.innerText='你好'//设置文本内容声明式：可以理解为面</div>
</li>
<li><a href="/article/1892336006464598016.htm"
title="27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？" target="_blank">27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？</a>
<span class="text-muted">程序员yt</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>今天给大家分享的是一位粉丝的提问，27岁大龄转码秋招惨败，朋友劝我转Java来得及吗？还是继续走前端或机器学习？接下来把粉丝的具体提问和我的回复分享给大家，希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问：211建筑本科，22年毕业后gap一年转码去了英国读的QS100的it的水硕（24年12月份毕业），转码后对就业形势认知不足，时间全花在课业上，八股文和算法准备的不充足，秋招算是惨败。读研</div>
</li>
<li><a href="/article/1892306631119663104.htm"
title="vue中nextTick函数和react类似实现" target="_blank">vue中nextTick函数和react类似实现</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/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Vue3基本用法：import{nextTick}from'vue';//全局调用nextTick(()=>{//在下一个DOM更新循环后执行的代码});//在组件内部调用setup(){asyncfunctionhandleUpdate(){//修改数据...awaitnextTick();//在数据引发的DOM更新完成后执行的代码}}nextTick函数现在作为vue包的一个导出成员，需要显式</div>
</li>
<li><a href="/article/1892301695560511488.htm"
title="芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案" target="_blank">芯麦GC1808立体声ADC芯片解析：高性价比与全集成音频采集方案</a>
<span class="text-muted">青牛科技-Allen</span>
<a class="tag" taget="_blank" href="/search/GLOBALCHIP/1.htm">GLOBALCHIP</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%E6%94%B6%E5%BD%95%E6%9C%BA/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%AE%B6%E7%94%A8%E7%94%B5%E5%99%A8/1.htm">家用电器</a>
<div>引言在直播设备、智能语音终端等新兴应用的推动下，高性能音频采集系统的需求持续增长。芯麦半导体推出的GC1808立体声音频模数转换器，凭借其全集成信号链设计和灵活的接口配置，为开发者提供了高性价比的音频前端解决方案。本文将从核心架构、关键技术特性及典型应用场景三个方面，深入解析这款芯片的设计亮点。一、GC1808核心特性概览全集成信号链内置64倍过采样率Δ-Σ调制器集成数字梳状滤波器（CombFil</div>
</li>
<li><a href="/article/83.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>
<div>最近想写一个游戏，然后碰到有关线程的问题，网上查了好多资料都没满足。
突然想起了前段时间看的有关线程的视频，于是信手拈来写了一个线程的代码片段。
希望帮助刚学java线程的童鞋
package thread;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date</div>
</li>
<li><a href="/article/210.htm"
title="tomcat 容器" target="_blank">tomcat 容器</a>
<span class="text-muted">BlueSkator</span>
<a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
<div>Tomcat的组成部分 1、server
A Server element represents the entire Catalina servlet container. (Singleton) 2、service
service包括多个connector以及一个engine，其职责为处理由connector获得的客户请求。
3、connector
一个connector</div>
</li>
<li><a href="/article/337.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/%E9%80%92%E5%BD%92%E5%87%BD%E6%95%B0/1.htm">递归函数</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0/1.htm">匿名函数</a><a class="tag" taget="_blank" href="/search/%E9%9D%99%E6%80%81%E5%8F%98%E9%87%8F/1.htm">静态变量</a><a class="tag" taget="_blank" href="/search/%E5%BC%95%E7%94%A8%E4%BC%A0%E5%8F%82/1.htm">引用传参</a>
<div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Current To-Do List</title>
</head>
<body></div>
</li>
<li><a href="/article/464.htm"
title="属性颜色字体变化" target="_blank">属性颜色字体变化</a>
<span class="text-muted">周华华</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>function changSize(className){
var diva=byId("fot")
diva.className=className;
}
</script>
<style type="text/css">
.max{
background: #900;
color:#039;
</div>
</li>
<li><a href="/article/591.htm"
title="将properties内容放置到map中" target="_blank">将properties内容放置到map中</a>
<span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/properties/1.htm">properties</a>
<div>代码比较简单：
private static Map<Object, Object> map;
private static Properties p;
static {
//读取properties文件
InputStream is = XXX.class.getClassLoader().getResourceAsStream("xxx.properti</div>
</li>
<li><a href="/article/718.htm"
title="[简单]拼接字符串" target="_blank">[简单]拼接字符串</a>
<span class="text-muted">53873039oycg</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%97%E7%AC%A6%E4%B8%B2/1.htm">字符串</a>
<div> 工作中遇到需要从Map里面取值拼接字符串的情况，自己写了个，不是很好，欢迎提出更优雅的写法，代码如下：
import java.util.HashMap;
import java.uti</div>
</li>
<li><a href="/article/845.htm"
title="Struts2学习" target="_blank">Struts2学习</a>
<span class="text-muted">云端月影</span>
<div>最近开始关注struts2的新特性，从这个版本开始，Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置。
配置文件精简了，的确是简便了开发过程，但是，我们熟悉的配置突然disappear了，真是一下很不适应。跟着潮流走吧，看看该怎样来搞定convention-plugin。
使用Convention插件，你需要将其JAR文件放</div>
</li>
<li><a href="/article/972.htm"
title="Java新手入门的30个基本概念二" target="_blank">Java新手入门的30个基本概念二</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B/1.htm">新手</a><a class="tag" taget="_blank" href="/search/java+%E5%85%A5%E9%97%A8/1.htm">java 入门</a>
<div>基本概念: 1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,很大限度上提高复用率。 2.OOP中最重要的思想是类,类是模板是蓝图,</div>
</li>
<li><a href="/article/1099.htm"
title="jedis 简单使用" target="_blank">jedis 简单使用</a>
<span class="text-muted">antlove</span>
<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/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/command/1.htm">command</a><a class="tag" taget="_blank" href="/search/jedis/1.htm">jedis</a>
<div>jedis.RedisOperationCollection.java
package jedis;
import org.apache.log4j.Logger;
import redis.clients.jedis.Jedis;
import java.util.List;
import java.util.Map;
import java.util.Set;
pub</div>
</li>
<li><a href="/article/1226.htm"
title="PL/SQL的函数和包体的基础" target="_blank">PL/SQL的函数和包体的基础</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/PL%2FSQL%E7%BC%96%E7%A8%8B%E5%87%BD%E6%95%B0/1.htm">PL/SQL编程函数</a><a class="tag" taget="_blank" href="/search/%E5%8C%85%E4%BD%93%E6%98%BE%E7%A4%BA%E5%8C%85%E7%9A%84%E5%85%B7%E4%BD%93%E6%95%B0%E6%8D%AE/1.htm">包体显示包的具体数据</a><a class="tag" taget="_blank" href="/search/%E5%8C%85/1.htm">包</a>
<div>由于明天举要上课,所以刚刚将代码敲了一遍PL/SQL的函数和包体的实现(单例模式过几天好好的总结下再发出来);以便明天能更好的学习PL/SQL的循环,今天太累了,所以早点睡觉,明天继续PL/SQL总有一天我会将你永远的记载在心里,,,
函数;
函数:PL/SQL中的函数相当于java中的方法;函数有返回值
定义函数的
--输入姓名找到该姓名的年薪
create or re</div>
</li>
<li><a href="/article/1353.htm"
title="Mockito(二)--实例篇" target="_blank">Mockito(二)--实例篇</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a><a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a>
<div> 学习了基本知识后，就可以实战了，Mockito的实际使用还是比较麻烦的。因为在实际使用中，最常遇到的就是需要模拟第三方类库的行为。
比如现在有一个类FTPFileTransfer，实现了向FTP传输文件的功能。这个类中使用了a</div>
</li>
<li><a href="/article/1480.htm"
title="精通Oracle10编程SQL(7)编写控制结构" target="_blank">精通Oracle10编程SQL(7)编写控制结构</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>/*
*编写控制结构
*/
--条件分支语句
--简单条件判断
DECLARE
v_sal NUMBER(6,2);
BEGIN
select sal into v_sal from emp
where lower(ename)=lower('&name');
if v_sal<2000 then
update emp set</div>
</li>
<li><a href="/article/1607.htm"
title="【Log4j二】Log4j属性文件配置详解" target="_blank">【Log4j二】Log4j属性文件配置详解</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a>
<div>如下是一个log4j.properties的配置
log4j.rootCategory=INFO, stdout , R
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appe</div>
</li>
<li><a href="/article/1734.htm"
title="java集合排序笔记" target="_blank">java集合排序笔记</a>
<span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>public class CollectionDemo implements Serializable,Comparable<CollectionDemo>{
private static final long serialVersionUID = -2958090810811192128L;
private int id;
private String nam</div>
</li>
<li><a href="/article/1861.htm"
title="java导致linux负载过高的定位方法" target="_blank">java导致linux负载过高的定位方法</a>
<span class="text-muted">ronin47</span>
<div>定位java进程ID
可以使用top或ps -ef |grep java
![图片描述][1]
根据进程ID找到最消耗资源的java pid
比如第一步找到的进程ID为5431
执行
top -p 5431 -H
![图片描述][2]
打印java栈信息
$ jstack -l 5431 > 5431.log
在栈信息中定位具体问题
将消耗资源的Java PID转</div>
</li>
<li><a href="/article/1988.htm"
title="给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数" target="_blank">给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a>
<div>
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
public class RandNFromRand5 {
/**
题目：给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数。
解法1：
f(k) = (x0-1)*5^0+(x1-</div>
</li>
<li><a href="/article/2115.htm"
title="PL/SQL Developer保存布局" target="_blank">PL/SQL Developer保存布局</a>
<span class="text-muted">Kai_Ge</span>
<div> 近日由于项目需要，数据库从DB2迁移到ORCAL，因此数据库连接客户端选择了PL/SQL Developer。由于软件运用不熟悉，造成了很多麻烦，最主要的就是进入后，左边列表有很多选项，自己删除了一些选项卡，布局很满意了，下次进入后又恢复了以前的布局，很是苦恼。在众多PL/SQL Developer使用技巧中找到如下这段：
&n</div>
</li>
<li><a href="/article/2242.htm"
title="[未来战士计划]超能查派[剧透,慎入]" target="_blank">[未来战士计划]超能查派[剧透,慎入]</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%A1%E5%88%92/1.htm">计划</a>
<div> 非常好看,超能查派,这部电影......为我们这些热爱人工智能的工程技术人员提供一些参考意见和思想........
虽然电影里面的人物形象不是非常的可爱....但是非常的贴近现实生活....
&nbs</div>
</li>
<li><a href="/article/2369.htm"
title="Google Map API V2" target="_blank">Google Map API V2</a>
<span class="text-muted">dai_lm</span>
<a class="tag" taget="_blank" href="/search/google+map/1.htm">google map</a>
<div>以后如果要开发包含google map的程序就更麻烦咯
http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html
找到篇不错的文章，大家可以参考一下
http://blog.sina.com.cn/s/blog_c2839d410101jahv.html
1. 创建Android工程
由于v2的key需要G</div>
</li>
<li><a href="/article/2496.htm"
title="java数据计算层的几种解决方法2" target="_blank">java数据计算层的几种解决方法2</a>
<span class="text-muted">datamachine</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E7%AE%97%E5%99%A8/1.htm">集算器</a>
<div>2、SQL
SQL/SP/JDBC在这里属于一类，这是老牌的数据计算层，性能和灵活性是它的优势。但随着新情况的不断出现，单纯用SQL已经难以满足需求，比如： JAVA开发规模的扩大，数据量的剧增，复杂计算问题的涌现。虽然SQL得高分的指标不多，但都是权重最高的。
成熟度：5星。最成熟的。
</div>
</li>
<li><a href="/article/2623.htm"
title="Linux下Telnet的安装与运行" target="_blank">Linux下Telnet的安装与运行</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/telnet/1.htm">telnet</a>
<div>
Linux下Telnet的安装与运行 linux默认是使用SSH服务的 而不安装telnet服务 如果要使用telnet 就必须先安装相应的软件包 即使安装了软件包 默认的设置telnet 服务也是不运行的 需要手工进行设置 如果是redhat9，则在第三张光盘中找到 telnet-server-0.17-25.i386.rpm </div>
</li>
<li><a href="/article/2750.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>
<div>假如有这么一段程序：
function fun(){
fun1();
fun2();
}
首先程序执行完fun1()之后执行fun2()然后fun()结束。
但是，假如我们想对函数做一些变化。比如说，fun是一个解析函数，我们希望后期可以提供丰富的解析函数，而究竟用哪个函数解析，我们希望在配置文件中配置。这个时候就可以发挥钩子的力量了。
我们可以在fu</div>
</li>
<li><a href="/article/2877.htm"
title="EOS中的WorkSpace密码修改" target="_blank">EOS中的WorkSpace密码修改</a>
<span class="text-muted">蕃薯耀</span>
<a class="tag" taget="_blank" href="/search/%E4%BF%AE%E6%94%B9WorkSpace%E5%AF%86%E7%A0%81/1.htm">修改WorkSpace密码</a>
<div>EOS中BPS的WorkSpace密码修改
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 201</div>
</li>
<li><a href="/article/3004.htm"
title="SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】" target="_blank">SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】</a>
<span class="text-muted">hanqunfeng</span>
<a class="tag" taget="_blank" href="/search/SpringSecurity/1.htm">SpringSecurity</a>
<div> SpringSecurity的配置相对来说有些复杂，如果是完整的bean配置，则需要配置大量的bean，所以xml配置时使用了命名空间来简化配置，同样，spring为我们提供了一个抽象类WebSecurityConfigurerAdapter和一个注解@EnableWebMvcSecurity，达到同样减少bean配置的目的，如下：
applicationContex</div>
</li>
<li><a href="/article/3131.htm"
title="ie 9 kendo ui中ajax跨域的问题" target="_blank">ie 9 kendo ui中ajax跨域的问题</a>
<span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/AJAX%E8%B7%A8%E5%9F%9F/1.htm">AJAX跨域</a>
<div>这两天遇到个问题，kendo ui的datagrid，根据json去读取数据，然后前端通过kendo ui的datagrid去渲染，但很奇怪的是，在ie 10,ie 11,chrome,firefox等浏览器中，同样的程序，
浏览起来是没问题的，但把应用放到公网上的一台服务器，
却发现如下情况：
1） ie 9下，不能出现任何数据，但用IE 9浏览器浏览本机的应用，却没任何问题
</div>
</li>
<li><a href="/article/3258.htm"
title="不要让别人笑你不能成为程序员" target="_blank">不要让别人笑你不能成为程序员</a>
<span class="text-muted">lampcy</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
<div>在经历六个月的编程集训之后，我刚刚完成了我的第一次一对一的编码评估。但是事情并没有如我所想的那般顺利。
说实话，我感觉我的脑细胞像被轰炸过一样。
手慢慢地离开键盘，心里很压抑。不禁默默祈祷：一切都会进展顺利的，对吧？至少有些地方我的回答应该是没有遗漏的，是不是？
难道我选择编程真的是一个巨大的错误吗——我真的永远也成不了程序员吗？
我需要一点点安慰。在自我怀疑，不安全感和脆弱等等像龙卷风一</div>
</li>
<li><a href="/article/3385.htm"
title="马皇后的贤德" target="_blank">马皇后的贤德</a>
<span class="text-muted">nannan408</span>
<div> 马皇后不怕朱元璋的坏脾气，并敢理直气壮地吹耳边风。众所周知，朱元璋不喜欢女人干政，他认为“后妃虽母仪天下，然不可使干政事”，因为“宠之太过，则骄恣犯分，上下失序”，因此还特地命人纂述《女诫》，以示警诫。但马皇后是个例外。
有一次，马皇后问朱元璋道：“如今天下老百姓安居乐业了吗？”朱元璋不高兴地回答：“这不是你应该问的。”马皇后振振有词地回敬道：“陛下是天下之父，</div>
</li>
<li><a href="/article/3512.htm"
title="选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以）" target="_blank">选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以）</a>
<span class="text-muted">Rainbow702</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/group+by/1.htm">group by</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%A4%A7%E5%80%BC/1.htm">最大值</a><a class="tag" taget="_blank" href="/search/max/1.htm">max</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%A4%A7%E7%9A%84%E9%82%A3%E6%9D%A1%E8%AE%B0%E5%BD%95/1.htm">最大的那条记录</a>
<div>好久好久不写SQL了，技能退化严重啊！！！
直入主题：
比如我有一张表，file_info，
它有两个属性（但实际不只，我这里只是作说明用）：
file_code, file_version
同一个code可能对应多个version
现在，我想针对每一个code，取得它相关的记录中，version 值 最大的那条记录，
SQL如下：
select
*
</div>
</li>
<li><a href="/article/3639.htm"
title="VBScript脚本语言" target="_blank">VBScript脚本语言</a>
<span class="text-muted">tntxia</span>
<a class="tag" taget="_blank" href="/search/VBScript/1.htm">VBScript</a>
<div>
VBScript 是基于VB的脚本语言。主要用于Asp和Excel的编程。
VB家族语言简介
Visual Basic 6.0
源于BASIC语言。
由微软公司开发的包含协助开发环境的事</div>
</li>
<li><a href="/article/3766.htm"
title="java中枚举类型的使用" target="_blank">java中枚举类型的使用</a>
<span class="text-muted">xiao1zhao2</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><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><a class="tag" taget="_blank" href="/search/1.5%E6%96%B0%E7%89%B9%E6%80%A7/1.htm">1.5新特性</a>
<div>枚举类型是j2se在1.5引入的新的类型,通过关键字enum来定义,常用来存储一些常量.
1.定义一个简单的枚举类型
public enum Sex {
MAN,
WOMAN
}
枚举类型本质是类,编译此段代码会生成.class文件.通过Sex.MAN来访问Sex中的成员,其返回值是Sex类型.
2.常用方法
静态的values()方</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>