摘要：
概论 主要是有一个微前端的主权项目，实现对微服务的调用，类似iframe显示，父应用和子应用可以通过一些数据通信方式实现数据通信。 代码 微前端注册 import Vue from 'vue' import App from './App.vue' import { registerMicroApp 阅读全文
摘要：
示例代码 interface mybasic { one: string, two: string, three: number, four: string } console.log("myts-demo") // 排除参数属性 interface my1 extends Omit<mybasic 阅读全文
摘要：
下面分别是ref普通基本数据，下面是ref对象数据 _rowValue 是原始数据，_value 是操作数据也就是代理数据 阅读全文
摘要：
示例代码 App.vue <template> <header> <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <div class="wrapper"> <HelloWorl 阅读全文
摘要：
顺序 执行顺序：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。 在单一组件中，钩子的执行顺序是beforeCreate-> cr 阅读全文
摘要：
接口数据查看，业务方式查看 给角色分配路由权限，然后路由信息上meta就会有哪些角色可以访问的数组。就是说一个路径，哪些角色可以访问，都在meta下的roles里面保存着 接着用户角色分配 前端代码实现 核心代码 通过用户信息上用户的角色数组和路由meta上的角色数组是否包含用户角色，来过滤用户是否 阅读全文
摘要：
概述 总体这个项目前端使用vue2，后端使用spring boot git地址 https://github.com/elunez/eladmin-mp 预览地址 https://eladmin.vip/demo/#/sys-tools/generator 数据表配置 低代码下载 生成后的前端代码示 阅读全文
摘要：
参考文章 https://www.cnblogs.com/fadeache/p/17777581.html https://blog.csdn.net/Ed7zgeE9X/article/details/118662575 先安装GoGoCode npm install gogocode-cli - 阅读全文
摘要：
概论 主要是通过一个唯一标识name或者id来过滤判断用户所处的角色是否有路由的权限或者按钮的权限 一般路由都有一个一个name可以作为唯一标识 一般按钮的话，可以自定义一个name作为标识 业务逻辑 后台通过选中路由或者按钮给角色，代表这个角色有数组中name[]的权限，用户或者部门再绑定角色，实 阅读全文
摘要：
概述 requestAnimationFrame 是根据帧数来执行回调函数的，就是屏幕一帧，那 requestAnimationFrame就会执行一次。一般屏幕是60帧，也就是一秒执行60次回调函数. 性能相对定时器settimeout好，因为定时器执行权限在同步任务 微任务之后，会受到其他任务影响 阅读全文
摘要：
需要使用谷歌浏览器的无痕模式 要不然其他浏览器插件的脚本会影响页面的性能判断 使用截图 操作界面 点击分析按钮开始分析 生成分析 建议部分：红色是有必要解决的性能提升建议 红色建议分析： 静态资源大小分析图 点击下面按钮 看到如下静态资源页面 lighthouse文档 文档地址： https://d 阅读全文
摘要：
截图 黄色指的是js执行 紫色指的浏览器渲染 一般只需要看 js 和 render 这2个就行，其他不用看，并从这2个中看出哪里的代码导致阻塞线程比较久。 main线程推测 main线程就是浏览器的主线程，主要负责浏览器的渲染和js代码执行，由此可见，浏览器用于渲染和js执行是一个线程，也就是主线程 阅读全文
摘要：
概述 重绘指的是元素重新绘制，一般性能消耗很小，不用在意，一般修改颜色或者虚拟隐藏都是重绘 回流指的是修改元素宽高或者位置或者获取元素宽高位置等都是回流，性能消耗较大。 重绘(repaint)：元素样式改变不影响布局 回流(reflow)：也叫重排,当元素的尺寸、结构变化或触发某些属性时，浏览器会重 阅读全文
摘要：
总论 1、js一个tab就是一个进程，这个tab下会有多个线程，主要是主线程、渲染线程、js线程、网络线程资源池； 2、js引擎线程通过dom 之类的api和渲染线程沟通和控制渲染线程的一些页面显示； 3、实际上权威的说法是js引擎和渲染都是在一个线程上执行的，通过dom api之类的沟通，都是在主 阅读全文
摘要：
示意图 理解 事件执行队列执行的顺序首先是同步任务队列，其次是微任务队列、再其次是宏任务队列 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt 阅读全文
摘要：
安装依赖 npm install element-plus --save 引入依赖 import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App fr 阅读全文
摘要：
<script setup> import Mock from "mockjs" let { data } = Mock.mock({ 'data|10-20': [{ 'employeeNo|245-543': 1, name: '@cname', 'password|+1': 123456 }] 阅读全文
摘要：
使用命令初始化 npm init vue@latest 初始化成功后项目截图 具备了store router，还有ts的功能等 阅读全文
摘要：
// 生成多少个yield 就能被for of 遍历多少次 function* mytest() { for (let i = 0; i < 5; i++) { yield Math.random(10) * 1000 } } // for of 会迭代生成器里面所有的yield ，有多少个yiel 阅读全文
摘要：
const params = new URLSearchParams();//实现js参数转urlcode编码，直接可以传到url去请求 params.append('param1', 'value1'); params.append('param2', 'value2'); console.log 阅读全文
摘要：
// 生成多少个yield 就能被for of 遍历多少次 function* mytest() { for (let i = 0; i < 5; i++) { yield Math.random(10) * 1000 } } // for of 会迭代生成器里面所有的yield ，有多少个yiel 阅读全文
摘要：
实现代码 Object.prototype[Symbol.iterator] = function () { let keys = Object.keys(this); let index = 0; return { next: () => { return { value: this[keys[i 阅读全文
摘要：
vite配置 上面jsx插件搞好就能在vue项目中使用jsx写法了 代码尝试 ChildWorld.vue <script lang="tsx"> import { defineComponent, defineProps } from "vue" const childAbc = () => { 阅读全文
摘要：
interface mycbdInterface { alert(name: string): void, one?: string } //函数装饰器 const myconsole: MethodDecorator = (...rest) => { console.log(rest, "rest 阅读全文
摘要：
Home.vue 组件中使用测试 <template> <div class="home"> <div> fone:{{ fone }} </div> <div> ftwo:{{ ftwo }} </div> <div> ffour:{{ ffour }} </div> <div> ffive:{{ 阅读全文
摘要：
Home.vue <template> <div class="home"> <div> {{ fone }} </div> <div> {{ ftwo }} </div> <div> {{ ffour }} </div> <div> {{ ffive }} </div> <HelloWorld @ 阅读全文
摘要：
主要是通过子类的prototype直接拷贝一份父类的原型实现继承的方式,这样的优点是简单直接，缺点是多拷贝了一份内存，子类多创建了一份独立内存用于继承父类的原型 function abc(){ this.name="sdlfjslfdjs" } abc.prototype.xx="sdlfsjlfd 阅读全文
摘要：
//interface 定义对象结构测试 interface abc { a: string, //基本数据类型声明都是小写开头 b: number, c?: [string] //定义字符类型的数组 cc?: Array<string>, //Array 是泛型类，用于创建数组对象 f?: Obj 阅读全文
摘要：
function mychild(){ this.x=2342342 } mychild.prototype.y=342342; console.log(mychild.prototype.constructor,"构造函数") console.log(mychild.prototype.const 阅读全文
摘要：
1、js函数对象有3个主要成分 1、就是js原型，也就是prototype，可以被实例继承过去 2、就是原型链，也就是原型链这个栈指针，指向示例对象本身的父类原型 3、就是私有属性，通过this声明，或者直接附加子属性，实例可以独自开辟一份对象继承这些属性 2、实例new 函数对象是什么 1、实例就 阅读全文
摘要：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
摘要：
观察者模式代码 观察者模式就是一对多事件，当事件发生的时候通知到多个观察者，所有观察者进行对应的更新操作update执行事件操作。 // 观察者列表 function ObserverList() { this.observerList = []; } ObserverList.prototype. 阅读全文
摘要：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
摘要：
https://github.com/DMQ/mvvm 阅读全文
摘要：
实现思路 i18next-scanner 自动扫描代码中的中文 中文作为多语言的key，通过crc32转为语音包的key i18next-scanner 使用 package.json写入script自动运行脚本 npm run scan "scripts": { "dev": "node buil 阅读全文
摘要：
目的是为了方便异步提交form表单的数据，尤其是在单页应用中方便实现表单数据的提交。 代码如下： 本代码可以实现的功能是对js数据对象转formdata数据格式，可以做到对数组的数据处理，可以对filelist文件对象的处理。 具体使用，个人可以依据自己的项目情况进行更改或改进。 注意：不兼容ie9 阅读全文
摘要：
function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); retu... 阅读全文
摘要：
如上面会导致提示 ipset hash is full 这是因为hash:ip 只能存储固定ip，这样如果你录入的大量的ip段，那么ipset解析的时固定的一堆大量的ip，无法存储很多的大量固定ip，所以会报ipset hash is full 解决方法是 改成hash:net ，这样才能存储ip段 阅读全文
摘要：
导入ipset 这里需要用hash：net才能存储ip段，如果时hash：ip则只能存储固定ip，不能存储大量的ip。用net才能存储ip段，才能有效实现录入大量的ip。 阅读全文
摘要：
ipset介绍 ipset是iptables的扩展,它允许你创建 匹配整个地址集合的规则。而不像普通的iptables链只能单IP匹配, ip集合存储在带索引的数据结构中,这种结构即时集合比较大也可以进行高效的查找，除了一些常用的情况,比如阻止一些危险主机访问本机，从而减少系统资源占用或网络拥塞,I 阅读全文