- 博客(94)
- 收藏
- 关注
RSS订阅原创 【小程序分包之间 相互引用组件】
一般我们从主包跳到分包或者分包跳分包，都是跳转页面，在跳的时候才会去加载分包，但是如果在一个分包里想要引入另一个分包的组件或者接口的时候，这个时候就没办法正常使用了，因为另一个分包不知道在什么时机去加载。方案一：将包2的组件 放到主包里作为公共组件 供两个包使用；占位组件一定要配置 因为是异步加载，不设置占位组件，会报错，找不到组件！第二步：分包1pages_crm组件中引入、注册、使用分包2的组件。方案二：分包异步化 包1异步引入包二的组件。，分包1需要引用分包2的组件。分包1pages_crm 的。
2024-07-12 14:42:19
258
原创 【前端首屏加载速度优化(0)： 谷歌浏览器时间参数】
页面上http请求发送到响应完成，单个域名请求的并发量是6个，Finish 是所有请求（不止是XHR请求，还包括DOC,img,js,css 等资源的请求）在并发量为6的限制下完成的时间。DOM树构建完成后，继续加载 html/css 中的外部资源，加载完成之后，视为页面加载完成。如果finish的时间比较大。说明页面上的请求资源比较大，需要优化。浏览器已经完全加载了 HTML，DOM树构建完成，但是像是。和样式表等外部资源可能并没有下载完毕。
2023-11-28 15:02:20
276
原创 【npm run dev 报错：error:0308010C:digital envelope routines::unsupported】
nodejs版本太高（nodejs v17版本发布了openSSL3.0对短发和密钥大小增加了更为严格的限制，nodejs v17之前版本没有影响，但之后的版本会出现这个错误，物品的node版本是20.9.0）在 package.json 的 scripts 中新增。npm run dev重新启动即可。
2023-11-02 14:34:54
884
原创 修改mysql允许访问的权限：Host ‘LAPTOP-9VT1D63G‘ is not allowed to connect to this MySQL server
修改mysql访问权限
2022-08-11 09:52:19
460
原创 报错：Client does not support authentication protocol requested by server； consider upgrading MySQL cli
修改mysql加密规则
2022-08-09 17:23:43
24658
14
原创 HashRouter与 BrowserRouter的区别
1.原理上HashRouter：在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所以叫HashRouter）BrowserRouter：使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通用，低版本浏览器可能不支持。2.用法上BrowserRouter进行组件跳转时可以传递任意参数实现组件间的通信HashRouter不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的数据通信。3.生产实践上H
2022-03-13 20:08:50
7573
原创 react 后台管理项目中 结合antd (v4.0) 动态生成左侧菜单栏
一级路由：/login/admin下面配置admin的二级路由1.准备好数据假设从后台得到的数据结构（根据不同角色返回的不同菜单数据）const menuList = [ { title: '首页', icon: '<HomeOutlined />', key: '/index', }, { title: '商品', icon: '<ShopOutlined />',
2022-03-12 23:24:41
3449
原创 vue项目中请求层的封装：（请求层也实现 模块化 ）
1.axios二次封装//http.jsimport axios from 'axios'import router from '@/router'//创建一个axios实例let $axios = axios.create({ // baseURL:"http://localhost:3000/api", 配置代理就不用写这么全了 baseURL:'/api', timeout:3000})//请求拦截器$axios.interceptors.request.us.
2022-03-11 22:18:18
3894
原创 ES6 generator函数与yield的理解、及在react项目中的使用
1. yield是什么yield是ES6的新关键字，使生成器函数执行暂停，将其后面的表达式的值以对象的形式返回。可以理解为生成器函数专有的return关键字。yield关键字实际返回的是一个迭代器对象，{value:返回值,done:是否完成}yield无法单独工作，需要配合generator(生成器)的其他函数，如next。先来个简单的例子：function* saleCount(){ var saleList = [1,5,9] for (var i
2022-03-10 17:32:50
4172
1
原创 react路由使用、相关概念
1. 对SPA的理解单页面web应用（single page web application,SPA）整个应用只有一个完整的页面点击页面中的链接不会刷新页面，只会做页面的局部更新2.路由的理解1.什么是路由一个路由就是一个映射关系（key:value）key为路径，value可能是function或component2.路由的分类前端路由用来展示页面内容注册路由：<Route path="/login" component={Login当浏览器的path变为/lo
2022-03-09 21:24:32
126
原创 react中关于组件的一些概念(有无状态组件、组件封装与继承 、高阶组件)
怎么理解“在react中，一切皆为组件 ” 句话react采用组件化的思想，最小的组件单位就是原生HTML元素，采用JSX语法组件声明调用react的虚拟dom，就是一个大的组件树，从父组件层到子组件，在react-router v4版开始，路由本身也是组件各个库提供的hoc返回也是组件，如withRouter、connectreact中的基础数据state props的传递也是以组件为基础1. 什么是组件？组件就是页面上的一部分，可以是一个按钮、一张图片，可以是任意一个html元素。2.
2022-03-08 22:08:35
666
原创 在项目中用ts封装axios
在项目中用ts封装axios基础封装import axios from 'axios'import type {AxiosInstance,AxiosRequestConfig,AxiosResponse} from 'axios'class Request{ //axios实例，并将它作为 类的instance属性（属性名自定义） instance:AxiosInstance constructor(config:AxiosRequestConfig){
2022-03-07 22:07:24
615
原创 Real DOM 和 Virtual DOM含义、区别、优缺点
1. 含义1. Real DOM :(真实的DOM) 在页面渲染出的每个节点都是一个真实的DOM结构，比如：<div class="root"> <h1>hello Real </h1></div>2. Virtual DOM:(虚拟dom,本质是以js对象形式存在的，对DOM的描述)Virtual DOM 是一个轻量级的js对象，它最初只是real DOM的副本，也是一个节点树，它将元素、它们的属性和内容作为该对象及其属性。Virtu
2022-03-06 21:02:01
1344
原创 react中受控组件与非受控组件
在HTML中，表单元素（如：input textarea select通常自己维护state,并根据用户输入进行更新。而在react中，可变状态通常保存在组件的state属性中，并且只能通过使用setState()来更新。1. 受控組件 react官网简述：https://zh-hans.reactjs.org/docs/forms.html#controlled-components每当输入框内容发生变化时，都会被写入组件的state中，这种组件在react中别理解为 受控组件
2022-03-05 23:05:36
581
原创 算法-快速排序（最好的方法是将代码打断点一步一步走走）
算法-快速排序原理：(按从小到大排序为例)考察：双指针+递归分支（本质是一个创建二叉树，搜索树的过程）方法一：取数组的中间数为基准数将数组中的其他元素与这个基准数比较，比基准数小的放到一个数组中，比基准数大的放到另一个数组中；通过递归的方式重复循环上述操作；比如数组：[3,2,9,1,10]第一步：随便取出数组中的一个数，比如此时选 9，也可以选3，数组剩下[3,2,1,10]第三步：遍历数组[3,2,1,10],比9小的放到一个数组中，比如left:[3,2,1],比9大
2022-03-04 22:23:36
708
原创 算法-js实现冒泡排序
零基础都能看懂的博文，再也忘不了，哈哈1. 冒泡排序的原理：（按从小到大为例）比较相邻的元素，如果前者>后者，则交换位置；对每一对相邻元素做同样的工作，从开始第一对到最后一对，这样最后一个元素应该是最大的数；再对除了最后一个，重复以上的步骤；持续每次对原来越少的元素重复以上的步骤，直到没有任何一对数字需要比较。比如：有三个数 3 1 9 2第一轮：（ 3 1 9 2）比较3和1，3>1,交换位置，此时变成 1 3 9 2再比较3和9，3<9,不交换，此
2022-03-03 22:14:58
1486
原创 怎么在项目中用好 TypeScript
1. 善用类型注释通过/** */形式的注释给TypeScript类型做标记提示，之后我们在悬浮到使用该类型的地方时，编辑器就会提示你注释的内容。/** person information*/interface User { name:string; age:number; sex:'male' | 'female'}const p:User = { name:'lili', age:10, sex:'female'}2.善用类型扩展
2022-03-02 22:17:15
268
原创 算法-考察栈数据结构
励志分享：行动是治愈恐惧的良药，而犹豫拖延将不断滋养恐惧。给定一个只包括 '(',')','{','}','[',']' 的字符串 s ，判断字符串是否有效。有效需要满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。示例：示例 1：输入：s = "()"输出：true示例 2：输入：s = "()[]{}"输出：true示例 3：输入：s = "(]"输出：false示例 4：输入：s = "([)]"输出：false示例 5：输入：s
2022-03-01 22:31:03
253
原创 解决刷新vuex数据消失的问题-- Vuex持久化插件 （vuex-persistedstate）
vuex可以进行全觉得状态管理，但是刷新后数据会消失。1.安装npm install vuex-persistedstate --save2.配置// store/index.js import createPersistedState from 'vuex-persistedstate'const store = new Vuex.Store({ //.... plugins:[createPersistedState()]})此插件的原理：利用本地存储默认存入l
2022-02-28 22:05:10
929
原创 js图片懒加载原理、实现及节流优化
1.懒加载原理在图片没有进入可视区域时，先给的src一个默认加载的图片，这样浏览器就不会发送请求了，等到图片进入可视区域再把真实的图片路径data-src给src。2.具体实现1. 效果2. 代码如下：<style> .imgList{ width: 600px; } .lazy { width: 600px; }</style><body>
2022-02-27 22:33:38
2080
原创 能不能说一说XSS攻击？
回答面试的话：（简单说即可）XSS攻击就是指 不法分子在浏览器中执行恶意脚本，然后拿到用户的信息进行操作，主要分为存储型、反射型和文档型，防范措施有：一个信念：不要相信用户的任何输入，对输入的内容进行转码或者过滤，让其不可执行两个利用：利用 浏览器中的内容安全策略CSP、利用Cookie的HttpOnly属性1.XSS全称 XSS：(全称Cross Site Scripting)，即跨站脚本，为了和CSS区分，故叫XSS。2.XSS是啥？能干啥XSS攻击是指 浏览器中执行恶意脚本，拿到
2022-02-26 23:01:00
3681
原创 谈谈你对重绘和回流的理解
先了解浏览器的渲染流水线1.回流（也叫重排）触发条件：当我们对DOM结构的修改引发DOM几何尺寸变化的时候，重新渲染DOM树，发生回流。具体一点：一个DOM元素的几个属性变化，常见的集合属性有width height padding margin left top border等使DOM节点发生增减 移动读写 offset族 scroll族 client族 属性的时候，浏览器为了获取这些属性值，需要进行回流操作调用window.getComputedStyle 方法2.重绘触发条件：当
2022-02-25 14:48:04
545
原创 说一说从输入URL到页面呈现发生了什么？
由于里面原理三两句讲不完，本文只罗列简要过程1.网络部分：构建请求查找强缓存DNS解析建立TCP连接（三次握手、四次挥手）发送HTTP请求网络响应完成了网络请求和响应，如果响应头中Content-Type的值是text/html,那么接下来就是解析和渲染工作了。2.解析部分：构建DOM树样式计算生成布局树（Layout Tree）3.渲染部分：前面解析部分中，已经有了DOM节点、样式和位置，但是并不可以开始绘制页面，因为比如：一些3D动画如何呈现出变化效果、当元素含有层叠
2022-02-25 14:41:12
462
原创 能不能说一说浏览器缓存？
为啥要知道浏览器缓存？为了更好的进行 性能优化。回答面试的话：服务器首先通过Cache-Control验证强缓存是否有效，如果强缓存有效，直接使用；否则进入协商缓存，即发送HTTP请求，服务器通过请求头中的If-Modified-Since或者If-None-Match字段检查资源是否更新，如果资源更新，返回最新资源和200状态码，否则返回304，告诉浏览器直接从缓存获取资源。如果想了解更多，可以继续往下看哦，要慢慢品，理解了会发现：天空飘来五个字，这都不是事，，哈哈。。。。。1.
2022-02-24 22:16:10
239
原创 防抖与节流 （场景、函数封装）
防抖场景：输入框实时查询第一次输入触发事件时，开始计时：（比如计时500ms）计时500ms到了，执行第一次触发的查询如果计时500ms还没有到，第二次事件又触发了，则清除第一次的计时，重新计时，如果计时500ms到了，执行查询，如果未到第三次事件又触发了，则又重新计时…（用户触发事件过于频繁，只执行最后一次）比喻：一条公路上规定时间内只允许通过一辆车如果在规定的时间内，第一辆车跑完了，就去领奖如果这辆车到时间了还没跑完，就扔下去，第二辆车上路，重新计时…<input type
2022-02-23 22:17:27
430
原创 原型链图解
图中由相互关联的原型组成的链状结构就是原型链，也就是蓝色的线：详解：https://github.com/mqyqingfeng/Blog/issues/2
2022-02-22 16:50:29
87
原创 什么是闭包、闭包原理、怎么解决内存泄露的问题、闭包使用场景
什么是闭包？闭包：如果一个函数可以访问其外部函数的变量，它就是闭包。举个例子：outFn(name){ return function(){ console.log(name) }}const fn = outFn("张三")//fn得到outFn的返回值，为一个匿名函数fn()//调用匿名函数//console.log("张三")闭包原理虽然outFn已经执行完毕，但是其活动对象OA也不会销毁，因为返回的匿名函数仍然引用着outFn函数中的变量，这就是闭包（匿名函数维护着一个作
2022-02-22 16:03:38
629
1
原创 ajax请求中的cache、async属性
cache属性：决定是否从缓存中读取数据true 表示第一次请求完成之后，如果请求地址、参数不变化，第二次去请求会默认从缓存中读取数据，不去读取服务端的最新数据。false 表示每次读取的都是服务端的最新数据注意：ajax缓存只对GET请求有效，因为浏览器默认POST请求提交的内容必定与变化，所以不走缓存。！！！async属性：决定是否异步true(默认) 表示异步，当ajax请求发出之后，会继续执行ajax后面的代码，当服务器返回数据之后，再触发ajax里成功之后的回调sucess
2022-02-21 14:26:35
475
原创 vue中：将列表导出成excel表格、图片下载
功能实现：前后端配合，前端借助调用后端接口。如果后端返回的是base64格式的url,需要转成二进制，再用blob处理；如果后端返回的是文件流或二进制流，直接用blob处理；前端将列表导出成excel表格（后端返回的是base64格式的url）调用后端接口，将列表数据传给后端后端返回一个base64格式的url地址，解码，将base64格式的url转成二进制创建一个a标签，把解码后的地址赋值给a标签的href属性，再给它添加下载功能// /utils.jsexport defa
2022-02-20 21:46:33
411
原创 vue中使用 canvas给页面添加水印
封装公共添加水印的方法:// utils/watermark.js/**入参： @text: 传入水印需要展示的文本; @renderDom:要给哪个元素加水印，默认body；*/var watermark = {}var setWatermark = function(text,renderDom=document.body){ var id = '1.23345566.3333344'; if(document.getElementById(id)!==null){
2022-02-20 21:10:43
784
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人