jcat_李小黑-CSDN博客

原创 2022年我的创作为什么这么少

反思之前很喜欢记录自己学习和工作中遇到的开发的问题，一直保持一定的输出，能帮助到很多同学修复问题，提供给大家开发经验也是我一直很享受的一件事。2021年下旬-2022年这个时间确实没有什么输出，分析原因可以归为三点：确实是太忙了，换了新的工作，大量的精力投入到新的环境中，没有沉淀的时机，每天都在业务线上挣扎，思考的都是重构、优化、按时上线、不背事故、人情关系。工作嘛，就是劳务换收入，每天时间都卖给了公司～见识过大海的鱼，再也没办法回到池塘。不可否认的说，之前让我沾沾自喜的文章确实是写的挺垃圾的，每

2022-04-20 19:48:42 457 3

原创 video.js 属性用法大全

video.js 属性用法大全属性 <video src="test.mp4" controls width="400" height="300"></video>  <video src="test.mp4" controls controlslist="nodownload" width="400"

2022-03-25 10:10:14 1937

转载 03 为什么 React 16 要更改组件的生命周期？（下）

03 为什么 React 16 要更改组件的生命周期？（下）通过对上一个课时的学习，你已经对 React 15 的生命周期有了系统的掌握和理解。本课时，我将在此基础上，对 React 16 以来的生命周期进行剖析。在理解“是什么”的基础上，我将带你对比新旧两个版本生命周期之间的差异，并探寻变化背后的原因。通过本课时的学习，你将明白 React 团队“动作频频”背后的思量与野心，同时也将对时下大热的 Fiber 架构形成初步的认知。进化的生命周期方法：React 16 生命周期工作流详解关于 Rea

2021-11-09 17:25:45 381

转载 02 为什么 React 16 要更改组件的生命周期？（上）

02 为什么 React 16 要更改组件的生命周期？（上）React 生命周期已经是一个老生常谈的话题了，几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍。然而，入门教材在设计上往往追求的是“简单省事、迅速上手”，这就导致许多同学对于生命周期知识的刻板印象为“背就完了、别想太多”。“背就完了”这样简单粗暴的学习方式，或许可以帮助你理解“What to do”，到达“How to do”，但却不能帮助你去思考和认知“Why to do”。作为一个专业的 React 开发者，我们必须要求自

2021-11-09 11:47:23 216

转载 JSX代码是如何‘摇身一变’成为DOM 的

前言一个好的框架，就是最好的老师-react进阶学习篇1JSX 代码是如何‘摇身一变’成为 DOM 的时下虽然接入 JSX 语法的框架越来越多，但与之缘分最深的毫无疑问仍然是 React。2013 年，当 React 带着 JSX 横空出世时，社区曾对 JSX 有过不少的争议，但如今，越来越多的人面对 JSX 都要说上一句“真香”！本课时我们就来一起认识下这个“真香”的 JSX，聊一聊“JSX 代码是如何‘摇身一变’成为 DOM 的”。关于 JSX 的 3 个“大问题”在日常的 React 开发工

2021-11-08 17:36:12 647

原创 vue+H5实现扫码条形码及二维码功能

前言需求：尽在H5使用Js 完成扫码功能，不依托客户端支持；思路：使用video吊起后台摄像头 + 条形码解析插件；本文使用的框架有Vue + Vant + @zxing/library ，提示this.$message等方式不必使用Vant可以用自己框架；npm install Vue Vant @zxing/library -S效果代码<template> <section class="section"> <div class="pag

2021-09-15 16:51:49 6697 19

转载 vue封装打印插件print.js实现打印组件功能

代码插件地址：https://github.com/xyl66/vuePlugs_printjs1. 打印插件属性方法定义-print.js// 打印类属性、方法定义/* eslint-disable */const Print =function(dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ '

2021-09-06 14:20:09 940 1

原创 vue2/vue3使用tinymce封装富文本

tinymce官网：http://tinymce.ax-z.cn/vue2语法前期准备npm/cnpm/yarn install tinymce vue @tinymce/tinymce-vue -S{ "@tinymce/tinymce-vue": "^3.0.1", "tinymce": "^5.8.2", "vue": "2.6.10",}配置页面 - 项目public公共部分存放tinymce的中英翻译，皮肤等静态资源；从node_model中直接赋值到项目中

2021-08-31 15:27:58 1572 7

原创 Vue3.0里为什么要用 Proxy API 替代 defineProperty API 原因？

原理Object.defineProperty只能遍历对象属性进行劫持；Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的；Proxy可以直接监听数组的变化（push、shift、splice）；Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty不具备的；Proxy 不兼容IE，也没有 polyfill, defineProperty 能支持到IE9；因为

2021-08-30 17:19:16 422

原创 vue3语法封装element中的upload上传组件

vue3语法1.1 upload组件<template> &lt

2021-06-22 17:00:41 5043 1

原创 vue3.0中如何使用router路由、vuex、element-plus

前言vue3 已经出来大半年了，之前一直没有项目可以实际上手使用，这次刚好有机会，并且 vue3 已经可以和 element-plus 配合起来稳定开发了！那么就来一起用用 vue3（这篇对比 vue2 主讲如何使用，之后再探究原理），其实说 vue3 最好的教程就是vue3 官网，官网写的很好，都可以照着官网和现成的案例直接学习!当然，在 vue3 中也可以书写 vue2 的语法，我不想写成完全的初级教程，所以会选择性的写我认为重要的，很基础的东西大家有需要可以评论留言~正文这里使用 vue3 +

2021-06-01 15:50:19 3226

原创 vue2中使用路由跳转打开新页面

使用路由导航 toSeeInfo(row) { const { href } = this.$router.resolve({ name: "Info", query: { id: row.id, }, }); window.open(href, "_blank"); },<vue-link>标签<router-link target="_blank" :to="{

2021-05-18 13:43:49 1216

转载 localStorage设置过期时间

https://www.cnblogs.com/ricolee/p/localstorage-expiretime.html前言浏览器端需要存储一个用户的标识和cookie一样需要过期时间，但是用的是localStorage存储。而localStorage一经存储除非手动删除是不会过期的。那就需要自己实现过期机制。网上找了几种简单的方法。方案一：ES5扩展Storage思路很简单，存储的值加一个时间戳，下次取值时验证时间戳。注意： localStorage只能存储字符，存入时将对象转为json字符

2021-04-30 17:02:29 970 1

原创 2021前端知识总结-部分解答-持续更新

一、h5c3部分1.css实现垂直水平居中的方式？行内元素，父元素设置：div{ height:60px line-height:60px; text-align: center; }块级元素，已知宽度div { width:100px; margin:0 auto;}块级元素，未知宽度-- flex/定位，flex布局div{ display: flex; justify-content: center; align-items: ce

2021-03-12 15:50:38 1194

原创前端js使用promise循环多个异步请求并发，并处理其结果

前言在实际开发中，碰到参数不同，接口相同，需要发送多个请求拿到数据后统一做处理的情况，例如：模块总退出功能，点击退出按钮，调用多个模块的退出接口，全部成功后退出到登录页；代码//数组+异步请求const datas = ['小明','小红','小李']async function login(array){ const promise = array.map(i=>{ const url = 'http://197.1.1.1/login?user='+i return new P

2021-01-18 23:10:12 7534

原创微信内置浏览器及华为小米QQ浏览器关于使用rem的兼容性问题解决

一、问题描述在做移动端h5页面开发的时候，rem的使用简直是屏幕适配的利器，但是，它在也存在兼容性问题：在微信内置浏览器及华为小米内置及QQ浏览器访问rem做的h5的时候，由于设置部分字体过小，以上浏览器为了满足浏览需要，强制限制了html最小字体，虽然我们代码设置了html,body的字号，但并未生效，从而影响了页面布局！二、rem的使用之前我已经整理过了如何使用rem的方法，这里只是为了解决bug，就不展开说明了：附：如何使用rem适配移动端及移动端适配的其他方法汇总三、解决方法此版本

2020-12-11 17:02:24 2555 2

原创使用echarts完成中国省市区县镇地图展示

前言很长时间没有写博客了，最近在做一个大数据面板，记录一下如何使用echarts完成地图特效展示；echarts关于地图代码只有案例，并没有数据，尤其是区县地图，此篇详细介绍书写过程；一、中国地图...

2020-11-19 18:00:34 31528 20

原创本地环境中使用js完成中英文切换的双语页面开发（jq插件附代码）

前言前端本地如何支持中英文切换的双语页面？这个的方法可以延展很多，常见的是i18n，最粗暴的解决方法写两个页面。但是各有利弊，使用i18n请求本地json数据在谷歌中会报跨域，必须请求服务器端。此篇就是解决下：如何在本地开发中英文切换！正文页面功能：默认进入页面为中文，点击中英文切换数据；效果：代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />

2020-11-18 17:54:10 2217 3

原创小程序：开发微信小程序中多选、自定义顶部栏、等十个重要的常见功能合集

微信小程序常见功能前言一、使用本机字体二、自定义透明顶部栏三、拨打电话四、获取用户信息五、动态设置图片地址六、一键内容到剪切板，并关闭弹框提示七、多选及重置功能：动态改变class7.1分析上述代码过程八、px及rpx九、如何使用vant-ui库十、如何使用自定义组件10.1 封装 compontents/newsList10.2 页面调用结语前言总结下小程序开发中，拨打电话、自定义顶部栏、使用本机字体等常见功能整理；一、使用本机字体css中更改font-family；.page{ font-f

2020-09-17 15:31:43 1075 5

原创小程序：微信小程序完成分享好友及自定义分享朋友圈功能（完整版）

前言以下代码使用了： vant-ui库；主要完成了：上拉框显示分享朋友圈按钮，点击分享朋友圈后，弹框展示图片，点击图片保存到本地；上拉框显示分享好友按钮，分享当前页的小程序给好友；微信小程序分享好友及分享朋友圈功能，功能很常见，记录下，方便今后查阅一、上拉框显示分享按钮1.1 wxml<van-action-sheet bind:close="shareClose" bind:cancel="shareClose" cancel-text="取消" title="分享页面"

2020-09-17 10:54:43 11731 2

原创 js点击按钮模拟F11完成打开和关闭全屏功能& 使用js模拟键盘调用事件

一、打开全屏function fullScreen() { var el = document.documentElement; var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; if (typeof rfs != "undefined" && rfs) {

2020-09-04 17:55:23 6465 2

原创 React：react-router动态路由的使用及项目封装路由全过程

一、路由1.安装npm install --save react-routernpm install --save react-router-dom //使用react-router5以上版本2. 语法参考文档react-router-cn：github文档react-router官方学习文档router语法学习3. 路由的作用单页面刷新（SPA），切换显示视图初步使用方式：src/app.jsx页面import React, { Component } from 'react'

2020-08-26 17:50:34 10397 4

原创 vuecil3＋版本下如何兼容谷歌ie等不支持es6的低版本浏览器

前言在之前的文章中介绍了如何升级vue老项目到最新版本，不可避免的要面临一个困扰前端开发一生的问题:vuecil4版本下如何兼容谷歌ie等不支持es6的低版本浏览器！新版本更替，网上很多关于兼容性的文章都是vuecil2时的版本时效性都太差了，只能参考，而且很多文件都没有思考啊，只是单纯的把所有兼容性方法都写了一个遍，造成代码冗余和我强迫症。。。这里讲一下vuecil3+关于兼容性有针对性的、亲测的解决办法！看完这一篇，希望能解决大家关于兼容性问题的疑问。废话不多说，开始吧~正文vue cil官

2020-07-21 17:42:00 5813 4

原创 vue项目升级(02):vue项目中的旧版本npm包怎么持续升级维护

vue项目升级(02):vue项目中的旧版本 npm包怎么持续升级维护前言话说身为一个站在巨人的肩膀上的API工程师，在日常开发中，肯定会使用很多插件，如果你当前项目的插件已经落后新版很多代了，怎么办？之前介绍了vuecil3的语法和配置，而我的项目升级是直接替换了整个src文件夹来完成的，但是那我们插件包怎么升级？那这篇来介绍vue项目中的npm包怎么持续的升级维护一、替换package.json升级过程后，将旧版本的packag.json文件中的npm包相关代码复制到新版本；cnpm in

2020-07-08 15:27:11 4161 2

原创 vue项目升级(01)：全面解析vuecil3/vuecil4的vue.config.js等常用配置

前言前端变化日新月异，层出不穷，公司原项目使用vuecil2版本开发，elementUI等一系列库版本太低，也脱离世界很久远了，新版本库需要webpack4等环境，而老版本配置起来bug很多，在使用过程中很多东西都不能实现，所以升级真的是迫在眉睫；此篇会逐步解析：vuecil2如何升级到vuecil3+vuecil3+的语法二次升级维护手册webpack配置项目的优化…一、vuecil2如何升级到vuecil3+卸载旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/

2020-06-15 15:29:47 6514 15

原创 React（05）：使用react完成简单留言板案例

前言之前学了react基本语法和jsx/组件化，这里还是用ts学习时候的本地留言板案例来实践一下之前的学习语法；正文注意点引入react、react-dom、babel，development是开发版；使用jsx语法时候 script：type="text/babel";使用cdn引入时设置 crossorigin 设置用户凭证；使用jsx循环创建dom的时候，需要设置key；向事件处理程序传递参数：删除方法<button onClick={(e) => this.deletD

2020-05-27 17:59:54 972

原创 React（04）：React中的组件化及父子组件间的传值取值

接着前一篇继续学习React组件化React中的组件化及父子组件间的传值取值

2020-05-21 15:12:46 992

原创 React（03）：React中的JSX语法

前言React（02）：React基础语法及核心的概念React很重要的部分：react中使用JSX语法正文什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）可以将HTML语言直接写在JavaScript语言之中，不加任何引号，它允许HTML与JavaScript的混写。这就是JSX的语法。一、使用JSX语法特点及注意事项当编译引擎在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 {} 就把花括号

2020-05-20 11:15:08 818

原创 TypeScript（4）——Vue全家桶+ TypeScript + Vuex + LocalStorage 完成的本地便签案例

前言之前已经学过TS学习笔记3——如何在vue项目中使用TypeScript语法；这篇完成VueCil4 + TypeScript + Vuex + LocalStorage 完成的本地便签案例；需求：本地便签的增删改查，便签分类查看；这个案例主要使用的是Class类，着重于面向对象开发而非面向过程，所以也复用了TS学习笔记2中的便签案例部分代码，大家看我的博客和我一起学习ts的时候，还是建议从TS学习笔记1开始，每一篇都看一下；正文项目源码项目源码demo在线演示开始样式----使

2020-05-18 18:02:08 1234

原创 TypeScript（03）——vue全家桶中如何使用TypeScript语法合集

之前已经学过[TypeScript函数，class类其他语法及ts在html页面中如何使用案例]，这篇学习如何在vue项目中使用ts；为了更方便理解，我把在vue中常用功能点代码用js/ts写法分开书写，如果你对vue比较熟悉的，可以直接跳转到最后，最后附有demo源码；

2020-05-14 11:29:19 1665

原创 vue+element项目全局注册el-pagination分页组件和el-upload上传组件并使用

为什么我要写这个博客？因为记录一下平时怎么偷懒写代码~~不然怕忘了；其实主要为了记录全局注册组件的方法，在项目中就不用单页面调用了，需要的地方直接用，整理了一下vue+element中常用的分页组件封装和上传组件封装；

2020-05-13 17:44:32 1501 2

原创 vue项目中实现前台导出和后台导出Excel或其他类型文件的方法合集

前言此篇记录一下导出功能，分为后端导出和前端导出；网上都有很多方法了，特记录一下，方便之后查阅；正文一、后台导出后端导出指的是，后端已经封装好二进制流，前端只需要做的就是请求接口和下载；在写其他代码之前一定测试接口是否正常；例如接口：http://197.23.46.97:8088/exprotExcel，参数：type:'exprot',name:'excel002'，get请求，正常流在浏览器中直接访问接口路径http://197.23.46.97:8088/exprotExcel?typ

2020-05-13 09:34:36 4688 4

原创 VueCil代理本地proxytable无效报错404的解决方案

前言因为项目中遇到了这个bug：Vue代理本地proxytable成功，却无效报错404，在后端和代理都配置无误的情况下，还是报404，先已解决，特记录，希望能帮助到他人；正文1. 为什么要使用代理？代理的作用是：把请求代理转发到其他服务器的中间件；例如：我们当前主机为http://localhost:8080/，现在我们有一个需求，如果我们请求/api，我们不希望由3000来处理这个请...

2020-04-29 18:02:32 9504 8

原创 TypeScript（02）——函数，class类其他语法及ts在html页面中如何使用案例

前言时隔一年。。的第二篇ts学习笔记重出江湖，继上一篇TypeScript学习笔记（01）–类型后，此篇介绍语法部分的剩下内容；正文1.变量js : let 变量名 = 值ts : let 变量名：变量类型 = 值2.常见类型js原有类型：string number boolean Array Null undefined Symbol Objectts新增类型：tu...

2020-04-15 14:57:25 4453 2

原创基于Vue的单页面格式化数据高亮编辑器组件：兼容json/xml/html/txt多种格式

前言项目中遇到这样的需求：vue项目中格式化XML,JSON等数据并高亮显示并支持修改保存；我在网上没有找到特别合适的插件，所以在前人的基础上开发一下，完成这个功能并封装为单页面组件；正文1. 介绍项目是基于ACE高亮编辑器和vkbeautify格式化显示基础上开发的；因为懒得写样式，所以使用到了element(愿意写样式的就不用下了)；其中复制功能使用到了vue-clipboard2...

2020-04-01 13:23:46 4575 9

原创 React（02）：React基础语法及核心的概念

7. 在项目中使用 react运行 cnpm i react react-dom -S 安装包react：专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中react-dom：专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()在index.html页面中，创建容器：<!-- 容器，将来，使用 React 创建的虚拟DOM元素，...

2020-03-18 12:04:42 505

原创 React（01）：敲黑板！学习react前你需要懂的知识点

React.js - 第1天1. React简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友）的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。Angular1 2009 年谷歌 MVC 不支持组件化开发由于 React 的设...

2020-03-18 12:02:35 915

原创 ES6的class 构造函数

前言这东西私下学了n遍了，还是老记不住，这次空闲时间在学习react，常用到class，好记性不如烂笔头啊，所以专门记录一下，方便之后查看；正文1. 普通函数// func语法function Demo(x, y) { this.x = x this.y = y}Demo.prototype.test = function () { return `${thi...

2020-03-09 17:01:05 533 1

原创如何使用rem适配移动端及移动端适配的其他方法汇总

前言移动端适配老生常谈；方法有很多种，这里记录一下，我最常用的方法：rem首先第一步必须在header中写标签：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">。正文安利一个vscode的插件：cssrem 这个插件的作...

2020-03-03 18:10:07 1524 1

原创 jQuery 完成简单又好看的五角星带评分功能~

1.引入jQuery <script src="./js/jquery.min.js"></script>2.代码总结其实就是换背景图。。html <div class="statsBox clearfix"> <div class="formItemDiff formItemDiffFirst"></di...

2020-02-23 23:35:24 554

数据可视化驾驶舱.7z

echars模板.7z

空空如也