- 博客(33)
- 收藏
- 关注
RSS订阅原创 Database设置为utf8mb4，依旧插入不了中文的问题
定义了一个字段类型为VARCHAR，插入中文内容时，发生了以下错误：2. 常见解决方法搜索解决方案时，发现是系统默认设置的字符集有问题。相关解决方法是把字符集修改为utf8mb4。3.常见解决方法不奏效在使用以上方法后，依旧没能解决插入不了中文问题。最后排查了下已创建的表，发现了问题的所在。发现表数据在创建时，会给VARCHAR设置默认字符集“CHARACTER SET latin1 NOT NULL”，即便修改了DATABASE和TABLE的字符集，原先创建的表中varchar类型的字段依旧是原
2022-06-17 18:24:33
923
原创 HTML5唤起摄像头拍摄、裁剪并上传
页面唤起相机拍摄、保存、修改尺寸以及上传近期有个需求，需要在微信中打开移动端页面，让用户在页面中唤起相机进行人脸拍摄，用于身份认证或满足其他业务上的需要。同时要保证上传图像不能过大，需要对图片进行裁剪再上传过程利用input的accept和capture这两个属性来限定接收类型和相机方向（前后摄像）拍摄获取的图片和普通文件上传一样利用FileReader进行读取处理设置到图片目标大小，再用canvas.drawImage读取图片，最后利用canvas.toDataURL转化为base64
2021-11-24 17:26:38
1764
原创 微信小程序onCameraFrame获取的ArrayBuffer转为base64图片的方法
ArrayBufferToBase64前言：由于小程序不在维护wx.arrayBufferToBase64（已弃用），项目中需要用摄像头获取人脸并将获取的ArrayBuffer数据转化为base64，经过各种搜索整合，最后解决问题。ArrayBuffer编码为png下载UPNG https://github.com/photopea/UPNG.js 结尾提供完整代码修改代码，将UPNG导出，并引入依赖pako安装pako（npm i pako --save），小程序安装后需要构建npm（具体
2021-11-17 16:38:42
6138
9
原创 Typescript定义数组，让数组的所有Item只能是指定对象的key值
描述Typescript定义一个数组，该数组的所有Item只能是指定对象的key值。示例const targetObj = { a: "", b: "", c: ""}// okconst arr = ["a", "b"]// errorconst arr = ["a", "d"]解决const arr: (keyof targetObj)[] = ["a", "b"]思考如果要定义一个对象，对象的key值必须从targetArr的Item中取，该如何定义类型？即
2021-05-18 14:50:40
3280
原创 function components cannot be given refs. Attempts to access this ref will fail.
父组件访问子组件方法使用useRef生成childRef，props ref={childRef}访问子组件时报错。报错内容的大意是子组件是函数式组件，不能使用useRef，让你尝试下forwardRef。方案一：尝试forwardRef可能会遇到一直是null的情况function Demo(props, ref) { ... return ( <Child ref={ref}></Child> )}export default forwardRef
2021-05-13 10:33:13
3511
原创 React如何在请求完成后实现页面跳转
React函数组件如何在请求完成后实现页面跳转由于用react开发时直接使用函数式组件，一开始以为需要用Redirect组件来跳转，然后查看文档后发现有withRouter这个高阶函数，能让props中获取location和history对象。利用withRouterimport { withRouter } from "react-router-dom";function Demo(props) { ... api(params).then(res => { props.
2021-05-11 17:26:55
1176
原创 Error: Module “crypto“ has been externalized for browser compatibility and cannot be accessed in ...
背景使用vite构建项目的时候需要用到crypto进行加密出现的错误。问题出在vite本身使用了crypto，我们如果通过npm i crypto -S会导致vite构建时报错。Error: Module "crypto" has been externalized for browser compatibilityand cannot be accessed in client code.解决采用js-md5来进行加密。https://www.npmjs.com/package/js-md5
2021-05-08 17:22:14
12669
2
原创 什么是闭包？一看就会！
定义A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, cl
2021-04-17 23:41:06
210
原创 无限长滚动列表（虚拟列表）的实现
无限长滚动列表（虚拟列表）的实现原理：监听容器滚动，根据滚动距离生成对应列表，再利用绝对定位，将列表展示到容器的对应位置。1、预先处理容器样式与生成数据容器列表的最大高度为500px，列表项（li）的高度定为50px，即容器只展示10条数据。<style> ul.container { position: relative; width:500px; max-height: 500px; /* 限定容器展示区域的大小 */
2021-03-04 16:47:19
2087
2
原创 Vue中模板渲染原理
Vue中模板渲染原理1、概念模板：本质字符串。与字符串的区别：有逻辑（vue中有v-if、v-for）嵌入js变量（{{变量}}）需要转化为html，页面才会识别并正确解析。2、过程理解目的：理解模板（字符串）---->JS的vnode的过程，是如何实现嵌入变量和执行逻辑。转化为html则由updateComponent函数调用patch方法实现。例子1（只有js...
2019-09-14 15:35:35
3206
原创 Vue响应式原理（浅显理解与MVVM的实现）
Vue响应式原理MVVM的设计模式：M是Model数据层，V是View视图层，VM则是ViewModel。Vue中的MVVM实现方式：V层通过DOM Listeners来通知VM层修改数据，M层则通过Data Bindings来通知VM层让V层更新显示内容。具体实现方式：数据绑定（Model–>VM–>View）：通过Object.defineProperty(obj,...
2019-09-13 21:50:38
652
原创 virtual DOM（虚拟节点的实现）
virtual DOM（虚拟节点的实现）1 利用JS操作真实DOM节点实现页面渲染任务：在一个容器渲染（利用用户信息生成的）表格，再点击按钮进行数据修改，修改后再重新渲染修改后的信息。方式：利用jQuery操作DOM节点，一开始清空容器的内容，再生成表格，渲染表格。弊端：操作DOM很耗费性能，这种方式是直接替换容器中的所有节点，重复的节点无法复用，降低浏览器性能。HTML代码：&l...
2019-09-13 00:49:57
1084
原创 关于JS函数的问题
关于JS函数的问题主要讨论函数声明式和函数表达式的区别：先看两个例子：例子1：a();//我是声明式函数function a(){ console.log('我是声明式函数')}例子2：a();//a is not a functionvar a = function (){ console.log('我是赋值型函数（即函数表达式）')}问题：为什么执行会结...
2019-09-03 22:50:04
300
原创 JS实现深拷贝
JS实现深拷贝思路：判断传入的类型，创建空数组或对象>>>创建myCopy用于递归调用，分析属性值或项的类型>>>如果值为基本类型值则返回，是对象或数组则递归调用myCopy进一步分析>>>返回拷贝的结果。function deepCopy(obj) { //判断拷贝后的结果是数组还是对象 let copy = Object.p...
2019-08-26 21:43:24
133
原创 JS关于“==”运算符
参考自《JavaScript权威指南》console.log(([])?true:false); console.log(([]==false?true:false)); console.log(({}==false)?true:false)([])?true:false//会调用Boolean([])，等价于true?true: false[] == false?true:false...
2019-08-22 00:35:04
274
原创 JS实现数组的find方法
JS实现数组的常用方法编程思路：先确定方法要传入的参数和返回的值，再通过原型定义，在Array的原型上添加自定的方法，验证是否达到预期效果。1、find的功能array.find(function(currentValue, index, arr), thisValue)功能：返回通过测试（函数内判断）的数组的第一个元素的值。简单理解就是：传入判断条件，判断数组各个元素，返回满足条件...
2019-08-20 16:54:47
8362
原创 JS从“深度优先”和“广度优先”遍历获取数据中某一属性值的集合
JS实现深度优先遍历和广度优先遍历1、要求获取以下数据结构中所有name属性值的集合。数据的结构如下：const myData = [ { name: 'a', children: [ { name: 'b', children: [{ name: 'e' }] }, { name: 'c', children: [{...
2019-08-20 00:28:47
657
2
原创 webpack 笔记（三）
webpack 笔记（三）1 Library（库）打包1.1 解决导出库的引用问题创建了一个library的库，要使别人使用时能采用多用方式引入，配置如下：引用方式：import library from 'library'const library = require('library')require(['library'], function(){})<scrip...
2019-07-29 23:53:18
237
原创 webpack 笔记（二）
笔记（二）1 Tree Shaking只支持ES Module（静态引入），也就是用import export导入导出。作用：一个模块中有多个内容，通过Tree Shaking可以控制只导出使用过（引用）的内容（方法），未使用过的不会打包到main.js文件中。1.1 优化（optimization）配置与使用optimization配置项：开发环境：webpack配置mo...
2019-07-29 23:52:42
225
原创 Webpack（笔记一）
Webpack（笔记一）简介：初识Webpack、Webpack核心概念、进阶、实战配置案例、webpack底层原理及脚手架工具分析1.1 Webpack概念定义：模块打包工具几种引入规范：1、ES Module 模块引入方式:import export(构造函数)2、CommonJS 模块引入规范：require（跟Node一样）module.exports3、CM...
2019-07-29 23:51:53
198
转载 CleanWebpackPlugin is not a constructor
webpack报错今天初始化项目时，报了这个一个错CleanWebpackPlugin is not a constructor，刚开始以为是包下载的问题，重装后发现还是出现这样的问题，翻了官方文档发现用法变了,而中文文档还没有更新过来。之前的用法const path = require(‘path’);const HtmlWebpackPlugin = require(‘html-we...
2019-07-20 14:10:35
124
原创 利用Promise封装AJAX
此API为复习Promise和AJAX时将两者整合，用以获取数据后再异步调用resolve对数据进行处理。其实用jQuery直接$.ajax({success: function(){效果也一样}})，或者axios.get(‘url’).then()也可以实现。 <script> function ajax(method, url, params) { ...
2019-07-03 20:04:00
222
转载 Js获取当前日期时间及其它操作
Js获取当前日期时间及其它操作原文地址：http://www.cnblogs.com/carekee/articles/1678041.htmlvar myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-???)myDate.getMonth...
2019-07-02 15:57:02
90
原创 NodeJS 笔记（四）
NodeJs 笔记（四）1.1 bootcss简洁、直观、强悍的前端开发框架各类精美模版：https://www.bootcss.com/管理系统（模版连接）：https://v3.bootcss.com/examples/dashboard/1.2 从JSON文件中读取数据由于读取db.json文件返回的是JSON格式的数据，需要用JSON.parse() 还原解析为data对...
2019-06-13 10:22:07
169
原创 安装mongoose依赖时发生了错误
npm ERR! code ENOSELFnpm ERR! Refusing to install package with name “mongoose” under a packagenpm ERR! also called “mongoose”. Did you name your project the samenpm ERR! as the dependency you’re in...
2019-06-13 10:18:12
995
原创 NodeJs 笔记（三）
NodeJs 笔记（三）Node中的模块系统1.1 模块系统使用Node编写应用程序主要在使用：ECMAScript语言核心模块第三方模块art-template需要通过npm下载才能使用自定义模块1.2 模块化满足两条件：文件作用于通信规则加载require导出1.3 CommomJS模块规范在Node中的JS有模块系统的概念模块作用域...
2019-06-07 16:58:47
307
原创 NodeJs 笔记（二）
NodeJs 笔记二1.1 初步实现Apache功能var http = require('http')1. 创建Servervar server = http.createServer()2. 监听Server的request请求，设置请求处理函数//请求、处理、响应。一个请求对应一个响应var wwwDir = 'D:/Movie/www'//定义一个路径server.on(...
2019-06-07 16:57:55
228
原创 Node.js 笔记（一）
Node.js 笔记一总结（上）1.1 NodeJs介绍与使用Node.js 是什么JavaScript 运行时既不是语言，也不是框架，它是一个平台利用NodeJS打开JS文件在git bush中定位到JS文件所在的文件夹输入“node XX.js”即可执行js文件中的代码helloworld.js:var i = "hello world"console.log...
2019-06-07 16:55:02
221
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人