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/1773504513622212608.htm"
title="大前端-postcss安装使用指南" target="_blank">大前端-postcss安装使用指南</a>
<span class="text-muted">黑夜照亮前行的路</span>
<a class="tag" taget="_blank" href="/search/postcss/1.htm">postcss</a>
<div>PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把</div>
</li>
<li><a href="/article/1773504261557125120.htm"
title="谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程" target="_blank">谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程</a>
<span class="text-muted">pigerr杨</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/drivers/1.htm">drivers</a>
<div>ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装</div>
</li>
<li><a href="/article/1773501994674225152.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/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优</div>
</li>
<li><a href="/article/1773495574226599936.htm"
title="3、JavaWeb-Ajax/Axios-前端工程化-Element" target="_blank">3、JavaWeb-Ajax/Axios-前端工程化-Element</a>
<span class="text-muted">所谓远行Misnearch</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名</div>
</li>
<li><a href="/article/1773382031552610304.htm"
title="java实体中返回前端的double类型四舍五入（格式化）" target="_blank">java实体中返回前端的double类型四舍五入（格式化）</a>
<span class="text-muted">婲落ヽ紅顏誶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f</div>
</li>
<li><a href="/article/1773360885226602496.htm"
title="Django forms组件" target="_blank">Django forms组件</a>
<span class="text-muted">在飞行-米龙</span>
<a class="tag" taget="_blank" href="/search/Django/1.htm">Django</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict</div>
</li>
<li><a href="/article/1773308900838277120.htm"
title="Web前端Html的表单" target="_blank">Web前端Html的表单</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/html/1.htm">html</a>
<div>表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单</div>
</li>
<li><a href="/article/1773279695408791552.htm"
title="Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）" target="_blank">Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）</a>
<span class="text-muted">王佳斌</span>
<a class="tag" taget="_blank" href="/search/%2B/1.htm">+</a><a class="tag" taget="_blank" href="/search/Thinkphp/1.htm">Thinkphp</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。</div>
</li>
<li><a href="/article/1773240552423227392.htm"
title="react native 总结" target="_blank">react native 总结</a>
<span class="text-muted">一切顺势而行</span>
<a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su</div>
</li>
<li><a href="/article/1773229094205456384.htm"
title="ReactNative应用打包后无网络解决方案" target="_blank">ReactNative应用打包后无网络解决方案</a>
<span class="text-muted">程序猿也会飞</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/1.htm">最佳实践</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a>
<div>ReactNative打包应用后，应用没有网络解决方案：在android\app\src\main\res下创建xml文件夹在xml文件夹中创建network_security_config.xml文件network_security_config.xml内容：在android\app\src\main文件夹AndroidManifest.xml文件内的Application标签中添加属性andr</div>
</li>
<li><a href="/article/1773218897500110848.htm"
title="深入理解 React 中的 children props 和 render props" target="_blank">深入理解 React 中的 children props 和 render props</a>
<span class="text-muted">JudithHuang</span>
<a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83/1.htm">从入门到放弃</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.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>
<div>深入理解React中的childrenprops和renderprops在React中，childrenprops和renderprops是两种常见的组件复用模式，它们都可以帮助我们更好地组织和复用组件代码。虽然它们的实现方式有所不同，但都能够有效地实现组件之间的数据传递和功能共享。childrenpropschildrenprops是React中最常见的一种组件复用模式。通过childrenpr</div>
</li>
<li><a href="/article/1773212227294265344.htm"
title="reactive和ref的异同、toRef和toRefs的使用" target="_blank">reactive和ref的异同、toRef和toRefs的使用</a>
<span class="text-muted">Niucode</span>
<a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>一、reactive和ref有了reactive为什么还要ref？ref处理起基本数据类型来更加的方便快捷，性能要更好。ref内部值的变化只会触发订阅它的副作用函数（effect）更新，而reactive（Proxy）内部对象的任何属性变化都会触发整个对象的重新渲染。相同点：都是Vue3提供的用于创建响应式数据的函数；在组件中都能够触发视图更新，实现数据的双向绑定。不同点：数据类型：reactiv</div>
</li>
<li><a href="/article/1772795036136701952.htm"
title="程序员开发技术整理" target="_blank">程序员开发技术整理</a>
<span class="text-muted">laizhixue</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/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>前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工</div>
</li>
<li><a href="/article/1772773132000624640.htm"
title="【前端学习——js篇】7.函数缓存" target="_blank">【前端学习——js篇】7.函数缓存</a>
<span class="text-muted">笔下无竹墨下有鱼</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/1.htm">前端学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的</div>
</li>
<li><a href="/article/1772709062681624576.htm"
title="html版本号 webpack_html-webpack-plugin详解" target="_blank">html版本号 webpack_html-webpack-plugin详解</a>
<span class="text-muted">weixin_39994949</span>
<a class="tag" taget="_blank" href="/search/html%E7%89%88%E6%9C%AC%E5%8F%B7/1.htm">html版本号</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a>
<div>引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面</div>
</li>
<li><a href="/article/1772673815097180160.htm"
title="Websocket服务监听收发消息" target="_blank">Websocket服务监听收发消息</a>
<span class="text-muted">beiback</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%97%AE%E9%A2%98/1.htm">服务器问题</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致</div>
</li>
<li><a href="/article/1772673816238030848.htm"
title="Netty服务器结合WebSocke协议监听和接收数据" target="_blank">Netty服务器结合WebSocke协议监听和接收数据</a>
<span class="text-muted">beiback</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%97%AE%E9%A2%98/1.htm">服务器问题</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a>
<div>目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa</div>
</li>
<li><a href="/article/1772654174425645056.htm"
title="基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java" target="_blank">基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java</a>
<span class="text-muted">计算机程序老哥</span>
<div>作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个</div>
</li>
<li><a href="/article/1772631263593693184.htm"
title="javascript实现SM2加密解密" target="_blank">javascript实现SM2加密解密</a>
<span class="text-muted">人生在勤，不索何获</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
<div>前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu</div>
</li>
<li><a href="/article/1772541266194661376.htm"
title="前端埋点解决方案" target="_blank">前端埋点解决方案</a>
<span class="text-muted">zhu_zhu_xia</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func</div>
</li>
<li><a href="/article/1772488521790062592.htm"
title="11 React 组件通信 父传子" target="_blank">11 React 组件通信 父传子</a>
<span class="text-muted">a457636876</span>
<a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.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>
<div>在React中实现组件通信是非常常见的需求，其中包括父子组件通信。以下是几种常见的父子组件通信的例子，以及需要注意的知识：Props传递：这是最基本的父子组件通信方式。父组件通过props将数据传递给子组件。//ParentComponent.jsimportReactfrom'react';importChildComponentfrom'./ChildComponent';functionPa</div>
</li>
<li><a href="/article/1772399131164213248.htm"
title="如何提出令人爱回答的好问题？" target="_blank">如何提出令人爱回答的好问题？</a>
<span class="text-muted">兮若耶</span>
<div>我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统</div>
</li>
<li><a href="/article/1772378002940821504.htm"
title="谈谈对前端性能监控的理解和实践" target="_blank">谈谈对前端性能监控的理解和实践</a>
<span class="text-muted">Layla_c</span>
<a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/jave/1.htm">jave</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节，它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控，开发者和运维团队能够及时发现并解决性能瓶颈，从而提升用户体验和系统稳定性。理解前端性能监控，首先要明确其重要性。在移动互联网时代，用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿，用户可能会选择离开，这对企业</div>
</li>
<li><a href="/article/1772365540988354560.htm"
title="mineadmin使用docker启动方式" target="_blank">mineadmin使用docker启动方式</a>
<span class="text-muted">qq_38812523</span>
<a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a>
<div>找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端，https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录，把前端文件复制过来。#容器内访问宿主机的地址用：host.docker.internal#宿主机也可以在ho</div>
</li>
<li><a href="/article/1772335078576291840.htm"
title="为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？" target="_blank">为什么需要使用版本控制工具（如Git）？它如何帮助管理前端开发项目？</a>
<span class="text-muted">智伴科技</span>
<a class="tag" taget="_blank" href="/search/git/1.htm">git</a>
<div>版本控制工具（如Git）在前端开发项目中扮演着重要的角色，主要有以下几方面的作用：1.**版本管理**：版本控制工具可以帮助开发团队管理项目的不同版本，记录每次代码变动的历史记录，方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**：多人开发同一个项目时，版本控制工具可以协助团队成员协同工作，避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共</div>
</li>
<li><a href="/article/1772307893329133568.htm"
title="低代码与前端开发架构：重塑软件开发的未来" target="_blank">低代码与前端开发架构：重塑软件开发的未来</a>
<span class="text-muted">快乐非自愿</span>
<a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>随着技术的不断进步和数字化转型的深入，软件开发领域正经历着一场革命性的变革。在这场变革中，低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系，并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台（Low-CodeDevelopmentPlatform,LCDP）是一种新型的软件开发方式，它允许开发者通过图形化界面、预构建的模块和模</div>
</li>
<li><a href="/article/1772288885938782208.htm"
title="React 中 setState 更新状态的两种写法" target="_blank">React 中 setState 更新状态的两种写法</a>
<span class="text-muted">JudithHuang</span>
<a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83/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%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>React中setState更新状态的两种写法在React中，我们经常需要更新组件的状态（state）。使用setState方法是一种常见的方式来实现状态的更新，而在使用setState方法时，有两种不同的写法，即对象式和函数式。本文将介绍这两种写法的区别和使用场景。1.对象式写法对象式写法是最常见的setState方法的调用方式之一。在这种写法中，我们直接传入一个对象来更新状态。//对象式写法t</div>
</li>
<li><a href="/article/1772248107657003008.htm"
title="[commonjs--resolver] Missing “./jsx-runtime.js“ specifier in “react“ package" target="_blank">[commonjs--resolver] Missing “./jsx-runtime.js“ specifier in “react“ package</a>
<span class="text-muted">清羽_ls</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%26amp%3B%26amp%3B%E6%B2%89%E6%B7%80/1.htm">前端&&沉淀</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>修复vite构建时错误vite打包,第三方包引用的react版本不一致问题修复(不是最优解)//vite.config.jsimport{defineConfig}from'vite';importreactfrom'@vitejs/plugin-react';importpathfrom'path';exportdefaultdefineConfig({plugins:[react(),//如果</div>
</li>
<li><a href="/article/1772083971480420352.htm"
title="接口测试之测试原则、测试用例、测试流程......" target="_blank">接口测试之测试原则、测试用例、测试流程......</a>
<span class="text-muted">程序员老鹰</span>
<a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E6%B5%8B%E8%AF%95/1.htm">功能测试</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B/1.htm">测试用例</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E8%A6%86%E7%9B%96%E7%8E%87/1.htm">测试覆盖率</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%AE%89%E5%85%A8/1.htm">系统安全</a>
<div>一、接口的介绍软件测试中，常说的接口有两种：图形用户接口（GUI，人与程序的接口）、应用程序编程接口（API）。接口（API）是系统与系统之间，模块与模块之间或者服务与服务之间相互调用的入口。它的本质：其实就是一种约定，在开发前期，我们约定接口会接收什么数据；在处理完成后，它又会返回什么数据。开发岗位分为前端和后端，他们相互配合完成工作，会协商接口的定义方法。一般后端定义接口，前端调用接口。前后端</div>
</li>
<li><a href="/article/1772016878319894528.htm"
title="React—— props校验（非typescript校验类型）" target="_blank">React—— props校验（非typescript校验类型）</a>
<span class="text-muted">水煮庄周鱼鱼</span>
<a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>非typescript环境下，当我们在封装组件的时候，接受props时传入的内容，需要做类型检测，那我们可以用props校验进行类型的检查。props校验允许在创建组件的时候，就约定props的格式、类型等实现步骤：导入prop-types包使用组件名.propTypes={}来给组件的props添加校验规则校验规则通过PropTypes对象来指定如果props想设置默认值，可以通过default</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>