Vue3 + Vite + Vue Router 4后端返回路由配置动态路由权限管理
动态路由12345678910111213141516171819202122232425262728293031323334353637// 路由递归处理const AllRouter = import.meta.glob("@/views/**/*.vue");interface RouterItem { path: string; name: string; component: () => any; children?: RouterItem[]; meta: { title: string; icon: string; };}const routerFormat = (routerList: any): RouterItem[] => { if (!routerList || !Array.isArray(routerList)) return []; return routerList.map((item: any) => { ...
为Clash节点配置负载均衡（适用于Clash、Clash Premium和Clash Meta）
在我们使用Clash节点的时候，有时候觉得自己的节点网速跑不满，速度不够快。这时候，我们可以尝试着使用负载均衡，来让节点的网速拉满。在这期教程中，我来和大家一起来为Clash节点配置负载均衡。 准备材料 Clash 节点配置 基于原版 Clash、Clash Premium 或 Clash Meta 的客户端 部署步骤CFW Parsers 打开 Clash For Windows，转到“Settings”→“Profiles”。点击“Parsers”右边的“Edit”按钮 在内置编辑器中，粘贴以下内容并保存 12345678910111213141516171819parsers: - reg: 'slbable$' yaml: append-proxy-groups: - name: ⚖️ 负载均衡-散列 type: load-balance url: 'http://www.google.com/generate_204' ...
手撸call apply bind
如果自己去实现call apply bind，看上去挺复杂，写起来其实就几行代码因为call和apply一样，只是传参不一样，所以我就只写一个call 实现call（其实只有2行代码）1234567891011121314151617181920212223242526/* 随便定义一个对象，待会将函数内的this指向指向倒这个对象 */const obj = { name: "我是需要被绑定改变this指向的对象" };/* 需要改变this指向的函数，没有使用call时，this指向window */function fn(arg) { console.log("fn---------", this); console.log("fn---------", arg);}/* * * 重写call方法 * target 需要把this改变到哪个目标 * args 传递进来的参数 */Function.prototype.call = function (target,...
2023年有哪些良心的流量卡推荐？爆肝给大家整理好了最新的流量卡合集
不用再费力翻找了，良心的流量卡都在这里，还不知道如何申请？仅此一篇，拿走不谢。 本篇为流量卡测评+推荐+领取攻略文章（点赞+收藏我相信你一定会用的上） @小韩 长期搜寻全国各地运营商发布的优惠补贴流量卡。集合了河南、山东、海南、福建、宁夏、北京、广东、四川、湖北、湖南各地运营商推出的各款流量卡，目前还在持续挖掘中…… 运营商调整时期，相信很多友友都发现了近期想要去找优惠补贴手机流量卡，但是无论去哪里都找不到。为解决这个问题， 小韩...
class中函数的this指向
定义一个基础的类12345678class Person { constructor(name = "杜恒") { this.name = name; } speak() { console.log(this); }} 将上面的类实例出一个对象p，并调用p的speak方法 12const p = new Person();p.speak(); // Person {name: "杜恒"} 上面的打印结果显示由类构造出的实例对象，因此this会指向由类构造出的实例对象 尝试将p实例对象身上的speak方法赋值给另一个变量进行调用 12const test = p.speak;test(); // undefined 打印undefind，因此上面的方法可以改写成如下 12345const test = function () { "use strict"; ...
Vue底层判断标签的性能优化方法
在vue中，如果写div、span等正常的html标签，vue会解析成传统的html标签，但当写不是这些标签的时候，vue会认为他是一个组件，例如：<Custom></Custom>。是如何做到这种判断的呢，首先自己来实现一个这样的判断 1234567const tags = "div,span,img,a".split(",");function checkTag(tag) { return tags.some((item) => item === tag);}console.log(checkTag("Custom")); // falseconsole.log(checkTag("div")); // trueconsole.log(checkTag("a")); //...
Vue.set与this.$set源码
Vue.set()和this.$set()应用的场景在 Vue 2.X 项目开发中，有时候需要对数组进行修改，或是对对象新增一个属性，但是发现页面并不会同步更新。例如： 12345678910const vm = new Vue({ data: { arr: [1, 2], obj: { a: 3, }, },});vm.$data.arr[0] = 3; // 页面不会发生改变vm.$data.obj.b = 3; // 页面不会发生改变 此时就需要使用到 Vue.set() 或 this.$set()。这个2个的使用方法一样，不过一个是挂载在Vue身上，一个挂载在Vue.prototype上 123456// Vue.setimport { set } from "../observer/index";Vue.set = set;// this.$setimport { set } from...
火爆全球的ChatGPT，最全的使用方法！
ChatGPT是OpenAI旗下的一款聊天机器人，现在已经火遍全球，前几天我简要介绍了一下，很多小伙伴儿留言想知道怎么使用。目前来说，需要免费注册一个OpenAI账号，才能使用。可惜暂未对国内开放注册，无法访问。下面简要介绍几种方法，供大家参考。 ChatGPT高仿/反代① https://aigcfun.com 这个网站和官网的界面设计是一样的。免费使用、无需登录账号、无需科学上网，网站无广告，非常方便。打开网页后，直接输入问题提问即可。 ② http://chat.h2ai.cn/home 与上面的网站类似，界面为中文，与官网界面一致。可以作为备用。 ③...
Vue 2与Vue 3在自定义组件v-model上的区别
在vue开发中，通常会对一个自定义的组件进行封装，并实现v-model双向绑定功能 在 Vue 2 中，通常这样实现父组件 12345678910111213141516<template> <Child v-model="number"></Child></template><script> export default { data() { return { number: 0, }; }, components: { Child: () => import("./Child.vue"), }, };</script> 子组件 1234567891011121314151617<template> <button...
Linux系统下使用iftop结合iptables服务解决带宽被恶意请求的问题
最近博客总时不时的打不开，或者是打开巨慢。打开宝塔面板，发现能登录，但是登录非常缓慢，最后挤进来后，看到流量可视化图，上行一直流量一直居高不下。服务器带宽是2兆的，上行200kb，说明直接将整个服务器带宽占满，导致服务器无法访问 排查Linux下使用iftop工具结合iptables服务来解决带宽资源被恶意请求满的问题，主要通过2个步骤来实现 使用iftop 工具查出来是哪些个IP地址在请求主机的带宽资源，找出耗带宽的元凶 找出耗带宽的IP地址或者段，分析是out方向还是in方向，使用iptables规则来进行控制 首先安装 iftop 工具 1yum install flex byacc libpcap ncurses ncurses-devel libpcap-devel 接着输入 iftop -n 运行，运行后会出现以下界面 左侧表示自己的服务器的内网ip 中间的<=...
