自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(27)
  • 收藏
  • 关注

原创 vue2实现移动端级联选择器

vue2实现的移动端级联选择器,用于多层级数据的选择,典型场景为省市区选择

2022-02-12 10:51:50 5316

原创 基于vue的长列表虚拟滚动插件

虚拟滚动插件1 背景一个长列表 Web 页面,如果需要展示成千上万条数据,那么页面中就会有数万甚至数十万的HTML节点,会巨大的消耗浏览器性能,进而给用户造成非常不友好的体验。主要体现在以下几个方面:页面等待时间极长,用户体验差;CPU 计算能力不够,滑动会卡顿;GPU 渲染能力不够,页面会跳屏;RAM 内存容量不够,浏览器崩溃。优化方案:不把长列表数据一次性全部直接显示在页面上;截取长列表一部分数据用来填充屏幕容器区域;长列表数据不可视部分使用使用

2021-07-04 17:15:58 2823

原创 文本一行居中多行左对齐css实现

文本一行居中多行左对齐css实现

2023-09-17 23:12:08 280

原创 js获取video元素真实分辨率

通过监听video元素触发的canplay事件获取video元素真实分辨率

2022-09-18 22:46:45 2440 1

原创 webview使用uni.chooseImage从相册返回不触发回调的优化处理

webview使用uni.chooseImage从相册返回不触发回调的优化处理

2022-07-05 23:41:18 1494

原创 html页面刷新或关闭前的操作

beforeunload / pagehide监听html页面刷新或离开前的操作

2022-06-22 23:58:46 667

原创 Vue原型上自定义属性类型检查配置,提升vscode项目开发效率

Vue原型上自定义属性类型检查配置,提升vscode项目开发效率

2022-05-11 23:12:21 862 1

原创 axios数组传参之后端无法解析

问题:现有一个post请求,需要把一个对象数组数据传给后端,如果直接把对象数组传给后端,发现后端接收后的值为[Object, Object],后端无法解析。解决方案:再发送请求之前,先把该对象数组转化成json字符串,再传给后端,发现后端接收后的值就为json字符串,后端再通过相应的解析方法,最终解析成对象数组。const contactList = [ { username: '张三', mobile: '13578788989' }, {.

2022-04-16 01:41:50 711

原创 公告栏文本横向循环滚动

动画、js两种方式实现公告栏文本横向循环滚动

2022-04-04 17:36:34 1402

原创 文字溢出自动向上循环滚动

文字溢出自动向上循环滚动

2022-03-09 22:27:00 707

原创 css实现switch开关状态切换

1 图标效果2 代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2021-09-30 01:05:39 535

原创 promise源码实现

class Promise { // 三状态:等待态、成功态、失败态 static PENDING = 'pending' static RESOLVED = 'resolved' static REJECTED = 'rejected' constructor(excutor) { // promise实例初始化 this.state = Promise.PENDING // 默认为等待态 this.value = undefin

2021-08-19 21:57:40 146

原创 vue2与vue3响应式数据原理的区别

1 vue2响应式数据原理vue2:通过es5的Object.defineProperty实现数据响应式// 数组响应式处理:覆盖原有数组原型方法,增加通知变更var originProto = Array.prototype// 创建一个含有原型的对象var arrayProto = Object.create(originProto);['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(key

2021-08-19 01:11:22 318

原创 input type=file选择图片按钮样式修改与图片预览

1 背景通过上图我们可以看到input=file按钮的默认样式,的确不怎么好看,如果要自定义按钮的样式,该如何实现呢?2 方式1样式input覆盖整个按钮区域,并且设置完全透明<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l

2021-08-19 00:48:36 3143 2

原创 css实现多行文本展开与收起

css实现多行文本展开与收起

2021-07-28 01:53:29 2248 1

原创 vue插件开发

vue插件开发1 插件概念1.1 什么是插件随着项目编写的进行,代码量越来越多,重复的内容随之增加,比如每个页面可能都会有提示框,同个项目中这些提示的样式都是统一的,那么我们没必要每个页面每个交互动作都写一个提示组件,我们可以创建一个通用的组件〈全局组件),然后再每个需要的地方调用,减少代码量,简化代码结构,同时如果有新的需求需要修改也方便快捷,只需修改全局组件即可,一处修改,全局有效。插件 (Plugin )是用来增强你的技术栈的功能模块,它的目标是Vue本身,简要的讲:插件是对 Vue的功能的

2021-07-27 17:23:51 447

原创 Node操作Mysql简单实现

Node操作Mysql简单实现通过express创建服务器;通过浏览器请求服务器,服务器收到浏览器请求后,根据不同的请求去操作Mysql数据库实现数据的增删改查1 配置开发环境npm init -ynpm install mysql express --save2 连接数据库const mysql = require('mysql');const express = require('express');// 创建服务器const app = express();// 1.创建

2021-07-27 15:28:41 1259

原创 http静态服务

http静态服务1 回调方式// 浏览器请求服务器的内容,进行回显const http = require('http');const url = require('url');const path = require('path');const fs = require('fs');// mime处理内容类型const mime = require('mime');const server = http.createServer((req, res) => { // 解析浏览器请

2021-07-27 15:00:17 368

原创 npm工具

npm1介绍node package manager 意为node包管理器安装node时会自带npmnpm网站,可以查找各种安装包2 npm常用命令更新npmnpm install npm@latest -g2.1 初始化项目npm init或npm init -y(--yes)2.2 安装依赖2.2.1 安装生产依赖npm v6版本开始不需要加参数,例如:安装 jQuerynpm install jquery或npm i jquery(install可用i

2021-07-27 13:57:34 174

原创 vue预渲染

vue预渲染​ vue是一个单页面应用(spa),只有一个 html 文件(内容只有一个#app根节点),然后根据访问的 url 来匹配对应的路由脚本,动态地渲染页面内容,然而这种方式无法被爬虫和百度搜索到。如果想对某些页面进行SEO(搜索引擎优化)优化,可以通过预渲染实现,无需使用web服务器实时动态编译html,只需要在构建的时候简单的生成针对特定路由的 静态html文件。优点是设置预渲染更简单,并可以将你得前端作为一个完全静态的站点。1 安装预渲染插件npm install prerend

2021-07-27 01:34:35 2135

原创 js跨域解决方案

js跨域解决方案跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 JavaScript 实施的安全限制,那么只要协议、域名、端口有任何一个不同, 都被当作是不同的域。 跨域原理,即是通过各种方式, 避开浏览器的安全限制。1 跨域资源共享(cors)后台服务器端通过设置 Access-Control-Allow-Origin 即可,前端无需设置,若要带 cookie 请求,前后端都需要设置 。res.header("Access-Control-Allow-Or

2021-07-10 21:26:36 423

原创 电商图片放大镜jquery实现

电商图片放大镜jquery实现1 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt

2021-07-06 17:04:54 133

原创 Vue2响应式原理简易实现

1 响应式原理概括2 响应式原理代码实现class Vue { constructor(options = {}) { // 1.保存数据 this.$options = options; this.$data = typeof options.data === 'function' ? options.data() : options.data; this.$el = options.el; // 2.将thi

2021-07-01 18:48:46 419

原创 web开发时手机浏览器无法通过ajax请求电脑本地服务器数据

web开发时手机浏览器无法通过ajax请求电脑本地服务器数据电脑本机ip:192.168.1.102电脑本地服务器:localhost:4000电脑web静态服务器:localhost:8080电脑和手机都连接同一个网络,因此他们都处于同一个网段,可以进行数据通信。在电脑浏览器上访问web应用(比如:localhost:8080/home)时,会发送ajax请求(比如:localhost:4000/data),请求电脑本地服务器api接口数据,可以成功获得数据刷新页面,证明不存在跨域问题,但.

2021-06-28 01:30:36 801

原创 Vuex源码简易实现

Vuex源码简易实现let Vue;class Store { constructor(options = {}) { // 普通变量不具响应式,数据改变不能触发视图更新 // this.state = options.state; // Vue实例中的data才具有响应式,数据改变才会触发视图更新 this.s = new Vue({ data() { return {.

2021-06-20 20:53:11 106

原创 原生js实现dom元素节点添加类名&移除类名

给dom元素节点的class属性任意位置添加类名,移除类名时不留空格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial

2021-06-10 00:18:43 1537

原创 移动端1个像素边框线sass实现

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

2021-06-08 13:29:13 202

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除