Bootstrap4 表单

创建表单

在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。

表单元素 , , 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。</p> <h5>Bootstrap4 表单布局</h5> <ul> <li>堆叠表单 (全屏宽度)：垂直方向 </li> <li>内联表单：水平方向</li> </ul> <p>Bootstrap 提供了两种类型的表单布局:</p> <h3>1、堆叠表单</h3> <p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：</p> <div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"> <pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-group</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span>Email address:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-control</font>"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-group</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span>Password:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="password"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-control</font>"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-check</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-label"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-input"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="checkbox"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"> Remember me </span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">button </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="submit"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="btn btn-primary"</span><span style="color: rgb(0, 0, 255);">></span>Submit<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">button</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span></pre> </div> <p></p> <p>尝试一下 »</p> <p><a href="http://img.e-com-net.com/image/info8/cabf65e03d4f406dbf9a0ee6d55a42d7.png" target="_blank"><img width="534" height="237" title="image" style="margin: 0px; border: 0px currentcolor; border-image: none; display: inline; background-image: none;;border:1px solid black;" alt="Bootstrap4 表单_第1张图片" src="http://img.e-com-net.com/image/info8/cabf65e03d4f406dbf9a0ee6d55a42d7.png"></a></p> <h3>2、内联表单</h3> <p>所有内联表单中的元素都是左对齐的。</p> <p><strong>注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。</strong></p> <p>内联表单需要在 <form> 元素上添加 .form-inline类。</p> <p>以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：</p> <div class="cnblogs_code" style="padding: 5px; border: 1px solid rgb(204, 204, 204); border-image: none; background-color: rgb(245, 245, 245);"> <pre><span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">form </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="<font style="background-color: rgb(255, 255, 0);">form-inline</font>"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span>Email address:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="form-control"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="email"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">for</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span>Password:<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="password"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="form-control"</span><span style="color: rgb(255, 0, 0);"> id</span><span style="color: rgb(0, 0, 255);">="pwd"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">div </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">label </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-label"</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">input </span><span style="color: rgb(255, 0, 0);">class</span><span style="color: rgb(0, 0, 255);">="form-check-input"</span><span style="color: rgb(255, 0, 0);"> type</span><span style="color: rgb(0, 0, 255);">="checkbox"</span><span style="color: rgb(0, 0, 255);">></span><span style="color: rgb(0, 0, 0);"> Remember me </span><span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">label</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">div</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"><</span><span style="color: rgb(128, 0, 0);">button </span><span style="color: rgb(255, 0, 0);">type</span><span style="color: rgb(0, 0, 255);">="submit"</span><span style="color: rgb(255, 0, 0);"> class</span><span style="color: rgb(0, 0, 255);">="btn btn-primary"</span><span style="color: rgb(0, 0, 255);">></span>Submit<span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">button</span><span style="color: rgb(0, 0, 255);">></span> <span style="color: rgb(0, 0, 255);"></</span><span style="color: rgb(128, 0, 0);">form</span><span style="color: rgb(0, 0, 255);">></span></pre> </div> <p></p> <p>尝试一下 »</p> <p><a href="http://img.e-com-net.com/image/info8/9b94939d677649ee96f0b05f08586d68.png" target="_blank"><img width="728" height="71" title="image" style="margin: 0px; border: 0px currentcolor; border-image: none; display: inline; background-image: none;" alt="image" src="http://img.e-com-net.com/image/info8/9b94939d677649ee96f0b05f08586d68.png"></a> </p> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1213518612812369920"></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">你可能感兴趣的:(Bootstrap4 表单)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835436390200995840.htm" title="Table列表复现框实现【勾选-搜索-再勾选】" target="_blank">Table列表复现框实现【勾选-搜索-再勾选】</a> <span class="text-muted">～四时春～</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>Table列表复现框实现【勾选-搜索-再勾选】概要整体架构流程代码实现技术细节注意参考文献概要最近在开发时遇到一个问题，在进行表单渲染时，正常选中没有问题，单如果需要搜索选中时，一个是已选中的不会回填，二是在搜索的结果中进行选中，没有实现，经过排查，查找资料后实现。例如：整体架构流程具体的实现效果如下：代码实现{{scope.row.userName}}已选区{{userItem.userName</div> </li> <li><a href="/article/1835376758703091712.htm" title="el-table实现全选整表，单元一页复选框功能" target="_blank">el-table实现全选整表，单元一页复选框功能</a> <span class="text-muted">周bro</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</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>全选整表单选一页0":popper-append-to-body="false":total="tableData.length":page-size="pageObj.pagesize":page-sizes="[10,50,100]"layout="total,sizes,prev,pager,next"@size-change="handleSizeChange"@current-chang</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835245732337119232.htm" title="如何在Flask中处理表单数据" target="_blank">如何在Flask中处理表单数据</a> <span class="text-muted">ac-er8888</span> <a class="tag" taget="_blank" href="/search/flask/1.htm">flask</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>在Flask中处理表单数据是一个常见的任务，它涉及从客户端接收数据并在服务器端进行解析和处理。Flask本身不直接提供表单验证的功能，但它可以与WTForms等库结合使用来简化表单处理过程。不过，即使没有WTForms，你仍然可以直接通过Flask的request对象来处理表单数据。以下是在Flask中处理表单数据的基本步骤：1.创建HTML表单首先，你需要在HTML中创建一个表单，并将其meth</div> </li> <li><a href="/article/1835039192204275712.htm" title="QT 自定义组件 界面跳转" target="_blank">QT 自定义组件 界面跳转</a> <span class="text-muted">子座</span> <a class="tag" taget="_blank" href="/search/qt/1.htm">qt</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、引用组件需要的类（头文件）1、按钮类QPushButton:普通按钮;QToolButton:工具按钮;QRadioButton:单选按钮;QCheckBox:复选按钮;QCommandLinkButton:命令连接按钮;2、布局类QHBoxLayout水平QVBoxLayout垂直QGridLayout网格QFormLayout表单QSrackedLayout.堆栈3、输出类QLabel:标</div> </li> <li><a href="/article/1834972741321715712.htm" title="Vue中el-dialog的用法" target="_blank">Vue中el-dialog的用法</a> <span class="text-muted">「已注销」</span> <a class="tag" taget="_blank" href="/search/Vue%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/1.htm">Vue模板开发</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1、写入页面打开嵌套表单的Dialog取消确定2、写入变量dialogFormVisible:</div> </li> <li><a href="/article/1834913988593414144.htm" title="2021国家开放大学计算机网络安全技术形成性考核五" target="_blank">2021国家开放大学计算机网络安全技术形成性考核五</a> <span class="text-muted">chaoliang.top</span> <a class="tag" taget="_blank" href="/search/%E5%9B%BD%E5%BC%80%E8%AF%95%E9%A2%98/1.htm">国开试题</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a> <div>本人还会继续更新其他国家开放大学的试题，请大家多多关注，如果有什么建议，还希望大家提出来，本人也好完善本人在测试答案的时候发现，本章考试回顾结果中明明选对了答案，但是提示错误的情况，并且该题没有提示正确答案，这种情况应该是国开试题出现bug导致，请大家不要担心，如果有追求完美的同学，多答几次，可能就会避开这种题，因为出题是随机的。1.SQL注入一般可通过网页表单直接输入选择多项：对错正确答案：对2</div> </li> <li><a href="/article/1834905295411834880.htm" title="H5新增标签和属性" target="_blank">H5新增标签和属性</a> <span class="text-muted">yx_back</span> <a class="tag" taget="_blank" href="/search/Html/1.htm">Html</a><a class="tag" taget="_blank" href="/search/H5%E6%96%B0%E5%A2%9E%E5%B1%9E%E6%80%A7/1.htm">H5新增属性</a><a class="tag" taget="_blank" href="/search/H5%E6%96%B0%E5%A2%9E%E6%A0%87%E7%AD%BE/1.htm">H5新增标签</a> <div>H5新增标签和属性H5新增标签1、结构标签2、媒体标签3、表单标签4、其他功能标签H5新增属性1、对于js进行添加的属性。2、网页中标签中加入小图标的样式代码3、iframe新增属性4、其他属性H5全局属性可直接在标签里插入的：data-自定义属性名字；H5新增标签1、结构标签header：某个区块的头部信息/标题；section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节</div> </li> <li><a href="/article/1834873781596811264.htm" title="开源项目低代码表单FormCreate从Vue2到Vue3升级指南" target="_blank">开源项目低代码表单FormCreate从Vue2到Vue3升级指南</a> <span class="text-muted">低代码研究员</span> <a class="tag" taget="_blank" href="/search/FormCreate/1.htm">FormCreate</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/FormCreate/1.htm">FormCreate</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81%E8%A1%A8%E5%8D%95/1.htm">低代码表单</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81%E8%AE%BE%E8%AE%A1%E5%99%A8/1.htm">低代码设计器</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A1%A8%E5%8D%95/1.htm">动态表单</a> <div>开源项目低代码表单FormCreatev3版本基于Vue3.0构建，尽管功能与v2版本大致相同，但有一些重要的变更和不兼容项需要注意。源码地址:Github|GiteeFormCreatev3对比v2版本在一些功能和配置项上做了调整，以更好地支持Vue3的新特性。以下是v2到v3升级过程中需要关注的变化和调整。移除配置项在v3版本中，以下配置项已被移除，因为它们在Vue3中不再适用：attrs：在</div> </li> <li><a href="/article/1834808354430611456.htm" title="开源项目低代码表单FormCreate中ElementPlus表单使用校验规则示例" target="_blank">开源项目低代码表单FormCreate中ElementPlus表单使用校验规则示例</a> <span class="text-muted">低代码研究员</span> <a class="tag" taget="_blank" href="/search/FormCreate/1.htm">FormCreate</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81%E8%A1%A8%E5%8D%95/1.htm">低代码表单</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A1%A8%E5%8D%95/1.htm">动态表单</a><a class="tag" taget="_blank" href="/search/FormCreate/1.htm">FormCreate</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81%E8%AE%BE%E8%AE%A1%E5%99%A8/1.htm">低代码设计器</a> <div>在开源项目低代码表单FormCreate中，可以通过validate配置项为表单组件设置验证规则。无论是内置的表单组件还是自定义的表单组件，都支持表单校验。本文将详细介绍验证规则的使用方法，并提供一些示例来帮助您更好地理解和应用这些功能。源码地址:Github|Gitee基本验证规则validate配置项允许您为每个表单字段定义多种验证规则。每个规则都是一个对象，您可以通过设置不同的属性来控制验证</div> </li> <li><a href="/article/1834775455216005120.htm" title="浏览器的新建无痕窗口：是否真的无痕？" target="_blank">浏览器的新建无痕窗口：是否真的无痕？</a> <span class="text-muted">晓生谈跨境</span> <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> <div>随着互联网的普及和隐私保护意识的提升，浏览器的无痕模式（也称为隐私浏览模式或隐身窗口）逐渐成为用户保护个人隐私的一种常用手段。然而，关于无痕窗口是否真的无痕，却存在不少争议和误解。本文将从多个角度分析这一问题，揭示无痕窗口的真相。一、无痕窗口的定义与工作原理无痕窗口，顾名思义，就是用户在浏览网页时不留下任何本地记录的浏览器功能。在无痕模式下，浏览器不会保存浏览历史、Cookie、表单数据、缓存文件</div> </li> <li><a href="/article/1834627959693078528.htm" title="代码随想录算法训练营第三天| 链表01" target="_blank">代码随想录算法训练营第三天| 链表01</a> <span class="text-muted">咕咕鹄鹄</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>一、链表基础链表是一种通过指针串联在一起的线性结构。每一个节点由两部分组成，一个是数据域一个是指针域（存放指向下一个节点的指针）。最后一个节点的指针域指向null（空指针的意思）。链表的入口节点称为链表的头结点也就是head。链表类型：单链表、双链表、循环链表单链表：双链表：每一个节点有两个指针域，一个指向下一个节点，一个指向上一个节点。双链表既可以向前查询也可以向后查询。循环链表，就是链表首尾相</div> </li> <li><a href="/article/1834613974994350080.htm" title="前端文件上传总结" target="_blank">前端文件上传总结</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/html5/1.htm">html5</a> <div>第一种：经典的form和input上传。设置form的aciton为后端页面，enctype="multipart/form-data"，type=‘post’提交使用input选择文件，设置好其他input的值，点击提交，将文件数据及签名等认证信息发送到form设置的action对应的页面，浏览器也会跳转到该页面。触发form表单提交数据的方式有2种，一种是在页面上点击button按钮或按钮触发</div> </li> <li><a href="/article/1834444787751677952.htm" title="OkHttp搞定Http请求" target="_blank">OkHttp搞定Http请求</a> <span class="text-muted">头秃到底</span> <div>文章目录OkHttp依赖包创建OkHttpClient构造UrlHeader头设定Get请求同步Get异步GetPost请求Json内容Form表单文件上传Put请求Json内容参数方式Delete请求OkHttp工具类OkHttp官方文档仓库OkHttp是一款高效的HTTP客户端框架:HTTP/2支持允许对同一主机的所有请求共享一个套接字。连接池可以减少请求延迟(如果HTTP/2不可用)。透明G</div> </li> <li><a href="/article/1834436261545340928.htm" title="如何有效防止重复提交表单" target="_blank">如何有效防止重复提交表单</a> <span class="text-muted">德墨忒尔</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>如何有效防止重复提交表单在企业级项目中，防止重复提交是一个常见且重要的问题，尤其是在处理订单、支付等敏感操作时。重复提交不仅会影响用户体验，还可能引发严重的业务问题，如订单重复、支付异常等。本文将从多个角度讨论如何防止重复提交，并介绍几种在实际项目中广泛应用的技术方法。1.前端层面的防重策略前端是用户提交表单的入口，常见的防重策略是在这里进行表单的状态控制，通过按钮状态的变化来防止重复提交。以下是</div> </li> <li><a href="/article/1834428954291826688.htm" title="HTML/CSS/JavaScript 全景指南：构建现代Web应用的基石" target="_blank">HTML/CSS/JavaScript 全景指南：构建现代Web应用的基石</a> <span class="text-muted">一杯梅子酱</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>引言：在Web开发中，HTML、CSS和JavaScript是三个不可或缺的技术，它们共同构成了前端开发的核心。本文旨在全面解析这三个技术的关键知识点，探讨它们之间的联系，并通过实际案例加深理解，最后分享一些宝贵的经验总结。一、HTML：内容的骨架1.基本结构标签的使用：,,文本内容：,至链接与图像：,列表：,,表格：,,,表单：,,,,2.语义化标签,,,,,3.案例创建一个简单的网页：Html</div> </li> <li><a href="/article/1834427314880999424.htm" title="PHP导入Excel文件后缀xlsx与xls的处理问题" target="_blank">PHP导入Excel文件后缀xlsx与xls的处理问题</a> <span class="text-muted">木子李0531</span> <a class="tag" taget="_blank" href="/search/PHPExcel/1.htm">PHPExcel</a><a class="tag" taget="_blank" href="/search/thinkphp5/1.htm">thinkphp5</a><a class="tag" taget="_blank" href="/search/thinkPHP/1.htm">thinkPHP</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a><a class="tag" taget="_blank" href="/search/xlsx/1.htm">xlsx</a><a class="tag" taget="_blank" href="/search/xls/1.htm">xls</a> <div>publicfunctionimportData(){//先执行文件上传$file=$this->request->file('files');//获取表单上传文件if(empty($file)){$this->error('请选择上传文件');}else{//移动到框架应用根目录public/excel$info=$file->move(ROOT_PATH.'public'.DS.'Excel'</div> </li> <li><a href="/article/1834398828665597952.htm" title="HarmonyOS学习(十一)——安全管理" target="_blank">HarmonyOS学习(十一)——安全管理</a> <span class="text-muted">ImomoTo</span> <a class="tag" taget="_blank" href="/search/HarmonyOS/1.htm">HarmonyOS</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/ArkUI/1.htm">ArkUI</a><a class="tag" taget="_blank" href="/search/arkTs/1.htm">arkTs</a> <div>文章目录1、权限等级划分2、权限类型system_grant（系统授权）user_grant（用户授权）3、动态申请权限列表单4、访问控制开发步骤4.1、权限申请5、实战：访问Camera授权5.1、申请ohos.permission.Camera权限5.2、校验当前是否已经授权5.3、请求权限5.4、在UI中进行权限声明官方文档地址：应用权限管控概述-应用权限管控-程序访问控制-安全-系统-华为</div> </li> <li><a href="/article/1834328719364288512.htm" title="8- 【JavaWeb】用HTML和CSS来创建一个简洁的登录界面" target="_blank">8- 【JavaWeb】用HTML和CSS来创建一个简洁的登录界面</a> <span class="text-muted">weixin_44329069</span> <a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</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/css3/1.htm">css3</a> <div>我们将使用HTML和CSS来创建一个简洁、现代的登录界面。1.HTML结构首先，我们需要一个基本的HTML结构来容纳登录表单。保存为index.html文件：登录页面登录2.CSS样式接下来，我们将编写CSS样式来美化登录界面。保存为styles.css文件：/*Resetsomedefaultstyles*//*Resetsomedefaultstyles*/body,html{margin:0</div> </li> <li><a href="/article/1834307039799635968.htm" title="架构面试题" target="_blank">架构面试题</a> <span class="text-muted">路飞的影子</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E6%80%BB%E7%BB%93/1.htm">个人总结</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86/1.htm">相关知识</a> <div>面试准备：问题：Spring和SringBoot有什么区别答：1.SpringBoot可以建立独立的Spring应用程序；2.内嵌了如Tomcat，Jetty和Undertow这样的容器，也就是说可以直接跑起来，用不着再做部署工作了。3.无需再像Spring那样搞一堆繁琐的xml文件的配置；4.可以自动配置Spring；5.提供了一些现有的功能，如量度工具，表单数据验证以及一些外部配置这样的一些第</div> </li> <li><a href="/article/1834166490459369472.htm" title="【Antd】Form.List的强大之处，Form.List使用方式细微讲解" target="_blank">【Antd】Form.List的强大之处，Form.List使用方式细微讲解</a> <span class="text-muted">hzxOnlineOk</span> <a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>设想场景有时候我们会遇到一些复杂的需求，需要用Table嵌套Form.List，逐层嵌套渲染表格表单列表，填写完毕后提交的复杂需求。由于表单项分布在数据的各个层级里，因此，如何回填表单值就成了一个比较棘手的问题，处理不好，很容易引发一些逻辑bug（例如表单重置后，数据回填、表单校验异常等）如何处理数据其实，antd的form实例对象很强，只需要提供给它指定的field和索引i组成的formName</div> </li> <li><a href="/article/1833994321070747648.htm" title="curl和ping" target="_blank">curl和ping</a> <span class="text-muted">G丶AEOM</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>curl获取页面内容，ping测试连通curl和ping是两个在网络环境中常用的命令行工具，但它们的目的和应用场景有很大的不同。curl用途：curl是一个命令行工具，用于传输数据，支持多种协议，包括HTTP、HTTPS、FTP等。它通常用于测试或访问Web服务，如RESTAPI、下载文件、上传数据等。场景：测试Web服务的响应和行为。下载或上传文件到Web服务器。发送数据到Web服务，如表单提交</div> </li> <li><a href="/article/1833944639619559424.htm" title="Flask中实现文件上传" target="_blank">Flask中实现文件上传</a> <span class="text-muted">ac-er8888</span> <a class="tag" taget="_blank" href="/search/flask/1.htm">flask</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>在Flask中实现文件上传是一个常见的需求，它允许用户将文件从本地计算机传输到服务器上。下面将详细介绍如何在Flask中实现文件上传的步骤，包括设计上传表单、创建处理文件上传的路由、以及相关的最佳实践。一、设计上传表单首先，你需要创建一个HTML表单，让用户可以选择要上传的文件。这个表单需要设置enctype="multipart/form-data"属性，这是上传文件所必需的。FileUploa</div> </li> <li><a href="/article/1833944640068349952.htm" title="如何在Flask中实现用户认证" target="_blank">如何在Flask中实现用户认证</a> <span class="text-muted">ac-er8888</span> <a class="tag" taget="_blank" href="/search/flask/1.htm">flask</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>在Flask中实现用户认证通常涉及几个关键步骤：使用第三方库（如Flask-Login或Flask-Security）、用户数据管理、登录表单处理、会话管理以及保护需要认证的路由。以下是使用Flask-Login库实现用户认证的基本步骤：1.安装Flask-Login首先，确保安装了Flask和Flask-Login。可以使用pip来安装：pipinstallFlaskFlask-Login2.设</div> </li> <li><a href="/article/1833832556395589632.htm" title="Vue实现双向数据绑定" target="_blank">Vue实现双向数据绑定</a> <span class="text-muted">眉间是银河</span> <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>在Vue.js中，双向数据绑定是通过v-model指令实现的。v-model是Vue.js提供的一个语法糖，它能够在表单元素和组件上实现数据的双向绑定。基本用法假设我们有一个简单的输入框，我们希望输入框的值能够实时反映到Vue实例的数据中，并且当Vue实例的数据发生变化时，输入框的值也会自动更新。你输入的内容是:{{message}}exportdefault{data(){return{mess</div> </li> <li><a href="/article/1833685284038995968.htm" title="实战|springboot+redis+拦截器 实现接口幂等性校验" target="_blank">实战|springboot+redis+拦截器 实现接口幂等性校验</a> <span class="text-muted">ApesKingMan</span> <div>1概念幂等性,通俗的说就是一个接口,多次发起同一个请求,必须保证操作只能执行一次比如:订单接口,不能多次创建订单支付接口,重复支付同一笔订单只能扣一次钱支付宝回调接口,可能会多次回调,必须处理重复回调普通表单提交接口,因为网络超时等原因多次点击提交,只能成功一次等等2常见解决方案唯一索引--防止新增脏数据token机制--防止页面重复提交悲观锁--获取数据的时候加锁(锁表或锁行)乐观锁--基于版本</div> </li> <li><a href="/article/1833671674436874240.htm" title="HTML网站首页代码详细知识点" target="_blank">HTML网站首页代码详细知识点</a> <span class="text-muted">程序员一修</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Java_%E7%9F%A5%E8%AF%86%E7%A2%8E%E7%89%87/1.htm">Java_知识碎片</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>HTML网站首页代码详细知识点前言表单表标签:action:提交的地址(我理解为要跳到的页面地址)method:get方式:默认提交方式，会将参数拼接在链接后面,并且有大小限制，4Kpost方式:会将参数封装在请求体中，没有大小限制input小结前言这是我学习HTML网站首页代码详细知识点，希望对大家有用表单表标签:action:提交的地址(我理解为要跳到的页面地址)method:get方式:默认</div> </li> <li><a href="/article/1833653398856101888.htm" title="前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧" target="_blank">前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧</a> <span class="text-muted">VaporGas</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/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><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>表单验证的高级特性本次介绍的重点如下：动态改变样式属性className属性的用法遮罩层特效的制作动态输入的提示特性实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色使用元素的style属性访问样式规则object.style.property;例如:访问字体的颜色color使用obj.style.color访问字体的大小属性使用obj.style.fontSizefont-size变换成fo</div> </li> <li><a href="/article/48.htm" title="开发者关心的那些事" target="_blank">开发者关心的那些事</a> <span class="text-muted">圣子足道</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/apple/1.htm">apple</a><a class="tag" taget="_blank" href="/search/%E6%94%AF%E4%BB%98/1.htm">支付</a> <div>我要在app里添加IAP，必须要注册自己的产品标识符（product identifiers）。产品标识符是什么？ 产品标识符（Product Identifiers）是一串字符串，它用来识别你在应用内贩卖的每件商品。App Store用产品标识符来检索产品信息，标识符只能包含大小写字母（A-Z）、数字（0-9）、下划线（-）、以及圆点(.)。你可以任意排列这些元素，但我们建议你创建标识符时使用</div> </li> <li><a href="/article/175.htm" title="负载均衡器技术Nginx和F5的优缺点对比" target="_blank">负载均衡器技术Nginx和F5的优缺点对比</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/F5/1.htm">F5</a> <div>        对于数据流量过大的网络中，往往单一设备无法承担，需要多台设备进行数据分流，而负载均衡器就是用来将数据分流到多台设备的一个转发器。         目前有许多不同的负载均衡技术用以满足不同的应用需求，如软/硬件负载均衡、本地/全局负载均衡、更高</div> </li> <li><a href="/article/302.htm" title="LeetCode[Math] - #9 Palindrome Number" target="_blank">LeetCode[Math] - #9 Palindrome Number</a> <span class="text-muted">Cwind</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a> <div>原题链接：#9 Palindrome Number   要求： 判断一个整数是否是回文数，不要使用额外的存储空间   难度：简单   分析： 题目限制不允许使用额外的存储空间应指不允许使用O(n)的内存空间，O(1)的内存用于存储中间结果是可以接受的。于是考虑将该整型数反转，然后与原数字进行比较。 注：没有看到有关负数是否可以是回文数的明确结论，例如</div> </li> <li><a href="/article/429.htm" title="画图板的基本实现" target="_blank">画图板的基本实现</a> <span class="text-muted">15700786134</span> <a class="tag" taget="_blank" href="/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm">画图板</a> <div> 要实现画图板的基本功能，除了在qq登陆界面中用到的组件和方法外，还需要添加鼠标监听器，和接口实现。 首先，需要显示一个JFrame界面： public class DrameFrame extends JFrame {              //显示</div> </li> <li><a href="/article/556.htm" title="linux的ps命令" target="_blank">linux的ps命令</a> <span class="text-muted">被触发</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux中的ps命令是Process Status的缩写。ps命令用来列出系统中当前运行的那些进程。ps命令列出的是当前那些进程的快照，就是执行ps命令的那个时刻的那些进程，如果想要动态的显示进程信息，就可以使用top命令。 要对进程进行监测和控制，首先必须要了解当前进程的情况，也就是需要查看当前进程，而 ps 命令就是最基本同时也是非常强大的进程查看命令。使用该命令可以确定有哪些进程正在运行</div> </li> <li><a href="/article/683.htm" title="Android 音乐播放器 下一曲 连续跳几首歌" target="_blank">Android 音乐播放器 下一曲 连续跳几首歌</a> <span class="text-muted">肆无忌惮_</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>最近在写安卓音乐播放器的时候遇到个问题。在MediaPlayer播放结束时会回调 player.setOnCompletionListener(new OnCompletionListener() { @Override public void onCompletion(MediaPlayer mp) { mp.reset(); Log.i("H</div> </li> <li><a href="/article/810.htm" title="java导出txt文件的例子" target="_blank">java导出txt文件的例子</a> <span class="text-muted">知了ing</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>代码很简单就一个servlet,如下： package com.eastcom.servlet; import java.io.BufferedOutputStream; import java.io.IOException; import java.net.URLEncoder; import java.sql.Connection; import java.sql.Resu</div> </li> <li><a href="/article/937.htm" title="Scala stack试玩, 提高第三方依赖下载速度" target="_blank">Scala stack试玩, 提高第三方依赖下载速度</a> <span class="text-muted">矮蛋蛋</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/sbt/1.htm">sbt</a> <div>原文地址： http://segmentfault.com/a/1190000002894524 sbt下载速度实在是惨不忍睹, 需要做些配置优化 下载typesafe离线包, 保存为ivy本地库 wget http://downloads.typesafe.com/typesafe-activator/1.3.4/typesafe-activator-1.3.4.zip 解压r</div> </li> <li><a href="/article/1064.htm" title="phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。" target="_blank">phantomjs安装(linux，附带环境变量设置) ，以及casperjs安装。</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/spider/1.htm">spider</a> <div>1. 首先从官网 http://phantomjs.org/下载phantomjs压缩包，解压缩到/root/phantomjs文件夹。 2. 安装依赖 sudo yum install fontconfig freetype libfreetype.so.6 libfontconfig.so.1 libstdc++.so.6 3. 配置环境变量 vi /etc/profil</div> </li> <li><a href="/article/1191.htm" title="JAVA IO FileInputStream和FileOutputStream，字节流的打包输出" target="_blank">JAVA IO FileInputStream和FileOutputStream，字节流的打包输出</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/java%E6%A0%B8%E5%BF%83%E6%80%9D%E6%83%B3/1.htm">java核心思想</a><a class="tag" taget="_blank" href="/search/JAVA+IO%E6%93%8D%E4%BD%9C/1.htm">JAVA IO操作</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E8%8A%82%E6%B5%81/1.htm">字节流</a> <div>在程序设计语言中，数据的保存是基本，如果某程序语言不能保存数据那么该语言是不可能存在的，JAVA是当今最流行的面向对象设计语言之一，在保存数据中也有自己独特的一面，字节流和字符流 1，字节流是由字节构成的，字符流是由字符构成的 字节流和字符流都是继承的InputStream和OutPutStream ,java中两种最基本的就是字节流和字符流   类 FileInputStream</div> </li> <li><a href="/article/1318.htm" title="Spring基础实例（依赖注入和控制反转）" target="_blank">Spring基础实例（依赖注入和控制反转）</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>前提条件：在http://www.springsource.org/download网站上下载Spring框架，并将spring.jar、log4j-1.2.15.jar、commons-logging.jar加载至工程1.武器接口 package com.bijian.spring.base3; public interface Weapon { void kil</div> </li> <li><a href="/article/1445.htm" title="HR看重的十大技能" target="_blank">HR看重的十大技能</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%8F%90%E5%8D%87/1.htm">提升</a><a class="tag" taget="_blank" href="/search/%E8%83%BD%E5%8A%9B/1.htm">能力</a><a class="tag" taget="_blank" href="/search/HR/1.htm">HR</a><a class="tag" taget="_blank" href="/search/%E6%88%90%E9%95%BF/1.htm">成长</a> <div>    一个人掌握何种技能取决于他的兴趣、能力和聪明程度，也取决于他所能支配的资源以及制定的事业目标，拥有过硬技能的人有更多的工作机会。但是，由于经济发展前景不确定，掌握对你的事业有所帮助的技能显得尤为重要。以下是最受雇主欢迎的十种技能。 　　一、解决问题的能力 　　每天，我们都要在生活和工作中解决一些综合性的问题。那些能够发现问题、解决问题并迅速作出有效决</div> </li> <li><a href="/article/1572.htm" title="【Thrift一】Thrift编译安装" target="_blank">【Thrift一】Thrift编译安装</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/thrift/1.htm">thrift</a> <div>什么是Thrift The Apache Thrift software framework, for scalable cross-language services development, combines a software stack with a code generation engine to build services that work efficiently and s</div> </li> <li><a href="/article/1699.htm" title="【Avro三】Hadoop MapReduce读写Avro文件" target="_blank">【Avro三】Hadoop MapReduce读写Avro文件</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a> <div>Avro是Doug Cutting(此人绝对是神一般的存在）牵头开发的。 开发之初就是围绕着完善Hadoop生态系统的数据处理而开展的（使用Avro作为Hadoop MapReduce需要处理数据序列化和反序列化的场景）,因此Hadoop MapReduce集成Avro也就是自然而然的事情。 这个例子是一个简单的Hadoop MapReduce读取Avro格式的源文件进行计数统计，然后将计算结果</div> </li> <li><a href="/article/1826.htm" title="nginx定制500，502，503，504页面" target="_blank">nginx定制500，502，503，504页面</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/nginx%E3%80%80%E9%94%99%E8%AF%AF%E6%98%BE%E7%A4%BA/1.htm">nginx　错误显示</a> <div>server { listen 80; error_page 500/500.html; error_page 502/502.html; error_page 503/503.html; error_page 504/504.html; location /test {return502;}} 配置很简单，和配</div> </li> <li><a href="/article/1953.htm" title="java-1.二叉查找树转为双向链表" target="_blank">java-1.二叉查找树转为双向链表</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%9F%A5%E6%89%BE%E6%A0%91/1.htm">二叉查找树</a> <div> import java.util.ArrayList; import java.util.List; public class BSTreeToLinkedList { /* 把二元查找树转变成排序的双向链表 题目： 输入一棵二元查找树，将该二元查找树转换成一个排序的双向链表。 要求不能创建任何新的结点，只调整指针的指向。 10 / \ 6 14 / \ </div> </li> <li><a href="/article/2080.htm" title="Netty源码学习-HTTP-tunnel" target="_blank">Netty源码学习-HTTP-tunnel</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>Netty关于HTTP tunnel的说明： http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/socket/http/package-summary.html#package_description 这个说明有点太简略了 一个完整的例子在这里： https://github.com/bylijinnan</div> </li> <li><a href="/article/2207.htm" title="JSONUtil.serialize(map)和JSON.toJSONString(map)的区别" target="_blank">JSONUtil.serialize(map)和JSON.toJSONString(map)的区别</a> <span class="text-muted">coder_xpf</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a><a class="tag" taget="_blank" href="/search/val%28%29/1.htm">val()</a> <div> JSONUtil.serialize(map)和JSON.toJSONString(map)的区别   数据库查询出来的map有一个字段为空   通过System.out.println()输出 JSONUtil.serialize(map)： {"one":"1","two":"nul</div> </li> <li><a href="/article/2334.htm" title="Hibernate缓存总结" target="_blank">Hibernate缓存总结</a> <span class="text-muted">cuishikuan</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a><a class="tag" taget="_blank" href="/search/ssh/1.htm">ssh</a><a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a><a class="tag" taget="_blank" href="/search/hibernate%E7%BC%93%E5%AD%98/1.htm">hibernate缓存</a><a class="tag" taget="_blank" href="/search/%E4%B8%89%E5%A4%A7%E6%A1%86%E6%9E%B6/1.htm">三大框架</a> <div>一、为什么要用Hibernate缓存？ Hibernate是一个持久层框架，经常访问物理数据库。 为了降低应用程序对物理数据源访问的频次，从而提高应用程序的运行性能。 缓存内的数据是对物理数据源中的数据的复制，应用程序在运行时从缓存读写数据，在特定的时刻或事件会同步缓存和物理数据源的数据。   二、Hibernate缓存原理是怎样的？ Hibernate缓存包括两大类：Hib</div> </li> <li><a href="/article/2461.htm" title="CentOs6" target="_blank">CentOs6</a> <span class="text-muted">dalan_123</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>首先su - 切换到root下面1、首先要先安装GCC GCC-C++ Openssl等以来模块：yum -y install make gcc gcc-c++ kernel-devel m4 ncurses-devel openssl-devel2、再安装ncurses模块yum -y install ncurses-develyum install ncurses-devel3、下载Erang</div> </li> <li><a href="/article/2588.htm" title="10款用 jquery 实现滚动条至页面底端自动加载数据效果" target="_blank">10款用 jquery 实现滚动条至页面底端自动加载数据效果</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>  无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术，它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果，改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动翻页技术的鼻祖是微博的先驱：推特(twitter)，后来必应图片搜索、谷歌图片搜索、google reader、箱包批发网等纷纷抄袭了这一项技术，于是靠滚动浏览器滚动条</div> </li> <li><a href="/article/2715.htm" title="ImageButton去边框&Button或者ImageButton的背景透明" target="_blank">ImageButton去边框&Button或者ImageButton的背景透明</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/imagebutton/1.htm">imagebutton</a> <div>在ImageButton中载入图片后，很多人会觉得有图片周围的白边会影响到美观，其实解决这个问题有两种方法 一种方法是将ImageButton的背景改为所需要的图片。如：android:background="@drawable/XXX" 第二种方法就是将ImageButton背景改为透明，这个方法更常用 在XML里；    <ImageBut</div> </li> <li><a href="/article/2842.htm" title="JSP之c:foreach" target="_blank">JSP之c:foreach</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/forearch/1.htm">forearch</a> <div>原文出自：http://www.cnblogs.com/draem0507/archive/2012/09/24/2699745.html <c:forEach>标签用于通用数据循环，它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的最后一个项目 step 步长 否 1</div> </li> <li><a href="/article/2969.htm" title="Android实现主动连接蓝牙耳机" target="_blank">Android实现主动连接蓝牙耳机</a> <span class="text-muted">gqdy365</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在Android程序中可以实现自动扫描蓝牙、配对蓝牙、建立数据通道。蓝牙分不同类型，这篇文字只讨论如何与蓝牙耳机连接。 大致可以分三步： 一、扫描蓝牙设备： 1、注册并监听广播： BluetoothAdapter.ACTION_DISCOVERY_STARTED BluetoothDevice.ACTION_FOUND BluetoothAdapter.ACTION_DIS</div> </li> <li><a href="/article/3096.htm" title="android学习轨迹之四：org.json.JSONException: No value for" target="_blank">android学习轨迹之四：org.json.JSONException: No value for</a> <span class="text-muted">hyz301</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>org.json.JSONException: No value for items  在JSON解析中会遇到一种错误，很常见的错误   06-21 12:19:08.714 2098-2127/com.jikexueyuan.secret I/System.out﹕ Result:{"status":1,"page":1,&</div> </li> <li><a href="/article/3223.htm" title="干货分享：从零开始学编程 系列汇总" target="_blank">干货分享：从零开始学编程 系列汇总</a> <span class="text-muted">justjavac</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>程序员总爱重新发明轮子，于是做了要给轮子汇总。 从零开始写个编译器吧系列 (知乎专栏) 从零开始写一个简单的操作系统 (伯乐在线) 从零开始写JavaScript框架 (图灵社区) 从零开始写jQuery框架 (蓝色理想 ) 从零开始nodejs系列文章 (粉丝日志) 从零开始编写网络游戏 </div> </li> <li><a href="/article/3350.htm" title="jquery-autocomplete 使用手册" target="_blank">jquery-autocomplete 使用手册</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>jquery-autocomplete学习 一、用前必备 官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 当前版本：1.1 需要JQuery版本：1.2.6 二、使用 <script src="./jquery-1.3.2.js" type="text/ja</div> </li> <li><a href="/article/3477.htm" title="PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改" target="_blank">PLSQL-Developer或者Navicat等工具连接远程oracle数据库的详细配置以及数据库编码的修改</a> <span class="text-muted">超声波</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>　　在服务器上将Oracle安装好之后接下来要做的就是通过本地机器来远程连接服务器端的oracle数据库，常用的客户端连接工具就是PLSQL-Developer或者Navicat这些工具了。刚开始也是各种报错，什么TNS:no listener;TNS:lost connection;TNS:target hosts...花了一天的时间终于让PLSQL-Developer和Navicat等这些客户</div> </li> <li><a href="/article/3604.htm" title="数据仓库数据模型之：极限存储--历史拉链表" target="_blank">数据仓库数据模型之：极限存储--历史拉链表</a> <span class="text-muted">superlxw1234</span> <a class="tag" taget="_blank" href="/search/%E6%9E%81%E9%99%90%E5%AD%98%E5%82%A8/1.htm">极限存储</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%BB%93%E5%BA%93/1.htm">数据仓库</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%A8%A1%E5%9E%8B/1.htm">数据模型</a><a class="tag" taget="_blank" href="/search/%E6%8B%89%E9%93%BE%E5%8E%86%E5%8F%B2%E8%A1%A8/1.htm">拉链历史表</a> <div>在数据仓库的数据模型设计过程中，经常会遇到这样的需求： 1. 数据量比较大; 2. 表中的部分字段会被update,如用户的地址，产品的描述信息，订单的状态等等; 3. 需要查看某一个时间点或者时间段的历史快照信息，比如，查看某一个订单在历史某一个时间点的状态，    比如，查看某一个用户在过去某一段时间内，更新过几次等等; 4. 变化的比例和频率不是很大，比如，总共有10</div> </li> <li><a href="/article/3731.htm" title="10点睛Spring MVC4.1-全局异常处理" target="_blank">10点睛Spring MVC4.1-全局异常处理</a> <span class="text-muted">wiselyman</span> <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>10.1 全局异常处理 使用@ControllerAdvice注解来实现全局异常处理; 使用@ControllerAdvice的属性缩小处理范围 10.2 演示 演示控制器 package com.wisely.web; import org.springframework.stereotype.Controller; import org.spring</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>