Web前端
文章平均质量分 54
挣扎的蓝藻
欢迎大家来到小蓝枣的CSDN博客!每一次分享都是自己的提高!
展开
-
CSS样式中长度单位含义解析:rpx、px、vw、vh、em、rem、pt
1 . rpx (响应像素): 是微信小程序中的一种相对长度单位,可以根据屏幕宽度进行自适应缩放。 1rpx 约等于屏幕宽度的 1/750 ,因此在不同设备上显示的大小会自动进行缩放,适应不同的屏幕尺寸。通常用于布局和字体大小的设置。2 . px (像素): 是像素单位,表示屏幕上的一个像素点。在微信小程序中, 1px 在不同设备上的物理大小可能会有所不同,因此不具备响应性。通常用于边框、阴影等具有固定尺寸的元素。3 . vw (视窗宽度的百分比): 是相对长度单位,表示相对于视窗宽度的百分比原创 2024-03-09 22:43:22 · 1581 阅读 · 0 评论 -
Vue提示框组件vue-notification使用实例演示
安装方法:通过 npm install vue-notification 就能使用了。导入方法:import Notifications from 'vue-notification';Vue.use(Notifications);并且需要在 App.vue 里加入 。其中 duration 参数为持续时间。position 参数为提示位置,前面的值为纵向的顶部 top 和底部 bottom原创 2023-03-19 23:25:55 · 813 阅读 · 0 评论 -
Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示
可以看到随着不断的滚动,页面组件的数量不断的加载。其实加载的是后端返回的数据,因为涉及隐私,没有给显示出来。利用懒加载,可以防止大量渲染造成卡顿降低用户体验。页面的动态加载这块可以看上一篇文章:Vue 动态添加和删除组件的实现,子组件和父组件的传值实例演示下面主要讲一下动态加载的实现思路:首先懒加载主要有两种形式,一种是不断的从后端请求返回前端,每次获取一部分数据,另一种是一次性把数据加载到前端,然后一部分一部分的展示。本次演示的数据量不大,采用后面的方法来实现。原创 2023-02-08 18:08:39 · 3033 阅读 · 1 评论 -
Vue动态添加和删除组件的实现,子组件和父组件的传值实例演示
下面的卡片就是我单独封装的组件,保存的组件名为 Card.vue,代码中 mdb 开头是 MDBootstrap 框架里的组件。内容较多,这里主要关注的点就是删除按钮还有给父组件传值的方法。父组件里首先把子组件导入进来,然后根据数组、v-for 和 v-if 来实现动态添加组件。点击新增会在数组里添加一个空字符串,点击删除会删除对应的字符串,这样加载组件的多少就与数组的大小对应了,然后通过 v-for 来遍历组件。原创 2023-02-06 09:50:49 · 2105 阅读 · 4 评论 -
VS Code配置snippets代码片段快速生成html模板,提高前端编写效率
先看下示例,在输入 ! 号回车后自动生成一段代码片段。我这选的 html.json 进行的配置,其中 "prefix": "html" 里的 html 就是关键词,后面就靠它来触发,这个可以自己随便定义。Html templates 名也是随便定义的。里面用的 $0 表示光标所落的位置。其它的例如 $TM_FILENAME 是引用的一些内置的变量,这个是表示当前文件名,更多的可以查看后面的表格。然后输入 html 就能触发了,那个前面有个方块的就是。按回车或 Tab 键后就能展示代码了。原创 2023-01-31 17:31:54 · 1888 阅读 · 0 评论 -
Vue前后端页面下载功能实现演示,Python+flask提供后台下载服务
首先看下演示效果。点文档的话是 html 文档,跳转的预览,点下载的话是压缩包直接就进行下载了。文档和压缩包就是我本地文件。后台下载服务实现后台这块,我这里使用 python+flask 实现。root 指定个下载目录,后面的路径会在这个基础上进行查找。启动后就可以看到服务地址了。这里有个 utf-8 的报错,可以不用管,就是计算机名是中文导致的。把 as_attachment 参数的值设置为 False 的话,图片、pdf 等类型的文件就可以支持预览了,其它类型的文件还是直接进行下载原创 2023-01-12 15:19:34 · 1635 阅读 · 0 评论 -
Vue实现图片大图预览,v-viewer组件的使用方法演示
先看下效果图:点击图片就会进入预览,还包括图片名和原图大小、工具栏等。首先需要安装 v-viewernpm install v-viewer然后在 main.js 中进行导入。实例使用中,只需要用 viewer 包住图片即可。如果想隐藏工具栏或图片名称等。直接在引用时设置下默认配置。下面 4 个配置分别是标题、工具栏、导航栏、关闭按钮,可以选择性隐藏。都关闭后的效果图原创 2023-01-10 16:56:55 · 1539 阅读 · 4 评论 -
Python 使用CORS跨域资源共享解决flask服务器跨域问题、浏览器同源策略
CORS 全称 Cross-origin resource sharing(跨域资源共享),只要服务端配置了 CORS,前端调用时就可以实现跨域访问了。形式就是封装在 header 里的一些参数,例如:Access-Control-Allow-Methods(配置跨域允许的请求方式)、 Access-Control-Request-Headers(配置允许跨域的请求头)等参数。原创 2022-04-07 13:19:17 · 4879 阅读 · 0 评论 -
新版本Chrome同源策略、跨域问题处理No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
a 地址下访问 b 地址,即使 ip 相同,端口不一样也不行,涉及跨域问题,也属于 chrome 的同源策略。解决方法:新建一个快捷方式,右键属性的目标里加入如下参数 --disable-web-security --user-data-dir="D:\work\new_chrome"注意参数的前面有个空格。后面的参数是指定一个配置信息存储路径,相当于新开一个浏览器。如果不指定存储路径,先关闭已经打开的浏览器,再用快捷方式打开应该也行。原创 2022-04-06 16:44:09 · 3669 阅读 · 1 评论 -
Vue前后台数据交互实例演示,使用axios传递json字符串、数组
Vue 前后台数据交互实例演示第一章:后台实现① Python 启用 Flask 服务器② 后台启用成功验证第二章:前台实现① Vue 使用 Axios 实现接收 json 字符串、数组数据② 前台接收数据演示原创 2022-03-25 10:37:47 · 12011 阅读 · 0 评论 -
JavaScript 技术篇 - Node.js、npm的安装过程演示
工具获取:node.js 官方 v14.17.3-x64 版本 msi 安装包Node.js 已经集成了 npm,安装好后,npm 就可以用了。可以看到会把 Node.js 和 npm 都添加到目录下。检测安装情况:如果是 vs code 检测,需要重新打开下工具。JavaScript 技术篇 - Node.js、npm的安装过程演示原创 2021-08-17 11:04:44 · 515 阅读 · 0 评论 -
Java 技术篇 - 前端浏览器发送一次url请求后端ServerSocket接收到两次请求原因及解决方法,GET /favicon.ico HTTP/1.1问题处理
前端发送一次请求,后端接收到两次,第二次是:GET /favicon.ico HTTP/1.1可以看到页签上标题栏前面是个地球,这个是默认的。原因就是后台给的响应里没有指定这个图标,他再请求一次,就是请求这个资源。解决方法,在响应里加上这个元素:<link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon32.ico" type="image/x-icon" />原创 2021-08-10 14:47:21 · 2823 阅读 · 0 评论 -
Java 技术篇 - ServerSocket接收http的url请求中包含中文的处理方法,URLDecode与URLEncode,url解码与编码
通过解码方法:String url_new = java.net.URLDecoder.decode(url, "UTF-8");如果需要编码的话可以使用:String url_new = java.net.URLEncoder.encode(url, "UTF-8");// 阻塞式连接,当接收请求前保持阻塞Socket socket_client = server.accept();原创 2021-08-10 13:40:58 · 981 阅读 · 0 评论 -
Python 技术篇 - 使用unicode_escape对js的escape()方法编码后的字符串进行解码实例演示
这是 javascript 的 escape() 编码后的效果。这是 python 的解码过程:xpath = xpath.replace('%u', '\\u')xpath = xpath.encode('utf-8').decode('unicode_escape')这是 python 仿 js escape() 方法的编码过程。Python 技术篇 - 使用unicode_escape对js的escape()方法编码后的字符串进行解码实例演示原创 2021-08-09 16:04:18 · 674 阅读 · 3 评论 -
JavaScript 技术篇 - js在一个元素节点下包含多个text文本情况下的指定文本提取方法
结构如下,该元素下包含两个 text 文本,我们只想提取第一个文本内容。常规的 innertext、textContent 和 outerText 方法只能提取到全部的文本。可以通过 childNodes[索引] 来指定 text 文本来进行提取。当然,childNodes[索引] 返回的是对象,再加个 nodeValue 就能返回文本了。原创 2021-06-29 15:37:35 · 944 阅读 · 0 评论 -
JavaScript 技术篇-js代码触发dom元素绑定事件实例演示,jquery触发元素绑定事件方法
JavaScript 技术篇-js代码触发dom元素绑定事件实例演示,jquery触发元素绑定事件方法。原生 js 直接作为方法调用即可触发。jquery 通过 trigger() 方法触发点击事件。使用前提是该 dom 元素必须绑定的事件才能出发,他的祖先元素绑定的事件他触发不了,所以这里要把 Ancestors All 取消勾选一下。JavaScript 技术篇-js代码触发dom元素绑定事件实例演示,jquery触发元素绑定事件方法原创 2020-12-26 14:40:39 · 707 阅读 · 2 评论 -
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件
JavaScript 技术篇-通过代码获取dom元素绑定的监听事件,chrome浏览器查看js元素绑定的监听事件。getEventListeners() 方法可以获取到 dom 元素的监听。可以看到当前 dom 节点的监听就是 mousedown 和 mouseout。取消勾选 Ancestors All 可以排除当前元素所有祖先元素的监听。反过来如果想通过代码获取某个元素所有祖先元素的监听可以遍历它的所有上级节点再依次获取所有 dom 节点的监听。原创 2020-12-09 22:52:01 · 5373 阅读 · 0 评论 -
JavaScript 技术篇-一段js代码展示可以随鼠标移动变换样式的卡通人物,动态女生眼睛跟着鼠转动
JavaScript 技术篇-一段js代码展示可以随鼠标移动变换样式的卡通人物,动态女生眼睛跟着鼠转动。把这段代码写在一个 html 文件里,然后用浏览器打开。<!DOCTYPE html><html><body> <script type="text/javascript"> L2Dwidget.init(); </script></body></html>原创 2020-09-22 09:32:19 · 11774 阅读 · 24 评论 -
JavaScript 技术篇-js自动转换类型,自动转换为字符串,js避免自动转换的坑
JavaScript 技术篇-js自动转换类型,自动转换为字符串,js避免自动转换的坑。自动转换类型当 JavaScript 尝试操作一个 “错误” 的数据类型时,会自动转换为 “正确” 的数据类型。而往往这种隐式的转化可能给程序带来很多莫名奇妙的问题,我们也很难查明原因,所以大家在平时写代码时一定要多多注意。自动转换为字符串当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法:原创 2020-09-16 19:55:49 · 1051 阅读 · 0 评论 -
JavaScript 技术篇-js代码获取当前操作系统信息、浏览器版本信息实例演示,windows NT版本对照表
JavaScript 技术篇-js代码获取当前操作系统信息、浏览器版本信息实例演示,windows NT版本对照表。中间的 Windows NT 6.1 从对照表可以看出包括 Windows7 还有 Windows Servers 2008 R2,我的操作系统就是 win7 的。后面的 Chrome/83 就代表我的浏览器版本,我的正好是 83 版本的 chrome。navigator.userAgent原创 2020-09-16 17:00:07 · 1757 阅读 · 1 评论 -
JavaScript 技术篇-JSON字符串在线快速格式化查看实例演示,json.cn网址格式化json字符串
JavaScript 技术篇-JSON字符串在线快速格式化查看实例演示,json.cn网址格式化json字符串。下面这个 json 串,默认是连着的一长串,我们不容易看出其结构。直接登录 http://json.cn/ 地址,左边把 json 串粘上,可以看到右边已经格式化好了。原创 2020-09-14 19:41:03 · 952 阅读 · 1 评论 -
Chrome 插件开发-主动获取所有页签的tabid,background.js直接向所有页签同步传递消息
Chrome 插件开发-主动获取所有页签的tabid,background.js直接向所有页签同步传递消息。有时候 backgroud.js 需要向所有的页签同时同步消息,这时就要获取到所有页签的 tabid 了,下面的方法即可实现。// 获取所有的页签chrome.tabs.getAllInWindow(null, function(tabs)// 通过tabid向每一个页签发送消息chrome.tabs.sendMessage(tabs[i].id, {type: 'xxx'});原创 2020-09-09 19:56:03 · 4513 阅读 · 1 评论 -
JavaScript 技术篇-navigator.permissions读取chrome剪切板权限获取不生效原因:只有在https协议下使用有效。手动设置chrome页面剪切板读取权限方法
JavaScript 技术篇-navigator.permissions读取chrome剪切板权限获取不生效原因:只有在https协议下使用有效。手动设置chrome页面剪切板读取权限方法。获取剪切板权限,如果是在 F12 控制台执行,需要在 5 秒内点击一下网页内容,这个是只有焦点在页面里才可以用,因为只支持 https 协议,所以要焦点在页面内才能判断是否是该协议,http 被 chrome 认为是不安全的协议。原创 2020-08-28 09:37:46 · 9492 阅读 · 6 评论 -
JavaScript 技术篇-js检测原生对象类型实例演示,js的3种对象类型
JavaScript 的对象类型共有 3 种:Object、Date、Array。myArray.constructor 可以返回对象的内部构造函数,除了 Date 和 Array 对象外,其余的都是 Object 对象,但是 constructor 是可以被改变,所有可能会判断有误。Object.prototype.toString.call(myArray) 返回的是原生对象类型,这个是从对象创建时就固定好的,后面不会被改变,所以我们使用它来进行判断。原创 2020-08-26 19:31:19 · 860 阅读 · 10 评论 -
Chrome 插件开发-桌面通知设置实战演示,设置通知显示、存在时间
webkitNotifications is not defined 解决方法。‘createNotification’ of undefined 解决方法。之前用的是 webkitNotifications.createNotification() 方法,现在已经不用了。现在用的是 chrome.notifications.create() 方法。我在 backgroud.js 里设置桌面通知显示。创建通知时 type、title、message、iconUrl 这 4 个属性一定要有。原创 2020-08-05 15:20:10 · 1858 阅读 · 1 评论 -
Chrome 插件开发-右键菜单开发实战演示,浏览器页面右键菜单选项设置,插件右键菜单点击插件名跳转主页设置
Chrome 插件开发-右键菜单开发实战演示,浏览器页面右键菜单选项设置,插件右键菜单点击插件名跳转主页设置。右键菜单指的是我们在浏览器页面里鼠标弹出来的菜单,我们可以在这个菜单里加入我们插件的功能选项,高端大气上档次,主要是方便我们进行设置哈哈。manifest.json 文件加上 homepage_url,当点击 name 时就会跳转到我们指定的地址了。原创 2020-07-31 10:49:08 · 3611 阅读 · 5 评论 -
Node.js 安装报错提示“The error code is 2503“问题解决方法
The installer has encountered an unexpected error installing this package. This mav indicate a problem with this package. The error code is 2503.译:安装程序在安装此包时遇到意外错误。此mav表示此包有问题。错误码为2503。这个错误的原因就是当前用户没有修改 windows 下 temp 文件夹的权限。原创 2020-07-29 16:06:55 · 2526 阅读 · 4 评论 -
前端开发工具 vscode 使用技巧篇:控制台由powershell切换为cmd方法,windows下新旧版控制台cmd与powershell互切方法
前端开发工具 vscode 使用技巧篇:控制台由powershell切换为cmd方法,windows下新旧版控制台cmd与powershell互切方法。可以看到右上角是 powershell 不是 cmd。通过 ctrl+shift+p,搜索出默认的 shell。然后选择 cmd。最后重启 vscode 就好了。windows 下 cmd 与 powershell 互切方法。在 cmd 里选择属性。新版控制台指定是就是 powershell 了。原创 2020-07-24 10:04:23 · 1329 阅读 · 0 评论 -
JavaScript 技术篇 - js通过xpath路径定位元素方法
JavaScript 技术篇 - js通过xpath路径定位元素方法。我先写好一段 xpath 路径,然后通过该路径可以查到对应的元素节点。通过 document.evaluate('...', document).iterateNext() 方法可以用 xpath 路径定位到元素节点。如下图所示,可以看到我定位到对应的元素节点了。原创 2020-07-07 16:52:24 · 9322 阅读 · 0 评论 -
JavaScript技术篇 - js的null值判断,js的undefined的判断,js的null与undefined的2种区分方法
JavaScript技术篇 - js的null值判断,js的undefined的判断,js的null与undefined的2种区分方法。undefined 和 null 用 == 比较是相等的,我们可以有两种方法来进行区分。区别方法一:因为他们的类型时不同的,=== 会先比较类型,再比较值,所有可以直接用 === 来进行区分。null 的类型是 object,undefined 的类型是 undefined。== 是先把左右两边转化为相同的类型,再进行区分。原创 2020-07-03 18:08:13 · 657 阅读 · 0 评论 -
JavaScript 技术篇 - js 查看哪个元素获取了焦点,js 指定元素获取焦点方法
JavaScript 技术篇 - js 查看哪个元素获取了焦点,js 指定元素获取焦点方法。查看焦点元素通过 document.activeElement 可以获取哪个元素获取到了焦点。如图所示,我的光标在这个查询框里。可以获取到该元素。使指定元素获取焦点focus() 方法可以使某个元素获取焦点。如图,我把输入框的这个元素存到变量 e 里面。然后手动把焦点指到别的元素上,再通过 focus() 方法让查询框重新获取焦点。可以看到焦点获取成功了。原创 2020-07-02 15:43:26 · 3893 阅读 · 0 评论 -
浏览器打开html文件显示中文乱码解决方法
浏览器打开html文件显示中文乱码解决方法。这个问题对新手很容易碰到,但是解决起来也比较简单。打开文档,看看有没有这么一行:把它后面的 UTF-8 改成 GBK 就好了,这个基本能解决百分之 90 的问题。其它就要看情况了,主要是要保证浏览器页面默认编码支持你要打开的 html 编码就好了。如果涉及数据库、js 文件,要看你显示的中文源头是来自于哪里,中间可能经过很多次转换,每次转换都要保证编码的一致性。原创 2020-04-14 18:59:02 · 6065 阅读 · 0 评论 -
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件
js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突。我们加一个延迟时间就能很好的解决这个问题。原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 click_store 里,如果 0.3 秒内没有接收到双击事件,就去执行它,如果接收到了,我们把它清理掉,然后去执行双击事件。setTimeout() 可以实现延迟执行。原创 2020-01-11 10:46:20 · 1316 阅读 · 0 评论 -
JavaScript 技术篇-本地js文件里直接集成jQuery的方法,js文件不依赖html外部引用直接使用jquery方法
常规方法,依赖html里加参数:上面的是直接下载到本地的jquery文件。下面是在线的,直接引用百度,阿里等等提供的jquery网址。js里直接引用jQuery参数方法:直接把jQuery提供的代码复制到js文件顶部就好了,这样就不依赖html引用,直接可用了。下面就是我在官方拷贝的精简版代码,直接复制就好了。JavaScript 技术篇-本地js文件里直接集成jQuery的方法,js文件不依赖html外部引用直接使用jquery方法原创 2019-05-08 09:51:18 · 3639 阅读 · 0 评论 -
Chrome 技术篇-console控制台检测xpath、css唯一性
$x可以获得xpath的dom集合,$$可以获得css的dom集合。length可以反映出集合里的dom个数。等于1的话就代表只有一个dom,就说明xpath或css是唯一的。原创 2019-04-20 10:10:48 · 1587 阅读 · 0 评论 -
JavaScript 技术篇-简单的两行js代码获取password不可见密码实例演示,js获取密码输入框里的值
JavaScript 技术篇-简单的两行js代码获取password不可见密码实例演示,js获取密码输入框里的值如下图,chrome 控制台。先获取到密码框的dom节点,再通过value就能获取到不可见的值。密码框如下,其id是password。右键检查元素可以定位到该元素的 dom 节点,里面直接会显示出节点的 value 值。原创 2019-04-18 22:12:40 · 2308 阅读 · 0 评论 -
JavaScript 技术篇-js通过xpath获取dom节点,js校验xpath唯一性
document.evaluate()就是通过xpath获取dom节点。返回的结果通过.iterateNext()可以获得dom对象,每次调用会少一个,当没有时就返回空。JavaScript 技术篇-js通过xpath获取dom节点,js校验xpath唯一性。 document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null);原创 2019-04-20 20:27:25 · 7570 阅读 · 1 评论 -
CSDN博客主页增加赞赏码收钱模块,高端大气上档次!
话不多说看效果图增加支付宝的收款码和微信的赞赏码图片,裁剪一下。然后嵌入html代码里并表现出来。原创 2019-04-15 21:18:07 · 664 阅读 · 0 评论 -
JavaScript 技术篇-js获取document的几种方式,js获取dom元素的常用方法。
第一类:通过属性获取。document.getElementById("fash")第二类:通过css选择器获取。document.querySelector(".fash")原创 2019-04-08 20:03:21 · 3466 阅读 · 3 评论 -
JavaScript 技术篇-js获取iframe内的元素方法实例演示
var a = document.querySelector("iframe")获取到 iframe。var b = a.contentWindow.document获取到 iframe 里的 document。b.getElementById("...")就能获取到 iframe 里指定 id 的元素了。JavaScript 技术篇-js获取iframe内的元素方法实例演示原创 2019-04-08 17:05:41 · 14076 阅读 · 2 评论