contentEditable,window.getSelection详解---可编辑div,容器,设置/获取光标位置,光标处插入内容及光标的操作

这周碰到一个东西,contentEditable ,它是用来指定一个元素是否是可编辑的,这也是富文本编辑器实现的底层支持,网上关于这部分东西的资料比较少或者不全,所以我来整理下关于这个属性,和可编辑区域的一些操作吧,比如获取光标位置,设置光标,往可编辑区域光标处插入内容等等

HTML中的contentEditable的属性可以打开某些元素的可编辑状态.也许你没用过contentEditable属性.甚至从未听说过.contentEditable的作用相当神奇.可以让div或整个网页,以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea,使用contentEditable属性后,可以在div,table,p,span,body,等等很多元素中输入内容.

设置一个容器为可编辑区域:设置contentEditable属性


	

grsd

rsdgsdg

contentEditable,window.getSelection详解---可编辑div,容器,设置/获取光标位置,光标处插入内容及光标的操作_第1张图片

设置placeholder:
这个不像表单一样,给属性加上placeholder属性指定值就可以了,还需要配合特殊的样式:empty做设置

	<style type="text/css">
			.content:empty::before {
    
				content: attr(placeholder);
				font-size: 14px;
				color: #CCC;
				line-height: 21px;
				padding-top: 20px;
			}
			.content {
    
				border: 1px solid black;
			}
		style>
	<body>
		<div contentEditable class="content" placeholder="请输入不少于150字">div>
	body>

在这里插入图片描述

回车时,在标记生成上的不同点

因为各个浏览器在标记生成上的不同,因此跨浏览器使用 contenteditable 一直以来都是痛点,例如一些看起来十分简单的事情,如: 当你按下Enter/Return键在可编辑区域中创建一个新的文本行时,不同主流浏览器对此有不同处理(Firefox 插入
、IE/Opera将使用

、 Chrome/Safari 将使用

)幸运的是在现代浏览器中,这些不同都趋于一致了。截止到Firefox 60,火狐开始使用
元素来包裹新生成的文本行,以与Chrome, modern Opera, Edge, and Safari.的行为趋于一致
在这里插入图片描述

改变回车时插入的标签:
如果你想使用不同的方式创建新的段落,上面所有浏览器都支持document.execCommand方法,该方法提供的 defaultParagraphSeparator 命令能够让你以不同的方式创建新的段落例如, 使用

元素:

document.execCommand("defaultParagraphSeparator", false, "p");

现在在编辑器中按回车就变成p标签了
在这里插入图片描述


document.execCommand的强大:

上面只是document.execCommand的一个命令演示

当一个HTML文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。
大多数命令影响document的 selection(粗体,斜体等),当其他命令插入新元素(添加链接)或影响整行(缩进)。当使用contentEditable时,调用 execCommand() 将影响当前活动的可编辑元素

命令很多,这里就不列举出来,具体可以参考官方文档document.execCommand命令大全

基于document.execCommand的这些命令我们可以做一个小型的富文本编辑器:


<html>
	<head>
		<title>Rich Text Editortitle>
		<script type="text/javascript">
			var oDoc, sDefTxt;

			function initDoc() {
    
				oDoc = document.getElementById("textBox");
				sDefTxt = oDoc.innerHTML;
				if(document.compForm.switchMode.checked) {
    
					setDocMode(true);
				}
			}

			function formatDoc(sCmd, sValue) {
    
				if(validateMode()) {
    
					document.execCommand(sCmd, false, sValue);
					oDoc.focus();
				}
			}

			function validateMode() {
    
				if(!document.compForm.switchMode.checked) {
    
					return true;
				}
				alert("Uncheck \"Show HTML\".");
				oDoc.focus();
				return false;
			}

			function setDocMode(bToSource) {
    
				var oContent;
				if(bToSource) {
    
					oContent = document.createTextNode(oDoc.innerHTML);
					oDoc.innerHTML = "";
					var oPre = document.createElement("pre");
					oDoc.contentEditable = false;
					oPre.id = "sourceText";
					oPre.contentEditable = true;
					oPre.appendChild(oContent);
					oDoc.appendChild(oPre);
					document.execCommand("defaultParagraphSeparator", false, "div");
				} else {
    
					if(document.all) {
    
						oDoc.innerHTML = oDoc.innerText;
					} else {
    
						oContent = document.createRange();
						oContent.selectNodeContents(oDoc.firstChild);
						oDoc.innerHTML = oContent.toString();
					}
					oDoc.contentEditable = true;
				}
				oDoc.focus();
			}

			function printDoc() {
    
				if(!validateMode()) {
    
					return;
				}
				var oPrntWin = window.open("", "_blank", "width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
				oPrntWin.document.open();
				oPrntWin.document.write("Print<\/title><\/head><body οnlοad=\"print();\">"</span> <span class="token operator">+</span> oDoc<span class="token punctuation">.</span>innerHTML <span class="token operator">+</span> <span class="token string">"<\/body><\/html>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
				oPrntWin<span class="token punctuation">.</span>document<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token style language-css">
			<span class="token selector">.intLink</span> <span class="token punctuation">{
    </span>
				<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			
			<span class="token selector">img.intLink</span> <span class="token punctuation">{
    </span>
				<span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			
			<span class="token selector">#toolBar1 select</span> <span class="token punctuation">{
    </span>
				<span class="token property">font-size</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			
			<span class="token selector">#textBox</span> <span class="token punctuation">{
    </span>
				<span class="token property">width</span><span class="token punctuation">:</span> 540px<span class="token punctuation">;</span>
				<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
				<span class="token property">border</span><span class="token punctuation">:</span> 1px #000000 solid<span class="token punctuation">;</span>
				<span class="token property">padding</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
				<span class="token property">overflow</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			
			<span class="token selector">#textBox #sourceText</span> <span class="token punctuation">{
    </span>
				<span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
				<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
				<span class="token property">min-width</span><span class="token punctuation">:</span> 498px<span class="token punctuation">;</span>
				<span class="token property">min-height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
			
			<span class="token selector">#editMode label</span> <span class="token punctuation">{
    </span>
				<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>

	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>initDoc();<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>compForm<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sample.php<span class="token punctuation">"</span></span> <span class="token attr-name">onsubmit</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myDoc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toolBar1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">onchange</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>formatDoc(<span class="token punctuation">'</span>formatblock<span class="token punctuation">'</span>,this[this.selectedIndex].value);this.selectedIndex=0;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> </span></code></pre> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1722529325351251968"></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">你可能感兴趣的:(前端,js,contenteditable,getSelection,前端,js,contenteditable,可编辑div,p,容器)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835512920797179904.htm"
                           title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a>
                        <span class="text-muted">软件技术NINI</span>
<a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</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>
                        <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件,它用于显示当前页面的路径,帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中,如果你已经安装了ElementUI,就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例:安装ElementUI(如果你还没有安装的话):你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div>
                    </li>
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835506236842405888.htm"
                           title="C#中使用split分割字符串" target="_blank">C#中使用split分割字符串</a>
                        <span class="text-muted">互联网打工人no1</span>
<a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a>
                        <div>1、用字符串分隔:usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果:aaabbbc</div>
                    </li>
                    <li><a href="/article/1835504723210366976.htm"
                           title="第四天旅游线路预览——从换乘中心到喀纳斯湖" target="_blank">第四天旅游线路预览——从换乘中心到喀纳斯湖</a>
                        <span class="text-muted">陟彼高冈yu</span>
<a class="tag" taget="_blank" href="/search/%E5%9F%BA%E4%BA%8EGoogle/1.htm">基于Google</a><a class="tag" taget="_blank" href="/search/earth/1.htm">earth</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/%E7%9A%84%E6%97%85%E6%B8%B8%E8%A7%84%E5%88%92%E5%92%8C%E9%A2%84%E8%A7%88/1.htm">的旅游规划和预览</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a>
                        <div>第四天:从贾登峪到喀纳斯风景区入口,晚上住宿贾登峪;换乘中心有4路车,喀纳斯①号车,去喀纳斯湖,路程时长约5分钟;将上面的的行程安排进行动态展示,具体步骤见”Googleearthstudio进行动态轨迹显示制作过程“、“Googleearthstudio入门教程”和“Googleearthstudio进阶教程“相关内容,得到行程如下所示:Day4-2-480p</div>
                    </li>
                    <li><a href="/article/1835502578511736832.htm"
                           title="下载github patch到本地" target="_blank">下载github patch到本地</a>
                        <span class="text-muted">小米人er</span>
<a class="tag" taget="_blank" href="/search/%E6%88%91%E7%9A%84%E5%8D%9A%E5%AE%A2/1.htm">我的博客</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/patch/1.htm">patch</a>
                        <div>以下是几种从GitHub上下载以.patch结尾的补丁文件的方法:通过浏览器直接下载打开包含该.patch文件的GitHub仓库。在仓库的文件列表中找到对应的.patch文件。点击该文件,浏览器会显示文件的内容,在页面的右上角通常会有一个“Raw”按钮,点击它可以获取原始文件内容。然后在浏览器中使用快捷键(如Ctrl+S或者Command+S)将原始文件保存到本地,选择保存的文件名并确保后缀为.p</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835498547785592832.htm"
                           title="【华为OD机试真题2023B卷 JAVA&JS】We Are A Team" target="_blank">【华为OD机试真题2023B卷 JAVA&JS】We Are A Team</a>
                        <span class="text-muted">若博豆</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>华为OD2023(B卷)机试题库全覆盖,刷题指南点这里WeAreATeam时间限制:1秒|内存限制:32768K|语言限制:不限题目描述:总共有n个人在机房,每个人有一个标号(1<=标号<=n),他们分成了多个团队,需要你根据收到的m条消息判定指定的两个人是否在一个团队中,具体的:1、消息构成为:abc,整数a、b分别代</div>
                    </li>
                    <li><a href="/article/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中,事件(Events)是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更,还能够让外部系统(如前端应用)监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时,该事件会被记录在区块链的交易收据中。具体而言,事件</div>
                    </li>
                    <li><a href="/article/1835497665337585664.htm"
                           title="使用LLaVa和Ollama实现多模态RAG示例" target="_blank">使用LLaVa和Ollama实现多模态RAG示例</a>
                        <span class="text-muted">llzwxh888</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>本文将详细介绍如何使用LLaVa和Ollama实现多模态RAG(检索增强生成),通过提取图像中的结构化数据、生成图像字幕等功能来展示这一技术的强大之处。安装环境首先,您需要安装以下依赖包:!pipinstallllama-index-multi-modal-llms-ollama!pipinstallllama-index-readers-file!pipinstallunstructured!p</div>
                    </li>
                    <li><a href="/article/1835497074049773568.htm"
                           title="数组去重" target="_blank">数组去重</a>
                        <span class="text-muted">好奇的猫猫猫</span>

                        <div>整理自js中基础数据结构数组去重问题思考?如何去除数组中重复的项例如数组:[1,3,4,3,5]我们在做去重的时候,一开始想到的肯定是,逐个比较,外面一层循环,内层后一个与前一个一比较,如果是久不将当前这一项放进新的数组,挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低,代码量还多,思考?有没有更好的方法这时候不禁一想当然有了!!!hashtable啊,通过对象的hash办法</div>
                    </li>
                    <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/1835495770502033408.htm"
                           title="Day17笔记-高阶函数" target="_blank">Day17笔记-高阶函数</a>
                        <span class="text-muted">~在杰难逃~</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/pycharm/1.htm">pycharm</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a>
                        <div>高阶函数【重点掌握】函数的本质:函数是一个变量,函数名是一个变量名,一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数,B函数调用完成之后,会得到一个结果,则B函数被称为高阶函数常用的高阶函数:map(),reduce(),filter(),sorted()1.map()map(func,iterable),返回值是一个iterator【容器,迭代器】func:函数iterab</div>
                    </li>
                    <li><a href="/article/1835494258262503424.htm"
                           title="【JS】执行时长(100分) |思路参考+代码解析(C++)" target="_blank">【JS】执行时长(100分) |思路参考+代码解析(C++)</a>
                        <span class="text-muted">l939035548</span>
<a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a>
                        <div>题目为了充分发挥GPU算力,需要尽可能多的将任务交给GPU执行,现在有一个任务数组,数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务,一次执行耗时1秒,在保证GPU不空闲情况下,最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数,取值范围[1,10000]第二个参数为任务数组长度,取值范围[1,10000]第三个参数为任务数组,数字范围</div>
                    </li>
                    <li><a href="/article/1835493267907637248.htm"
                           title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a>
                        <span class="text-muted">dmengmeng</span>

                        <div>需要的loaderfile-loader(让我们可以引入这些资源文件)url-loader(其实是file-loader的二次封装)img-loader(处理图片所需要的)在没有使用任何处理图片的loader之前,比如说css中用到了背景图片,那么最后打包会报错的,因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以,打开网页能准确看到图片。{test:/\.(p</div>
                    </li>
                    <li><a href="/article/1835492740536823808.htm"
                           title="node.js学习" target="_blank">node.js学习</a>
                        <span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                        <div>node.js学习实操及笔记温故node.js,node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础,三大框架vuereactangular离不开node.jsnode.js是什么官网:node.js是一个开源的、跨平台的运行JavaScript的运行</div>
                    </li>
                    <li><a href="/article/1835490839837634560.htm"
                           title="自我意识" target="_blank">自我意识</a>
                        <span class="text-muted">徐立华</span>

                        <div>----读帕克.帕尔默《教学勇气》(P18----19)5.铸造我们的学科帕克.帕尔默说学科知识对我们的自身认同和外部世界有启发意义。学科会铸造我们。“在我们与学科的命题概念和学科的生活框架相遇之前,自我意识知识处于潜伏状态,通过回想学科是怎样唤醒自我意识,我们就可以找回教学心灵。”《教学勇气》(P18)我们的自我意识像冰山表面下无限延伸的冰层,常常处于潜伏状态。但是在我们对所教授的学科进行深入思</div>
                    </li>
                    <li><a href="/article/1835489081480540160.htm"
                           title="C++ | Leetcode C++题解之第409题最长回文串" target="_blank">C++ | Leetcode C++题解之第409题最长回文串</a>
                        <span class="text-muted">Ddddddd_158</span>
<a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/Leetcode/1.htm">Leetcode</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a>
                        <div>题目:题解:classSolution{public:intlongestPalindrome(strings){unordered_mapcount;intans=0;for(charc:s)++count[c];for(autop:count){intv=p.second;ans+=v/2*2;if(v%2==1andans%2==0)++ans;}returnans;}};</div>
                    </li>
                    <li><a href="/article/1835485429059645440.htm"
                           title="docker" target="_blank">docker</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/eureka/1.htm">eureka</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a>
                        <div>Docker容器的文件系统是隔离的,但是可以通过挂载卷(Volumes)或绑定挂载(BindMounts)将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径,可以使用以下方法:查看容器配置:使用dockerinspect命令可以查看容器的详细配置信息,包括挂载的卷。例如:bashdockerinspect在输出的JSON格式中,查找"Mounts"部分,这里会列出所有的挂载信息</div>
                    </li>
                    <li><a href="/article/1835480639814594560.htm"
                           title="在Ubuntu中编译含有JSON的文件出现报错" target="_blank">在Ubuntu中编译含有JSON的文件出现报错</a>
                        <span class="text-muted">芝麻糊76</span>
<a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/kill_bug/1.htm">kill_bug</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
                        <div>在ubuntu中进行JSON相关学习的时候,我发现了一些小问题,决定与大家进行分享,减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"</div>
                    </li>
                    <li><a href="/article/1835478496810463232.htm"
                           title="Xinference如何注册自定义模型" target="_blank">Xinference如何注册自定义模型</a>
                        <span class="text-muted">玩人工智能的辣条哥</span>
<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/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/Xinference/1.htm">Xinference</a>
                        <div>环境:Xinference问题描述:Xinference如何注册自定义模型解决方案:1.写个model_config.json,内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model</div>
                    </li>
                    <li><a href="/article/1835466269948735488.htm"
                           title="推荐算法_隐语义-梯度下降" target="_blank">推荐算法_隐语义-梯度下降</a>
                        <span class="text-muted">_feivirus_</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%92%8C%E6%95%B0%E5%AD%A6/1.htm">机器学习和数学</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E8%8D%90%E7%AE%97%E6%B3%95/1.htm">推荐算法</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E8%AF%AD%E4%B9%89/1.htm">隐语义</a>
                        <div>importnumpyasnp1.模型实现"""inputrate_matrix:M行N列的评分矩阵,值为P*Q.P:初始化用户特征矩阵M*K.Q:初始化物品特征矩阵K*N.latent_feature_cnt:隐特征的向量个数max_iteration:最大迭代次数alpha:步长lamda:正则化系数output分解之后的P和Q"""defLFM_grad_desc(rate_matrix,l</div>
                    </li>
                    <li><a href="/article/1835457442260021248.htm"
                           title="ArrayList 源码解析" target="_blank">ArrayList 源码解析</a>
                        <span class="text-muted">程序猿进阶</span>
<a class="tag" taget="_blank" href="/search/Java%E5%9F%BA%E7%A1%80/1.htm">Java基础</a><a class="tag" taget="_blank" href="/search/ArrayList/1.htm">ArrayList</a><a class="tag" taget="_blank" href="/search/List/1.htm">List</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a><a class="tag" taget="_blank" href="/search/idea/1.htm">idea</a>
                        <div>ArrayList是Java集合框架中的一个动态数组实现,提供了可变大小的数组功能。它继承自AbstractList并实现了List接口,是顺序容器,即元素存放的数据与放进去的顺序相同,允许放入null元素,底层通过数组实现。除该类未实现同步外,其余跟Vector大致相同。每个ArrayList都有一个容量capacity,表示底层数组的实际大小,容器内存储元素的个数不能多于当前容量。当向容器中添</div>
                    </li>
                    <li><a href="/article/1835455048277127168.htm"
                           title="Python神器!WEB自动化测试集成工具 DrissionPage" target="_blank">Python神器!WEB自动化测试集成工具 DrissionPage</a>
                        <span class="text-muted">亚丁号</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>一、前言用requests做数据采集面对要登录的网站时,要分析数据包、JS源码,构造复杂的请求,往往还要应付验证码、JS混淆、签名参数等反爬手段,门槛较高。若数据是由JS计算生成的,还须重现计算过程,体验不好,开发效率不高。使用浏览器,可以很大程度上绕过这些坑,但浏览器运行效率不高。因此,这个库设计初衷,是将它们合而为一,能够在不同须要时切换相应模式,并提供一种人性化的使用方法,提高开发和运行效率</div>
                    </li>
                    <li><a href="/article/1835450890077696000.htm"
                           title="python怎么将png转为tif_png转tif" target="_blank">python怎么将png转为tif_png转tif</a>
                        <span class="text-muted">weixin_39977276</span>

                        <div>发国外的文章要求图片是tif,cmyk色彩空间的。大小尺寸还有要求。比如网上大神多,找到了一段代码,感谢!https://www.jianshu.com/p/ec2af4311f56https://github.com/KevinZc007/image2Tifimportjava.awt.image.BufferedImage;importjava.io.File;importjava.io.Fi</div>
                    </li>
                    <li><a href="/article/1835448238103162880.htm"
                           title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
                        <span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/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>这段时间抽空给女朋友搭建一个个人博客,想着记录一下建站的过程,就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站,或者用cms系统,三四个小时就可以做出一个前后台都有的网站,而且想做成啥样也都行。但是就是要从新做,自己做的意义不一样,更何况,俺就是专门干这个的,嘿嘿嘿要做一个网站,而且从零开始,首先呢就是技术选型了,经过一番思量决定选择-SpringBoot做后端,前端使用Vue做一</div>
                    </li>
                    <li><a href="/article/1835447985601867776.htm"
                           title="Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net" target="_blank">Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net</a>
                        <span class="text-muted">佛一脚</span>
<a class="tag" taget="_blank" href="/search/error/1.htm">error</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>背景每天都能遇到奇怪的问题,做个记录,以便有缘人能得到帮助!换了一台电脑开发nextjs程序。需要连接mongodb数据,对数据进行增删改查。上一台电脑好好的程序,新电脑死活连不上mongodb数据库。同一套代码,没任何修改,搞得我怀疑人生了,打开浏览器进入mongodb官网毫无问题,也能进入线上系统查看数据,网络应该是没问题。于是我尝试了一下手机热点,这次代码能正常跑起来,连接数据库了!!!是不</div>
                    </li>
                    <li><a href="/article/1835444959478640640.htm"
                           title="2021 CCF 非专业级别软件能力认证第一轮(CSP-J1)入门级C++语言试题 (第三大题:完善程序 代码)" target="_blank">2021 CCF 非专业级别软件能力认证第一轮(CSP-J1)入门级C++语言试题 (第三大题:完善程序 代码)</a>
                        <span class="text-muted">mmz1207</span>
<a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/csp/1.htm">csp</a>
                        <div>最近有一段时间没更新了,在准备CSP考试,请大家见谅。(1)有n个人围成一个圈,依次标号0到n-1。从0号开始,依次0,1,0,1...交替报数,报到一的人离开,直至圈中剩最后一个人。求最后剩下的人的编号。#includeusingnamespacestd;intf[1000010];intmain(){intn;cin>>n;inti=0,cnt=0,p=0;while(cnt#includeu</div>
                    </li>
                    <li><a href="/article/1835443569528238080.htm"
                           title="Vue( ElementUI入门、vue-cli安装)" target="_blank">Vue( ElementUI入门、vue-cli安装)</a>
                        <span class="text-muted">m0_l5z</span>
<a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>一.ElementUI入门目录:1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n</div>
                    </li>
                    <li><a href="/article/1835437775344726016.htm"
                           title="博客网站制作教程" target="_blank">博客网站制作教程</a>
                        <span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                        <div>首先就是技术框架:后端:Java+SpringBoot数据库:MySQL前端:Vue.js数据库连接:JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
                    </li>
                                <li><a href="/article/66.htm"
                                       title="项目中 枚举与注解的结合使用" target="_blank">项目中 枚举与注解的结合使用</a>
                                    <span class="text-muted">飞翔的马甲</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/annotation/1.htm">annotation</a>
                                    <div>前言:版本兼容,一直是迭代开发头疼的事,最近新版本加上了支持新题型,如果新创建一份问卷包含了新题型,那旧版本客户端就不支持,如果新创建的问卷不包含新题型,那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 
 
一、枚举 
1.在创建枚举类的时候,该类已继承java.lang.Enum类,所以自定义枚举类无法继承别的类,但可以实现接口。 
 
   </div>
                                </li>
                                <li><a href="/article/193.htm"
                                       title="【Scala十七】Scala核心十一:下划线_的用法" target="_blank">【Scala十七】Scala核心十一:下划线_的用法</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
                                    <div>下划线_在Scala中广泛应用,_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方,本文将不断完善_的使用场景以及所表达的含义 
  1. 在高阶函数中使用 
scala> val list = List(-3,8,7,9)
list: List[Int] = List(-3, 8, 7, 9)

scala> list.filter(_ > 7)
r</div>
                                </li>
                                <li><a href="/article/320.htm"
                                       title="web缓存基础:术语、http报头和缓存策略" target="_blank">web缓存基础:术语、http报头和缓存策略</a>
                                    <span class="text-muted">dalan_123</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a>
                                    <div>对于很多人来说,去访问某一个站点,若是该站点能够提供智能化的内容缓存来提高用户体验,那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储,是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念,具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容,并谈论下</div>
                                </li>
                                <li><a href="/article/447.htm"
                                       title="crontab 问题" target="_blank">crontab 问题</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/crontab/1.htm">crontab</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a>
                                    <div>  
一:  0481-079   Reached   a   symbol   that   is   not   expected.   
   
背景:  
*/5   *   *   *   *  /usr/IBMIHS/rsync.sh  </div>
                                </li>
                                <li><a href="/article/574.htm"
                                       title="让tomcat支持2级域名共享session" target="_blank">让tomcat支持2级域名共享session</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/session/1.htm">session</a>
                                    <div>tomcat默认情况下是不支持2级域名共享session的,所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况,但是只需修改几处配置就可以了。 
打开tomcat下conf下context.xml文件 
找到Context标签,修改为如下内容 
如果你的域名是www.test.com 
<Context sessionCookiePath="/path&q</div>
                                </li>
                                <li><a href="/article/701.htm"
                                       title="web报表工具FineReport常用函数的用法总结(数学和三角函数)" target="_blank">web报表工具FineReport常用函数的用法总结(数学和三角函数)</a>
                                    <span class="text-muted">老A不折腾</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a>
                                    <div>  
ABS 
ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 
Number:需要求出绝对值的任意实数。 
示例: 
ABS(-1.5)等于1.5。 
ABS(0)等于0。 
ABS(2.5)等于2.5。 
  
ACOS 
ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度,返回角度以弧度形式表示。 
Number:需要返回角</div>
                                </li>
                                <li><a href="/article/828.htm"
                                       title="linux 启动java进程 sh文件" target="_blank">linux 启动java进程 sh文件</a>
                                    <span class="text-muted">墙头上一根草</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/jar/1.htm">jar</a>
                                    <div>#!/bin/bash
#初始化服务器的进程PId变量
user_pid=0;
robot_pid=0;
loadlort_pid=0;
gateway_pid=0;

#########
#检查相关服务器是否启动成功
#说明:
#使用JDK自带的JPS命令及grep命令组合,准确查找pid
#jps 加 l 参数,表示显示java的完整包路径
#使用awk,分割出pid </div>
                                </li>
                                <li><a href="/article/955.htm"
                                       title="我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory" target="_blank">我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/Spring+3+%E7%B3%BB%E5%88%97/1.htm">Spring 3 系列</a>
                                    <div>如何使用ApplicationContext替换BeanFactory? 
 
package onlyfun.caterpillar.device;
import org.springframework.beans.factory.BeanFactory;
import org.springframework.beans.factory.xml.XmlBeanFactory;
import</div>
                                </li>
                                <li><a href="/article/1082.htm"
                                       title="Linux 内存使用方法详细解析" target="_blank">Linux 内存使用方法详细解析</a>
                                    <span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a><a class="tag" taget="_blank" href="/search/Linux%E5%86%85%E5%AD%98%E8%A7%A3%E6%9E%90/1.htm">Linux内存解析</a>
                                    <div>来源 http://blog.jobbole.com/45748/ 
 
 

我是一名程序员,那么我在这里以一个程序员的角度来讲解Linux内存的使用。

一提到内存管理,我们头脑中闪出的两个概念,就是虚拟内存,与物理内存。这两个概念主要来自于linux内核的支持。

Linux在内存管理上份为两级,一级是线性区,类似于00c73000-00c88000,对应于虚拟内存,它实际上不占用</div>
                                </li>
                                <li><a href="/article/1209.htm"
                                       title="数据库的单表查询常用命令及使用方法(-)" target="_blank">数据库的单表查询常用命令及使用方法(-)</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/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E8%A1%A8%E6%9F%A5%E8%AF%A2/1.htm">单表查询</a>
                                    <div>  
  
创建数据库; 
      
--建表
create table bloguser(username varchar2(20),userage number(10),usersex char(2));

 
      创建bloguser表,里面有三个字段 
  
  
&nbs</div>
                                </li>
                                <li><a href="/article/1336.htm"
                                       title="多线程基础知识" target="_blank">多线程基础知识</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a>
                                    <div>一.进程和线程 
进程就是一个在内存中独立运行的程序,有自己的地址空间。如正在运行的写字板程序就是一个进程。 
“多任务”:指操作系统能同时运行多个进程(程序)。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 
线程:是进程内部单一的一个顺序控制流。 
线程和进程 
a.       每个进程都有独立的</div>
                                </li>
                                <li><a href="/article/1463.htm"
                                       title="fastjson简单使用实例" target="_blank">fastjson简单使用实例</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/fastjson/1.htm">fastjson</a>
                                    <div>一.简介 
        阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法,把JSON Parse的性能提升到极致,是目前Java语言中最快的JSON库;包括“序列化”和“反序列化”两部分,它具备如下特征:     </div>
                                </li>
                                <li><a href="/article/1590.htm"
                                       title="【RPC框架Burlap】Spring集成Burlap" target="_blank">【RPC框架Burlap】Spring集成Burlap</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>Burlap和Hessian同属于codehaus的RPC调用框架,但是Burlap已经几年不更新,所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时,不应该考虑Burlap了。 
这篇文章还是记录下Burlap的用法吧,主要是复制粘贴了Hessian与Spring集成一文,【RPC框架Hessian四】Hessian与Spring集成 
 </div>
                                </li>
                                <li><a href="/article/1717.htm"
                                       title="【Mahout一】基于Mahout 命令参数含义" target="_blank">【Mahout一】基于Mahout 命令参数含义</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Mahout/1.htm">Mahout</a>
                                    <div>1. mahout seqdirectory 
  
    $ mahout seqdirectory 
        --input (-i) input               Path to job input directory(原始文本文件).
        --output (-o) output             The directory pathna</div>
                                </li>
                                <li><a href="/article/1844.htm"
                                       title="linux使用flock文件锁解决脚本重复执行问题" target="_blank">linux使用flock文件锁解决脚本重复执行问题</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/linux+lock%E3%80%80%E9%87%8D%E5%A4%8D%E6%89%A7%E8%A1%8C/1.htm">linux lock 重复执行</a>
                                    <div>linux的crontab命令,可以定时执行操作,最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题,如果设定了任务每分钟执行一次,但有可能一分钟内任务并没有执行完成,这时系统会再执行任务。导致两个相同的任务在执行。 
例如:       
<?         
// 
test
.php      </div>
                                </li>
                                <li><a href="/article/1971.htm"
                                       title="java-74-数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字" target="_blank">java-74-数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>

public class OcuppyMoreThanHalf {

	/**
	 * Q74 数组中有一个数字出现的次数超过了数组长度的一半,找出这个数字
	 * two solutions:
	 * 1.O(n)
	 * see <beauty of coding>--每次删除两个不同的数字,不改变数组的特性
	 * 2.O(nlogn)
	 * 排序。中间</div>
                                </li>
                                <li><a href="/article/2098.htm"
                                       title="linux 系统相关命令" target="_blank">linux 系统相关命令</a>
                                    <span class="text-muted">candiio</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>系统参数 
cat /proc/cpuinfo  cpu相关参数 
cat /proc/meminfo 内存相关参数 
cat /proc/loadavg 负载情况 
性能参数 
1)top 
M:按内存使用排序 
P:按CPU占用排序 
1:显示各CPU的使用情况 
k:kill进程 
o:更多排序规则 
回车:刷新数据 
2)ulimit 
ulimit -a:显示本用户的系统限制参</div>
                                </li>
                                <li><a href="/article/2225.htm"
                                       title="[经营与资产]保持独立性和稳定性对于软件开发的重要意义" target="_blank">[经营与资产]保持独立性和稳定性对于软件开发的重要意义</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91/1.htm">软件开发</a>
                                    <div> 
 
     一个软件的架构从诞生到成熟,中间要经过很多次的修正和改造 
 
      如果在这个过程中,外界的其它行业的资本不断的介入这种软件架构的升级过程中 
    
      那么软件开发者原有的设计思想和开发路线</div>
                                </li>
                                <li><a href="/article/2352.htm"
                                       title="在CentOS5.5上编译OpenJDK6" target="_blank">在CentOS5.5上编译OpenJDK6</a>
                                    <span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/OpenJDK/1.htm">OpenJDK</a>
                                    <div>几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6,将编译过程和遇到的问题作一简要记录,备查。  
0. OpenJDK介绍 
OpenJDK是Sun(现Oracle)公司发布的基于GPL许可的Java平台的实现。其优点: 
1、它的核心代码与同时期Sun(-> Oracle)的产品版基本上是一样的,血统纯正,不用担心性能问题,也基本上没什么兼容性问题;(代码上最主要的差异是</div>
                                </li>
                                <li><a href="/article/2479.htm"
                                       title="java乱码问题" target="_blank">java乱码问题</a>
                                    <span class="text-muted">dashuaifu</span>
<a class="tag" taget="_blank" href="/search/java%E4%B9%B1%E7%A0%81%E9%97%AE%E9%A2%98/1.htm">java乱码问题</a><a class="tag" taget="_blank" href="/search/js%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">js中文乱码</a>
                                    <div>swfupload上传文件参数值为中文传递到后台接收中文乱码               在js中用setPostParams({"tag" : encodeURI( document.getElementByIdx_x("filetag").value,"utf-8")}); 
然后在servlet中String t</div>
                                </li>
                                <li><a href="/article/2606.htm"
                                       title="cygwin很多命令显示command not found的解决办法" target="_blank">cygwin很多命令显示command not found的解决办法</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/cygwin/1.htm">cygwin</a>
                                    <div>cygwin很多命令显示command not found的解决办法 
  
修改cygwin.BAT文件如下 
@echo off 
D: 
set CYGWIN=tty notitle glob 
set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us</div>
                                </li>
                                <li><a href="/article/2733.htm"
                                       title="[介绍]从 Yii 1.1 升级" target="_blank">[介绍]从 Yii 1.1 升级</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/yii2/1.htm">yii2</a>
                                    <div>2.0 版框架是完全重写的,在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单,通过本指南你将会了解两个版本间主要的不同之处。 
如果你之前没有用过 Yii 1.1,可以跳过本章,直接从"入门篇"开始读起。 
请注意,Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发</div>
                                </li>
                                <li><a href="/article/2860.htm"
                                       title="Linux SSH免登录配置总结" target="_blank">Linux SSH免登录配置总结</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/ssh-keygen/1.htm">ssh-keygen</a><a class="tag" taget="_blank" href="/search/Linux+SSH%E5%85%8D%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81/1.htm">Linux SSH免登录认证</a><a class="tag" taget="_blank" href="/search/Linux+SSH%E4%BA%92%E4%BF%A1/1.htm">Linux SSH互信</a>
                                    <div>转载请出自出处:http://eksliang.iteye.com/blog/2187265 一、原理 
     我们使用ssh-keygen在ServerA上生成私钥跟公钥,将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。 
     生成公钥与私钥有两种加密方式,第一种是</div>
                                </li>
                                <li><a href="/article/2987.htm"
                                       title="手势滑动销毁Activity" target="_blank">手势滑动销毁Activity</a>
                                    <span class="text-muted">gundumw100</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>老是效仿ios,做android的真悲催! 
有需求:需要手势滑动销毁一个Activity 
怎么办尼?自己写? 
不用~,网上先问一下百度。 
结果: 
http://blog.csdn.net/xiaanming/article/details/20934541 
 
 
首先将你需要的Activity继承SwipeBackActivity,它会在你的布局根目录新增一层SwipeBackLay</div>
                                </li>
                                <li><a href="/article/3114.htm"
                                       title="JavaScript变换表格边框颜色" target="_blank">JavaScript变换表格边框颜色</a>
                                    <span class="text-muted">ini</span>
<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/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                                    <div>效果查看:http://hovertree.com/texiao/js/2.htm代码如下,保存到HTML文件也可以查看效果: 
<html>
<head>
<meta charset="utf-8">
<title>表格边框变换颜色代码-何问起</title>
</head>
<body&</div>
                                </li>
                                <li><a href="/article/3241.htm"
                                       title="Kafka Rest : Confluent" target="_blank">Kafka Rest : Confluent</a>
                                    <span class="text-muted">kane_xie</span>
<a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/confluent/1.htm">confluent</a>
                                    <div>最近拿到一个kafka rest的需求,但kafka暂时还没有提供rest api(应该是有在开发中,毕竟rest这么火),上网搜了一下,找到一个Confluent Platform,本文简单介绍一下安装。 
这里插一句,给大家推荐一个九尾搜索,原名叫谷粉SOSO,不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了,出来之后用度娘搜技术问题,那匹配度简直感人。 
 
 环境声明:Ubu</div>
                                </li>
                                <li><a href="/article/3368.htm"
                                       title="Calender不是单例" target="_blank">Calender不是单例</a>
                                    <span class="text-muted">men4661273</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/Calender/1.htm">Calender</a>
                                    <div>         在我们使用Calender的时候,使用过Calendar.getInstance()来获取一个日期类的对象,这种方式跟单例的获取方式一样,那么它到底是不是单例呢,如果是单例的话,一个对象修改内容之后,另外一个线程中的数据不久乱套了吗?从试验以及源码中可以得出,Calendar不是单例。 
测试: 
  Calendar c1 = </div>
                                </li>
                                <li><a href="/article/3495.htm"
                                       title="线程内存和主内存之间联系" target="_blank">线程内存和主内存之间联系</a>
                                    <span class="text-muted">qifeifei</span>
<a class="tag" taget="_blank" href="/search/java+thread/1.htm">java thread</a>
                                    <div>1, java多线程共享主内存中变量的时候,一共会经过几个阶段,    
  lock:将主内存中的变量锁定,为一个线程所独占。 
  unclock:将lock加的锁定解除,此时其它的线程可以有机会访问此变量。 
  read:将主内存中的变量值读到工作内存当中。 
  load:将read读取的值保存到工作内存中的变量副本中。 
  </div>
                                </li>
                                <li><a href="/article/3622.htm"
                                       title="schedule和scheduleAtFixedRate" target="_blank">schedule和scheduleAtFixedRate</a>
                                    <span class="text-muted">tangqi609567707</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/schedule/1.htm">schedule</a>
                                    <div>原文地址:http://blog.csdn.net/weidan1121/article/details/527307 
import java.util.Timer;import java.util.TimerTask;import java.util.Date; 
/** * @author vincent */public class TimerTest { 
 </div>
                                </li>
                                <li><a href="/article/3749.htm"
                                       title="erlang 部署" target="_blank">erlang 部署</a>
                                    <span class="text-muted">wudixiaotie</span>
<a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a>
                                    <div>1.如果在启动节点的时候报这个错 : 
{"init terminating in do_boot",{'cannot load',elf_format,get_files}} 
则需要在reltool.config中加入 
{app, hipe, [{incl_cond, exclude}]}, 
  
  
2.当generate时,遇到: 
ERROR</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>