karshey

【前端demo】动态赋值CSS

文章目录

- 效果
- 过程
- - html实现
  - oninput与onchange事件
  - 统一配置CSS
- 代码
- - HTML
  - CSS
  - JS

其他demo

效果

动态显示CSS样式，由:root统一配置。

效果预览：https://codepen.io/karshey/pen/BavLrwy

参考：

Dynamic CSS Variables(codepen.io)

漫谈document.documentElement与document.body - 简书 (jianshu.com)

过程

html实现

滑动滑块和滑动border-radius由实现，选择颜色由实现

对于radius，四个角一起变化的最大值是50%。

oninput与onchange事件

oninput 事件在用户输入时触发。
该事件在或 </code>元素的值发生改变时触发。 该事件类似于 onchange事件。不同之处：oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。 在这里，显然滑块的滑动是不能失去焦点才触发的（滑块滑动的时候box要同步移动），但颜色的选择可以（可以试一试，改变颜色是选择颜色之后再点击空白区域，方块颜色才会发生改变）。 <h3>统一配置CSS</h3> 我们的目的是实现动态改变box的样式。因此，可以将box的样式统一在root处配置： <pre><code class="prism language-css">/* 统一配置box的样式 */ :root { --color: #000; --location: 0; --radius: 0; } .box { height: 200px; width: 200px; background-color: var(--color); border-radius: var(--radius); /* 向右移动 */ transform: translateX(var(--location)); transition: width 2s; } </code></pre> 因此，如果想改变box的样式，只需改变<code>:root</code>中的值即可。 注意，这里root中的变量名（<code>color</code>，<code>location</code>，<code>radius</code>），正好对应方法<code>changeValue</code>的第一个参数。 <a href="http://img.e-com-net.com/image/info8/8ec2b070e5cf498e9298a10e2745babb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8ec2b070e5cf498e9298a10e2745babb.jpg" alt="【前端demo】动态赋值CSS_第3张图片" width="650" height="387" style="border:1px solid black;"></a> 因此可以通过将输入的type与<code>--</code>拼接直接形成CSS变量，然后直接赋值。 <pre><code class="prism language-javascript">root.style.setProperty(`--${type}`, value + add) </code></pre> 注意，颜色的赋值是不用加<code>%</code>的，而<code>border-radius</code>和<code>transform: translateX()</code>的数值要加<code>%</code>。 <pre><code class="prism language-javascript">const root = document.documentElement; function changeValue(type, value) { console.log(root) const add = (type != 'color' ? '%' : ''); root.style.setProperty(`--${type}`, value + add) } </code></pre> 这里的root是从html标签开始的整个文档树（DOM树）。我们使用<code>root.style.setProperty</code>将CSS变量直接赋值在文档树开头的style，就覆盖了原本CSS中的<code>:root</code>中的变量。 这样就可以动态赋值CSS。 <a href="http://img.e-com-net.com/image/info8/89dde48efe764a0484ede08ddafdee0d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/89dde48efe764a0484ede08ddafdee0d.jpg" alt="【前端demo】动态赋值CSS_第4张图片" width="650" height="260" style="border:1px solid black;"></a> <blockquote> 参考：漫谈document.documentElement与document.body - 简书 (jianshu.com) </blockquote> <h2>代码</h2> <h3>HTML</h3> <pre><code class="prism language-html"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic CSS Variables</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="location item"> <p>滑动移动方块位置</p> <input type="range" value="0" min="0" max="200" oninput="changeValue('location',this.value)"> </div> <div class="radius item"> <p>滑动改变方块弧度</p> <input type="range" value="0" min="0" max="50" oninput="changeValue('radius',this.value)"> </div> <div class="color item"> <p>选择改变方块颜色</p> <input type="color" value="#000000" onchange="changeValue('color',this.value)"> </div> <div class="box"></div> </div> </body> </html> <script src="index.js"></script> </code></pre> <h3>CSS</h3> <pre><code class="prism language-css">/* 统一配置box的样式 */ :root { --color: #000; --location: 0; --radius: 0; } .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } .item { display: flex; align-items: center; justify-content: center; } .item p { margin-right: 10px; } .box { height: 200px; width: 200px; background-color: var(--color); border-radius: var(--radius); /* 向右移动 */ transform: translateX(var(--location)); transition: width 2s; } </code></pre> <h3>JS</h3> <pre><code class="prism language-javascript">const root = document.documentElement; function changeValue(type, value) { console.log(root) const add = (type != 'color' ? '%' : ''); root.style.setProperty(`--${type}`, value + add) } </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1698801438794264576"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端demo,前端,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1773604712738783232.htm" title="android 自定义曲线图,Android自定义View——贝赛尔曲线" target="_blank">android 自定义曲线图,Android自定义View——贝赛尔曲线</a> weixin_39767513 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9B%B2%E7%BA%BF%E5%9B%BE/1.htm">自定义曲线图</a> <div>个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化</div> </li> <li><a href="/article/1773504513622212608.htm" title="大前端-postcss安装使用指南" target="_blank">大前端-postcss安装使用指南</a> 黑夜照亮前行的路 <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> pigerr杨 <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> 咕噜签名分发 <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> 所谓远行Misnearch <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/1773437340203679744.htm" title="2018-12-02" target="_blank">2018-12-02</a> 子分小 <div>姓名：张颖公司：菲尔德国际英语【反省总结第146天，始于20180709今天是20181202】【知～学习】六项精进大纲背诵3遍每天十个单词坚持第181天每天学习一篇英文文章第94天英语流利说课程第71天学习30分钟【行～实践】一、修身：（对自己个人）步行5000步二、齐家：（对家庭和家人）无三、建功：（对工作)完成与Arti活动课和两节Demo准备开班事宜｛积善｝：发愿从2018年7月9日起1年</div> </li> <li><a href="/article/1773382031552610304.htm" title="java实体中返回前端的double类型四舍五入（格式化）" target="_blank">java实体中返回前端的double类型四舍五入（格式化）</a> 婲落ヽ紅顏誶 <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> 在飞行-米龙 <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> 任家伟 <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> 王佳斌 <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> 一切顺势而行 <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/1773228716298665984.htm" title="OpenCV基础demo" target="_blank">OpenCV基础demo</a> 苍天饶过谁？ <a class="tag" taget="_blank" href="/search/OpenCV%E5%AD%A6%E4%B9%A0/1.htm">OpenCV学习</a><a class="tag" taget="_blank" href="/search/opencv/1.htm">opencv</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89/1.htm">计算机视觉</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a> <div>一、读取图像//图片路径QStringappPath=QCoreApplication::applicationDirPath();QStringimagePath=appPath+"/sun.png";//读取图像cv::Matimg=cv::imread(imagePath.toStdString());//IMREAD_GRAYSCALE灰度图IMREAD_UNCHANGED具有透明通道if</div> </li> <li><a href="/article/1772795036136701952.htm" title="程序员开发技术整理" target="_blank">程序员开发技术整理</a> laizhixue <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> 笔下无竹墨下有鱼 <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/1772673815097180160.htm" title="Websocket服务监听收发消息" target="_blank">Websocket服务监听收发消息</a> beiback <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> beiback <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> 计算机程序老哥 <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> 人生在勤，不索何获 <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> zhu_zhu_xia <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/1772425208259477504.htm" title="webpack快速基础" target="_blank">webpack快速基础</a> 风漫漫雨歇歇 <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</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>文章目录webpack快速基础1.概念1.1入口1.2输出(output)1.3loader1.4插件（plugin)2.建立项目，用于测试功能2.1安装webpack，2.2创建webpack配置文件,2.3配置package.json，运行项目3.配置mode开发环境4.配置entry编译入口5.配置output编译出口6.配置加载csswebpack快速基础1.概念webpack是现代Jav</div> </li> <li><a href="/article/1772399131164213248.htm" title="如何提出令人爱回答的好问题？" target="_blank">如何提出令人爱回答的好问题？</a> 兮若耶 <div>我们经常会遇到这样的问题，如我适合做什么？这个名词怎么解释？大部分人面对这样的问题时，要么答非所问，要么无从下手。现在的很多事物都是速成的，只是好的问题并没有那么容易被提出来。而提不好的问题，可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时，能听到很多的比喻和新观点，而这些是在书上和网上找不到的。这些新的有用的东西，都在前端被实践着，暂时来不及把知识系统</div> </li> <li><a href="/article/1772378002940821504.htm" title="谈谈对前端性能监控的理解和实践" target="_blank">谈谈对前端性能监控的理解和实践</a> Layla_c <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> qq_38812523 <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> 智伴科技 <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> 快乐非自愿 <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/1772201408989298688.htm" title="CSS color-mix() 函数" target="_blank">CSS color-mix() 函数</a> 蚂蚁上的大象 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B/1.htm">前端的那些事</a><a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>CSScolor-mix()函数是近年来CSS色彩模块新增的一项强大功能，允许开发者在样式表中直接混合两种或多种颜色。这一特性为设计师和开发者带来了更多创作空间，让网页的颜色设计变得更加生动和丰富。本文将带你了解color-mix()函数的使用方法及其在实际项目中的应用。什么是CSScolor-mix()函数？color-mix()是一个即将推出的CSS颜色函数，它能够根据指定的颜色模型（如RGB</div> </li> <li><a href="/article/1772138979433447424.htm" title="DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动" target="_blank">DIV + CSS 布局：盒子内容超出宽度时，不换行，以滚动条形式水平滑动</a> 01空间 <a class="tag" taget="_blank" href="/search/%E5%B8%B8%E8%A7%81%E5%9C%BA%E6%99%AF%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">常见场景解决方案</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> <div>滚动条水平滚动展示溢出内容htmlcss（less）思路html11112222333344445555666677778888css（less）.outer{background-color:#39a9ed;overflow-x:auto;&::-webkit-scrollbar{display:none;}white-space:nowrap;.item{display:inline-bloc</div> </li> <li><a href="/article/1772083971480420352.htm" title="接口测试之测试原则、测试用例、测试流程......" target="_blank">接口测试之测试原则、测试用例、测试流程......</a> 程序员老鹰 <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/1772015996245180416.htm" title="【前端】CommonJS和ES Module" target="_blank">【前端】CommonJS和ES Module</a> Lucky小维 <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> <div>区别语法差异：CommonJS：使用require()导入模块，使用module.exports或exports导出模块。ESModule：使用import导入模块，使用export导出模块。编译时vs运行时：CommonJS是在运行时加载模块，模块代码是动态执行的。ESModule是在编译时静态解析模块依赖关系，以便更好地进行优化和静态分析。异步加载：CommonJS不支持异步加载模块，只能同步</div> </li> <li><a href="/article/1771980751349284864.htm" title="基于python+vue高校毕业生离校管理系统flask-django-php-nodejs" target="_blank">基于python+vue高校毕业生离校管理系统flask-django-php-nodejs</a> QQ511008285 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>课题主要采用Uni-weixin、django架构技术，前端以小程序页面呈现给用户，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能，从而实现智能化的管理方式，提高工作效率。关键字：高校毕业生离校管理系统；django框架；MySQL数据库语言：</div> </li> <li><a href="/article/122.htm" title="java数字签名三种方式" target="_blank">java数字签名三种方式</a> 知了ing <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>以下3钟数字签名都是基于jdk7的 1，RSA String password="test"; // 1.初始化密钥 KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA"); keyPairGenerator.initialize(51</div> </li> <li><a href="/article/249.htm" title="Hibernate学习笔记" target="_blank">Hibernate学习笔记</a> caoyong <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>1>、Hibernate是数据访问层框架，是一个ORM(Object Relation Mapping)框架，作者为:Gavin King 2>、搭建Hibernate的开发环境 a>、添加jar包: aa>、hibernatte开发包中/lib/required/所</div> </li> <li><a href="/article/376.htm" title="设计模式之装饰器模式Decorator（结构型）" target="_blank">设计模式之装饰器模式Decorator（结构型）</a> 漂泊一剑客 <a class="tag" taget="_blank" href="/search/Decorator/1.htm">Decorator</a> <div>1. 概述若你从事过面向对象开发，实现给一个类或对象增加行为，使用继承机制，这是所有面向对象语言的一个基本特性。如果已经存在的一个类缺少某些方法，或者须要给方法添加更多的功能（魅力），你也许会仅仅继承这个类来产生一个新类—这建立在额外的代码上。 </div> </li> <li><a href="/article/503.htm" title="读取磁盘文件txt，并输入String" target="_blank">读取磁盘文件txt，并输入String</a> 一炮送你回车库 <a class="tag" taget="_blank" href="/search/String/1.htm">String</a> <div>public static void main(String[] args) throws IOException { String fileContent = readFileContent("d:/aaa.txt"); System.out.println(fileContent); </div> </li> <li><a href="/article/630.htm" title="js三级联动下拉框" target="_blank">js三级联动下拉框</a> 3213213333332132 <a class="tag" taget="_blank" href="/search/%E4%B8%89%E7%BA%A7%E8%81%94%E5%8A%A8/1.htm">三级联动</a> <div> //三级联动省/直辖市<select id="province"></select> 市/省直辖<select id="city"></select> 县/区 <select id="area"></select> </div> </li> <li><a href="/article/757.htm" title="erlang之parse_transform编译选项的应用" target="_blank">erlang之parse_transform编译选项的应用</a> 616050468 <a class="tag" taget="_blank" href="/search/parse_transform/1.htm">parse_transform</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">游戏服务器</a><a class="tag" taget="_blank" href="/search/%E5%B1%9E%E6%80%A7%E5%90%8C%E6%AD%A5/1.htm">属性同步</a><a class="tag" taget="_blank" href="/search/abstract_code/1.htm">abstract_code</a> <div> 最近使用erlang重构了游戏服务器的所有代码，之前看过C++/lua写的服务器引擎代码，引擎实现了玩家属性自动同步给前端和增量更新玩家数据到数据库的功能，这也是现在很多游戏服务器的优化方向，在引擎层面去解决数据同步和数据持久化，数据发生变化了业务层不需要关心怎么去同步给前端。由于游戏过程中玩家每个业务中玩家数据更改的量其实是很少</div> </li> <li><a href="/article/884.htm" title="JAVA JSON的解析" target="_blank">JAVA JSON的解析</a> darkranger <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> // { // “Total”：“条数”， // Code: 1, // // “PaymentItems”:[ // { // “PaymentItemID”:”支款单ID”, // “PaymentCode”:”支款单编号”, // “PaymentTime”:”支款日期”, // ”ContractNo”:”合同号”， // </div> </li> <li><a href="/article/1011.htm" title="POJ-1273-Drainage Ditches" target="_blank">POJ-1273-Drainage Ditches</a> aijuans <a class="tag" taget="_blank" href="/search/ACM_POJ/1.htm">ACM_POJ</a> <div>POJ-1273-Drainage Ditches http://poj.org/problem?id=1273 基本的最大流，按LRJ的白书写的 #include<iostream> #include<cstring> #include<queue> using namespace std; #define INF 0x7fffffff int ma</div> </li> <li><a href="/article/1138.htm" title="工作流Activiti5表的命名及含义" target="_blank">工作流Activiti5表的命名及含义</a> atongyeye <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a><a class="tag" taget="_blank" href="/search/Activiti/1.htm">Activiti</a> <div>activiti5 - http://activiti.org/designer/update在线插件安装 activiti5一共23张表 Activiti的表都以ACT_开头。第二部分是表示表的用途的两个字母标识。用途也和服务的API对应。 ACT_RE_*: 'RE'表示repository。这个前缀的表包含了流程定义和流程静态资源（图片，规则，等等）。 A</div> </li> <li><a href="/article/1265.htm" title="android的广播机制和广播的简单使用" target="_blank">android的广播机制和广播的简单使用</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%B9%BF%E6%92%AD%E6%9C%BA%E5%88%B6/1.htm">广播机制</a><a class="tag" taget="_blank" href="/search/%E5%B9%BF%E6%92%AD%E7%9A%84%E6%B3%A8%E5%86%8C/1.htm">广播的注册</a> <div> Android广播机制简介在Android中，有一些操作完成以后，会发送广播，比如说发出一条短信，或打出一个电话，如果某个程序接收了这个广播，就会做相应的处理。这个广播跟我们传统意义中的电台广播有些相似之处。之所以叫做广播，就是因为它只负责“说”而不管你“听不听”，也就是不管你接收方如何处理。另外，广播可以被不只一个应用程序所接收，当然也可能不被任何应</div> </li> <li><a href="/article/1392.htm" title="Spring事务传播行为详解" target="_blank">Spring事务传播行为详解</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1%E4%BC%A0%E6%92%AD%E8%A1%8C%E4%B8%BA/1.htm">事务传播行为</a> <div> 在service类前加上@Transactional，声明这个service所有方法需要事务管理。每一个业务方法开始时都会打开一个事务。 Spring默认情况下会对运行期例外(RunTimeException)进行事务回滚。这</div> </li> <li><a href="/article/1519.htm" title="eidtplus operate" target="_blank">eidtplus operate</a> 征客丶 <a class="tag" taget="_blank" href="/search/eidtplus/1.htm">eidtplus</a> <div>开启列模式: Alt+C 鼠标选择 OR Alt+鼠标左键拖动列模式替换或复制内容(多行): 右键-->格式-->填充所选内容-->选择相应操作 OR Ctrl+Shift+V(复制多行数据,必须行数一致) -------------------------------------------------------</div> </li> <li><a href="/article/1646.htm" title="【Kafka一】Kafka入门" target="_blank">【Kafka一】Kafka入门</a> bit1129 <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>这篇文章来自Spark集成Kafka(http://bit1129.iteye.com/blog/2174765)，这里把它单独取出来，作为Kafka的入门吧下载Kafka http://mirror.bit.edu.cn/apache/kafka/0.8.1.1/kafka_2.10-0.8.1.1.tgz 2.10表示Scala的版本，而0.8.1.1表示Kafka</div> </li> <li><a href="/article/1773.htm" title="Spring 事务实现机制" target="_blank">Spring 事务实现机制</a> BlueSkator <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86/1.htm">代理</a><a class="tag" taget="_blank" href="/search/%E4%BA%8B%E5%8A%A1/1.htm">事务</a> <div>Spring是以代理的方式实现对事务的管理。我们在Action中所使用的Service对象，其实是代理对象的实例，并不是我们所写的Service对象实例。既然是两个不同的对象，那为什么我们在Action中可以象使用Service对象一样的使用代理对象呢？为了说明问题，假设有个Service类叫AService，它的Spring事务代理类为AProxyService，AService实现了一个接口 </div> </li> <li><a href="/article/1900.htm" title="bootstrap源码学习与示例：bootstrap-dropdown（转帖）" target="_blank">bootstrap源码学习与示例：bootstrap-dropdown（转帖）</a> BreakingBad <a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/dropdown/1.htm">dropdown</a> <div>bootstrap-dropdown组件是个烂东西，我读后的整体感觉。一个下拉开菜单的设计： <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> </div> </li> <li><a href="/article/2027.htm" title="读《研磨设计模式》-代码笔记-中介者模式-Mediator" target="_blank">读《研磨设计模式》-代码笔记-中介者模式-Mediator</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /* * 中介者模式（Mediator）：用一个中介对象来封装一系列的对象交互。 * 中介者使各对象不需要显式地相互引用，从而使其耦合松散，而且可以独立地改变它们之间的交互。 * * 在我看来，Mediator模式是把多个对象（</div> </li> <li><a href="/article/2154.htm" title="常用代码记录" target="_blank">常用代码记录</a> chenjunt3 <a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a><a class="tag" taget="_blank" href="/search/J%23/1.htm">J#</a> <div> 1、单据设置某行或某字段不能修改 //i是行号,"cash"是字段名称 getBillCardPanelWrapper().getBillCardPanel().getBillModel().setCellEditable(i, "cash", false); //取得单据表体所有项用以上语句做循环就能设置整行了 getBillC</div> </li> <li><a href="/article/2281.htm" title="搜索引擎与工作流引擎" target="_blank">搜索引擎与工作流引擎</a> comsci <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a> <div> 最近在公司做和搜索有关的工作，(只是简单的应用开源工具集成到自己的产品中)工作流系统的进一步设计暂时放在一边了，偶然看到谷歌的研究员吴军写的数学之美系列中的搜索引擎与图论这篇文章中的介绍，我发现这样一个关系(仅仅是猜想) -----搜索引擎和流程引擎的基础--都是图论，至少像在我在JWFD中引擎算法中用到的是自定义的广度优先</div> </li> <li><a href="/article/2408.htm" title="oracle Health Monitor" target="_blank">oracle Health Monitor</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/Health+Monitor/1.htm">Health Monitor</a> <div>About Health Monitor Beginning with Release 11g, Oracle Database includes a framework called Health Monitor for running diagnostic checks on the database. About Health Monitor Checks Health M</div> </li> <li><a href="/article/2535.htm" title="JSON字符串转换为对象" target="_blank">JSON字符串转换为对象</a> dieslrae <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div> 作为前言,首先是要吐槽一下公司的脑残编译部署方式,web和core分开部署本来没什么问题,但是这丫居然不把json的包作为基础包而作为web的包,导致了core端不能使用,而且我们的core是可以当web来用的(不要在意这些细节),所以在core中处理json串就是个问题.没办法,跟编译那帮人也扯不清楚,只有自己写json的解析了. </div> </li> <li><a href="/article/2662.htm" title="C语言学习八结构体，综合应用，学生管理系统" target="_blank">C语言学习八结构体，综合应用，学生管理系统</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>实现功能的代码： # include <stdio.h> # include <malloc.h> struct Student { int age; float score; char name[100]; }; int main(void) { int len; struct Student * pArr; int i,</div> </li> <li><a href="/article/2789.htm" title="vagrant学习笔记" target="_blank">vagrant学习笔记</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/vagrant/1.htm">vagrant</a> <div>想了解多主机是如何定义和使用的, 所以又学习了一遍vagrant 1. vagrant virtualbox 下载安装 https://www.vagrantup.com/downloads.html https://www.virtualbox.org/wiki/Downloads 查看安装在命令行输入vagrant 2.</div> </li> <li><a href="/article/2916.htm" title="14.性能优化-优化-软件配置优化" target="_blank">14.性能优化-优化-软件配置优化</a> frank1234 <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E9%85%8D%E7%BD%AE/1.htm">软件配置</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>1.Tomcat线程池修改tomcat的server.xml文件： <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" maxThreads="1200" m</div> </li> <li><a href="/article/3043.htm" title="一个不错的shell 脚本教程入门级" target="_blank">一个不错的shell 脚本教程入门级</a> HarborChung <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>一个不错的shell 脚本教程入门级建立一个脚本　　Linux中有好多中不同的shell，但是通常我们使用bash (bourne again shell) 进行shell编程，因为bash是免费的并且很容易使用。所以在本文中笔者所提供的脚本都是使用bash（但是在大多数情况下，这些脚本同样可以在 bash的大姐，bourne shell中运行）。　　如同其他语言一样</div> </li> <li><a href="/article/3170.htm" title="Spring4新特性——核心容器的其他改进" target="_blank">Spring4新特性——核心容器的其他改进</a> jinnianshilongnian <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E4%BB%A3%E7%90%86/1.htm">动态代理</a><a class="tag" taget="_blank" href="/search/spring4/1.htm">spring4</a><a class="tag" taget="_blank" href="/search/%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5/1.htm">依赖注入</a> <div>Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新</div> </li> <li><a href="/article/3297.htm" title="Linux设置tomcat开机启动" target="_blank">Linux设置tomcat开机启动</a> liuxingguome <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%9C%BA%E8%87%AA%E5%90%AF%E5%8A%A8/1.htm">开机自启动</a> <div>执行命令sudo gedit /etc/init.d/tomcat6 然后把以下英文部分复制过去。（注意第一句#!/bin/sh如果不写，就不是一个shell文件。然后将对应的jdk和tomcat换成你自己的目录就行了。 #!/bin/bash # # /etc/rc.d/init.d/tomcat # init script for tomcat precesses</div> </li> <li><a href="/article/3424.htm" title="第13章 Ajax进阶（下）" target="_blank">第13章 Ajax进阶（下）</a> onestopweb <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3551.htm" title="Troubleshooting Crystal Reports off BW" target="_blank">Troubleshooting Crystal Reports off BW</a> blueoxygen <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a> <div>http://wiki.sdn.sap.com/wiki/display/BOBJ/Troubleshooting+Crystal+Reports+off+BW#TroubleshootingCrystalReportsoffBW-TracingBOE Quite useful, especially this part: SAP BW connectivity For t</div> </li> <li><a href="/article/3678.htm" title="Java开发熟手该当心的11个错误" target="_blank">Java开发熟手该当心的11个错误</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>#1、不在属性文件或XML文件中外化配置属性。比如，没有把批处理使用的线程数设置成可在属性文件中配置。你的批处理程序无论在DEV环境中，还是UAT（用户验收测试）环境中，都可以顺畅无阻地运行，但是一旦部署在PROD 上，把它作为多线程程序处理更大的数据集时，就会抛出IOException，原因可能是JDBC驱动版本不同，也可能是#2中讨论的问题。如果线程数目可以在属性文件中配置，那么使它成为</div> </li> <li><a href="/article/3805.htm" title="正则表达式大全" target="_blank">正则表达式大全</a> yang852220741 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>今天向大家分享正则表达式大全，它可以大提高你的工作效率正则表达式也可以被当作是一门语言，当你学习一门新的编程语言的时候，他们是一个小的子语言。初看时觉得它没有任何的意义，但是很多时候，你不得不阅读一些教程，或文章来理解这些简单的描述模式。一、校验数字的表达式数字：^[0-9]*$ n位的数字：^\d{n}$ 至少n位的数字：^\d{n,}$ m-n位的数字：^\d{m,n}$</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>