Posts

Ajax学习小结

学习地址:https://www.bilibili.com/video/BV1WC4y1b78y，主要通过express的简单功能来搭建本地的服务，进而更好地学习Ajax 发送Ajax请求的方式原生Ajax //1.创建对象 const xhr = new XMLHttpRequest() //2.初始化 xhr.open([type], [url])//xhr.open("GET","https://www.x.com") //3.发送 xhr.send() //4.处理返回结果 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { //...do something console.log(xhr.status)//状态码 console.log(xhr.statusText)//状态字符串 console.log(xhr.getAllResponseHeaders)//所有请求头信息 console.log(xhr.response)//响应体 } } } 说明： readyState: 返回一个 XMLHttpRequest 代理当前所处的状态值状态描述 0 UNSENT 代理被创建，但尚未调用 open() 方法。 1 OPENED open() 方法已经被调用。 2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。 3 LOADING 下载中； responseText 属性已经包含部分数据。 4 DONE 下载操作已完成。因此，xhr....

Ajax基础及Express框架基本使用

Baike Ajax 即“AsynchronousJavascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。—百度百科请求报文格式以及参数如下行 GET / HTTP/1.1 头 Host: fintinger.xyz Cookie: keyword=xyz Content-type: application/x-www-form-urlencoded User-agent: Chrome 83 空行 (必须有) 体 [GET]:空 [POST]:空/username=admin&password=admin 响应报文格式以及参数如下行 HTTP/1.1 200 Ok 头 Content-Type: text/html; charset=utf-8 Content-Length: 22 Content-encoding: gzip 空行 (必须有) 体 <html> <head> </head> <body> <h1>Hello!</h1> </body> </html> Express框架使用 //1.引入express const express=require('express') //2.创建应用对象 const app=express() //3.创建路由规则 /** * request 请求报文封装 * response 响应报文封装 */ app....

vue.js学习心得

1. 关于元素显示与隐藏 # v-show="name" 说明：如果data中name为true就显示，否则该元素display:none # v-if="name" 说明：如果data中name为true就显示，否则该元素变成一段注释，就被删掉了! v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 2. 访问data 　# v-model 说明：与data中的值绑定，会随着data中的值得改变而改变，如果是input则data中的值会随着input中的值的改变而改变 # v-if **说明：**用于条件性地渲染一块内容在<template>元素上使用 v-if 条件渲染分组因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换(隐藏或显示)多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含<template>元素。这样做的好处就是不用再写一个<div>将需要隐藏的元素包裹 # v-show 说明：条件切换display属性 # v-for 说明：在data中定义一个数组arr，然后用v-for="val in arr"访问到 3....

获取文件扩展名

该怎么去获得文件名字符串中的文件扩展名呢？一种较为强大的解决方法是利用String的slice、lastIndexOf方法： function getFileExtension(filename) { return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2); } console.log(getFileExtension3('')); // '' console.log(getFileExtension3('filename')); // '' console.log(getFileExtension3('filename.txt')); // 'txt' console.log(getFileExtension3('.hiddenfile')); // '' console.log(getFileExtension3('hiddenfile.')); // '' console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext' 说明 filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2) 本方法中的>>>运算目的是找到最后一个.所在索引，然后索引-1+2，相当于+1，则slice方法返回.后面的后缀名 .不会再开头，否则索引会是0，因为-1>>>0 = 4294967295，所不会匹配到 .出现在末尾，索引会等于length+1，也不会匹配到 slice(start,end) 说明：start必须指定，负值为从后往前数，若只指定start值，则返回start位置及后面一直到数组结尾所有的元素 **注意：**区别于删除数组中的一段元素的方法 Array.splice() lastIndexOf(searchvalue,fromindex) **说明：**如果要检索的字符串值没有出现，则该方法返回 -1，该方法对大小写敏感使用： var str="Hello world!" document.write(str.lastIndexOf("Hello") + "<br />")//0 document.write(str.lastIndexOf("World") + "<br />")//-1 document....

一组循环数组

做网页轮播图，或者音乐播放列表时经常要用到一组循环的数组，到最后一项返回第一项，第一项返回最后一项利用两次判断 function doLoop( arr ){ arr.loop_idx = 0; // 返回当前的元素 arr.current = function(){ if( this.loop_idx < 0 ){// 第一次检查 this.loop_idx = this.length - 1;// 更新 loop_idx } if( this.loop_idx >= this.length ){// 第二次检查 this.loop_idx = 0;// 更新 loop_idx } return arr[ this.loop_idx ];//返回元素 }; // 增加 loop_idx 然后返回新的当前元素 arr.next = function(){ this.loop_idx++; return this.current(); }; // 减少 loop_idx 然后返回新的当前元素 arr.prev = function(){ this....

剪贴板功能实现

经常会用到指定内容的复制粘贴问题，用到document的execCommand 方法,为此，我将这个功能封装为一个简单的函数: function doCopy($el, {deepCopy = false, copyTips = true, language = "Chinese", bgColor = "#ff6666", fontColor = "#fff"} = {}) { let tempEl = $("<input id='selectEl' type='text' value=''>").val($el.text()) if (deepCopy) { tempEl.val($el.html()) } tempEl.appendTo($("body")) document.querySelector('#selectEl').select(); document.execCommand('copy'); tempEl.remove() if (copyTips) { let tipEl = $("<div class='copyTips' >成功复制到剪切板</div>") tipEl.css({fontFamily: "'Microsoft YaHei', sans-serif",fontSize: "1.2rem",position: "fixed",top: "1rem",textAlign: "center", left: "50%",fontWeight: "bolder", borderRadius: ".5rem",marginLeft: "-8rem",width: "16rem",height: "3rem", lineHeight:"3rem", background: bgColor,boxShadow: "0 6px 10px -8px #000",color: fontColor, letterSpacing: "4px",boxSizing: "border-box",padding: "0 10px 0 10px", display: "none"}) if (language === "English") { tipEl....