...据ID获取 2.根据标签名获取 3.通过 HTML5 新增的方法获取(注意兼容) 4.获取特殊元素(body,html) 三.事件基础 1.事件概述 2.执行事件的步骤 3.常见的鼠标事件四.操作元素 1.操作元素内容(改变元素内容) 2. 操作常见元素属性 3.操作表单元素属性 4.操作元素样式属性 5.自定义属性的操作 6.H5自定义属性五.节点操作 1.为什么要学习节点操作 2.节点概述 3.节点层级一.DOM简介 1.什么是DOM 文档对象模型(简称DOM) 是W3C组织推荐的处理可扩展标记语言的标准编程接口 W3C已经定义来一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构样式。 2.DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示文档树(Dom树)：以html为根节点，形成的一颗倒立的树状结构，我们成为DOM树；这个树上所有的东西都叫节点，节点有很多类，比如文本节点，元素节点等等，这些节点如果我们通过DOM方法去获取或者其他的操作去使用就叫做DOM对象，所有节点都是DOM对象二.获取元素的方法 1.获取页面中的元素可以使用以下几种方式根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取 1.根据ID获取使用getElementByld()方法可以获取带有ID的元素对象 getElementByld()，是document下的一个方法代码演示 <body><div id="time">2020-11-26</div><script>// 1.因为我们文档页面从上往下加载，所以先得有标签所以我们的script写在标签下面// 2. document文档 get 获得 element 元素 by 通过驼峰命名法// 3.参数 id是大小写敏感的字符串// 4.返回的是一个对象var timer = document.getElementById('time');console.log(timer);// 5.console.dir 打印我们返回得的元素对象更好的查看里面的属性和方法console.dir(timer);</script></body> 2.根据标签名获取使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合语法如下 document.getElementsByTagName('标签名') 注意： 1.因为得到的是一个对象的集合，使用我们想要操作里面的元素就需要遍历得到元素对象是动态的代码演示 <body><ul><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li></ul><ul id="nav"><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li></ul><script>// 1.返回的是获取过来元素对象的集合以伪数组的形式存储的var lis = document.getElementsByTagName('li')console.log(lis);// 2.如果想要依次打印里面的元素对象我们可以采取遍历方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// 3.这里可以是可以获取标签的.getElementsByTagName()可以得到这个元素里面的某些标签var nav1 = document.getElementById('nav') //这个获取nav元素var navli = nav.getElementsByTagName('li') //这里是获取nav 里面的li标签要先获取 nav元素在获取里面的liconsole.log(navli);</script></body> 3.通过 HTML5 新增的方法获取(注意兼容) 1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合 2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象 3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合注意：querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’nav’); 代码演示 <body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象切记里面的选择器需要加符号 .box navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);</script> 4.获取特殊元素(body,html) 获取body元素 - doucumnet.body // 返回body元素对象获取html元素 . document.documentElement // 返回html元素对象代码演示 <body><script>// 获取bdoy元素var bodyEle = document.bodyconsole.log(bodyEle); //返回body元素// 获取html元素var htmlEle = document.documentElementconsole.log(htmlEle); //返回html元素</script></body> 三.事件基础 1.事件概述 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发— 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。代码演示 <body><button id="btn">浩哥</button><script>// 点击一个按钮，弹出一个对话框// 1.事件是有三部分组成的 1.事件源 2.事件类型 3.事件处理程序也称为事件三要素// (1).事件源事件被触发的对象 var but = document.getElementById('btn')// (2).事件类型如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是？？？？// (3).事件处理程序通过一个函数赋值的方式完成因为函数就是实现某种功能的but.onclick = function() {alert('浩哥爱编程')}</script></body> 2.执行事件的步骤 1. 获取事件源DOM对象(意思是你要获取那个元素) 2. 注册事件(绑定事件意思是通过什么方式来处理比如是鼠标经过还是鼠标点击等等行为) 3. 添加事件处理程序(采取函数赋值形式意思是你想做啥) 代码演示 <body><div>123</div><script>// 事件执行步骤点击div 控制台输出我被选中了// 1.获取事件源var div = document.querySelector('div')// 2.绑定事件注册事件// div.onclick// 3.添加事件处理程序div.onclick = function() {console.log('我被点击了');}</script></body> 3.常见的鼠标事件 onmouseenter鼠标移入事件 onmouseleave鼠标移出事件四.操作元素 JS的DOM操作可以改变网页内容、结构和样式，利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性 1.操作元素内容(改变元素内容) elemeny.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 elemernt.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 elemernt.Content可以获取隐藏元素的文本，包含换行和空白代码演示 <title>Document</title><style>div,p {height: 30px;width: 300px;line-height: 30px;text-align: center;color: fff;background-color: pink;}</style></head><body><button>显示当前系统时间</button><div>某个时间</div><p>123</p><script>// 当我们点击了按钮，div里面的文字会发生变化// 1.获取元素注意这里的按钮和div都要获取到因为点击按钮div里面要发生变化所以都要获取var but = document.querySelector('button');var div = document.querySelector('div');// 2.绑定事件// but.onclick// 3.程序处理but.onclick = function() {// 改变元素内容 element(元素).innerTextdiv.innerText = '2020-11-27'}// 4.我们元素可以不用添加事件，就可以直接显示日期var p = document.querySelector('p');p.innerText = '2020-11-27';</script> elemeny.innerText和elemeny.innerHTML的区别代码演示 <body><div></div><p></p><ul><li> 文字</li><li>123</li></ul><script>// innertText 和 innertHTML 的区别// 1. innerText 不识别html标签非标准去除空格和换行var div = document.querySelector('div');div.innerText = '<strong>今天是:</strong> 2020';// 2.innertHTML 识别html标签 W3C标准保留空格和换行的推荐尽量使用这个因为这个是标准var p = document.querySelector('p')p.innerHTML = '<strong>今天是:</strong> 2020';// 3.这俩个属性是可读写的意思是除了改变内容还可以元素读取里面的内容的var ul = document.querySelector('ul')console.log(ul.innerText);console.log(ul.innerHTML);// .4innerHtml innerText 之间的区别：设置内容的时候，如果内容当中包含标签字符串 innerHtml会有标签的特性，也就是说标签会在页面上生效如果内容当中包含标签字符串 innerText会把标签原样展示在页面上，不会让标签生效读取内容的时候，如果标签内部还有其它标签，innerHtml会把标签内部带着其它的标签全部输出如果标签内部还有其它标签，innerText只会输出所有标签里面的内容或者文本，不会输出标签如果标签内部没有其它标签，他们两个一致；都是读取文本内容，innerHtml会带空白和换行</script></body> 2. 操作常见元素属性 innerText、innerHTML 改变元素内容 src、href id、alt、title 代码演示 <body><button id="ldh">刘德华</button><button id="zxy">张学友</button><br><img src="./images/ldh.jpg" alt="" width="200px" height="200px" title="刘德华" id="img"><script>// 修改属性 src// 我们可以操作元素得方法来修改元素得属性就是元素的是什么属性在重新给值就可以完成相应的赋值操作了// 1.获取元素var ldh = document.getElementById('ldh')var zxy = document.getElementById('zxy')var img = document.getElementById('img')// 2.注册事件程序处理zxy.onclick = function() {// 当我们点击了图片的时候图片路径就发生变化这里的.表示的得意思 img对象下的src属性img.src = './images/zxy.jpg';// 当我们变换图片得同时里面得title也要跟着变所以前面要加上img.img.title = '张学友';}ldh.onclick = function() {img.src = './images/ldh.jpg';img.title = '刘德华';}</script> 3.操作表单元素属性利用DOM可以操作如下表单元素的属性 type、value、checked、selected、disabled 代码演示： <body><button>按钮</button><input type="text" value="输入内容"><script>// 我想把value里面的输入内容改变为被点击了// 1.获取元素var but = document.querySelector('button')var input = document.querySelector('input')// 2.注册事件处理程序but.onclick = function() {// input.innerHTML = '被点击了'; 这个是普通盒子比如 div 标签里面的内容// 表单里面的值文字内容是通过value来修改的input.value = '被点击了'// 如果需要某个表单被禁用不能再点击了使用 disabled 我们想要这个按钮 button禁用// but.disabled = true// 还有一种写法// this指向的是事件函数的调用者谁调用就指向谁这里调用者是btnthis.disabled = true}</script></body> 4.操作元素样式属性我们可以通过 JS 修改元素的大小、颜色、位置等样式。 1.element.style 行内样式操作注意： JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor JS 修改 style 样式操作，产生的是行内样式，所以行内式比内嵌式高代码演示 <style>div {width: 200px;height: 200px;background-color: red;}</style></head><body><div></div><script>// 要求点击div变成粉色 height变为250px// 1.获取元素var div = document.querySelector('div');// 2.注册事件处理程序div.onclick = function() {// div.style里面的属性采取的是驼峰命名法// this等于div this调用者谁调用谁执行this.style.backgroundColor = 'pink'this.style.height = '250px'}</script> 2.element.className 类名样式操作注意：如果样式修改较多，可以采取操作类名方式更改元素样式。 class因为是个保留字，因此使用className来操作元素类名属性 className 会直接更改元素的类名，会覆盖原先的类名。代码演示 <style>div {width: 100px;height: 100px;background-color: pink;}.change {background-color: purple;color: fff;font-size: 25px;margin-top: 100px;}</style></head><body><div class="first">文本</div><script>// 1. 使用 element.style 获得修改元素样式如果样式比较少或者功能简单的情况下使用var test = document.querySelector('div');test.onclick = function() {// this.style.backgroundColor = 'purple';// this.style.color = 'fff';// this.style.fontSize = '25px';// this.style.marginTop = '100px';// 让我们当前元素的类名改为了 change// 2. 我们可以通过修改元素的className更改元素的样式适合于样式较多或者功能复杂的情况如果想继续添加样式即在change添加即可// 3. 如果想要保留原先的类名，我们可以这么做多类名选择器// this.className = 'change';this.className = 'first change';}</script> 5.自定义属性的操作 js给我们规定了可以自己添加属性在操作元素属性的时候，元素.语法只能操作元素天生具有的属性,如果是自定义的属性，通过.语法是无法操作的只能通过getAttribute和setAttribute去操作，他俩是通用的方法，无论元素天生的还是自定义的都可以可以操作 1.获取属性值 element.属性获取属性值。 element.getAttribute(‘属性’)；区别: element.属性获取内置属性值(元素本身自带的属性如果是自定义属性不能被获取) element.getAttribute(‘属性’)；主要获得自定义的属性 (标准) 我们自定义的属性 2.设置属性值 element.属性 = ‘值’ 设置内置属性值 element.setAttribute(‘属性’，‘值’) 区别： element.属性设置内置属性值 element.setAttribute(‘属性’)；主要设置自定义的属性(标准) 3.移除属性 element.removeAttribute(‘属性’)；代码演示 <body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 1.获取元素的属性值// (1) element.属性console.log(div.id);// (2) element.getAttribute('属性') get获取得到 attribute属性的意思我们自己添加的属性称之为自定义属性console.log(div.getAttribute('id')); //democonsole.log(div.getAttribute('index')); // 1// 2.设置元素的属性值// (1) element.属性 = '值' div.id = 'test'div.className = 'navs'// (2) element.setAttribute('属性','值')div.setAttribute('index', 2);div.setAttribute('class', 'footer') //这里就是class 不是className 比较特殊// 3.移除属性 removeAttribute(属性)div.removeAttribute('index');</script></body> 只要是自定义属性最好都是用element.setAttribute(‘属性’，‘值’)来设置如果是自带属性用element.属性来设置 6.H5自定义属性自定义属性的目的：第一、是为了保存属性第二、并且使用数据。有一些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’) 获取的但是有些自定义属性很容易引起歧义，不容易判断是元素还是自定义属性 H5给我们新增了自定义属性： 1.设置H5自定义属性 H5规定自定义属性data-开头做为属性名并且赋值比如<div data-index:“1”> 或者使用JS设置element.setAttribute(‘deta-index’,2) 2.获取H5自定义属性兼容性获取 element.getAttribute(‘data-index’) 推荐开发中使用这个 H5新增element.dataset.index 或者element.datase[‘index’] ie 11以上才支持代码演示 <body><div getTime="10" data-index="20" data-name-list="40"></div><script>// 获取元素var div = document.querySelector('div');console.log(div.geTime); //undefined getTime是自定义属性不能直接通过元素的属性来获取而是用自定义属性来获取的getAttribute(‘属性’)console.log(div.getAttribute('getTime')); //10// H5添加自定义属性的写法以data-开头div.setAttribute('data-time', 30)// 1.兼容性获取H5自定义属性console.log(div.getAttribute('data-time')); // 30// 2.H5新增的获取自定义属性的方法它只能获取data-开头的// dataset 是一个集合的意思存放了所有以data开头的自定义属性如果你想取其中的某一个只需要在dataset.的后面加上自定义属性名即可console.log(div.dataset);console.log(div.dataset.time); // 30// 还有一种方法dataset['属性']console.log(div.dataset['time']); // 30// 如果自定义属性里面有多个-链接的单词我们获取的时候采取驼峰命名法不用要-了console.log(div.dataset.nameList); // 40console.log(div.dataset['nameList']); // 40</script></body> 五.节点操作 1.为什么要学习节点操作获取元素通常使用俩种方式（1）利用DOM提供的方法获取元素但是逻辑性不强繁琐（2）利用节点层级关系获取元素如利用父子，兄弟关系获取元素逻辑性强，但是兼容性不怎么好 2.节点概述网页中的所有内容都是节点(标签、属性、文本、注释等等) ，在DOM中，节点使用node表示。HTML DOM 树中的所有节点均可通过javascript进行访问，所有HTML元素(节点) 均可被修改，也可以创建或删除一般地，节点至少拥有nade Type(节点类型)、nodeName(节点名称)和nodeValue(节点值) 这三个基本属性元素节点 nodeType 为 1 属性节点 node Name为 2 文本节点 nodeValue为 3 (文本节点包含文字、空格、换行等等) 实际开发中，节点操作主要操作的是元素节点 3.节点层级利用DOM树可以把节点划分为不同得层级关系，常见得是父子兄层级关系 1.父级节点 1.node.parentNode parenNode属性可以返回某节点得父节点，注意是最近的父节点哟！！！如果指定的节点没有父节点就返回null 代码演示 <body><div class="box"><div class="box1"></div></div><script>var box1 = document.querySelector('.box1')// 得到的是离元素最近的父节点(亲爸爸) 得不到就返回得是nullconsole.log(box1.parentNode); // parentNode 翻译过来就是父亲的节点</script></body> 2.子级节点操作 1.parentNode.children（非标准） parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(重点记住这个就好，以后重点使用) 虽然children是一个非标准，但是得到了各个浏览器的支持，我们大胆使用即可！！！代码演示 <body><ul><li>1</li><li>1</li><li>1</li><li>1</li></ul><script>// DOM 提供的方法（APL）获取这样获取比较麻烦var ul = document.querySelector('ul')var lis = ul.querySelectorAll('li')// children子节点获取 ul里面所有的小li 放心使用没有限制兼容性实际开发中经常使用的console.log(ul.children);</script> 如何返回子节点的第一个和最后一个？ 2.parentNode.firstElementChild firstElementChild返回第一个子元素节点，找不到则返回unll 3.parentNode.lastElementChild lastElementChild返回最后一个子元素节点，找不到则返回null 注意：这俩个方法有兼容性问题，IE9以上才支持谨慎使用但是我们有解决方案如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1] 代码演示 <body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var ul = document.querySelector('ul')// 1.firstElementChild 返回第一个子元素节点 ie9 以上才支持注意兼容console.log(ul.firstElementChild);// 2.lastElementChild返回最后一个子元素节点console.log(ul.lastElementChild);// 3.实际开发中用到的既没有兼容性问题又可以返回子节点的第一个和最后一个console.log(ul.children[0]);console.log(ul.children[ul.children.length - 1]); //ul.children.length - 1获取的永远是子节点最后一个</script></body> 3.兄弟节点 1.node.nextSibling nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。注意包含所有的节点 2.node.previousSibling previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。注意包含所以有的节点代码演示 <body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// 返回当前元素的下一个兄弟节点nextSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.nextSibling); //这里返回的是text 因为它的下一个兄弟节点是换行// 返回的是当前元素的上一个节点previousSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.previousSibling); //这里返回的是text 因为它的上一个兄弟节点是换行</script></body> 3.node.nexElementSibling nexElementSibling 返回当前元素下一个兄弟元素节点，找不到返回null 4.node.previousElementSibling previousElementSibling返回当前元素上一个兄弟节点，找不到返回null 注意：这俩个方法有兼容性问题，IE9以上才支持代码演示 <body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// nextElementSiblingd得到下一个兄弟元素节点console.log(div.nextElementSibling); // span // previousElementSibling 得到的是上一个兄弟元素节点console.log(div.previousElementSibling); // null 因为它上面没有兄弟元素了返回空的</script></body> 怎么解决兼容性问题呢？可以封装一个兼容性函数（简单了解即可在实际开发中用的不多） function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;} }return null;} 4.创建节点 1.document.createElement('tagName') document.createElement( ) 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在的是根据我们的需求动态生成的，所有我们也称为动态创建元素节点我们创建了节点要给添加到节点里面去称为添加节点 1.node.appendChild（child） node.appendChild（）方法将一个节点添加到指定父节点的子节点列表末尾 2.node.insertBefore(child，指定添加元素位置) node.insertBefore( ) 方法将一个节点添加到父节点的指定子节点前面代码演示 <body><ul><li>1</li></ul><script>// 1.创建节点 createElementvar li = document.createElement('li')// 2.添加节点创建了节点要添加到某一个元素身上去叫添加节点 node.appendChild(child) done 父级 child 子级如果前面有元素了则在后面追加元素类似数组中的push依次追加var ul = document.querySelector('ul')ul.appendChild(li)// 3.添加节点 node.insertBefore(child，指定元素) 在子节点前面添加子节点 child子级你要添加的元素var lili = document.createElement('li')ul.insertBefore(lili, ul.children[0]) //ul.children 这句话的意思是添加到ul父亲的子节点第一个// 总结如果想在页面中添加元素分为俩步骤1.创建元素 2.添加元素</script></body> 5.删除节点 node.removeChild(child) node.removeChlid（）方法从DOM 中删除一个子节点，返回删除的节点简单点就是从父元素中删除某一个孩子node就是父亲child就是孩子删除的节点.remove(没有参数) 注意：ie不支持代码演示 <body><button>按钮</button><ul><li>熊大</li><li>熊二</li><li>熊三</li></ul><script>// 1.获取元素var ul = document.querySelector('ul')var but = document.querySelector('button');// 2.删除元素// but.onclick = function() {// ul.removeChild(ul.children[0])// }// 3.点击按钮键依次删除，最后没有删除内容了就禁用按钮 disabled = true 禁用按钮语法but.onclick = function() {if (ul.children.length == 0) {this.disabled = true} else {ul.removeChild(ul.children[0])} }</script></body> 6.复制节点(克隆节点) node.cloneNode() node.dloneNode()方法返回调用该方法节点得一个副本，也称为克隆节点/拷贝节点注意 1.如果括号参数为空或者为false，则是浅拷贝，只复制里面得标签，不复制内容 2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的内容代码演示 <body><ul><li>1</li><li>2</li><li>3</li></ul><script>// 1.获取元素var ul = document.querySelector('ul');// 2.复制元素 node.cloneNode() 如果参数括号为空或者false则只会复制元素不会复制内容，如果待有参数true则内容和元素都会被复制var lis = ul.children[0].cloneNode(true);// 3.获取元素ul.appendChild(lis)</script></body> 7.替换(改)节点 node.replaceChild(新节点,替换到什么位置) 代码演示 <body><ul class="list"><li>1</li><li>2</li></ul><script>// 替换（改）节点父节点.replaceChild(新元素, 替换到什么位置)// (1)获取父元素var ulNode = document.querySelector('.list');// (2)创建新的元素var liRead = document.createElement('li')// (3)给新元素添加内容liRead.innerHTML = '5';// (4)替换元素ulNode.replaceChild(liRead, ulNode.children[1])</script></body> 8.三种动态创建元素区别 document.write() element.innerHTML document.createElement() 区别 document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，它则会导致页面全部重绘 element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 element.innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结果有点复杂 createElement()创建多个元素效率低一点点，但是结果更加清晰总结：不同浏览器下,innerHTML效率要比createElement()高代码演示 <body><button>点击</button><p>abc</p><div class="inner"></div><div class="create"></div><script>// window.onload = function() {// document.write('<div>123</div>');// }// 三种创建元素方式区别 // 1. document.write() 创建元素如果页面文档流加载完毕，再调用这句话会导致页面重绘// var btn = document.querySelector('button');// btn.onclick = function() {// document.write('<div>123</div>');// }// 2. innerHTML 创建元素var inner = document.querySelector('.inner');// for (var i = 0; i <= 100; i++) {// inner.innerHTML += '<a href="">百度</a>'// }var arr = [];for (var i = 0; i <= 100; i++) {arr.push('<a href="">百度</a>');}inner.innerHTML = arr.join('');// 3. document.createElement() 创建元素var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);}</script></body> 本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_46978034/article/details/110190352。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-08-04 13:36:05

247

转载

HTML

写代码html打开空白

...程中，有时会碰到加载HTML网页却发现网页无内容的情况。这时候，也许是代码本身含有错误致使网页无法正常显示。 <!DOCTYPE html> <html> <head> <title>这是一个样本的网页</title> </head> <body> <div>这是一个div标签<div> <p>这是一个p标签</p> <img src="example.jpg"> </body> </html> 在以上样本代码中，含有两个错误。首先，第7行的<div>标签没有正确闭合，应该改为</div>。这种错误容易被忽略，但却会致使整个网页无法正常显示。其次，第9行的<img>标签没有正确设置src属性。如果没有正确指定图片路径，网页中就无法显示图片。因此，需要检查是否含有该张图片以及文件路径的正确性。总之，写代码时要注意细节，及时检查代码逻辑和标签闭合情况，避免在调试的过程中浪费过多的时间。

2023-03-06 16:22:50

499

键盘勇士

转载文章

[转载]前端三件套系例之BootStrap——BootStrap基础、 BootStrap布局

... IE8 支持H5新标签 IE兼容模式国产浏览器切换webkit内核 2 BootStrap布局 1 概览 1.1 移动设备优先 1.2 Normalize.css 1.3 布局容器 2 栅格系统 2.1 栅格系统简介 2.2 栅格参数 2.3 栅格系统使用 2.4 不同屏幕设置不同宽度 2.5 列偏移 2.6 列位置移动 3 排版 3.1 标题 3.2 突出显示 3.3 对齐 3.4 改变大小写 3.5 引用 3.6 列表 4 代码 4.1 内联代码 4.2 用户输入 4.3 代码块 4.3 变量 4.4 程序输出 5 表格 5.1 基本 5.2 条纹状表格 5.3 带边框的表格 5.4 鼠标悬停 5.5 紧缩表格 5.6 状态类 5.7 响应式表格 6 表单 6.1 基本实例 6.2 内联表单 6.3 水平排列的表单 6.4 表单控件输入框文本域多选和单选框下拉列表静态内容帮助文字校验状态添加额外的图标控件尺寸 7 按钮 7.1 可作为按钮使用的标签或元素 7.2 预定义样式 7.3 尺寸 7.4 激活状态 7.5 禁用状态 8 图片 8.1 响应式图片 8.2 图片形状 9 辅助类 9.1 文本颜色 9.2 背景色 9.3 三角符号 9.4 浮动 9.5 让内容块居中 9.6 清除浮动 9.7 显示或隐藏内容 9.10 图片替换 10 响应式工具 10.1 不同视口下隐藏显示 10.2 打印类 1 BootStrap基础 1 什么是BootStrap 由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 2 BootStrap的版本 BootStrap2 BootStrap3 BootStrap4 3 BootStrap 下载用于生产环境的Bootstrap Bootstrap Less 源码Bootstrap Sass 源码 4 CDN服务 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 5 目录结构生产环境版 bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ ├── bootstrap-theme.css.map│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf├── glyphicons-halflings-regular.woff└── glyphicons-halflings-regular.woff2 6 基本模板 <!DOCTYPE html><html lang="zh-CN"><head><title>Bootstrap 101 Template</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html> 7 浏览器支持手机浏览器 ——- Chrome Firefox Safari Android Supported Supported N/A iOS Supported Supported Supported 桌面浏览器 ——— Chrome Firefox Internet Explorer Opera Safari Mac Supported Supported N/A Supported Supported Windows Supported Supported Supported Supported Not supported 8 浏览器兼容让 IE8 支持H5新标签页面中引入respond.js <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> IE兼容模式页面中添加如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 国产浏览器切换webkit内核页面中添加如下代码 <meta name="renderer" content="webkit"> 2 BootStrap布局 1 概览 1.1 移动设备优先为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ 1.2 Normalize.css BootStrap内置了Normalize.css 1.3 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 <div class="container">...</div> .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 <div class="container-fluid">...</div> 2 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列 2.1 栅格系统简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-不存在，也影响大屏幕设备。 2.2 栅格参数超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 最大列（column）宽自动 ~62px ~81px ~97px 2.3 栅格系统使用使用单一的一组 .col-md- 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。 <div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div></div><div class="row"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</div></div> 2.4 不同屏幕设置不同宽度 <div class="row"><div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><div class="row"><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div></div> 2.5 列偏移使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。 <div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><div class="row"><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><div class="row"><div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div> 2.6 列位置移动通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列（column）的顺序。 <div class="row"><div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div><div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div></div> 3 排版 3.1 标题 HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 <h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6> 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 <h1>h1. Bootstrap heading <small>Secondary text</small></h1><h2>h2. Bootstrap heading <small>Secondary text</small></h2><h3>h3. Bootstrap heading <small>Secondary text</small></h3><h4>h4. Bootstrap heading <small>Secondary text</small></h4><h5>h5. Bootstrap heading <small>Secondary text</small></h5><h6>h6. Bootstrap heading <small>Secondary text</small></h6> 3.2 突出显示通过添加 .lead 类可以让段落突出显示。 <p class="lead">...</p> 3.3 对齐 <p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p> 3.4 改变大小写 <p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p> 3.5 引用 <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote><blockquote class="blockquote-reverse">...</blockquote> 3.6 列表无样式列表 <ul class="list-unstyled"><li>...</li></ul> 内联列表 <ul class="list-inline"><li>...</li></ul> 水平排列的内联列表 <dl class="dl-horizontal"><dt>...</dt><dd>...</dd></dl> 4 代码 4.1 内联代码通过 <code> 标签包裹内联样式的代码片段。 For example, <code><section></code> should be wrapped as inline. 4.2 用户输入通过 <kbd> 标签标记用户通过键盘输入的内容。 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 4.3 代码块多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。 <pre><p>Sample text here...</p></pre> 还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。 4.3 变量通过 <var> 标签标记变量。 <var>y</var> = <var>m</var><var>x</var> + <var>b</var> 4.4 程序输出通过 <samp> 标签来标记程序输出的内容。 <samp>This text is meant to be treated as sample output from a computer program.</samp> 5 表格 5.1 基本为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 <table class="table">...</table> 5.2 条纹状表格 <table class="table table-striped">...</table> 5.3 带边框的表格 <table class="table table-bordered">...</table> 5.4 鼠标悬停 <table class="table table-hover">...</table> 5.5 紧缩表格 <table class="table table-condensed">...</table> 5.6 状态类通过这些状态类可以为行或单元格设置颜色。 Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 5.7 响应式表格将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 6 表单 6.1 基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 <form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form> 6.2 内联表单为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠） 6.3 水平排列的表单通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了 <form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div></form> 6.4 表单控件输入框包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。只有正确设置了 type 属性的输入控件才能被赋予正确的样式。文本域支持多行文本的表单控件。可根据需要改变 rows 属性。多选和单选框默认样式 <div class="checkbox"><label><input type="checkbox" value="">Option one is this and that—be sure to include why it's great</label></div><div class="checkbox disabled"><label><input type="checkbox" value="" disabled>Option two is disabled</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that—be sure to include why it's great</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one</label></div><div class="radio disabled"><label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>Option three is disabled</label></div> 内联单选和多选框 <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label> 不带文本的Checkbox 和 radio <label><input type="checkbox" id="blankCheckbox" value="option1" aria-label="..."></label></div><div class="radio"><label><input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."></label></div> 下拉列表 <select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select> 静态内容如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可 <form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">Email</label><div class="col-sm-10"><p class="form-control-static">email@example.com</p></div></div><div class="form-group"><label for="inputPassword" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword" placeholder="Password"></div></div></form> 帮助文字 <label class="sr-only" for="inputHelpBlock">Input with help text</label><input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">...<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> 校验状态 Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。 <div class="form-group has-success"><label class="control-label" for="inputSuccess1">Input with success</label><input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"><span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div><div class="form-group has-warning"><label class="control-label" for="inputWarning1">Input with warning</label><input type="text" class="form-control" id="inputWarning1"></div><div class="form-group has-error"><label class="control-label" for="inputError1">Input with error</label><input type="text" class="form-control" id="inputError1"></div><div class="has-success"><div class="checkbox"><label><input type="checkbox" id="checkboxSuccess" value="option1">Checkbox with success</label></div></div><div class="has-warning"><div class="checkbox"><label><input type="checkbox" id="checkboxWarning" value="option1">Checkbox with warning</label></div></div><div class="has-error"><div class="checkbox"><label><input type="checkbox" id="checkboxError" value="option1">Checkbox with error</label></div></div> 添加额外的图标你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可 <div class="form-group has-success has-feedback"><label class="control-label" for="inputSuccess2">Input with success</label><input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputSuccess2Status" class="sr-only">(success)</span></div> 控件尺寸通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg- 类似的类可以为控件设置宽度。高度尺寸创建大一些或小一些的表单控件以匹配按钮尺寸 <input class="form-control input-lg" type="text" placeholder=".input-lg"><input class="form-control" type="text" placeholder="Default input"><input class="form-control input-sm" type="text" placeholder=".input-sm"><select class="form-control input-lg">...</select><select class="form-control">...</select><select class="form-control input-sm">...</select> 水平排列的表单组的尺寸通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。 <form class="form-horizontal"><div class="form-group form-group-lg"><label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"></div></div><div class="form-group form-group-sm"><label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"></div></div></form> 7 按钮 7.1 可作为按钮使用的标签或元素为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式 <a class="btn btn-default" href="" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit"> 7.2 预定义样式 <button type="button" class="btn btn-default">（默认样式）Default</button><button type="button" class="btn btn-primary">（首选项）Primary</button><button type="button" class="btn btn-success">（成功）Success</button><button type="button" class="btn btn-info">（一般信息）Info</button><button type="button" class="btn btn-warning">（警告）Warning</button><button type="button" class="btn btn-danger">（危险）Danger</button><button type="button" class="btn btn-link">（链接）Link</button> 7.3 尺寸需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。 7.4 激活状态添加 .active 类 7.5 禁用状态为 <button> 元素添加 disabled 属性，使其表现出禁用状态。为基于 <a> 元素创建的按钮添加 .disabled 类。 8 图片 8.1 响应式图片在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center <img src="..." class="img-responsive" alt="Responsive image"> 8.2 图片形状 <img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail"> 9 辅助类 9.1 文本颜色 <p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...</p><p class="text-danger">...</p> 9.2 背景色 <p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p> 9.3 三角符号 <span class="caret"></span> 9.4 浮动 <div class="pull-left">...</div><div class="pull-right">...</div> 9.5 让内容块居中 <div class="center-block">...</div> 9.6 清除浮动通过为父元素添加 .clearfix 类可以很容易地清除浮动（float） <div class="clearfix">...</div> 9.7 显示或隐藏内容 <div class="show">...</div><div class="hidden">...</div> 9.10 图片替换使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。 <h1 class="text-hide">Custom heading</h1> 10 响应式工具 10.1 不同视口下隐藏显示 .visible-xs- .visible-sm- .visible-md- .visible-lg- .hidden-xs .hidden-sm .hidden-md .hidden-lg.visible--block .visible--inline .visible--inline-block 10.2 打印类 .visible-print-block.visible-print-inline.visible-print-inline-block.hidden-print 打印机下隐藏本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_67155975/article/details/123351126。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-18 14:41:25

150

转载

HTML

代码制作我的世界html

今天我掌握如何使用HTML制作“我的世界”游戏页面。首先，我需求为页面设定一个题目。代码如下： <head> <title>我的世界</title> </head> 随后，我需求在页面中插入“我的世界”的标识图片。代码如下： <div> <img src="logo.png" alt="我的世界Logo"> </div> 然后，我需求为页面插入游戏内容区块。代码如下： <div> <h1>热烈欢迎来到我的世界</h1> <p>这里是一个无拘无束的天地，你可以自由地构建钟爱的建筑物，探索自然风光，发现各种资源。进入游戏，开始探险之旅吧！</p> <a href="game.html">开始游戏</a> </div> 最后，我还需求为页面插入底部信息。代码如下： <footer> <p>版权所有 © 2021 我的世界公司</p> </footer> 通过以上代码，我已经完成了一个简单的“我的世界”游戏页面的制作。

2023-12-24 15:52:14

527

数据库专家

HTML

在搜索引擎爬虫眼里，html+css编写的几个好习惯，这里整理了10个

html编码中，一些习惯性的编码习惯，可能会带来界面上不错的效果，但是在seo角度讲，可能存在一些问题。本文只整理了10个常见的html编码习惯的问题，也包括个别css的，供大家参考。 1. 每页页面要有h1标签页面的title元数据标签，大家非常了解，对于搜索引擎爬取、收录、排名，至关重要。这里面一般要包含目标关键字。但是当爬虫理解页面内容的时候，还会参考h1标签，h1标签的权重稍次于title元数据标签，但是也是十分重要的。所以，应该在h1标签中大大方方的写出本页的标题。另外，一定不要用隐藏的h1标签，隐藏文字在seo中是有可能会被判定为作弊的！ <!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>页面标题示例</title>6</head>7<body>89 10 <h1>欢迎来到我们的网站 - 主页</h1>1112 13 <p>这是一个演示如何使用HTML h1标签的例子。在这个网页中，我们用<h1>标签来呈现主要的、最高级别的标题。</p>1415 16 17</body>18</html> 2. 写好img标签的alt属性正确写好alt标签有下面几点好处：当图片无法加载的时候，alt的文本就会显示在页面上，让用户知道这张图片是介绍了什么内容。可以让搜索引擎理解这站图片的内容，从而可以有可能把这个图片索引到图片库中，在搜索图片的时候就有可能带出来。如果图片是页面的第一个元素，更要写好alt属性，这有利于搜索引擎理解本页面的页面内容。图片做logo，logo是锚元素，即<a href='xxx'><img src='xxx' alt='公司logo'></a>这样的时候，图片的alt就相当于锚文本的文字（所以别草草几句就搞定了），锚文本的作用十分关键！ <!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>图片及alt属性示例</title>6</head>7<body>89 10 <p>下面是一张描述美丽风景的图片：</p>11 <img src="beautiful-scenery.jpg" alt="美丽的山川湖泊景色，天空湛蓝，湖面如镜，周围环绕着翠绿的森林。">1213 14 1516</body>17</html> 3. 特定的锚元素加nofollow 如果你的页面上有一些外链，或者不需要被跟踪的内链，请对他们加上这个属性。 <!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>nofollow属性示例</title>6</head>7<body>89 10 <p>访问我们的<a href="https://www.example.com" target="_blank">主页</a></p>1112 13 <p>外部链接示例：这是一个带有nofollow属性的<a href="https://www.external-site.com" rel="nofollow" target="_blank">外部网站链接</a>，搜索引擎不会通过这个链接来传递我们网页的权重。</p>1415</body>16</html> 这会让搜索引擎知道这个链接不是受站长推荐的，可能会继续爬取或不继续爬取，但不会传递权重。尤其对于新站，每天爬虫来访的频次和深度其实都比较有限，所以正确的时候nofollow（无论在外链或内链上），可以一定程度上把爬虫引入正确的爬行轨迹。但是，爬虫的爬取，也是有它自己的想法，不能说加上nofollow就一定有作用。 4. 所有el-link一律用a代替比如使用了element-ui或其它的前端库，其锚元素并不是<a>而是比如<el-link>这样的元素。请优先使用<a>。尽管在页面审查元素的时候可以看到<el-link>已经被正确的解析为了<a>，但是在右键-查看网页源代码的时候，依旧是<el-link>。尽管现在的搜索引擎爬虫可以很好的解析动态页面，但不排除对于新站或权重低的站点，仍然就是拿到源代码做解析（节省计算资源嘛）。所以，为了安全起见，还是优先使用<a>作为锚元素，确保内链的建设能够得到正确的爬取！ 5. 移动端文字适配也许你没有单独做一个移动站，只做了一个pc站。但当你手机上访问站点的时候，发现站点的文字发生了异常的突变，指定fong-size不生效。这时候你可能就要使用：-webkit-text-size-adjust: none 试试吧，你会发现药到病除！ 6. html的title中元素的顺序很重要举几个例子：第一页: 分类名称-网站名称第二页: 分类名称-第二页-网站名称文章页面: 文章标题-网站名称如果要使用符号，尽量使用中划线或下划线，不要使用其它特殊符号。 7. 加入新的meta标签 content-language、author，尤其是content-language，在必应bing的站长后台做网站体检的时候还会提示站长（尽管不是一个很严重的问题）。 <!DOCTYPE html>2<html lang="zh-CN">3<head>4 <meta charset="UTF-8">5 6 <meta http-equiv="Content-Language" content="zh-CN">7 8 9 <meta name="author" content="张三">10 11 <title>示例网页 - HTML Meta 标签使用</title>12 13 14 <meta name="description" content="这是一个关于HTML Meta标签content-language和author属性使用的示例网页。">15 16</head>17<body>18 19 ...20</body>21</html> 8. 减少html中的注释一方面，有利于减少响应文本的体积，降低服务器带宽。另一方面，有利于搜索引擎的爬虫理解页面内容，试想，如果一个页面50%的注释，那么搜索引擎理解起来也会有难度。 9. 不要使用table布局或其它复杂布局搜索引擎爬虫对页面内容的理解不像人类的肉眼，它是需要基于代码的。如果代码结构比较复杂，它会比较反感这样的代码，甚至会跑路。所以，简单整洁的代码是招引爬虫来的很重要的因素。所以，不要使用比较复杂布局代码，能写到css文件里的就用css文件搞定。 10. 不要使用隐藏文字无论是什么样的初心，使用了隐藏文字，都会被搜索引擎认为是作弊。比如：文字颜色和背景色颜色一样、文字使用absolute绝对定位定位到可视便捷以外、文字用z-index定位到最下层... 尽管用户看不到，但搜索引擎的爬虫阅读源码会看到，尽管不一定能够正确识别这些文字是隐藏文字，但一旦识别出来，就会被判断为作弊站点。另外，当用户点击某按钮后出来的文字，属于正常的交互，不属于隐藏文字。

2024-01-26 18:58:53

503

admin-tim

VUE

vue图片排版

...本文示例代码中，通过设置.img-container为flex容器并启用换行，以及定义.img-wrapper的flex-basis属性，实现了图片在网页上的响应式排版，使得图片能自动填充容器空间，并随着窗口大小调整自身位置和大小。 v-for指令 , 在Vue.js中，v-for是一个核心指令，它允许开发者基于数组或对象集合生成重复的DOM元素。在文章给出的例子中，v-for指令配合\ img in images\ 语法遍历了组件data对象中的images数组，根据数组中每项包含的图片信息动态渲染出相应的<img>标签及图片名称，从而实现了图片列表的展示功能。

2023-10-22 16:29:35

173

算法侠

HTML

做html代码吗

做HTML代码是网站创建中的重要步骤。HTML（超文本标记语言）是一种用于创建网页的规范语言。创建HTML代码需要一定的基本知识和方法。 <!DOCTYPE html> <html> <head> <title>网页标题</title> </head> <body> <h1>这是顶级标题</h1> <p>这是一段文字。</p> <img src="图片地址"> </body> </html> 在HTML代码中，<!DOCTYPE html>是声明文件类型的声明，<html>元素是包括所有HTML代码的顶层元素。<head>元素包括文档的metadata，如标题和脚本。<title>元素设定了文档的标题，该元素必需包括在head元素中。<body>元素设定了HTML包括的文本内容，如文字、图片、链接等。<h1>元素是一种标题元素，h1~h6共6种级别，用于设定不同级别的标题。<p>元素设定文本段落，可以包括文字、图片、链接等。在编写HTML代码时，需要遵守语法规则，如元素必需成对出现，元素名要小写，属性值要用引号包括等。同时，也需要了解常用元素的属性和使用方法。例如，<img>元素用于显示图片，需要声明图片的地址和大小等属性；<a>元素用于创建链接，需要声明链接的地址和文本等属性。在学习HTML代码时，可以参考相关教程和文档，也可以参考其他网站的源代码，学习其结构和语法。同时，还需要不断实践，编写代码才能够更好地掌握方法和规则。

2023-05-02 11:53:31

469

码农

HTML

万圣节html代码大全

...们将为大家提供万圣节HTML代码总览。 <html> <head> <title>万圣节HTML代码总览</title> </head> <body> <h1>万圣节愉快！</h1> <p>这里是一些万圣节有关的HTML代码：</p> <ul> <li><a href="https://www.bing.com/search?q=halloween+images" target="_blank">万圣节图像</a></li> <li><a href="https://www.bing.com/search?q=halloween+songs" target="_blank">万圣节歌曲</a></li> <li><a href="https://www.bing.com/search?q=halloween+recipes" target="_blank">万圣节菜谱</a></li> </ul> <p>以下是一些标签，可以用于创建万圣节网页：</p> <ul> <li><code><img src="halloween.jpg" alt="万圣节图像"></code> - 添加图像</li> <li><code><embed src="halloween.mp3" autostart="true"></code> - 添加声音</li> <li><code><video src="halloween.mp4" autoplay="" loop="" muted=""></code> - 添加影片</li> <li><code><marquee>诡秘的夜晚，魂魄将到处游荡……</marquee></code> - 移动文字</li> <li><code><canvas id="canvas" width="500" height="500"></canvas></code> - 创建Canvas动画</li> </ul> </body> </html> 以上是万圣节HTML代码总览，希望对大家有所帮助！

2023-02-21 17:23:15

487

码农

CSS

CSS模板网站设计图片

...ound-size属性确保图片不失真且快速加载。此外，响应式设计的理念也不断深化，设计师们开始探索如何通过CSS Grid、Flexbox等布局方式以及更精细的图片尺寸调整策略（如使用max-width配合媒体查询），确保图标、广告横幅等各种图片元素在不同屏幕尺寸下均能保持良好的比例和视觉效果。深入解读方面，研究者指出，随着无障碍设计要求的提高，图片的alt属性设置也成为评价网页质量的重要考量。利用CSS进行图片降级处理，结合语义化HTML标签为用户提供替代文本信息，将有效提升视障用户和其他辅助技术用户的访问体验。综上所述，紧跟行业趋势和技术发展，持续深入研究并实践CSS在模板网站图片设计中的应用，不仅可以打造美观、高效的网页界面，更能实现搜索引擎友好和用户体验升级的双重目标。

2023-08-24 23:36:58

468

编程狂人

HTML

冰墩墩html css代码

...本文的上下文中，通过设置div元素的display属性为flex，我们可以轻松实现其内部子元素（如冰墩墩图片和文字）的水平居中和垂直居中对齐，以及灵活的伸缩空间分配。 alt属性 , alt属性是HTML img标签的一个重要属性，全称为“alternate text”。在网页开发中，当图片无法加载或用户使用屏幕阅读器等辅助技术时，alt属性提供的文本信息将替代图片显示，以确保内容的可访问性和理解性。在这篇文章中，冰墩墩图片的alt属性值设置为“冰墩墩”，确保了即使图片未加载成功，用户也能知道该部分代表的是北京冬奥会吉祥物冰墩墩。响应式设计 , 响应式设计是一种网页设计方法，使得网站能够根据用户所使用的设备环境（系统平台、屏幕尺寸、屏幕方向等）进行适应性的布局调整。虽然文章并未直接提及响应式设计，但在实际开发过程中，制作冰墩墩网站图标时可能会运用到这一原则，比如利用CSS3媒体查询技术让冰墩墩图像在不同尺寸的屏幕上都能保持合适的大小和显示效果，从而提升用户的浏览体验。

2023-07-30 08:03:59

729

电脑达人

HTML

代码html图片怎么显示不了图片大小

<img>标签 , <img>是HTML语言中的一个核心元素，它用于在网页中插入图像。通过设置该标签的属性（如src、alt、width和height等），开发者可以指定图片源地址、定义替代文本、控制图片尺寸等。例如，在HTML代码中编写<img src=\ image.jpg\ alt=\ 描述性文本\ width=\ 300\ height=\ 200\ >，则会在页面上嵌入一张宽度为300像素、高度为200像素的图片，如果图片加载失败，则会显示“描述性文本”。 src属性 , 在HTML的<img>标签中，src是一个必备属性，全称为“source”。它用于指定要嵌入网页的图像文件路径或URL链接。例如，<img src=\ https://example.com/image.jpg\ >表示从指定的URL加载并显示图片。 alt属性 , alt是HTML img标签中的一个重要属性，全称为“alternative text”。当图片由于各种原因无法正常显示时，浏览器将展示alt属性所设定的文字内容作为图片的替代信息，这不仅有助于用户理解原本应显示的图片内容，还对搜索引擎优化（SEO）具有重要意义，因为搜索引擎爬虫可以读取alt属性来理解图片的主题内容。例如，<img src=\ picture.jpg\ alt=\ 这是一张示例图片\ >，若图片加载失败，浏览器会显示“这是一张示例图片”。文件路径 , 在计算机文件系统中，文件路径是指从一个起始点（通常是根目录）到目标文件的一系列连续指向，用于唯一标识和定位文件的位置。在HTML文档引用本地磁盘上的图片资源时，需要提供正确的文件路径，例如<img src=\ images/picture.jpg\ alt=\ 本地图像\ >，其中\ images/picture.jpg\ 就是本地图像的相对文件路径。远程URL , 远程URL（Uniform Resource Locator）是一种互联网上的资源定位符，它指定了网络上某一资源的具体位置，通常以\ http://\ 或\ https://\ 开头。在HTML中使用<img>标签引用远程服务器上的图片资源时，需提供其URL地址，如<img src=\ https://example.com/image.jpg\ alt=\ 远程图片\ >，这样浏览器就能根据提供的URL从远程服务器下载并显示图片。

2023-10-13 11:52:48

468

逻辑鬼才

转载文章

[转载]基本标签笔记

...bel,input,img,strong,em; <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><em>强调文本</em><br><strong>加粗文本</strong><br><dfn>定义项目</dfn><br><code>一段电脑代码</code><br><samp>计算机样本</samp><br><kbd>键盘输入</kbd><br><var>变量</var></body></html 2、HTML <audio> 标签 <audio> 标签是 HTML5 提供的用来播放音频文件的。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><audio controls><source src="/statics/demosource/horse.ogg" ><source src="/statics/demosource/horse.mp3" >您的浏览器不支持 audio 元素。</audio></body></html> 3、HTML <area> 标签 <area> 标签可以在图像上划分区域，这些区域是可以点击的，并且对应不同的操作。 <!DOCTYPE html><html><head><meta charset="utf-8"><title>W3Cschool(w3cschool.cn)</title></head><body><p>点击太阳或其他行星，注意变化：</p><img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="planetmap"><map name="planetmap"><area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif"><area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif"><area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif"></map></body></html> 4、HTML <select> 标签定义及使用说明 <select> 元素用来创建下拉列表。 <!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><select><option value="volvo" style="display:none">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select></body></html> 5、HTML <style> 标签 <style> 标签包含了 HTML 文档的样式详细，在默认情况下，在该元素内写入的样式指令将被认为是CSS。 <!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title><style type="text/css">h1 {color:red;}p {color:blue;}</style></head><body><h1>这是一个标题</h1><p>这是一个段落。</p></body></html> 7、HTML <sub> 标签包含在 <sub> 标签和其结束标签 </sub> 中的内容会以正常内容的一半的高度显示在下方，而且通常较小，请参见下述例子： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> </head><body><p>这个文本包含 <sub>下标</sub>文本。</p><p>这个文本包含 <sup>上标</sup> 文本。</p></body></html> 8、HTML <summary> 标签 <summary> 标签元素作为一个<datails>元素的标题，该标题可以包含详细的信息，但是默认情况下不显示，需要单击才能显示详细信息，请参考下述示 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><details><summary>Copyright 1999-2011.</summary><p> - by Refsnes Data. All Rights Reserved.</p><p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details><p><b>注意：</b>目前只有 Chrome 和 Safari 6 支持 summary 标签。</p></body></html> 9、HTML <table> 标签 <table> 标签用来定义 HTML 表格，一个简单的 HTML 表格应该包括两行两列，如下述示例所示： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> </head><body><table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></table></body></html> 10、HTML <textarea> 标签 <textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本，请参考下述示例： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool 在线教程(w3cschool.cn)</title> </head><body><textarea rows="10" cols="30">我是一个文本框。</textarea></body></html> 11、HTML <tt> 标签 - HTML5 不支持 <tt> 标签用来改变字体样式，使标签中的文本显示为打字机文本，请参考下述例子： <!DOCTYPE html><html><body><p>This text is normal.</p><p><tt>This text is teletype text.</tt></p></body></html> 12、HTML <u> 标签 <u> 标签可以用来对标签内的文本实现下划线样式，请参考下述示例： <!DOCTYPE html><html><body><p>This is a <u>parragraph</u>.</p></body></html> 13、HTML <ul> 标签 <ul> 标签表示HTML页面中项目的无序列表，一般会以项目符号列表呈现，请参考下述例子： <!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><h4>无序列表:</h4><ul><li>咖啡</li><li>茶</li><li>牛奶</li></ul></body></html> 14、HTML <video> 标签 <video> 标签可以将视频内容嵌入到HTML文档中，请参考下述示例： <!DOCTYPE html><html><body><video width="320" height="240" controls><source src="/statics/demosource/movie.mp4" type="video/mp4"><source src="/statics/demosource/movie.ogg" type="video/ogg">您的浏览器不支持 HTML5 video 标签。</video></body></html> 15、HTML <ol> 标签 <ol> 标签在 HTML 中表示有序列表，是 ordered lists 的缩写。您可以自定义有序列表的初始序号，请参考下面的实例： <!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><ol><li>咖啡</li><li>茶</li><li>牛奶</li></ol><ol start="50"><li>咖啡</li><li>茶</li><li>牛奶</li></ol></body></html> 16、HTML <noframes> 标签HTML5不支持该标签 <noframes> 标签用于支持不支持 <frame> 元素的浏览器，请参考下面的示例： <html><head><meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><frameset cols="25%,50%,25%"><frame src="/statics/demosource/frame_a.htm"><frame src="/statics/demosource/frame_b.htm"><frame src="/statics/demosource/frame_c.htm"><noframes>抱歉，您的浏览器不支持 frame 属性！</noframes></frameset></html> 17、HTML <hr> 标签 <hr> 标签表示段落级元素之间的主题划分。例如，在下面的实例中我们对具有主题变化的内容使用了 <hr> 标签： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><h1>HTML</h1><p>HTML 是用于描述 web 页面的一种语言。</p><hr><h1>CSS</h1><p>CSS 定义如何显示 HTML 元素。</p></body></html> 18、HTML <h1> - <h6> 标签 <h1> - <h6> 标签用来定义 HTML 标题，表示了 HTML 网页中六个级别的标题。您可以通过下面的这个实例来看看每个级别的标题有什么区别： <!DOCTYPE html><html><head><meta charset="utf-8"><title>W3Cschool(w3cschool.cn)</title></head><body><h1>这是标题1</h1><h2>这是标题2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6></body></html> 19、HTML <center> 标签 - HTML 5 不支持 <center> 标签控制文本的居中显示，不能在 HTML5 中使用。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><p>这是一些文本。</p><center>这个文本居中对齐。</center><p>这是一些文本</p></body></html> 20、HTML <button> 标签 <button> 标签用来设置 HTML 中的按钮。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><button type="button" onclick="alert('Hello world!')">Click Me!</button></body></html> 21、HTML <br> 标签 <br> 标签是空标签，可插入一个简单的换行符。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><p>使用br元素<br>在文本中<br>换行。</p></body></html> 22、HTML <dt> 标签 <dt> 标签只能够作为 <dl> 标签的一个子元素出现，常常后跟一个 <dd> 标签。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><dl><dt>咖啡</dt><dd>黑色的热饮</dd><dt>牛奶</dt><dd>白色的冷饮</dd></dl></body></html> 23、HTML <fieldset> 标签 <fieldset> 标签内的一组表单元素会在 WEB 浏览器中以特殊的方式显示，比如不同样式的边界、3D效果等。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><form><fieldset><legend>个人信息:</legend>姓名: <input type="text"><br>邮箱: <input type="text"><br>生日: <input type="text"></fieldset></form></body></html> 24、HTML <embed> 标签 <embed> 标签用来定义在页面中嵌入的内容，比如插件。比如，在下面的实例中我们嵌入了一个 flash 动画： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><embed src="/statics/demosource/helloworld.swf" tppabs="http://W3Cschool.com/tags/helloworld.swf"></body></html> 25、HTML <font> 标签 - HTML5 不支持 <font> 标签的使用示例如下所示，该标签已经过时，因此我们不建议您使用该标签。 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><p><font size="3" color="red">这是一些文本！</font></p><p><font size="2" color="blue">这是一些文本！</font></p><p><font face="verdana" color="green">这是一些文本！</font></p></body></html> 26、HTML <label> 标签 <label> 标签是一种常见的表单控件，触发对应表单控件功能，让用户在使用表单的时候能够有更好的体验。参考下述的实例： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>W3Cschool(w3cschool.cn)</title> </head><body><p>点击其中一个文本标签选中选项：</p><form action="/statics/demosource/demo-form.php"><label for="male">Male</label><input type="radio" name="sex" id="male" value="male"><br><label for="female">Female</label><input type="radio" name="sex" id="female" value="female"><br><br><input type="submit" value="提交"></form></body></html> 记录一些重要标签！本篇文章为转载内容。原文链接：https://blog.csdn.net/chehec2010/article/details/85060460。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-11 23:43:21

296

转载

转载文章

[转载]SpringBoot+Vue 实现大文件断点下载

...ption {// 设置编码格式response.setCharacterEncoding(utf8);//获取文件路径String fileName=request.getParameter("fileName");String drive=request.getParameter("drive");//参数校验log.info(fileName,drive);//完整路径(路径拼接待优化-前端传输优化-后端从新格式化 )String pathAll=drive+":\\"+fileName;log.info("pathAll{}",pathAll);Optional<String> pathFlag = Optional.ofNullable(pathAll);File file=null;if (pathFlag.isPresent()){//根据文件名，读取file流file = new File(pathAll);log.info("文件路径是{}",pathAll);if (!file.exists()){log.warn("文件不存在");return;} }else {//请输入文件名log.warn("请输入文件名！");return;}InputStream is = null;OutputStream os = null;try {//分片下载long fSize = file.length();//获取长度response.setContentType("application/x-download");String file_Name = URLEncoder.encode(file.getName(),"UTF-8");response.addHeader("Content-Disposition","attachment;filename="+fileName);//根据前端传来的Range 判断支不支持分片下载response.setHeader("Accept-Range","bytes");//获取文件大小//response.setHeader("fSize",String.valueOf(fSize));response.setHeader("fName",file_Name);//定义断点long pos = 0,last = fSize-1,sum = 0;//判断前端需不需要分片下载if (null != request.getHeader("Range")){response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);String numRange = request.getHeader("Range").replaceAll("bytes=","");String[] strRange = numRange.split("-");if (strRange.length == 2){pos = Long.parseLong(strRange[0].trim());last = Long.parseLong(strRange[1].trim());//若结束字节超出文件大小取文件大小if (last>fSize-1){last = fSize-1;} }else {//若只给一个长度开始位置一直到结束pos = Long.parseLong(numRange.replaceAll("-","").trim());} }long rangeLenght = last-pos+1;String contentRange = new StringBuffer("bytes").append(pos).append("-").append(last).append("/").append(fSize).toString();response.setHeader("Content-Range",contentRange);// response.setHeader("Content-Lenght",String.valueOf(rangeLenght));os = new BufferedOutputStream(response.getOutputStream());is = new BufferedInputStream(new FileInputStream(file));is.skip(pos);//跳过已读的文件(重点，跳过之前已经读过的文件)byte[] buffer = new byte[1024];int lenght = 0;//相等证明读完while (sum < rangeLenght){lenght = is.read(buffer,0, (rangeLenght-sum)<=buffer.length? (int) (rangeLenght - sum) :buffer.length);sum = sum+lenght;os.write(buffer,0,lenght);}log.info("下载完成");}finally {if (is!= null){is.close();}if (os!=null){os.close();} }} } 启动成功 Vue <html xmlns:th="http://www.thymeleaf.org"><head><meta charset="utf-8"/><title>狂神说Java-ES仿京东实战</title><link rel="stylesheet" th:href="@{/css/style.css}"/></head><body class="pg"><div class="page" id="app"><div id="mallPage" class=" mallist tmall- page-not-market "><div id="header" class=" header-list-app"><div class="headerLayout"><div class="headerCon "><h1 id="mallLogo"><img th:src="@{/images/jdlogo.png}" alt=""></h1><div class="header-extra"><div id="mallSearch" class="mall-search"><form name="searchTop" class="mallSearch-form clearfix"><fieldset><legend>天猫搜索</legend><div class="mallSearch-input clearfix"><div class="s-combobox" id="s-combobox-685"><div class="s-combobox-input-wrap"><input v-model="keyword" type="text" autocomplete="off" value="java" id="mq"class="s-combobox-input" aria-haspopup="true"></div></div><button type="submit" @click.prevent="searchKey" id="searchbtn">搜索</button></div></fieldset></form><ul class="relKeyTop"><li><a>狂神说Java</a></li><li><a>狂神说前端</a></li><li><a>狂神说Linux</a></li><li><a>狂神说大数据</a></li><li><a>狂神聊理财</a></li></ul></div></div></div></div></div><el-button @click="download" id="download">下载</el-button><el-button @click="stop">停止</el-button><el-button @click="start">开始</el-button>{ {fileFinalOffset} }{ {contentList} }<el-progress type="circle" :percentage="percentage"></el-progress></div><script th:src="@{/js/axios.min.js}"></script><script th:src="@{/js/vue.min.js}"></script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>new Vue({ el: 'app',data: {keyword: '', //搜索关键字results: [] ,//搜索结果percentage: 0, // 下载进度filesCurrentPage:0,//文件开始偏移量fileFinalOffset:0, //文件最后偏移量stopRecursiveTags:true, //停止递归标签，默认是true 继续进行递归contentList: [], // 文件流数组breakpointResumeTags:false, //断点续传标签，默认是false 不进行断点续传temp:[],fileMap:new Map(),timer:null, //定时器名称},methods: {//根据关键字搜索商品信息searchKey(){var keyword=this.keyword;axios.get('/search/JD/search/'+keyword+"/1/10").then(res=>{this.results=res.data;//绑定数据console.log(this.results)console.table(this.results)})},//停止下载stop(){//改变递归标签为falsethis.stopRecursiveTags=false;},//开始下载start(){//重置递归标签为true 最后进行合并this.stopRecursiveTags=true;//重置断点续传标签this.breakpointResumeTags=true;//重新调用下载方法this.download();},// 分段下载需要后端配合download() {// 下载地址const url = "/down?fileName="+this.keyword.trim()+"&drive=E";console.log(url)const chunkSize = 1024 1024 50; // 单个分段大小，这里测试用100Mlet filesTotalSize = chunkSize; // 安装包总大小，默认100Mlet filesPages = 1; // 总共分几段下载//计算百分比之前先清空上次的if(this.percentage==100){this.percentage=0;}let sentAxios = (num) => {let rande = chunkSize;//判断是否开启了断点续传(断点续传没法并行-需要上次请求的结果作为参数)if (this.breakpointResumeTags){rande = ${Number(this.fileFinalOffset)+1}-${num chunkSize + 1};}else {if (num) {rande = ${(num - 1) chunkSize + 2}-${num chunkSize + 1};} else {// 第一次0-1方便获取总数，计算下载进度，每段下载字节范围区间rande = "0-1";} }let headers = {range: rande,};axios({method: "get",url: url.trim(),async: true,data: {},headers: headers,responseType: "blob"}).then((response) => {if (response.status == 200 || response.status == 206) {//检查了下才发现，后端对文件流做了一层封装，所以将content指向response.data即可const content = response.data;//截取文件总长度和最后偏移量let result= response.headers["content-range"].split("/");// 获取文件总大小，方便计算下载百分比filesTotalSize =result[1];//获取最后一片文件位置，用于断点续传this.fileFinalOffset=result[0].split("-")[1]// 计算总共页数，向上取整filesPages = Math.ceil(filesTotalSize / chunkSize);// 文件流数组this.contentList.push(content);// 递归获取文件数据(判断是否要继续递归)if (this.filesCurrentPage < filesPages&&this.stopRecursiveTags==true) {this.filesCurrentPage++;//计算下载百分比当前下载的片数/总片数this.percentage=Number((this.contentList.length/filesPages)100).toFixed(2);sentAxios(this.filesCurrentPage);//结束递归return;}//递归标签为true 才进行下载if (this.stopRecursiveTags){// 文件名称const fileName =decodeURIComponent(response.headers["fname"]);//构造一个blob对象来处理数据const blob = new Blob(this.contentList);//对于<a>标签，只有 Firefox 和 Chrome（内核）支持 download 属性//IE10以上支持blob但是依然不支持downloadif ("download" in document.createElement("a")) {//支持a标签download的浏览器const link = document.createElement("a"); //创建a标签link.download = fileName; //a标签添加属性link.style.display = "none";link.href = URL.createObjectURL(blob);document.body.appendChild(link);link.click(); //执行下载URL.revokeObjectURL(link.href); //释放urldocument.body.removeChild(link); //释放标签} else {//其他浏览器navigator.msSaveBlob(blob, fileName);} }} else {//调用暂停方法，记录当前下载位置console.log("下载失败")} }).catch(function (error) {console.log(error);});};// 第一次获取数据方便获取总数sentAxios(this.filesCurrentPage);this.$message({message: '文件开始下载！',type: 'success'});} }})</script></body></html> 本篇文章为转载内容。原文链接：https://blog.csdn.net/kangshihang1998/article/details/129407214。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-01-19 08:12:45

546

转载

HTML

传智书城html代码

...台，它的网站主要使用HTML代码来建立。以下是一段简单的HTML代码，说明了传智书城的网站顶部信息： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>传智书城</title> <link rel="stylesheet" href="style.css"> </head> <body> 上面的代码中，第一行“DOCTYPE html”表示页面是按照HTML5规范编写的。第二行“html”标签是HTML页面的基础标签，它容纳了整个HTML页面的内容。第三行“head”标签表示页面顶部信息的开始，其中“meta charset”表示页面使用的文本编码是UTF-8，这是一种全球通用的编码规范，兼容多语种的文本展示。在第四行中，“title”标签设定了页面的标题，“link rel”标签链接了网站使用的CSS文件“style.css”。下面是页面的主要内容，代码如下所示： <div id="main"> <div class="banner"> <img src="banner.jpg" alt="banner"> </div> <div class="books"> <h2>热门图书</h2> <ul> <li><a href="../book/1.html">Python初级到高级</a></li> <li><a href="../book/2.html">Java编程理念</a></li> <li><a href="../book/3.html">Node.js开发教程</a></li> </ul> </div> </div> 在页面主要内容中，“div”标签用来设定页面中不同的区域，例如上面的“main”和“banner”区域。在“banner”区域中，“img”标签用来展示网站头部的宣传图片。“books”区域展示了网站的热门图书，其中“h2”标签用来设定标题，而“ul”和“li”标签用于列表的展示和链接。总之，HTML是建立网站的重要基石，传智书城网站的HTML代码适当地组合和使用页面元素，实现了网站的美观和实用性。

2023-08-22 12:19:23

463

算法侠

转载文章

[转载]微服务[学成在线] day15：媒资管理系统集成

...ng id) {//设置索引SearchRequest searchRequest = new SearchRequest(es_index);//设置类型searchRequest.types(es_type);//创建搜索源对象SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();//设置查询条件,根据id进行查询searchSourceBuilder.query(QueryBuilders.termQuery("id",id));//这里不使用source的原字段过滤,查询所有字段// searchSourceBuilder.fetchSource(new String[]{"name", "grade", "charge","pic"}, newString[]{});//设置搜索源对象searchRequest.source(searchSourceBuilder);//执行搜索SearchResponse searchResponse = null;try {searchResponse = restHighLevelClient.search(searchRequest);} catch (IOException e) {e.printStackTrace();}//获取搜索结果SearchHits hits = searchResponse.getHits();SearchHit[] searchHits = hits.getHits(); //获取最优结果Map<String,CoursePub> map = new HashMap<>();for (SearchHit hit: searchHits) {//从搜索结果中取值并添加到coursePub对象Map<String, Object> sourceAsMap = hit.getSourceAsMap();String courseId = (String) sourceAsMap.get("id");String name = (String) sourceAsMap.get("name");String grade = (String) sourceAsMap.get("grade");String charge = (String) sourceAsMap.get("charge");String pic = (String) sourceAsMap.get("pic");String description = (String) sourceAsMap.get("description");String teachplan = (String) sourceAsMap.get("teachplan");CoursePub coursePub = new CoursePub();coursePub.setId(courseId);coursePub.setName(name);coursePub.setPic(pic);coursePub.setGrade(grade);coursePub.setTeachplan(teachplan);coursePub.setDescription(description);//设置map对象map.put(courseId,coursePub);}return map;} 测试使用 swagger-ui 或 postman 测试查询课程信息接口。 0x04 前端开发配置NGINX虚拟主机学习中心的二级域名为 ucenter.xuecheng.com ，我们在 nginx 中配置 ucenter 虚拟主机。学成网用户中心server {listen 80;server_name ucenter.xuecheng.com;个人中心location / {proxy_pass http://ucenter_server_pool;} } 前端ucenterupstream ucenter_server_pool{server 127.0.0.1:7081 weight=10;server 127.0.0.1:13000 weight=10;} 在学习中心要调用搜索的 API，使用 Nginx 解决代理，如下图：在 ucenter 虚拟主机下配置搜索 Api 代理路径后台搜索（公开api）upstream search_server_pool{server 127.0.0.1:40100 weight=10;} 学成网用户中心server {listen 80;server_name ucenter.xuecheng.com;个人中心location / {proxy_pass http://ucenter_server_pool;}后端搜索服务location /openapi/search/ {proxy_pass http://search_server_pool/search/;} } 前端 API 方法在学习中心 xc-ui-pc-leanring 对课程信息的查询属于基础常用功能，所以我们将课程查询的 api 方法定义在base 模块下，如下图：在system.js 中定义课程查询方法： import http from './public'export const course_view = id => {return http.requestGet('/openapi/search/course/getdetail/'+id);} 前端 API 方法调用在 learning_video.vue 页面中调用课程信息查询接口得到课程计划，将课程计划json 串转成对象。 xc-ui-pc-leanring/src/module/course/page/learning_video.vue 1、定义视图课程计划 <div class="navCont"><div class="course-weeklist"><div class="nav nav-stacked" v-for="(teachplan_first, index) in teachplanList"><div class="tit nav-justified text-center"><i class="pull-left glyphicon glyphicon-th-list"></i>{ {teachplan_first.pname} }<i class="pull-right"></i></div><li v-if="teachplan_first.children!=null" v-for="(teachplan_second, index) in teachplan_first.children"><i class="glyphicon glyphicon-check"></i><a :href="url" @click="study(teachplan_second.id)">{ {teachplan_second.pname} }</a></li></div></div></div> 课程名称 <div class="top text-center">{ {coursename} }</div> 定义数据对象 data() {return {url:'',//当前urlcourseId:'',//课程idchapter:'',//章节Idcoursename:'',//课程名称coursepic:'',//课程图片teachplanList:[],//课程计划playerOptions: {//播放参数autoplay: false,controls: true,sources: [{type: "application/x-mpegURL",src: ''}]},} } 在 created 钩子方法中获取课程信息 created(){//当前请求的urlthis.url = window.location//课程idthis.courseId = this.$route.params.courseId//章节idthis.chapter = this.$route.params.chapter//查询课程信息systemApi.course_view(this.courseId).then((view_course)=>{if(!view_course || !view_course[this.courseId]){this.$message.error("获取课程信息失败，请重新进入此页面！")return ;} let courseInfo = view_course[this.courseId]console.log(courseInfo)this.coursename = courseInfo.nameif(courseInfo.teachplan){let teachplan = JSON.parse(courseInfo.teachplan);this.teachplanList = teachplan.children;} })}, 测试在浏览器请求：http://ucenter.xuecheng.com//learning/4028e581617f945f01617f9dabc40000/0 4028e581617f945f01617f9dabc40000：第一个参数为课程 id，测试时从 ES索引库找一个课程 id 0：第二个参数为课程计划 id，此参数用于点击课程计划播放视频。如果出现跨域问题，但是确定已经配置了跨域，请尝试结束所以 nginx.exe 的进程和清空浏览器缓存。如果还没有解决？重启电脑试试。二、学习页面：获取视频播放地址 0x01 需求分析用户进入在线学习页面，点击课程计划将播放该课程计划对应的教学视频。业务流程如下：业务流程说明： 1、用户进入在线学习页面，页面请求搜索服务获取课程信息（包括课程计划信息）并且在页面展示。 2、在线学习请求学习服务获取视频播放地址。 3、学习服务校验当前用户是否有权限学习，如果没有权限学习则提示用户。 4、学习服务校验通过，请求搜索服务获取课程媒资信息。 5、搜索服务请求ElasticSearch获取课程媒资信息。为什么要请求 ElasticSearch 查询课程媒资信息？出于性能的考虑，公开查询课程信息从搜索服务查询，分摊 mysql 数据库的访问压力。什么时候将课程媒资信息存储到 ElasticSearch 中？课程媒资信息是在课程发布的时候存入 ElasticSearch，因为课程发布后课程信息将基本不再修改。 0x02 课程发布：储存媒资信息需求分析课程媒资信息是在课程发布的时候存入 ElasticSearch 索引库，因为课程发布后课程信息将基本不再修改，具体的业务流程如下。 1、课程发布，向课程媒资信息表写入数据。 1）根据课程 id 删除 teachplanMediaPub 中的数据 2）根据课程 id 查询 teachplanMedia 数据 3）将查询到的 teachplanMedia 数据插入到 teachplanMediaPub 中 2、Logstash 定时扫描课程媒资信息表，并将课程媒资信息写入索引库。数据模型在 xc_course 数据库创建课程计划媒资发布表： CREATE TABLE teachplan_media_pub (teachplan_id varchar(32) NOT NULL COMMENT '课程计划id',media_id varchar(32) NOT NULL COMMENT '媒资文件id',media_fileoriginalname varchar(128) NOT NULL COMMENT '媒资文件的原始名称',media_url varchar(256) NOT NULL COMMENT '媒资文件访问地址',courseid varchar(32) NOT NULL COMMENT '课程Id',timestamp timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT'logstash使用',PRIMARY KEY (teachplan_id)) ENGINE=InnoDB DEFAULT CHARSET=utf8 数据模型类如下： package com.xuecheng.framework.domain.course;import lombok.Data;import lombok.ToString;import org.hibernate.annotations.GenericGenerator;import javax.persistence.;import java.io.Serializable;import java.util.Date;@Data@ToString@Entity@Table(name="teachplan_media_pub")@GenericGenerator(name = "jpa-assigned", strategy = "assigned")public class TeachplanMediaPub implements Serializable {private static final long serialVersionUID = -916357110051689485L;@Id@GeneratedValue(generator = "jpa-assigned")@Column(name="teachplan_id")private String teachplanId;@Column(name="media_id")private String mediaId;@Column(name="media_fileoriginalname")private String mediaFileOriginalName;@Column(name="media_url")private String mediaUrl;@Column(name="courseid")private String courseId;@Column(name="timestamp")private Date timestamp;//时间戳} Dao 创建 TeachplanMediaPub 表的 Dao，向 TeachplanMediaPub 存储信息采用先删除该课程的媒资信息，再添加该课程的媒资信息，所以这里定义根据课程 id 删除课程计划媒资方法： public interface TeachplanMediaPubRepository extends JpaRepository<TeachplanMediaPub, String> {//根据课程id删除课程计划媒资信息long deleteByCourseId(String courseId);} 从TeachplanMedia查询课程计划媒资信息 //从TeachplanMedia查询课程计划媒资信息public interface TeachplanMediaRepository extends JpaRepository<TeachplanMedia, String> {List<TeachplanMedia> findByCourseId(String courseId);} Service 编写保存课程计划媒资信息方法，并在课程发布时调用此方法。 1、保存课程计划媒资信息方法本方法采用先删除该课程的媒资信息，再添加该课程的媒资信息，在 CourseService 下定义该方法 //保存课程计划媒资信息private void saveTeachplanMediaPub(String courseId){//查询课程媒资信息List<TeachplanMedia> byCourseId = teachplanMediaRepository.findByCourseId(courseId);if(byCourseId == null) return; //没有查询到媒资数据则直接结束该方法//将课程计划媒资信息储存到待索引表//删除原有的索引信息teachplanMediaPubRepository.deleteByCourseId(courseId);//一个课程可能会有多个媒资信息,遍历并使用list进行储存List<TeachplanMediaPub> teachplanMediaPubList = new ArrayList<>();for (TeachplanMedia teachplanMedia: byCourseId) {TeachplanMediaPub teachplanMediaPub = new TeachplanMediaPub();BeanUtils.copyProperties(teachplanMedia, teachplanMediaPub);teachplanMediaPubList.add(teachplanMediaPub);}//保存所有信息teachplanMediaPubRepository.saveAll(teachplanMediaPubList);} 2、课程发布时调用此方法修改课程发布的 coursePublish 方法： ....//保存课程计划媒资信息到待索引表saveTeachplanMediaPub(courseId);//页面urlString pageUrl = cmsPostPageResult.getPageUrl();return new CoursePublishResult(CommonCode.SUCCESS,pageUrl);..... 测试测试课程发布后是否成功将课程媒资信息存储到 teachplan_media_pub 中，测试流程如下： 1、指定一个课程 2、为课程计划添加课程媒资 3、执行课程发布 4、观察课程计划媒资信息是否存储至 teachplan_media_pub 中注意：由于此测试仅用于测试发布课程计划媒资信息的功能，可暂时将 cms页面发布的功能暂时屏蔽，提高测试效率。测试结果如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vrzs5589-1595567273126)(https://qnoss.codeyee.com/20200704_15/image7)] 0x03 Logstash：扫描课程计划媒资 Logstash 定时扫描课程媒资信息表，并将课程媒资信息写入索引库。创建索引 1、创建 xc_course_media 索引 2、并向此索引创建如下映射 POST: http://localhost:9200/xc_course_media/doc/_mapping {"properties" : {"courseid" : {"type" : "keyword"},"teachplan_id" : {"type" : "keyword"},"media_id" : {"type" : "keyword"},"media_url" : {"index" : false,"type" : "text"},"media_fileoriginalname" : {"index" : false,"type" : "text"} }} 索引创建成功创建模板文件在 logstach 的 config 目录文件 xc_course_media_template.json 文件路径为 %ES_ROOT_DIR%/logstash6.8.8/config/xc_course_media_template.json %ES_ROOT_DIR% 为 ElasticSearch 和 logstash 的安装目录内容如下： {"mappings" : {"doc" : {"properties" : {"courseid" : {"type" : "keyword"},"teachplan_id" : {"type" : "keyword"},"media_id" : {"type" : "keyword"},"media_url" : {"index" : false,"type" : "text"},"media_fileoriginalname" : {"index" : false,"type" : "text"} }},"template" : "xc_course_media"} } 配置 mysql.conf 在logstash的 config 目录下配置 mysql_course_media.conf 文件供 logstash 使用，logstash 会根据 mysql_course_media.conf 文件的配置的地址从 MySQL 中读取数据向 ES 中写入索引。参考https://www.elastic.co/guide/en/logstash/current/plugins-inputs-jdbc.html 配置输入数据源和输出数据源。 input {stdin {} jdbc {jdbc_connection_string => "jdbc:mysql://localhost:3306/xc_course?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC" 数据库信息jdbc_user => "root"jdbc_password => "123123" MYSQL 驱动地址,修改为maven仓库对应的位置jdbc_driver_library => "D:/soft/apache-maven-3.5.4/repository/mysql/mysql-connector-java/5.1.40/mysql-connector-java-5.1.40.jar" the name of the driver class for mysqljdbc_driver_class => "com.mysql.jdbc.Driver"jdbc_paging_enabled => "true"jdbc_page_size => "50000"要执行的sql文件statement_filepath => "/conf/course.sql"statement => "select from teachplan_media_pub where timestamp > date_add(:sql_last_value,INTERVAL 8 HOUR)"定时配置schedule => " "record_last_run => truelast_run_metadata_path => "D:/soft/elasticsearch/logstash-6.8.8/config/xc_course_media_metadata"} } output {elasticsearch {ES的ip地址和端口hosts => "localhost:9200"hosts => ["localhost:9200","localhost:9202","localhost:9203"]ES索引库名称index => "xc_course_media"document_id => "%{teachplan_id}"document_type => "doc"template => "D:/soft/elasticsearch/logstash-6.8.8/config/xc_course_media_template.json"template_name =>"xc_course_media"template_overwrite =>"true"} stdout {日志输出codec => json_lines} } 启动 logstash.bat 启动 logstash.bat 采集 teachplan_media_pub 中的数据，向 ES 写入索引。 logstash.bat -f ../config/mysql_course_media.conf 课程发布成功后，Logstash 会自动参加 teachplan_media_pub 表中新增的数据，效果如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ILPBxfXi-1595567273134)(https://qnoss.codeyee.com/20200704_15/image10)] Logstash多实例运行由于之前我们还启动了一个 Logstash 对课程的发布信息进行采集，所以如果想两个 logstash 实例同时运行，因为每个实例都有一个.lock文件，所以不能使用同一个目录来存放数据，所以我们需要使用 --path.data= 为每个实例指定单独的数据目录，具体的代码如下：该配置是在windows下进行的课程发布实例 logstash_start_course_pub.bat @title logstash in course_publogstash.bat -f ..\config\mysql.conf --path.data=../data/course_pub 课程计划媒体发布实例 logstash_start_teachplan_media.bat @title logstash i n teachplan_media_publogstash.bat -f ../config/mysql_course_media.conf --path.data=../data/teachplan_media/ 同时运行效果如下 0x04 搜素服务：查询课程媒资接口需求分析搜索服务提供查询课程媒资接口，此接口供学习服务调用。 Api接口定义 @ApiOperation("根据课程计划查询媒资信息")public TeachplanMediaPub getmedia(String teachplanId); Service 1、配置课程计划媒资索引库等信息在 application.yml 中配置 xuecheng:elasticsearch:hostlist: ${eshostlist:127.0.0.1:9200} 多个结点中间用逗号分隔course:index: xc_coursetype: docsource_field: id,name,grade,mt,st,charge,valid,pic,qq,price,price_old,status,studymodel,teachmode,expires,pub_time,start_time,end_timemedia:index: xc_course_mediatype: docsource_field: courseid,media_id,media_url,teachplan_id,media_fileoriginalname 2、service 方法开发在课程搜索服务中定义课程媒资查询接口，为了适应后续需求，service 参数定义为数组，可一次查询多个课程计划的媒资信息。 / 根据一个或者多个课程计划id查询媒资信息 @param teachplanIds 课程id @return QueryResponseResult/public QueryResponseResult<TeachplanMediaPub> getmedia(String [] teachplanIds){//设置索引SearchRequest searchRequest = new SearchRequest(media_index);//设置类型searchRequest.types(media_type);//创建搜索源对象SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();//源字段过滤String[] media_index_arr = media_field.split(",");searchSourceBuilder.fetchSource(media_index_arr, new String[]{});//查询条件,根据课程计划id查询(可以传入多个课程计划id)searchSourceBuilder.query(QueryBuilders.termsQuery("teachplan_id", teachplanIds));searchRequest.source(searchSourceBuilder);SearchResponse searchResponse = null;try {searchResponse = restHighLevelClient.search(searchRequest);} catch (IOException e) {e.printStackTrace();}//获取结果SearchHits hits = searchResponse.getHits();long totalHits = hits.getTotalHits();SearchHit[] searchHits = hits.getHits();//数据列表List<TeachplanMediaPub> teachplanMediaPubList = new ArrayList<>();for(SearchHit hit:searchHits){TeachplanMediaPub teachplanMediaPub =new TeachplanMediaPub();Map<String, Object> sourceAsMap = hit.getSourceAsMap();//取出课程计划媒资信息String courseid = (String) sourceAsMap.get("courseid");String media_id = (String) sourceAsMap.get("media_id");String media_url = (String) sourceAsMap.get("media_url");String teachplan_id = (String) sourceAsMap.get("teachplan_id");String media_fileoriginalname = (String) sourceAsMap.get("media_fileoriginalname");teachplanMediaPub.setCourseId(courseid);teachplanMediaPub.setMediaUrl(media_url);teachplanMediaPub.setMediaFileOriginalName(media_fileoriginalname);teachplanMediaPub.setMediaId(media_id);teachplanMediaPub.setTeachplanId(teachplan_id);//将对象加入到列表中teachplanMediaPubList.add(teachplanMediaPub);}//构建返回课程媒资信息对象QueryResult<TeachplanMediaPub> queryResult = new QueryResult<>();queryResult.setList(teachplanMediaPubList);queryResult.setTotal(totalHits);return new QueryResponseResult<TeachplanMediaPub>(CommonCode.SUCCESS,queryResult);} Controller / 根据课程计划id搜索发布后的媒资信息 @param teachplanId @return/@GetMapping(value="/getmedia/{teachplanId}")@Overridepublic TeachplanMediaPub getmedia(@PathVariable("teachplanId") String teachplanId) {//为了service的拓展性,所以我们service接收的是数组作为参数,以便后续开发查询多个ID的接口String[] teachplanIds = new String[]{teachplanId};//通过service查询ES获取课程媒资信息QueryResponseResult<TeachplanMediaPub> mediaPubQueryResponseResult = esCourseService.getmedia(teachplanIds);QueryResult<TeachplanMediaPub> queryResult = mediaPubQueryResponseResult.getQueryResult();if(queryResult!=null&& queryResult.getList()!=null&& queryResult.getList().size()>0){//返回课程计划对应课程媒资return queryResult.getList().get(0);} return new TeachplanMediaPub();} 测试使用 swagger-ui 和 postman 测试课程媒资查询接口。三、在线学习：接口开发 0x01 需求分析根据下边的业务流程，本章节完成前端学习页面请求学习服务获取课程视频地址，并自动播放视频。 0x02 搭建开发环境 1、创建数据库创建 xc_learning 数据库，学习数据库将记录学生的选课信息、学习信息。导入：资料/xc_learning.sql 2、创建学习服务工程参考课程管理服务工程结构，创建学习服务工程：导入：资料/xc-service-learning.zip 项目工程结构如下 0x03 Api接口此 api 接口是课程学习页面请求学习服务获取课程学习地址。定义返回值类型： package com.xuecheng.framework.domain.learning.response;import com.xuecheng.framework.model.response.ResponseResult;import com.xuecheng.framework.model.response.ResultCode;import lombok.Data;import lombok.NoArgsConstructor;import lombok.ToString;@Data@ToString@NoArgsConstructorpublic class GetMediaResult extends ResponseResult {public GetMediaResult(ResultCode resultCode, String fileUrl) {super(resultCode);this.fileUrl = fileUrl;}//媒资文件播放地址private String fileUrl;} 定义接口，学习服务根据传入课程 ID、章节 Id(课程计划 ID)来取学习地址。 @Api(value = "录播课程学习管理",description = "录播课程学习管理")public interface CourseLearningControllerApi {@ApiOperation("获取课程学习地址")public GetMediaResult getMediaPlayUrl(String courseId,String teachplanId);} 0x04 服务端开发需求分析学习服务根据传入课程ID、章节Id(课程计划ID)请求搜索服务获取学习地址。搜索服务注册Eureka 学习服务要调用搜索服务查询课程媒资信息，所以需要将搜索服务注册到 eureka 中。 1、查看服务名称是否为 xc-service-search 注意修改application.xml中的服务名称：spring:application:name: xc‐service‐search 2、配置搜索服务的配置文件 application.yml，加入 Eureka 配置如下： eureka:client:registerWithEureka: true 服务注册开关fetchRegistry: true 服务发现开关serviceUrl: Eureka客户端与Eureka服务端进行交互的地址，多个中间用逗号分隔defaultZone: ${EUREKA_SERVER:http://localhost:50101/eureka/,http://localhost:50102/eureka/}instance:prefer-ip-address: true 将自己的ip地址注册到Eureka服务中ip-address: ${IP_ADDRESS:127.0.0.1}instance-id: ${spring.application.name}:${server.port} 指定实例idribbon:MaxAutoRetries: 2 最大重试次数，当Eureka中可以找到服务，但是服务连不上时将会重试，如果eureka中找不到服务则直接走断路器MaxAutoRetriesNextServer: 3 切换实例的重试次数OkToRetryOnAllOperations: false 对所有操作请求都进行重试，如果是get则可以，如果是post，put等操作没有实现幂等的情况下是很危险的,所以设置为falseConnectTimeout: 5000 请求连接的超时时间ReadTimeout: 6000 请求处理的超时时间 3、添加 eureka 依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring‐cloud‐starter‐netflix‐eureka‐client</artifactId></dependency> 4、修改启动类，在class上添加如下注解： @EnableDiscoveryClient 搜索服务客户端在学习服务创建搜索服务的客户端接口，此接口会生成代理对象，调用搜索服务： package com.xuecheng.learning.client;import com.xuecheng.framework.domain.course.TeachplanMediaPub;import org.springframework.cloud.openfeign.FeignClient;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;@FeignClient(value = "xc‐service‐search")public interface CourseSearchClient {@GetMapping(value="/getmedia/{teachplanId}")public TeachplanMediaPub getmedia(@PathVariable("teachplanId") String teachplanId);} 自定义错误代码我们在 com.xuecheng.framework.domain.learning.response 包下自定义一个错误消息模型 package com.xuecheng.framework.domain.learning.response;import com.xuecheng.framework.model.response.ResultCode;import lombok.ToString;@ToStringpublic enum LearningCode implements ResultCode {LEARNING_GET_MEDIA_ERROR(false,23001,"学习中心获取媒资信息错误！");//操作代码boolean success;//操作代码int code;//提示信息String message;private LearningCode(boolean success, int code, String message){this.success = success;this.code = code;this.message = message;}@Overridepublic boolean success() {return success;}@Overridepublic int code() {return code;}@Overridepublic String message() {return message;} } 该消息模型基于 ResultCode 来实现，代码如下 package com.xuecheng.framework.model.response;/ Created by mrt on 2018/3/5. 10000-- 通用错误代码 22000-- 媒资错误代码 23000-- 用户中心错误代码 24000-- cms错误代码 25000-- 文件系统/public interface ResultCode {//操作是否成功,true为成功，false操作失败boolean success();//操作代码int code();//提示信息String message(); 从 ResultCode 中我们可以看出，我们约定了用户中心的错误代码使用 23000，所以我们定义的一些错误信息的代码就从 23000 开始计数。 Service 在学习服务中定义 service 方法，此方法远程请求课程管理服务、媒资管理服务获取课程学习地址。 package com.xuecheng.learning.service.impl;import com.netflix.discovery.converters.Auto;import com.xuecheng.framework.domain.course.TeachplanMediaPub;import com.xuecheng.framework.domain.learning.response.GetMediaResult;import com.xuecheng.framework.exception.ExceptionCast;import com.xuecheng.framework.model.response.CommonCode;import com.xuecheng.learning.client.CourseSearchClient;import com.xuecheng.learning.service.LearningService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;@Servicepublic class LearningServiceImpl implements LearningService {@AutowiredCourseSearchClient courseSearchClient;/ 远程调用搜索服务获取已发布媒体信息中的url @param courseId 课程id @param teachplanId 媒体信息id @return/@Overridepublic GetMediaResult getMediaPlayUrl(String courseId, String teachplanId) {//校验学生权限,是否已付费等//远程调用搜索服务进行查询媒体信息TeachplanMediaPub mediaPub = courseSearchClient.getmedia(teachplanId);if(mediaPub == null) ExceptionCast.cast(CommonCode.FAIL);return new GetMediaResult(CommonCode.SUCCESS, mediaPub.getMediaUrl());} } Controller 调用 service 根据课程计划 id 查询视频播放地址： @RestController@RequestMapping("/learning/course")public class CourseLearningController implements CourseLearningControllerApi {@AutowiredLearningService learningService;@Override@GetMapping("/getmedia/{courseId}/{teachplanId}")public GetMediaResult getMediaPlayUrl(@PathVariable String courseId, @PathVariable String teachplanId) {//获取课程学习地址return learningService.getMedia(courseId, teachplanId);} } 测试使用 swagger-ui 或postman 测试学习服务查询课程视频地址接口。 0x05 前端开发需求分析需要在学习中心前端页面需要完成如下功能： 1、进入课程学习页面需要带上课程 Id参数及课程计划Id的参数，其中课程 Id 参数必带，课程计划 Id 可以为空。 2、进入页面根据课程 Id 取出该课程的课程计划显示在右侧。 3、进入页面后判断如果请求参数中有课程计划 Id 则播放该章节的视频。 4、进入页面后判断如果课程计划id 为0则需要取出本课程第一个课程计划的Id，并播放第一个课程计划的视频。进入到模块 xc-ui-pc-leanring/src/module/course api方法 let sysConfig = require('@/../config/sysConfig')let apiUrl = sysConfig.xcApiUrlPre;/获取播放地址/export const get_media = (courseId,chapter) => {return http.requestGet(apiUrl+'/api/learning/course/getmedia/'+courseId+'/'+chapter);} 配置代理在 Nginx 中的 ucenter.xuecheng.com 虚拟主机中配置 /api/learning/ 的路径转发，此url 请转发到学习服务。学习服务upstream learning_server_pool{server 127.0.0.1:40600 weight=10;}学成网用户中心server {listen 80;server_name ucenter.xuecheng.com;个人中心location / {proxy_pass http://ucenter_server_pool;}后端搜索服务location /openapi/search/ {proxy_pass http://search_server_pool/search/; }学习服务location ^~ /api/learning/ {proxy_pass http://learning_server_pool/learning/;} } 视频播放页面 1、如果传入的课程计划id为0则取出第一个课程计划id 在 created 钩子方法中完成 created(){//当前请求的urlthis.url = window.location//课程idthis.courseId = this.$route.params.courseId//章节idthis.chapter = this.$route.params.chapter//查询课程信息systemApi.course_view(this.courseId).then((view_course)=>{if(!view_course || !view_course[this.courseId]){this.$message.error("获取课程信息失败，请重新进入此页面！")return ;}let courseInfo = view_course[this.courseId]console.log(courseInfo)this.coursename = courseInfo.nameif(courseInfo.teachplan){console.log("准备开始播放视频")let teachplan = JSON.parse(courseInfo.teachplan);this.teachplanList = teachplan.children;//开始学习if(this.chapter == "0" || !this.chapter){//取出第一个教学计划this.chapter = this.getFirstTeachplan();console.log("第一个教学计划id为 ",this.chapter);this.study(this.chapter);}else{this.study(this.chapter);} }})}, 取出第一个章节 id，用户未输入课程计划 id 或者输入为 0 时，播放第一个。 //取出第一个章节getFirstTeachplan(){for(var i=0;i<this.teachplanList.length;i++){let firstTeachplan = this.teachplanList[i];//如果当前children存在，则取出第一个返回if(firstTeachplan.children && firstTeachplan.children.length>0){let secondTeachplan = firstTeachplan.children[0];return secondTeachplan.id;} }return ;}, 开始学习： //开始学习study(chapter){// 获取播放地址courseApi.get_media(this.courseId,chapter).then((res)=>{if(res.success){let fileUrl = sysConfig.videoUrl + res.fileUrl//播放视频this.playvideo(fileUrl)}else if(res.message){this.$message.error(res.message)}else{this.$message.error("播放视频失败，请刷新页面重试")} }).catch(res=>{this.$message.error("播放视频失败，请刷新页面重试")});}, 2、点击右侧课程章节切换播放在原有代码基础上添加 click 事件，点击调用开始学习方法（study）。 <li v‐if="teachplan_first.children!=null" v‐for="(teachplan_second, index) inteachplan_first.children"><i class="glyphicon glyphicon‐check"></i><a :href="url" @click="study(teachplan_second.id)">{ {teachplan_second.pname} }</a></li> 3、地址栏路由url变更这里需要注意一个问题，在用户点击课程章节切换播放时，地址栏的 url 也应该同步改变为当前所选择的课程计划 id 4、在线学习按钮将 learnstatus 默认更改为 1，这样就能显示出马上学习的按钮，方便我们后续的集成测试。文件路径为 xc-ui-pc-static-portal/include/course_detail_dynamic.html 部分代码块如下 <script>var body= new Vue({ //创建一个Vue的实例el: "body", //挂载点是id="app"的地方data: {editLoading: false,title:'测试',courseId:'',charge:'',//203001免费,203002收费learnstatus: 1 ,//课程状态，1：马上学习，2：立即报名、3：立即购买course:{},companyId:'template',company_stat:[],course_stat:{"s601001":"","s601002":"","s601003":""} }, 简单的测试访问在线学习页面：http://ucenter.xuecheng.com//learning/课程id/课程计划id 通过 url 传入两个参数：课程id 和课程计划id 如果没有课程计划则传入0 测试项目如下： 1、传入正确的课程id、课程计划id，自动播放本章节的视频 2、传入正确的课程id、课程计划id传入0，自动播放第一个视频 3、传入错误的课程id 或课程计划id，提示错误信息。 4、通过右侧章节目录切换章节及播放视频。访问： http://ucenter.xuecheng.com//learning/4028e58161bcf7f40161bcf8b77c0000/4028e58161bd18ea0161bd1f73190008 传入正确的课程id、课程计划id，自动播放本章节的视频 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ef0xxym7-1595567273153)(https://qnoss.codeyee.com/20200704_15/image17)] 传入正确的课程id、课程计划id传入0，自动播放第一个视频访问 http://ucenter.xuecheng.com//learning/4028e58161bcf7f40161bcf8b77c0000/0 识别出第一个课程计划的 id 需要注意的是这里的 chapter 参数是我自己在 study 函数里加上去的，可以忽略。传入错误的课程id或课程计划id，提示错误信息。通过右侧章节目录切换章节及播放视频。点击章节即可播放，但是点击制定章节后 url 没有发生改变，这个问题暂时还没有解决，关注笔记后面的内容。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TOGdxwb4-1595567273158)(https://qnoss.codeyee.com/20200704_15/image20)] 完整的测试准备工作启动 RabbitMQ，启动 Logstash、ElasticSearch 建议把所有后端服务都开起来启动前端静态门户、启动 nginx 、启动课程管理前端我们整理一下测试的流程上传两个媒资视频文件，用于测试进入到课程管理，为课程计划选择媒资信息发布课程，等待 logstash 将数据采集到 ElasticSearch 的索引库中进入学成网主页，点击课程，进入到搜索门户页面搜索课程，进入到课程详情页面点击开始学习，进入到课程学习页面，选择课程计划中的一个章节进行学习。 1、上传文件首先我们使用之前开发的媒资管理模块，上传两个视频文件用于测试。第一个文件上传成功一些问题在上传第二个文件时，发生了错误，我们来检查一下问题出在了哪里在媒体服务的控制台中可以看到，在 mergeChunks 方法在校验文件 md5 时候抛出了异常我们在 MD5 校验这里打个断点，重新上传文件，分析一下问题所在。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OpEMZGI8-1595567273166)(https://qnoss.codeyee.com/20200704_15/image23)] 单步调试后发现，合并文件后的MD5值与用户上传的源文件值不相等方案1：删除本地分块文件重新尝试上传考虑到可能是在用户上传完视频的分块文件时发生了一些问题，导致合并文件后与源文件的大小不等，导致MD5也不相同，这里我们把这个视频上传到本地的文件全部删除，在媒资上传页面重新上传文件。对比所有分块文件的字节大小和本地源文件的大小，完全是相等的删除所有文件后重新上传，md5值还是不等，考虑从调试一下文件合并的代码。方案2：检查前端提交的MD5值是否正确在查阅是否有其他的MD5值获取方案时，发现了一个使用 windows 本地命令获取文件MD5值的方法 certutil -hashfile .\19-在线学习接口-集成测试.avi md5 惊奇的发现，TM的原来是前端那边转换的MD5值不正确，后端这边是没有问题的。从前面的图可以看出，本地和后端转换的都是以一个 f6f0 开头的MD5值那么问题就出现在前端了，还需要花一些时间去分析一下，这里暂时就先告一段落，因为上传了几个文件测试中只有这一个文件出现了问题。 2、为课程计划选择媒资信息进入到一个课程的管理页面 http://localhost:12000//course/manage/baseinfo/4028e58161bcf7f40161bcf8b77c0000 将刚才我们上传的媒资文件的信息和课程计划绑定选择效果如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-epKaqzCD-1595567273178)(https://qnoss.codeyee.com/20200704_15/image29)] 2、发布课程，等待 logstash 从 course_pub 以及 teachplan_media_pub 表中采集数据到 ElasticSearch 当中发布成功后，我们可以从 teachplan_media_pub 表中看到刚才我们发布的媒资信息再观察 Logstash 的控制台，发现两个 Logstash 的实例都对更新的课程发布信息进行了采集 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hTUve2ik-1595567273183)(https://qnoss.codeyee.com/20200704_15/image32)] 3、前端门户测试打开我们的门户主站 http://www.xuecheng.com/ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4wZe9R84-1595567273185)(https://qnoss.codeyee.com/20200704_15/image33)] 点击导航栏的课程，进入到我们的搜索门户页面如果无法进入到搜索门户，请检查你的 xc-ui-pc-portal 前端工程是否已经启动进入到搜索门户后，可以看到一些初始化时搜索的课程数据，默认是搜索第一页的数据，每页2个课程。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BJ1AKoJb-1595567273187)(https://qnoss.codeyee.com/20200704_15/image34)] 我们可以测试搜索一下前面我们选择媒资信息时所用的课程点击课程，进入到课程详情页面，然后再点击开始学习。点击马上学习后，会进入到该课程的在线学习页面，默认自动播放我们第一个课程计划中的视频。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tcuLWnf2-1595567273193)(https://qnoss.codeyee.com/20200704_15/image37)] 我们可以在右侧的目录中选择第二个课程计划，会自动播放所选的课程计划所对应的媒资视频播放地址，该播放地址正是我们刚才通过 Logstash 自动采集到 ElasticSearch 的索引信息，效果图如下 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cvi9Dr0Y-1595567273195)(https://qnoss.codeyee.com/20200704_15/image38)] 四、待完善的一些功能课程发布前，校验课程计划里面是否包含二级课程计划课程发布前，校验课程计划信息里面是否全部包含媒资信息删除媒资信息，并且同步删除ES中的索引在获取该课程的播放地址时校验用户的合法、在线学习页面，点击右侧目录中的课程计划同时改变url中的课程计划地址视频文件 19-在线学习接口-集成测试.avi 前端上传时提交的MD5值不正确 😁 认识作者作者：👦 LCyee ，全干型代码🐕 自建博客：https://www.codeyee.com 记录学习以及项目开发过程中的笔记与心得，记录认知迭代的过程，分享想法与观点。 CSDN 博客：https://blog.csdn.net/codeyee 记录和分享一些开发过程中遇到的问题以及解决的思路。欢迎加入微服务练习生的队伍，一起交流项目学习过程中的一些问题、分享学习心得等，不定期组织一起刷题、刷项目，共同见证成长。本篇文章为转载内容。原文链接：https://blog.csdn.net/codeyee/article/details/107558901。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-12-16 12:41:01

转载

转载文章

[转载]Linux的常见问题解答和管理技巧2

...相应内容。六、如何设置声卡　　不用我说，这可是十分要紧的工作！不过如果你安装了RED HAT Linux，则这项工作就简单了！　　用root登录系统，运行/usr/sbin/sndconfig。出现选择声卡类型的画面。一般声卡可以选取Sound Blaster 。　　选完声卡后再设置有关的资源。用TAB键结合方向键作出选择后，按OK，如果听到Linus（Linux的创始人）说话的声音，就说明声卡设置成功了。真像老式DOS游戏的声卡设置…… 七、如何设置显卡　　要设置好你的显卡，首先，要知道你的显卡的型号，是什么公司出的，什么样的类型的显卡，显存有几MB，还要知道显卡的显示芯片是什么类型的，是 ALG2302的，还是SIS6326的，还是Savage3D的，等；然后，在超级用户的权限下，你可以运行界面比较友好的Xconfigurator 工具，这里的X记住一定要大写的，一步一步跟着指导来选择，应该不是很难的，当选择你的显卡的芯片的时钟时，不用选择它，让测试程序自动检查；最后，还要知道你的显示器的类型，是VGA的，还是SVGA的，以及水平和垂直分辩率。你还可以运行界面不友好的xfree86，如果你比较精通Linux的话，用 xfree86命令配置的X Windows效果比Xconfigurator好很多的。界面最友好的，当属XF86Setup工具，若你有安装这个工具的话，不妨就用这个工具来设置你的显卡吧。八、如何设置网卡九、如何播放CD音乐　　声卡设置好了，可以在光驱中插入一张CD，用装载命令mount将光盘载入，然后输入cdp命令就可以播放了。在屏幕上可以看到CD的音轨清单，小键盘的9是播放，7是停止，6进到下一音轨，4退到前一音轨，0退出播放程序，2弹出CD，8是暂停。　　如果是在X-Window中，可以用xplaycd播放CD，这是一个有图形界面的播放器，按钮及功能一目了然，这里就不多说了。 10、如何播放VCD影碟 11、如何拨号上网 12、Linux下能玩游戏吗　　光盘中有bsd-games-2.1-3.src.rpm文件包，用RPM命令进行安装，然后到安装目录中去找游戏吧。不过这些游戏都不够精致，如果你想玩好的，就须要进入X-Window，acm是空战模拟游戏，paradise和xpilot是联网战斗游戏，xdemineur是挖地雷（没想到吧），xjewel是俄罗斯方块，xboard是国际象棋，xpat2是扑克牌游戏，xboing是弹珠台游戏，还有Doom——大名鼎鼎的第一人称射击游戏！这些游戏有的可以直接调出，有的须要用RPM命令安装。所有的RPM包都在安装光盘中的srpms目录下，自己去看看吧。十.用xvidtune调整你的显示器大家会发现装了linux之后在windows下用的好好的显示器有时进到linux的xwindows里后就歪掉了，调整好之后回到windows后windows的桌面也外调了，来回启动系统每次都要调整很麻烦的，这里介绍一个办法一劳永逸 j进入linux启动x在xterm里执行xvidtune,会弹出这个软件的窗口，点Auto然后点Left,Right等按钮调整你的显示器到最佳的位置，然后点界面上的Show按钮会得到类似这样的输出： "1152x864" 121.50 1152 1232 1360 1568 864 865 868 911 +hsync -vsync 然后退出这个软件，修改你的/etc/X11/XF86Config-4文件在 Section "Monitor" Identifier "AS 786T" VendorName "Unknown" ModelName "Unknown" HorizSync 30 - 87 VertRefresh 50 - 160 Option "dpms" EndSection 里加上刚才的输出，我的是： Section "Monitor" Identifier "AS 786T" VendorName "Unknown" ModelName "Unknown" HorizSync 30 - 87 VertRefresh 50 - 160 Modeline "1152x864" 121.50 1152 1232 1360 1568 864 865 868 911 +hsync -vsync Option "dpms" EndSection 保存然后重起试试看吧十一.问：我的机器是windows和linux双系统，如何改变grub默认启动的系统？答：这需要修改/boot/grub/grub.conf。举一个例子你就明白了。假设你的/boot/grub/grub.conf是这样子的： default=0 timeout=10 splashimage=(hd0,7)/grub/splash.xpm.gz title Red Hat Linux (2.4.18-14) root (hd0,7) kernel /vmlinuz-2.4.18-14 ro root=LABEL=/ initrd /initrd-2.4.18-14.img title DOS rootnoverify (hd0,0) chainloader +1 那么你的grub会默认启动Red Hat Linux (2.4.18-14)这个系统，把default=0改成default=1，那么grub会默认启动DOS这个系统。注意，这里的要点是：你想默认启动第n个title所指的系统，那么default应该是等于n-1 十二.问：我的文本控制台怎么总是出现乱码呢？答：这是因为你安装了中文支持的缘故。解决的方法是安装一个zhcon(一个快速地外挂式CJK(中文/日文/韩文)的多内码平台)，我把他放在附件中提供大家下载。关于zhcon的更进一步的消息，大家可以到他的官方主页zhcon.gnuchina.org查看。安装和使用请参考这个连接 http://hepg.sdu.edu.cn/Service/tips/zhcon_manual.html zhcon下载连接： http://zhcon.gnuchina.org/download/...on-0.2.1.tar.gz 十三.问：我在安装一个软件的时候，提示我缺少一个.so文件，安装无法继续，怎么办？答：.so文件就像windows中的.dll文件一样，是库文件。一个程序的正常安装和运行需要特定的库文件的支持。所以你需要去找到包含这个.so的包装上。去 http://www.rpmfind.net用你缺的那个.....剿枰?rpm包十四.我访问windows分区时发现所有windows分区中的文件和文件夹名中的中文全变成问号，怎么办？答：在第三贴中我们讲解了通过编辑/etc/fstab实现在linux中访问windows的fat32分区。同样，我们可以通过进一步修改 /etc/fstab来实现中文文件名显示。只要把/dev/hda1 /mnt/c vfat default 0 0中的default全改为iocharset=cp936就行了。十五.我的rh8.0中的XMMS不好使，不能播放MP3，怎么办？答：这是因为rh公司怕别人告他侵权，所以在rh8.0中去掉了XMMS对MP3的支持，8.0以前的版本都是好使的。在8.0中要解决也很简单，装一个插件就行了。这个插件我放在本贴的附件里，rpm格式，经winrar压缩附件: http://www.chinalinuxpub.com/vbbfor...s=&postid=86299 十六.问：我在linux中怎样才能使用windows分区呢？答：先说一点背景知识。linux支持很多种文件系统，包括windows的fat32和ntfs。对fat32的支持已经很好，可以直接使用，而对ntfs 的支持还不是太好，只能读，而写是极危险的，并且对ntfs的支持不是默认的，也就是说你想要使用ntfs的话，需要重新编译内核。鉴于重编内核对于新手的复杂性，这里只讲解使用fat32分区的方法下面给出上述问题的两种解决方案：1.在安装系统（linux），进行到分区选择挂载点时，你可以建立几个挂载点，如/mnt/c，/mnt/d等，然后选择你的windows fat32分区，把它们分别挂载到前面建立的挂载点即可。（注意，正如前面所说，在这里你不能把一个ntfs分区挂载到一个挂载点，应为ntfs不是默认支持的。）这样你装好系统后就能直接使用你的windows fat32分区了。例如，你把windows的c盘（linux中的/dev/hda1）挂载到/mnt/c，那么你就能在/mnt/c目录中找到你的c 盘中的全部数据。2. 如果你在安装系统时没有像方案1所说的那样挂载上你的fat32分区，没关系，仍然能够很方便的解决这个问题。首先，用一个文本编辑器（如vi）打开 /etc/fstab，在文件的最后加入类似如下的几行 /dev/hda1 /mnt/c vfat default 0 0 你所要做的修改就是，把/dev/hda1改成你要挂载的fat32分区在linux中的设备号，把/mnt/c改成相应的挂载点即可。注意，挂载点就是一个目录，这个目录要事先建立。举一个例子，我有三个fat32分区，在windows中是c,d,e盘，在linux中的设备号分别为 /dev/hda1,/dev/hda5,/dev/hda6。那么我就要先建立3个挂载点，如/mnt/c,/mnt/d,/mnt/e，然后在 /etc/fstab中加上这么几行： /dev/hda1 /mnt/c vfat default 0 0 /dev/hda5 /mnt/d vfat default 0 0 /dev/hda6 /mnt/e vfat default 0 0 保存一下退出编辑器。这样以后你重启机器后就能直接使用c,d,e这三个fat32格式的windows分区了十七.问：我的机器重装windows后，开机启动就直接进入了windows，原来的linux进不去了，怎么办？答：这是由于windows的霸道。重装windows后，windows重写了你的mbr，覆盖掉了grub。解决方法很简单：用你的linux第一张安装盘引导进入linx rescue模式（如何进入？你注意一下系统的提示信息就知道了），执行下面两条命令就可以了 chroot /mnt/sysimage 改变你的根目录 grub-install /dev/hda 安装grub到mbr 十八.问：我的linux开机直接进入文本界面，怎样才能让它默认进入图形界面？答：修改/etc/inittab文件，其中有一行id:3:initdefault，意思是说开机默认进入运行级别3（多用户的文本界面），把它改成id:5:initdefault，既开机默认进入运行级别5（多用户的图形界面）。这样就行了。十九.如何同时启动多个x 以前的帖子,估计很多人没看过,贴出来温习一下 Linux里的X-Windows以其独特的面貌和强大的功能吸引了很多原先对linux不感兴趣的人，特别是KDE和GNOME，功能强大不说，而且自带了很多很棒的软件，界面非常友好，很适合于初学者。下面告诉大家一个同时启动6个X的小技巧：在~/.bashrc中加入以下几行： alias X=startx -- -bpp 32 -quiet& alias X1=startx -- :1 -bpp 32 -quiet& alias X2=startx -- :2 -bpp 32 -quiet& alias X3=startx -- :3 -bpp 32 -quiet& alias X4=startx -- :4 -bpp 32 -quiet& alias X5=startx -- :5 -bpp 32 -quiet& 其中32是显示器的色彩深度,你应该根据自己的实际情况设置。之后运行 bash 使改变生效，以后只要依次运行X,X1,X2,X3,X4,X5就可以启动6个X-Windows了。二十.装了rpm的postgresql之后启动 /etc/init.d/postgresql start 是不能启动postgresql的tcp/ip连接支持的,所以打开/etc/init.d/postgresql这个文件把 su -l postgres -s /bin/sh -c "/usr/bin/pg_ctl -D $PGDATA -p /usr/bin/postmaster start > /dev/null 2>&1" < /dev/null 改为: su -l postgres -s /bin/sh -c "/usr/bin/pg_ctl -o -o -F -i -w -D $PGDATA -p /usr/bin/postmaster start > /dev/null 2>&1" < /dev/null 这样就可以启动数据库的tcp/ip链接了二十一.如何将man转存为文本文件以ls的man为例 man ls |col -b >ls.txt 将info变成文本,以make为例 info make -o make.txt -s 二十二.如何在文本模式下发送2进制文件首先检查系统有没有uuencode 和 uudecode如果没有从光盘上装 rpm -ivh sharutils-x.xx.x-x.rpm 假设要发送的文件是vpopmail-5.2.1.tar.gz执行 uuencode -m vpopmail-5.2.1.tar.gz vpopmail.tar.gz>encodefile 说明： uuenode是编码命令，－m是使用mime64编码，vpopmail-5.2.1.tar.gz是要编码的文件，vpopmail.tar.gz是如果解码后得到的文件名，encodefile是编码后的文件名。执行上述命令之后就可以通过mail命令发送编码后的文件了 mail chenlf@chinalinuxpub.com<encodefile 好了，现在我来接收邮件在控制台上输入mail命令： mail Mail version 8.1 6/6/93. Type ? for help. "/var/spool/mail/chenlf": 2 messages 2 new >N 1 chenlf@ns1.catv.net Mon Jun 10 16:44 17/363 N 2 root@ns2.catv.net Mon Jun 10 16:45 6091/371145 & 2 Message 2: From root@ns2.catv.net Mon Jun 10 16:45:28 2002 Date: Mon, 10 Jun 2002 16:44:51 +0800 From: root <root@ns2.catv.net> To: chenlf@chinalinuxpub.com begin-base64 644 vpopmai.tar.gz H4sIABr15TwAA+w9a2PbNpL7NfwVqNPbWIlFPSzbiR2n9SuxE7/OcuLNtdmU EiGLMUWqfFhWt7u//eYBgKRE2U7iTa+3VndjiQQGg5nBYDAYDC6H4XDgeH51 yW7ajdpf/h2fer1VX1lagr/1+spyq/BXff5SX2mtNBZXmovN5l/qjWZrqfEX sfRvwWbik8aJEwnxl7ifDofXlLvp/Z/0c1nk/8uN/777NuqNen251ZrB/+XF pcUG8r/ZbC0vL9ZXoPwi/O8von73qEx//sP5bwHHxanT8aUIe2IrDBIZJLFl 7QVJFFovpZOkkYxFL4yEFhVLCKhk1W2xG45E1wnEnohlIsJAiksvSlLHF24I JQORhKIjRdKXYhh5Ayca6xcAD8DQm4HT7XuB/EGcSXgbPErEyAkSrNp3LqVw grGoyaRbGzpxPHJFGssotq0Gtw6l9gTgJbixode9EOlQDMaTmEjE/AerydVc rAY4jJzIFY7vC3wL2DgJvJIxIjFwkm6fWkfw1KoAIti/EgkWc3A6YRp05ReB aeXAQH34GoXOwAvOVUnoEnwRYRqJeJAMgczRpYzEyEv6YQoUH8oACltLtjjD Rr1YOCJ2BkPgJop1IuJu5A0TYh9xIdQwfrCWTdt9pMKvaZg4j5jT3PgojC5+ sFZswM0LAJzvSyhGXQSCOmLoO9DtEOAicBCD2qUT1agAg44BSd+1niIEzVPs ................. ................. ................. & s 2 encodefile "encode" [New file] & q 然后进行解码 uudecode encodefile ls encodefile vpopmai.tar.gz tar zxvf vpopmail.tar.gz OK了二十三.将 man page 转成 HTML 格式使用 man2html 这个指令，就可以将 man page 转成 HTML 格式了。用法是： man2html filename > htmlfile.html 二十四.如何在gnome和kde之间切换。如果你是以图形登录方式登录linux，那么点击登录界面上的session（任务）即可以选择gnome和kde。如果你是以文本方式登录，那执行switchdesk gnome或switchdesk kde，然后再startx就可以进入gnome或kde。 25...tar，.tar.gz，.bz2，.tar.bz2，.bz，.gz是什么文件，如何解开他们？他们都是文件(压缩)包。 .tar：把文件打包，不压缩：tar cvf .tar dirName 解开：tar xvf .tar .tar.gz：把文件打包并压缩：tar czvf .tar.gz dirName 解开：tar xzvf .tar.gz .bz2：解开：bzip2 -d .bz2 .bz：解开：bzip -d .bz .gz：解开：gzip -d .gz 26.linux下如何解开.zip，.rar压缩文件？ rh8下有一个图形界面的软件file-roller可以做这件事。令外可以用unzip .zip解开zip文件，unrar .rar解开rar文件，不过unrar一般系统不自带，要到网上下载。 27.linux下如何浏览.iso光盘镜像文件？ a.建一个目录，如：mkdir a b.把iso文件挂载到该目录上：mount -o loop xxxx.iso a 现在目录a里的内容就是iso文件里的内容了。 28.linux下如何配置网络？用netconfig。“IP address:”就是要配置的IP地址，“Netmask:”子网掩码，“Default gateway (IP):”网关，“Primary nameserver:”DNS服务器IP。 29.如何让鼠标支持滚轮？在配置鼠标时，选择微软的鼠标，并正确选择端口如ps2,usb等 30.如何让控制台支持中文显示？安装zhcon。zhcon需要libimm_server.so和libpth.so.13这两个库支持。一般的中文输入法应该都有libimm_server.so。libpth.so.13出自pth-1.3.x。把这两个文件放到/usr/lib下就行了。 31.如何配置grub？修改/boot/grub/grub.conf文件。其中 “default=n”(n是个数字)是grub引导菜单默认被选中的项，n从0开始，0表示第一项，1表示第二项，依此类推。 “timeout=x”(x是一个数)是超时时间，单位是妙。也就是引导菜单显示后，如果x秒内用户不进行选择，那么grub将启动默认项。 “splashimage =xxxxxx”，这是引导菜单的背景图，先不理他。其它常用项我用下面的例子来说明： title Red Hat 8.0 root (hd1,6) kernel /boot/vmlinuz-2.4.18-14 ro root=/dev/hdb7 initrd /boot/initrd-2.4.18-14.img 其中"Red Hat 8.0"是在启动菜单列表里显示的名字 root (hdx,y)用来指定你的boot分区位置，如果你没有分boot分区（本例就没分boot分区），那就指向根分区就行了，hdx是linux所在硬盘，hd0是第一块硬盘，hd1是第二块，依此类推。y是分区位置，从0开始，也就是等于分区号减一，比如你要指向的分区是hdx7，那么y就是6，如果是hdx1，那y就是0。注意root后面要有一个空格。 kernel /boot/vmlinuz-2.4.18-14，其中"/boot/vmlinuz-2.4.18-14"是你要用的内核路径，如果你编译了心内核，把它改成你的新内核的路径就行了。 ro就不用管，写上不会有错。 root=/dev/hdxx指定根分区，本例是hdb7，所以root=/dev/hdb7 initrd xxxxxxxxxxxxx这行不要也行，目前我还不清楚它是做什么用的。上面是linux的，下面是windows的 title windows 98 rootnoverify (hd0,0) chainloader +1 title xxxxxxx不用解释了，上面有解释。 rootnoverify (hdx,y)用来指定windows所在分区，x，y跟上面一样，注意rootnoverify后有空格。 chainloader +1照抄就行，注意空格。本篇文章为转载内容。原文链接：https://blog.csdn.net/gudulyn/article/details/764890。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-27 09:27:49

255

转载

转载文章

[转载]Springboot 页面访问不到静态资源Failed to load resource: the server responded with a status of 404 ()

...到静态资源问题：在HTML文件中引入图片，但是浏览器访问不到图片。 index.html： <!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Helllo Jenkins</title></head><body><h1 style="text-align: center;">This is my first demo for Jenkins </h1><div align="center"><img th:src="@{/static/doudou.jpg}" style="width: 80%;height: 70%"></div></body></html> 浏览器错误信息： Failed to load resource: the server responded with a status of 404 () 解决方法：在配置文件application.properties设置静态资源的访问路径只有静态资源的访问路径为/static/时，才会处理请求spring.mvc.static-path-pattern=/static/ 重新启动后、完美解决问题本篇文章为转载内容。原文链接：https://lebron.blog.csdn.net/article/details/117636422。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-19 11:16:32

248

转载

VUE

vue图片全屏显示不压缩

..."> <img class="img-fullscreen" :src="imageUrl" @click="toggleFullScreen" /> </div> </template> <script> export default { data() { return { isFullScreen: false, imageUrl: "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" }; }, methods: { toggleFullScreen() { this.isFullScreen = !this.isFullScreen; if (this.isFullScreen) { document.documentElement.requestFullscreen(); } else { document.exitFullscreen(); } } } }; </script> <style scoped> .fullscreen { 最大宽度: 100%; 最大高度: 100%; } .img-fullscreen { 最大宽度: 100%; 最大高度: 100%; cursor: pointer; } </style> 这里采用了作为图像标签，并设定了最大宽度和最大高度为100%以保证图像能填满显示器而不会被压缩。因为需要达成全屏成效，所以需要增加fullscreen类，并在鼠标点击事件中借助于document.documentElement.requestFullscreen()来达成全屏，并在离开全屏状态时采用document.exitFullscreen()。上面的代码中采用了一个可用的图像，可以采用自己的图像替换。只需把imageUrl的值更改为你的图像链接即可。此外，当鼠标移上去时，采用了鼠标指针来给用户明确的反馈。

2023-04-27 22:56:48

119

码农

转载文章

[转载]Java爬虫学习一一Jsoup爬取彼岸桌面分类下的图片

...p/7355577.html Jsoup教程：https://www.jianshu.com/p/fd5caaaa950d 接下来，我通过Jsoup来实现爬取彼岸桌面里面的图片进行爬虫学习！！！我用的开发工具是IDEA，jdk是1.7版本，项目结构大致如下所示：一、页面分析首先来分析一下彼岸桌面的网页的结构：我们第一个看到的是网站的域名为http://www.netbian.com/，它有如上所示的分类，我们尝试着点开一些分类去看一下他的链接。通过点击每个分类，发现不同的分类下，地址栏显示为域名后面拼接这对应分类的拼音，但在分类为王者荣耀之后的拼接的确是“s/分类拼音”。这样我们可以创建一个枚举类，将所有分类集中管理。在common包下创建一个Kind枚举类： package com.asahi.common;/ 分类的枚举/public enum Kind {RILI("rili"), DONGMAN("dongman"), FENGJING("fengjing"), MEINV("meinv"), YOUXI("youxi"), YINGSHI("yingshi"),DONGTAI("dongtai"), WEIMEI("weimei"), SHEJI("sheji"), KEAI("keai"), QICHE("qiche"), HUAHUI("huahui"),DONGWU("dongwu"), JIERI("jieri"), RENWU("renwu"), MEISHI("meishi"), SHUIGUO("shuiguo"), JIANZHU("jianzhu"),TIYU("tiyu"), JUNSHI("junshi"), FEIZHULIU("feizhuliu"), QITA("qita"), WANGZHERONGYAO("s/wangzherongyao"), HUYAN("s/huyan"), LOL("s/lol");String kind;Kind(String kind) {this.kind = kind;}public static boolean contains(String test) {for (Kind c : Kind.values()) {if (c.kind.equals(test)) {return true;} }return false;} } 这里我添加了一个比较的方法供之后判断输入的分类名是否包含在这些分类里面。接下来我们在分析分类面的展示情况，以美女分类页面为例(●´∀｀●)，最下边有分页，如果只获取这个页面的图片并不能获取所有美女图，我们还需要点击每一个分页，从分页中获取所有的图片。通过分析发现，第一页的链接是在原有链接基础上拼接“/index.htm”，从第二页之后拼接的是“/index_页号.htm”。这样我们只需要获取总页数在依次遍历拼接就可以了，现在的问题是如何获取总页数，我一开始的想法是获取分页中“共167页”这个标签后再只保留数字就可以个，但发现运行后获取不到该元素节点，经过排查了解到这个标签是通过js生成的，于是我转换了思路，通过获取最后一个页号来得到一共分了多少页 Document root_doc = Jsoup.connect("http://www.netbian.com/" + kind + "/").get();Elements els = root_doc.select("main .page a");//这里els.eq(els.size() - 2的原因是后边确定按钮用的是a标签要去掉，再去掉一个“下一页”标签Integer page = Integer.parseInt(els.eq(els.size() - 2).text()); 分类页中图片所在的标签结构为：分类页面下的图片不是我们想要的，我们想要的是点击进去详细页的高清大图，所以需要获取a标签的链接，再从这个链接中获取真正想要的图片。详细页中图片所在的标签结构为：二、代码实现到这里分类页分析的差不多了，我们通过代码来进行获取图片。首先导入Jsoup的jar包：jsoup-1.12.1.jar，如果采用Maven请导入下边的依赖。 <dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.12.1</version></dependency> 在utils创建JsoupPic类，并添加getPic方法，代码如下： public static void getPic(String kind) throws Exception {//get请求方式进行请求Document root_doc = Jsoup.connect("http://www.netbian.com/" + kind + "/").get();//获取分页标签，用于获取总页数Elements els = root_doc.select("main .page a");Integer page = Integer.parseInt(els.eq(els.size() - 2).text());for (int i = 1; i < page; i++) {Document document = null;//这里判断的是当前页号是否为1，如果为1就不拼页号，否则拼上对应的页号if (i == 1) {document = Jsoup.connect("http://www.netbian.com/" + kind + "/index.htm").get();} else {document = Jsoup.connect("http://www.netbian.com/" + kind + "/index_" + i + ".htm").get();}//获取每个分页链接里面a标签的链接，进入链接页面获取当前图拼的大尺寸图片Elements elements = document.select("main .list li a");for (Element element : elements) {String href = element.attr("href");String picUrl = "http://www.netbian.com" + href;Document document1 = Jsoup.connect(picUrl).get();Elements elements1 = document1.select(".endpage .pic p a img");//获取所有图片的链接System.out.println(elements1);} }} 在分类页中有一个隐藏的问题图片：正常的图片链接都是以“/”开头，以“.htm”结尾，而每个分类下的第三张图片的链接都是“http://pic.netbian.com/”，如果不过滤的话会报如下错误：所以这里必须要判断一下: Elements elements = document.select("main .list li a");for (Element element : elements) {String href = element.attr("href");//判断是否是以“/”开头if (href.startsWith("/")) {String picUrl = "http://www.netbian.com" + href;Document document1 = Jsoup.connect(picUrl).get();Elements elements1 = document1.select(".endpage .pic p a img");System.out.println(elements1);} } 到这里，页面就已经分析好了，问题基本上已经解决了，接下来我们需要将图片存到我们的系统里，这里我将图片保存到我的电脑桌面上，并按照分类来存储图片。首先是要获取桌面路径，在utils包下创建Download类，添加getDesktop方法，代码如下： public static File getDesktop(){FileSystemView fsv = FileSystemView.getFileSystemView();File path=fsv.getHomeDirectory(); return path;} 接着我们再该类中添加下载图片的方法： //urlPath为网络图片的路径，savePath为要保存的本地路径（这里指定为桌面下的images文件夹）public static void download(String urlPath,String savePath) throws Exception {// 构造URLURL url = new URL(urlPath);// 打开连接URLConnection con = url.openConnection();//设置请求超时为5scon.setConnectTimeout(51000);// 输入流InputStream is = con.getInputStream();// 1K的数据缓冲byte[] bs = new byte[1024];// 读取到的数据长度int len;// 输出的文件流File sf=new File(savePath);int randomNo=(int)(Math.random()1000000);String filename=urlPath.substring(urlPath.lastIndexOf("/")+1,urlPath.length());//获取服务器上图片的名称filename=new java.text.SimpleDateFormat("yyyy-MM-dd-HH-mm-ss").format(new Date())+randomNo+filename;//时间+随机数防止重复OutputStream os = new FileOutputStream(sf.getPath()+"\\"+filename);// 开始读取while ((len = is.read(bs)) != -1) {os.write(bs, 0, len);}// 完毕，关闭所有链接os.close();is.close();} 写好后，我们再完善一下JsouPic中的getPic方法。 public static void getPic(String kind) throws Exception {//get请求方式进行请求Document root_doc = Jsoup.connect("http://www.netbian.com/" + kind + "/").get();//获取分页标签，用于获取总页数Elements els = root_doc.select("main .page a");Integer page = Integer.parseInt(els.eq(els.size() - 2).text());for (int i = 1; i < page; i++) {Document document = null;//这里判断的是当前页号是否为1，如果为1就不拼页号，否则拼上对应的页号if (i == 1) {document = Jsoup.connect("http://www.netbian.com/" + kind + "/index.htm").get();} else {document = Jsoup.connect("http://www.netbian.com/" + kind + "/index_" + i + ".htm").get();}File desktop = Download.getDesktop();Download.checkPath(desktop.getPath() + "\\images\\" + kind);//获取每个分页链接里面a标签的链接，进入链接页面获取当前图拼的大尺寸图片Elements elements = document.select("main .list li a");for (Element element : elements) {String href = element.attr("href");if (href.startsWith("/")) {String picUrl = "http://www.netbian.com" + href;Document document1 = Jsoup.connect(picUrl).get();Elements elements1 = document1.select(".endpage .pic p a img");Download.download(elements1.attr("src"), desktop.getPath() + "\\images\\" + kind);} }} } 在Download类中，我添加了checkPath方法，用于判断目录是否存在，不存在就创建一个。 public static void checkPath(String savePath) throws Exception {File file = new File(savePath);if (!file.exists()){file.mkdirs();} } 最后在mainapp包内创建PullPic类，并添加主方法。 package com.asahi.mainapp;import com.asahi.common.Kind;import com.asahi.common.PrintLog;import com.asahi.utils.JsoupPic;import java.util.Scanner;public class PullPic {public static void main(String[] args) throws Exception {new PullPic().downloadPic();}public void downloadPic() throws Exception {System.out.println("启动程序>>\n请输入所爬取的分类：");Scanner scanner = new Scanner(System.in);String kind = scanner.next();while(!Kind.contains(kind)){System.out.println("分类不存在，请重新输入：");kind = scanner.next();}System.out.println("分类输入正确！");System.out.println("开始下载>>");JsoupPic.getPic(kind);} } 三、成果展示最终的运行结果如下：最终的代码已上传到我的github中，点击“我的github”进行查看。在学习Java爬虫的过程中，我收获了很多，一开始做的时候确实遇到了很多困难，这次写的获取图片也是最基础的，还可以继续深入。本来我想写一个通过多线程来获取图片来着，也尝试着去写了一下，越写越跑偏，暂时先放着不处理吧，等以后有时间再来弄，我想问题应该不大，只是考虑的东西有很多。希望大家多多指点不足，有哪些需要改进的地方，我也好多学习学习๑乛◡乛๑。本篇文章为转载内容。原文链接：https://blog.csdn.net/qq_39693281/article/details/108463868。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-06-12 10:26:04

130

转载

转载文章

[转载]opendaylight-O版本与openstack集成

...tallation.htmlodl-installation yum install python-networking-odl.noarch -y https://docs.openstack.org/networking-odl/latest/install/installation.htmlnetworking-odl-configuration systemctl restart neutron-server /etc/neutron/plugins/ml2 测试端口可连接性 curl -u admin:admin http://10.13.80.34:8181/controller/nb/v2/neutron/networks odl配置文件修改 etc/custom.properties ovsdb.l3.fwd.enabled=yes ovsdb.l3gateway.mac=0a:00:27:00:00:0d telnet 10.13.80.34 8181 netstat -nlp | grep 8181 telnet 127.0.0.1 8181 telnet 10.13.80.34 8181 systemctl status firewall iptables iptables -nvL iptables -F 清空iptables openstack server create --flavor tiny --image cirros --nic net-id=24449ee2-b84e-493f-8d76-139ac3e4f3cd --key-name mykey provider-instance nova service-list nova show ae5e26d1-c84d-40fa-bb27-f0b46d6a7061 查看虚机详情 ovs-vsctl set Open_vSwitch 89444614-3bf8-4d7a-b3a0-df5d20b48b7a other_config={'local_ip'='192.168.56.102'} ovs-vsctl set Open_vSwitch b084eccf-b92e-470c-8dff-8549e92c2104 other_config={'local_ip'='192.168.56.122'} ovs-vsctl list interface eth0 ovs-appctl fdb/show br-int [root@rcontroller01 ~] openstack security group rule list 2e19a748-9086-49f8-9498-01abc1a964fe 一个神奇的命令 +--------------------------------------+-------------+-----------+------------+--------------------------------------+ | ID | IP Protocol | IP Range | Port Range | Remote Security Group | +--------------------------------------+-------------+-----------+------------+--------------------------------------+ | 0184e6b3-4f7f-4fd5-8125-b80682e7ee48 | None | None | | 2e19a748-9086-49f8-9498-01abc1a964fe | | 1e0bfedc-8f25-408a-9328-708113bbbc52 | icmp | 0.0.0.0/0 | | None | | 39116d39-454b-4d82-867e-bbfd3ea63182 | None | None | | None | | 4032366f-3ac9-4862-85a7-c7411a8b7678 | None | None | | 2e19a748-9086-49f8-9498-01abc1a964fe | | dc7bc251-f0d0-456a-9102-c5b66646aa84 | tcp | 0.0.0.0/0 | 22:22 | None | | ddacf7ea-57ea-4c8a-8b68-093766284595 | None | None | | None | +--------------------------------------+-------------+-----------+------------+--------------------------------------+ dpif/dump-flows dp 想控制端打印dp中流表的所有条目。这个命令主要来与debugOpen Vswitch.它所打印的流表不是openFlow的流条目。它打印的是由dp模块维护的简单的流。如果你想查看OpenFlow条目，请使用ovs-ofctl dump-flows。dpif/del-fow dp 删除指定dp上所有流表。同上所述，这些不是OpenFlow流表。 ovs-appctl dpif/dump-flows br-int 创建网络 openstack network create --share --external --provider-physical-network provider --provider-network-type flat provider $ openstack subnet create --network provider \ --allocation-pool start=192.168.56.100,end=192.168.56.200 \ --dns-nameserver 8.8.8.8 --gateway 192.168.56.1 \ --subnet-range 192.168.56.0/24 provider openstack network create selfservice $ openstack subnet create --network selfservice \ --dns-nameserver 8.8.8.8 --gateway 192.168.1.1 \ --subnet-range 192.168.1.0/24 selfservice openstack router create router openstack router add subnet router selfservice openstack router set router --external-gateway provider openstack port list --router router +--------------------------------------+------+-------------------+-------------------------------------------------------------------------------+--------+ | ID | Name | MAC Address | Fixed IP Addresses | Status | +--------------------------------------+------+-------------------+-------------------------------------------------------------------------------+--------+ | bff6605d-824c-41f9-b744-21d128fc86e1 | | fa:16:3e:2f:34:9b | ip_address='172.16.1.1', subnet_id='3482f524-8bff-4871-80d4-5774c2730728' | ACTIVE | | d6fe98db-ae01-42b0-a860-37b1661f5950 | | fa:16:3e:e8:c1:41 | ip_address='203.0.113.102', subnet_id='5cc70da8-4ee7-4565-be53-b9c011fca011' | ACTIVE | +--------------------------------------+------+-------------------+-------------------------------------------------------------------------------+--------+ $ ping -c 4 203.0.113.102 创建虚机 openstack keypair list $ ssh-keygen -q -N "" $ openstack keypair create --public-key ~/.ssh/id_rsa.pub mykey openstack flavor list openstack image list openstack network list openstack server create --flavor tiny --image cirros --nic net-id=27616098-0374-4ab4-95a8-b5bf4839dcf8 --key-name mykey provider-instance 网络配置 python /usr/lib/python2.7/site-packages/networking_odl/cmd/set_ovs_hostconfigs.py --ovs_hostconfigs='{ "ODL L2": { "allowed_network_types": [ "flat", "vlan", "vxlan" ], "bridge_mappings": { "provider": "br-int" }, "supported_vnic_types": [ { "vnic_type": "normal", "vif_type": "ovs", "vif_details": {} } ] }, "ODL L3": {} }' ovs-vsctl list open . [‎2019/‎1/‎16 19:09] 高正伟: ovs-vsctl set Open_vSwitch . other_config:local_ip=hostip ovs-vsctl set Open_vSwitch . other_config:local_ip=192.168.56.122 ovs-vsctl set Open_vSwitch . other_config:remote_ip=192.168.56.122 ovs-vsctl remove interface tunca7b782f232 options remote_ip ovs-vsctl set Open_vSwitch . other_config:provider_mappings=provider:br-ex ovs-vsctl set Open_vSwitch . external_ids:provider_mappings="{\"provider\": \"br-ex\"}" 清空 ovs-vsctl clear Open_vSwitch . external_ids ovs-vsctl set-manager tcp:10.13.80.34:6640 ovs-vsctl set-controller br-ex tcp:10.13.80.34:6640 ovs-vsctl del-controller br-ex sudo neutron-odl-ovs-hostconfig ovs-vsctl show ovs-vsctl add-port <bridge name> <port name> ovs-vsctl add-port br-ex enp0s10 ovs-vsctl del-port br-ex phy-br-ex ovs-vsctl del-port br-ex tun2ad7e9e91e4 重启odl后 systemctl restart openvswitch.service systemctl restart neutron-server.service systemctl stop neutron-server.service 创建虚机 openstack network create --share --external --provider-physical-network provider --provider-network-type flat provider openstack subnet create --network provider --allocation-pool start=192.168.56.2,end=192.168.56.100 --dns-nameserver 8.8.8.8 --gateway 192.168.56.1 --subnet-range 192.168.56.0/24 provider nova boot --image cirros --flavor tiny --nic net-id= --availability-zone nova:rcontroller01 vm-01 openstack server create --flavor tiny --image cirros --nic net-id= --key-name mykey test nova boot --image cirros --flavor tiny --nic net-id=0fe983c2-8178-403b-a00e-e8561580b210 --availability-zone nova:rcontroller01 vm-01 虚机可以学习到mac但是ping不通抓包，先在虚机网卡上抓包，然后在br-int上抓包发现虚拟网卡上是发送了icmp请求报文的，但是br-int上没有查看报文情况 [root@rcontroller01 ~] ovs-appctl dpif/dump-flows br-int recirc_id(0),tunnel(tun_id=0x0,src=192.168.56.102,dst=192.168.56.122,flags(-df-csum+key)),in_port(4),eth(),eth_type(0x0800),ipv4(proto=17,frag=no),udp(dst=3784), packets:266436, bytes:17584776, used:0.591s, actions:userspace(pid=4294962063,slow_path(bfd)) recirc_id(0xa0),in_port(5),ct_state(+new-est-rel-inv+trk),ct_mark(0/0x1),eth(),eth_type(0x0800),ipv4(frag=no), packets:148165, bytes:14520170, used:0.566s, actions:drop recirc_id(0),in_port(3),eth(),eth_type(0x0806), packets:1, bytes:60, used:5.228s, actions:drop recirc_id(0),tunnel(tun_id=0xb,src=192.168.56.102,dst=192.168.56.122,flags(-df-csum+key)),in_port(4),eth(dst=fa:16:3e:ab:ba:7e),eth_type(0x0806), packets:0, bytes:0, used:never, actions:5 recirc_id(0),in_port(5),eth(src=fa:16:3e:ab:ba:7e),eth_type(0x0800),ipv4(src=192.168.0.16,proto=1,frag=no), packets:148165, bytes:14520170, used:0.566s, actions:ct(zone=5004),recirc(0xa0) recirc_id(0),in_port(3),eth(),eth_type(0x0800),ipv4(frag=no), packets:886646, bytes:316947183, used:0.210s, flags:SFPR., actions:drop recirc_id(0),in_port(5),eth(src=fa:16:3e:ab:ba:7e,dst=fa:16:3e:7d:95:75),eth_type(0x0806),arp(sip=192.168.0.16,tip=192.168.0.5,op=1/0xff,sha=fa:16:3e:ab:ba:7e), packets:0, bytes:0, used:never, actions:userspace(pid=4294961925,controller(reason=4,dont_send=0,continuation=0,recirc_id=4618,rule_cookie=0x822002d,controller_id=0,max_len=65535)),set(tunnel(tun_id=0xb,src=192.168.56.122,dst=192.168.56.102,ttl=64,tp_dst=4789,flags(df|key))),4 安全组设置 openstack security group rule create --proto tcp 2e19a748-9086-49f8-9498-01abc1a964fe openstack security group rule create --proto tcp 6095293d-c2cd-433d-8a8f-e77ecb03609e openstack security group rule create --proto udp 2e19a748-9086-49f8-9498-01abc1a964fe openstack security group rule create --proto udp 6095293d-c2cd-433d-8a8f-e77ecb03609e ovs-vsctl add-port br-ex "ex-patch-int" ovs-vsctl set interface "ex-patch-int" type=patch ovs-vsctl set interface "ex-patch-int" options:peer=int-patch-ex ovs-vsctl add-port br-int "int-patch-ex" ovs-vsctl set interface "int-patch-ex" type=patch ovs-vsctl set interface "int-patch-ex" options:peer=ex-patch-int ovs-vsctl del-port br-ex "ex-patch-int" ovs-vsctl del-port br-int "int-patch-ex" ovs-vsctl del-port br-ex enp0s9 ovs-vsctl add-port br-int enp0s9 ovs-appctl ofproto/trace 重要命令 sudo ovs-ofctl -O OpenFlow13 show br-int sudo ovs-appctl ofproto/trace br-int "in_port=5,ip,nw_src=192.168.0.16,nw_dst=192.168.0.5" ovs-appctl dpctl/dump-conntrack 11.查看接口id等 ovs-appctl dpif/show 12.查看接口统计 ovs-ofctl dump-ports br-int 查看接口 sudo ovs-ofctl show br-int -O OpenFlow13 ovs常用命令控制管理类 1.查看网桥和端口 ovs-vsctl show 1 2.创建一个网桥 ovs-vsctl add-br br0 ovs-vsctl set bridge br0 datapath_type=netdev 1 2 3.添加/删除一个端口 for system interfaces ovs-vsctl add-port br0 eth1 ovs-vsctl del-port br0 eth1 for DPDK ovs-vsctl add-port br0 dpdk1 -- set interface dpdk1 type=dpdk options:dpdk-devargs=0000:01:00.0 for DPDK bonds ovs-vsctl add-bond br0 dpdkbond0 dpdk1 dpdk2 \ -- set interface dpdk1 type=dpdk options:dpdk-devargs=0000:01:00.0 \ -- set interface dpdk2 type=dpdk options:dpdk-devargs=0000:02:00.0 1 2 3 4 5 6 7 8 9 4.设置/清除网桥的openflow协议版本 ovs-vsctl set bridge br0 protocols=OpenFlow13 ovs-vsctl clear bridge br0 protocols 1 2 5.查看某网桥当前流表 ovs-ofctl dump-flows br0 ovs-ofctl -O OpenFlow13 dump-flows br0 ovs-appctl bridge/dump-flows br0 1 2 3 6.设置/删除控制器 ovs-vsctl set-controller br0 tcp:1.2.3.4:6633 ovs-vsctl del-controller br0 1 2 7.查看控制器列表 ovs-vsctl list controller 1 8.设置/删除被动连接控制器 ovs-vsctl set-manager tcp:1.2.3.4:6640 ovs-vsctl get-manager ovs-vsctl del-manager 1 2 3 9.设置/移除可选选项 ovs-vsctl set Interface eth0 options:link_speed=1G ovs-vsctl remove Interface eth0 options link_speed 1 2 10.设置fail模式，支持standalone或者secure standalone(default)：清除所有控制器下发的流表，ovs自己接管 secure：按照原来流表继续转发 ovs-vsctl del-fail-mode br0 ovs-vsctl set-fail-mode br0 secure ovs-vsctl get-fail-mode br0 1 2 3 11.查看接口id等 ovs-appctl dpif/show 1 12.查看接口统计 ovs-ofctl dump-ports br0 1 流表类流表操作 1.添加普通流表 ovs-ofctl add-flow br0 in_port=1,actions=output:2 1 2.删除所有流表 ovs-ofctl del-flows br0 1 3.按匹配项来删除流表 ovs-ofctl del-flows br0 "in_port=1" 1 匹配项 1.匹配vlan tag，范围为0-4095 ovs-ofctl add-flow br0 priority=401,in_port=1,dl_vlan=777,actions=output:2 1 2.匹配vlan pcp，范围为0-7 ovs-ofctl add-flow br0 priority=401,in_port=1,dl_vlan_pcp=7,actions=output:2 1 3.匹配源/目的MAC ovs-ofctl add-flow br0 in_port=1,dl_src=00:00:00:00:00:01/00:00:00:00:00:01,actions=output:2 ovs-ofctl add-flow br0 in_port=1,dl_dst=00:00:00:00:00:01/00:00:00:00:00:01,actions=output:2 1 2 4.匹配以太网类型，范围为0-65535 ovs-ofctl add-flow br0 in_port=1,dl_type=0x0806,actions=output:2 1 5.匹配源/目的IP 条件：指定dl_type=0x0800，或者ip/tcp ovs-ofctl add-flow br0 ip,in_port=1,nw_src=10.10.0.0/16,actions=output:2 ovs-ofctl add-flow br0 ip,in_port=1,nw_dst=10.20.0.0/16,actions=output:2 1 2 6.匹配协议号，范围为0-255 条件：指定dl_type=0x0800或者ip ICMP ovs-ofctl add-flow br0 ip,in_port=1,nw_proto=1,actions=output:2 7.匹配IP ToS/DSCP，tos范围为0-255，DSCP范围为0-63 条件：指定dl_type=0x0800/0x86dd，并且ToS低2位会被忽略(DSCP值为ToS的高6位，并且低2位为预留位) ovs-ofctl add-flow br0 ip,in_port=1,nw_tos=68,actions=output:2 ovs-ofctl add-flow br0 ip,in_port=1,ip_dscp=62,actions=output:2 8.匹配IP ecn位，范围为0-3 条件：指定dl_type=0x0800/0x86dd ovs-ofctl add-flow br0 ip,in_port=1,ip_ecn=2,actions=output:2 9.匹配IP TTL，范围为0-255 ovs-ofctl add-flow br0 ip,in_port=1,nw_ttl=128,actions=output:2 10.匹配tcp/udp，源/目的端口，范围为0-65535 匹配源tcp端口179 ovs-ofctl add-flow br0 tcp,tcp_src=179/0xfff0,actions=output:2 匹配目的tcp端口179 ovs-ofctl add-flow br0 tcp,tcp_dst=179/0xfff0,actions=output:2 匹配源udp端口1234 ovs-ofctl add-flow br0 udp,udp_src=1234/0xfff0,actions=output:2 匹配目的udp端口1234 ovs-ofctl add-flow br0 udp,udp_dst=1234/0xfff0,actions=output:2 11.匹配tcp flags tcp flags=fin，syn，rst，psh，ack，urg，ece，cwr，ns ovs-ofctl add-flow br0 tcp,tcp_flags=ack,actions=output:2 12.匹配icmp code，范围为0-255 条件：指定icmp ovs-ofctl add-flow br0 icmp,icmp_code=2,actions=output:2 13.匹配vlan TCI TCI低12位为vlan id，高3位为priority，例如tci=0xf123则vlan_id为0x123和vlan_pcp=7 ovs-ofctl add-flow br0 in_port=1,vlan_tci=0xf123,actions=output:2 14.匹配mpls label 条件：指定dl_type=0x8847/0x8848 ovs-ofctl add-flow br0 mpls,in_port=1,mpls_label=7,actions=output:2 15.匹配mpls tc，范围为0-7 条件：指定dl_type=0x8847/0x8848 ovs-ofctl add-flow br0 mpls,in_port=1,mpls_tc=7,actions=output:2 1 16.匹配tunnel id，源/目的IP 匹配tunnel id ovs-ofctl add-flow br0 in_port=1,tun_id=0x7/0xf,actions=output:2 匹配tunnel源IP ovs-ofctl add-flow br0 in_port=1,tun_src=192.168.1.0/255.255.255.0,actions=output:2 匹配tunnel目的IP ovs-ofctl add-flow br0 in_port=1,tun_dst=192.168.1.0/255.255.255.0,actions=output:2 一些匹配项的速记符速记符匹配项 ip dl_type=0x800 ipv6 dl_type=0x86dd icmp dl_type=0x0800,nw_proto=1 icmp6 dl_type=0x86dd,nw_proto=58 tcp dl_type=0x0800,nw_proto=6 tcp6 dl_type=0x86dd,nw_proto=6 udp dl_type=0x0800,nw_proto=17 udp6 dl_type=0x86dd,nw_proto=17 sctp dl_type=0x0800,nw_proto=132 sctp6 dl_type=0x86dd,nw_proto=132 arp dl_type=0x0806 rarp dl_type=0x8035 mpls dl_type=0x8847 mplsm dl_type=0x8848 指令动作 1.动作为出接口从指定接口转发出去 ovs-ofctl add-flow br0 in_port=1,actions=output:2 1 2.动作为指定group group id为已创建的group table ovs-ofctl add-flow br0 in_port=1,actions=group:666 1 3.动作为normal 转为L2/L3处理流程 ovs-ofctl add-flow br0 in_port=1,actions=normal 1 4.动作为flood 从所有物理接口转发出去，除了入接口和已关闭flooding的接口 ovs-ofctl add-flow br0 in_port=1,actions=flood 1 5.动作为all 从所有物理接口转发出去，除了入接口 ovs-ofctl add-flow br0 in_port=1,actions=all 1 6.动作为local 一般是转发给本地网桥 ovs-ofctl add-flow br0 in_port=1,actions=local 1 7.动作为in_port 从入接口转发回去 ovs-ofctl add-flow br0 in_port=1,actions=in_port 1 8.动作为controller 以packet-in消息上送给控制器 ovs-ofctl add-flow br0 in_port=1,actions=controller 1 9.动作为drop 丢弃数据包操作 ovs-ofctl add-flow br0 in_port=1,actions=drop 1 10.动作为mod_vlan_vid 修改报文的vlan id，该选项会使vlan_pcp置为0 ovs-ofctl add-flow br0 in_port=1,actions=mod_vlan_vid:8,output:2 1 11.动作为mod_vlan_pcp 修改报文的vlan优先级，该选项会使vlan_id置为0 ovs-ofctl add-flow br0 in_port=1,actions=mod_vlan_pcp:7,output:2 1 12.动作为strip_vlan 剥掉报文内外层vlan tag ovs-ofctl add-flow br0 in_port=1,actions=strip_vlan,output:2 1 13.动作为push_vlan 在报文外层压入一层vlan tag，需要使用openflow1.1以上版本兼容 ovs-ofctl add-flow -O OpenFlow13 br0 in_port=1,actions=push_vlan:0x8100,set_field:4097-\>vlan_vid,output:2 1 ps: set field值为4096+vlan_id，并且vlan优先级为0，即4096-8191，对应的vlan_id为0-4095 14.动作为push_mpls 修改报文的ethertype，并且压入一个MPLS LSE ovs-ofctl add-flow br0 in_port=1,actions=push_mpls:0x8847,set_field:10-\>mpls_label,output:2 1 15.动作为pop_mpls 剥掉最外层mpls标签，并且修改ethertype为非mpls类型 ovs-ofctl add-flow br0 mpls,in_port=1,mpls_label=20,actions=pop_mpls:0x0800,output:2 1 16.动作为修改源/目的MAC，修改源/目的IP 修改源MAC ovs-ofctl add-flow br0 in_port=1,actions=mod_dl_src:00:00:00:00:00:01,output:2 修改目的MAC ovs-ofctl add-flow br0 in_port=1,actions=mod_dl_dst:00:00:00:00:00:01,output:2 修改源IP ovs-ofctl add-flow br0 in_port=1,actions=mod_nw_src:192.168.1.1,output:2 修改目的IP ovs-ofctl add-flow br0 in_port=1,actions=mod_nw_dst:192.168.1.1,output:2 17.动作为修改TCP/UDP/SCTP源目的端口修改TCP源端口 ovs-ofctl add-flow br0 tcp,in_port=1,actions=mod_tp_src:67,output:2 修改TCP目的端口 ovs-ofctl add-flow br0 tcp,in_port=1,actions=mod_tp_dst:68,output:2 修改UDP源端口 ovs-ofctl add-flow br0 udp,in_port=1,actions=mod_tp_src:67,output:2 修改UDP目的端口 ovs-ofctl add-flow br0 udp,in_port=1,actions=mod_tp_dst:68,output:2 18.动作为mod_nw_tos 条件：指定dl_type=0x0800 修改ToS字段的高6位，范围为0-255，值必须为4的倍数，并且不会去修改ToS低2位ecn值 ovs-ofctl add-flow br0 ip,in_port=1,actions=mod_nw_tos:68,output:2 1 19.动作为mod_nw_ecn 条件：指定dl_type=0x0800，需要使用openflow1.1以上版本兼容修改ToS字段的低2位，范围为0-3，并且不会去修改ToS高6位的DSCP值 ovs-ofctl add-flow br0 ip,in_port=1,actions=mod_nw_ecn:2,output:2 1 20.动作为mod_nw_ttl 修改IP报文ttl值，需要使用openflow1.1以上版本兼容 ovs-ofctl add-flow -O OpenFlow13 br0 in_port=1,actions=mod_nw_ttl:6,output:2 1 21.动作为dec_ttl 对IP报文进行ttl自减操作 ovs-ofctl add-flow br0 in_port=1,actions=dec_ttl,output:2 1 22.动作为set_mpls_label 对报文最外层mpls标签进行修改，范围为20bit值 ovs-ofctl add-flow br0 in_port=1,actions=set_mpls_label:666,output:2 1 23.动作为set_mpls_tc 对报文最外层mpls tc进行修改，范围为0-7 ovs-ofctl add-flow br0 in_port=1,actions=set_mpls_tc:7,output:2 1 24.动作为set_mpls_ttl 对报文最外层mpls ttl进行修改，范围为0-255 ovs-ofctl add-flow br0 in_port=1,actions=set_mpls_ttl:255,output:2 1 25.动作为dec_mpls_ttl 对报文最外层mpls ttl进行自减操作 ovs-ofctl add-flow br0 in_port=1,actions=dec_mpls_ttl,output:2 1 26.动作为move NXM字段使用move参数对NXM字段进行操作将报文源MAC复制到目的MAC字段，并且将源MAC改为00:00:00:00:00:01 ovs-ofctl add-flow br0 in_port=1,actions=move:NXM_OF_ETH_SRC[]-\>NXM_OF_ETH_DST[],mod_dl_src:00:00:00:00:00:01,output:2 1 2 ps: 常用NXM字段参照表 NXM字段报文字段 NXM_OF_ETH_SRC 源MAC NXM_OF_ETH_DST 目的MAC NXM_OF_ETH_TYPE 以太网类型 NXM_OF_VLAN_TCI vid NXM_OF_IP_PROTO IP协议号 NXM_OF_IP_TOS IP ToS值 NXM_NX_IP_ECN IP ToS ECN NXM_OF_IP_SRC 源IP NXM_OF_IP_DST 目的IP NXM_OF_TCP_SRC TCP源端口 NXM_OF_TCP_DST TCP目的端口 NXM_OF_UDP_SRC UDP源端口 NXM_OF_UDP_DST UDP目的端口 NXM_OF_SCTP_SRC SCTP源端口 NXM_OF_SCTP_DST SCTP目的端口 27.动作为load NXM字段使用load参数对NXM字段进行赋值操作 push mpls label，并且把10(0xa)赋值给mpls label ovs-ofctl add-flow br0 in_port=1,actions=push_mpls:0x8847,load:0xa-\>OXM_OF_MPLS_LABEL[],output:2 对目的MAC进行赋值 ovs-ofctl add-flow br0 in_port=1,actions=load:0x001122334455-\>OXM_OF_ETH_DST[],output:2 1 2 3 4 28.动作为pop_vlan 弹出报文最外层vlan tag ovs-ofctl add-flow br0 in_port=1,dl_type=0x8100,dl_vlan=777,actions=pop_vlan,output:2 1 meter表常用操作由于meter表是openflow1.3版本以后才支持，所以所有命令需要指定OpenFlow1.3版本以上 ps: 在openvswitch-v2.8之前的版本中，还不支持meter 在v2.8版本之后已经实现，要正常使用的话，需要注意的是datapath类型要指定为netdev，band type暂时只支持drop，还不支持DSCP REMARK 1.查看当前设备对meter的支持 ovs-ofctl -O OpenFlow13 meter-features br0 2.查看meter表 ovs-ofctl -O OpenFlow13 dump-meters br0 3.查看meter统计 ovs-ofctl -O OpenFlow13 meter-stats br0 4.创建meter表限速类型以kbps(kilobits per second)计算，超过20kb/s则丢弃 ovs-ofctl -O OpenFlow13 add-meter br0 meter=1,kbps,band=type=drop,rate=20 同上，增加burst size参数 ovs-ofctl -O OpenFlow13 add-meter br0 meter=2,kbps,band=type=drop,rate=20,burst_size=256 同上，增加stats参数,对meter进行计数统计 ovs-ofctl -O OpenFlow13 add-meter br0 meter=3,kbps,stats,band=type=drop,rate=20,burst_size=256 限速类型以pktps(packets per second)计算，超过1000pkt/s则丢弃 ovs-ofctl -O OpenFlow13 add-meter br0 meter=4,pktps,band=type=drop,rate=1000 5.删除meter表删除全部meter表 ovs-ofctl -O OpenFlow13 del-meters br0 删除meter id=1 ovs-ofctl -O OpenFlow13 del-meter br0 meter=1 6.创建流表 ovs-ofctl -O OpenFlow13 add-flow br0 in_port=1,actions=meter:1,output:2 group表由于group表是openflow1.1版本以后才支持，所以所有命令需要指定OpenFlow1.1版本以上常用操作 group table支持4种类型 all：所有buckets都执行一遍 select：每次选择其中一个bucket执行，常用于负载均衡应用 ff(FAST FAILOVER)：快速故障修复，用于检测解决接口等故障 indirect：间接执行，类似于一个函数方法，被另一个group来调用 1.查看当前设备对group的支持 ovs-ofctl -O OpenFlow13 dump-group-features br0 2.查看group表 ovs-ofctl -O OpenFlow13 dump-groups br0 3.创建group表类型为all ovs-ofctl -O OpenFlow13 add-group br0 group_id=1,type=all,bucket=output:1,bucket=output:2,bucket=output:3 类型为select ovs-ofctl -O OpenFlow13 add-group br0 group_id=2,type=select,bucket=output:1,bucket=output:2,bucket=output:3 类型为select，指定hash方法(5元组，OpenFlow1.5+) ovs-ofctl -O OpenFlow15 add-group br0 group_id=3,type=select,selection_method=hash,fields=ip_src,bucket=output:2,bucket=output:3 4.删除group表 ovs-ofctl -O OpenFlow13 del-groups br0 group_id=2 5.创建流表 ovs-ofctl -O OpenFlow13 add-flow br0 in_port=1,actions=group:2 goto table配置数据流先从table0开始匹配，如actions有goto_table，再进行后续table的匹配，实现多级流水线，如需使用goto table，则创建流表时，指定table id，范围为0-255，不指定则默认为table0 1.在table0中添加一条流表条目 ovs-ofctl add-flow br0 table=0,in_port=1,actions=goto_table=1 2.在table1中添加一条流表条目 ovs-ofctl add-flow br0 table=1,ip,nw_dst=10.10.0.0/16,actions=output:2 tunnel配置如需配置tunnel，必需确保当前系统对各tunnel的remote ip网络可达 gre 1.创建一个gre接口，并且指定端口id=1001 ovs-vsctl add-port br0 gre1 -- set Interface gre1 type=gre options:remote_ip=1.1.1.1 ofport_request=1001 2.可选选项将tos或者ttl在隧道上继承，并将tunnel id设置成123 ovs-vsctl set Interface gre1 options:tos=inherit options:ttl=inherit options:key=123 3.创建关于gre流表封装gre转发 ovs-ofctl add-flow br0 ip,in_port=1,nw_dst=10.10.0.0/16,actions=output:1001 解封gre转发 ovs-ofctl add-flow br0 in_port=1001,actions=output:1 vxlan 1.创建一个vxlan接口，并且指定端口id=2001 ovs-vsctl add-port br0 vxlan1 -- set Interface vxlan1 type=vxlan options:remote_ip=1.1.1.1 ofport_request=2001 2.可选选项将tos或者ttl在隧道上继承，将vni设置成123，UDP目的端为设置成8472(默认为4789) ovs-vsctl set Interface vxlan1 options:tos=inherit options:ttl=inherit options:key=123 options:dst_port=8472 3.创建关于vxlan流表封装vxlan转发 ovs-ofctl add-flow br0 ip,in_port=1,nw_dst=10.10.0.0/16,actions=output:2001 解封vxlan转发 ovs-ofctl add-flow br0 in_port=2001,actions=output:1 sflow配置 1.对网桥br0进行sflow监控 agent: 与collector通信所在的网口名，通常为管理口 target: collector监听的IP地址和端口，端口默认为6343 header: sFlow在采样时截取报文头的长度 polling: 采样时间间隔，单位为秒 ovs-vsctl -- --id=@sflow create sflow agent=eth0 target=\"10.0.0.1:6343\" header=128 sampling=64 polling=10 -- set bridge br0 sflow=@sflow 2.查看创建的sflow ovs-vsctl list sflow 3.删除对应的网桥sflow配置，参数为sFlow UUID ovs-vsctl remove bridge br0 sflow 7b9b962e-fe09-407c-b224-5d37d9c1f2b3 4.删除网桥下所有sflow配置 ovs-vsctl -- clear bridge br0 sflow 1 QoS配置 ingress policing 1.配置ingress policing，对接口eth0入流限速10Mbps ovs-vsctl set interface eth0 ingress_policing_rate=10000 ovs-vsctl set interface eth0 ingress_policing_burst=8000 2.清除相应接口的ingress policer配置 ovs-vsctl set interface eth0 ingress_policing_rate=0 ovs-vsctl set interface eth0 ingress_policing_burst=0 3.查看接口ingress policer配置 ovs-vsctl list interface eth0 4.查看网桥支持的Qos类型 ovs-appctl qos/show-types br0 端口镜像配置 1.配置eth0收到/发送的数据包镜像到eth1 ovs-vsctl -- set bridge br0 mirrors=@m \ -- --id=@eth0 get port eth0 \ -- --id=@eth1 get port eth1 \ -- --id=@m create mirror name=mymirror select-dst-port=@eth0 select-src-port=@eth0 output-port=@eth1 2.删除端口镜像配置 ovs-vsctl -- --id=@m get mirror mymirror -- remove bridge br0 mirrors @m 3.清除网桥下所有端口镜像配置 ovs-vsctl clear bridge br0 mirrors 4.查看端口镜像配置 ovs-vsctl get bridge br0 mirrors Open vSwitch中有多个命令，分别有不同的作用，大致如下： ovs-vsctl用于控制ovs db ovs-ofctl用于管理OpenFlow switch 的 flow ovs-dpctl用于管理ovs的datapath ovs-appctl用于查询和管理ovs daemon 转载于:https://www.cnblogs.com/liuhongru/p/10336849.html 本篇文章为转载内容。原文链接：https://blog.csdn.net/weixin_30876945/article/details/99916308。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-06-08 17:13:19

294

转载

CSS

css水平线粗细怎么设置

CSS水平线粗细怎么设置？ CSS水平线是指在文档中显示横线的效果，可用于分隔内容，提升阅读流畅性。水平线通过CSS样式表实现，可以设置粗细、颜色、长度等参数。下面我们就来学习一下如何设置CSS水平线的粗细。首先，在HTML文件中使用标签来创建段落，然后通过CSS样式表来设置该段落中出现的水平线的粗细，可以使用border-bottom属性或hr标签进行设置。使用border-bottom属性设置水平线：这是一段文本，下方有一条粗细为1像素，颜色为黑色的水平线。 border-bottom属性包含两个参数：宽度以及样式。在上面的代码中，我们设置了宽度为1像素，样式为实线，颜色为黑色。你可以根据需要自行调整。使用hr标签设置水平线：使用hr标签设置水平线的代码比较简洁。height属性控制水平线高度，border和color属性控制边框以及颜色，background-color属性控制背景颜色。综上所述，我们可以通过使用border-bottom属性或hr标签来设置CSS水平线的粗细。根据实际需要，对代码进行相应的修改，可以达到理想的效果。

2023-10-03 17:12:50

1133

软件工程师

转载文章

[转载]在手机端点击input框不弹出输入法的方法

... none\ 是一个属性设置，用于定义元素是否可以成为鼠标事件（如点击、悬停）的目标。当将其值设为\ none\ 时，元素将不会响应任何鼠标交互，也不会捕获到焦点。在本文的上下文中，将input元素的pointer-events属性设置为none可以阻止用户通过键盘或鼠标使该输入框获取焦点，并且光标也不会在其上显示。解释 , 在JavaScript事件处理编程中，\ preventDefault()\ 是一个方法，用于阻止事件默认行为的发生。例如，在mousedown、keydown等事件中调用此方法，可以阻止浏览器对事件的默认处理，如点击后跳转、表单提交等。在本文情境下，通过对input元素mousedown事件添加监听器并执行preventDefault()，能够阻止input因为鼠标点击而获取焦点。解释 , \ tabindex\ 是HTML全局属性，它用于指定一个元素在页面中接收焦点的顺序，特别是通过键盘Tab键进行导航时。其取值可以是整数，负数或0。如果设置为\ -1\ ，则表示该元素不能通过键盘Tab键获得焦点，但仍可以通过JavaScript进行焦点控制。在本文中，提出使用\ tabindex=\ -1\ 的方式来防止input元素被键盘焦点序列选中，从而达到禁用键盘对input元素操作的效果。

2023-09-25 11:55:54

转载

知识学习

实践的时候请根据实际情况谨慎操作。

随机学习一条linux命令：

hostnamectl - 查看和修改系统主机名及相关配置。