分类 web开发下的文章 - 奎奎博客 - 每天更新资源,奎奎网络,快手奎奎

2023-06-21

gptlink源码快速搭建chatgpt商用站点 GPTLink 源码快速搭建 ChatGPT 商用站点，基于PHP(Hyperf) + Vue开发的，可以通过docker轻松部署，并且有一个支持PC和移动端的完美UI控制台。该项目提供了许多强大的功能，包括自定义付费套餐、一键导出对话、任务拉客和用户管理等等。这些功能能够帮助您快速构建 ChatGPT 站点，在其中包含了所有必要的特性，如：订单、任务、付费等等。{cloud title="开源地址" type="github" url="https://github.com/gptlink/gptlink" password=""/}

2023年06月21日
3,554 阅读
0 评论
10 点赞

2023-06-16

window下安装并使用nvm（含卸载node、卸载nvm、全局安装npm） nvm 全名 node.js version management，顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。一、卸载node如果你已经安装了node，那么你需要先卸载node，如果你没有安装那直接跳过这一步到下一步。打开控制面板 -> 打开程序和功能 -> 右上角搜索输入node -> 右键卸载为了确保彻底删除node在看看你的node安装目录中还有没有node文件夹，有的话一起删除。再看看C:\Users\用户名文件夹下有没有.npmrc以及.yarnrc等等统统删除。再去看看你的环境变量有没有node相关的，有的话也一起删除了。二、安装nvm去github 下载最新的 nvm 找到 nvm-setup.zip 点击下载选择nvm安装路径。选择nodejs的安装路径。点击next，安装完成后在终端输入nvm version，能查到版本号说明安装成功了。三、配置路径和下载源安装完nvm后先不要着急安装node。找到nvm安装路径 -> 找到 settings.txt 文件 -> 配置下载源node_mirror: https://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/四、使用nvm安装node在终端输入 nvm list available，查看网络可以安装的版本。选择一个版本安装，比如 nvm install 14.14.0。使用这个版本的node，nvm use 14.14.0。输入node -v 和 npm -v可以查询到node和npm的版本号。输入nvm list 查看已经安装的node，*号表示当前使用的node版本。五、nvm常用命令命令说明nvm list 查看已经安装的版本nvm list installed 查看已经安装的版本nvm list available 查看网络可以安装的版本nvm arch 查看当前系统的位数和当前nodejs的位数nvm install [arch] 安装制定版本的node 并且可以指定平台 version 版本号 arch 平台nvm on 打开nodejs版本控制nvm off 关闭nodejs版本控制nvm proxy [url] 查看和设置代理nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror，如果不设置的默认是 https://nodejs.org/dist/nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是：https://github.com/npm/npm/archive/.nvm uninstall 卸载指定的版本nvm use [version] [arch] 切换指定的node版本和位数nvm root [path] 设置和查看root路径nvm version 查看当前的版本六、卸载nvm1.可以通过下面方式卸载或找到nvm安装路径，直接将文件删掉。2.卸载完后记得删除nvm环境变量配置（环境变量是在安装时候自动生成的）。此电脑 -> 右键属性 -> 高级系统设置 -> 环境变量 -> 找到nvm相关的 -> 删除统统删除，OK。七、全局安装npm、cnpm安装node的时候，npm其实也已经一起安装了。因为nvm可以管理多个版本的node，如果每次添加一个node版本都要安装一堆的包很麻烦，如果有一个npm可以让各个版本的node共用，就不会这么麻烦了。简单的三步就可以配置一个全局的npm。1.npm config set prefix "E:\nvm\npm" //配置用npm下载包时全局安装的包路径。2.npm install npm -g --registry=https://registry.npm.taobao.org //安装全局npm，不同的node都使用这个npm。想更新全局的npm的话首先删除全局路径(就是上一行命令的地址，可以使用npm config ls查看)下的npm，再执行一次这个命令即可。3.在用户变量中添加 NPM_HOME = E:\nvm\npm，path中添加%NPM_HOME%。这里需要注意的是，%NPM_HOME%要添加在%NVM_SYMLINK%之前，避免npm访问到的是nodejs中自带的npm包管理工具。使用淘宝镜像cnpm。1.npm install -g cnpm --registry=https://registry.npm.taobao.org //使用淘宝镜像cnmp替代npm2.cnpm config get registry //验证cnpm是否可用八、遇到的问题1.在安装nvm的时候没有卸载node，导致使用nvm安装完之后，node和npm都不可用。2.在第一次使用nvm安装node后，要记得使用 nvm use 切换下node版本，以及用 nvm on 打开nodejs版本控制，不然这时候node和npm也都不可用。3.全局安装完npm的时候，需要关掉终端窗口重新打开，才能装得上cnpm。原文原文链接

2023年06月16日
6,427 阅读
0 评论
35 点赞

2023-05-28

vscode配置项 { //........eslint......... "window.zoomLevel": 1, "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll": true }, "explorer.confirmDelete": true, "git.enableSmartCommit": true, "vetur.format.options.tabSize": 2, "vetur.format.defaultFormatterOptions": { "prettyhtml": { "printWidth": 100, "singleQuote": true, "wrapAttributes": true, "sortAttributes": true }, "prettier": { "semi": false, // 是否自动加分号 "singleQuote": true, // 是否格式化为单引号 // 禁止随时添加逗号 "trailingComma": "none" } }, "editor.tabSize": 2, "editor.wordWrap": "on", //........分割......... "editor.formatOnPaste": true, "liveServer.settings.donotShowInfoMsg": true, "workbench.iconTheme": "ayu", "workbench.colorTheme": "Monokai", // 下面老郑的 // "explorer.confirmDelete": false, "editor.formatOnType": true, "editor.formatOnSave": true, // 上面这一个是自动保存文档 // 下面这个是更换vs背景 "files.autoSave": "afterDelay", "backgroundCover.imagePath": "d:\\Microsoft VS Code\\VScode图片备份\\src=http___pic.jj20.com_up_allimg_1113_061H0105942_20061G05942-6-1200.jpg&refer=http___pic.jj20.jpg", "backgroundCover.randomImageFolder": "d:\\Microsoft VS Code\\VScode图片备份", "backgroundCover.opacity": 0.5, "backgroundCover.autoStatus": true, "git.ignoreWindowsGit27Warning": true, "emmet.triggerExpansionOnTab": true, "bracketPairColorizer.depreciation-notice": false, "interview.updateNotification": 1647182601915, // 分割线 // javaScript参数名称提示代码,提升js参数 "javascript.inlayHints.parameterNames.enabled": "all", "javascript.inlayHints.variableTypes.enabled": false, // 分割线 //翻译(英汉词典插件参数) "EnglishChineseDictionary.enableHover": false, "tabnine.experimentalAutoImports": true, //true为鼠标悬停显示翻译 // 分割线 // 分割线 //formate: CSS/LESS/SCSS formatter插件样式:对齐配置 "formate.enable": true, "formate.verticalAlignProperties": true, //true "formate.alignColon": true, "formate.additionalSpaces": 1, "workbench.sideBar.location": "right", "cSpell.languageSettings": [], "window.zoomLevel": 3, "editor.inlineSuggest.enabled": true, // 分割线 // 分割线 }

2023年05月28日
9,331 阅读
0 评论
53 点赞

2022-09-07

JS正则限制只能输入数字、或带小数点的数字，并且小数后面限制多少位 JS正则限制只能输入数字、或带小数点的数字，并且小数后面限制多少位length 代表如果输入含小数位的时候，小数位的个数const length = 2 const reg = new RegExp(`^\\d+(\\.\\d{1,${length}})?$`)

2022年09月07日
1,318 阅读
0 评论
63 点赞

2022-09-05

禁止F12元素审查很多时候我们辛辛苦苦弄的代码被很多人按一个F12直接白嫖走了，感觉自己的付出被白嫖是不是非常的伤心、郁闷，甚至是气愤、愤怒。删除线效果下面和大家介绍一种方式。直接在页脚文件foot.php或者footer.php最下方放入以下代码：<script> function fuckyou(){ window.close(); //关闭当前窗口(防抽) window.location="about:blank"; //将当前窗口跳转置空白页 } function click(e) { if (document.all) { if (event.button==2||event.button==3) { alert("禁止恶意拿代码的"); oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { fuckyou(); document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=click; document.oncontextmenu = new Function("return false;") document.onkeydown =document.onkeyup = document.onkeypress=function(){ if(window.event.keyCode == 123) { fuckyou(); window.event.returnValue=false; return(false); } } </script>

2022年09月05日
7,450 阅读
0 评论
45 点赞

2022-09-03

Css设置单行文本多行文本溢出隐藏并以省略号显示单行文本溢出white-space: nowrap; text-overflow: ellipsis; overflow: hidden;两行溢出display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;

2022年09月03日
2,239 阅读
0 评论
66 点赞

2022-09-03

为你的网站添加点击散开特效将以下代码复制到你网站最底部即可实现<canvas id="fireworks" style="position: fixed; left: 0px; top: 0px; pointer-events: none; z-index: 2147483647; width: 1920px; height: 151px;" width="3840" height="302"></canvas> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script> <script type="text/javascript"> function updateCoords(e) { pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left, pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top } function setParticuleDirection(e) { var t = anime.random(0, 360) * Math.PI / 180, a = anime.random(50, 180), n = [-1, 1][anime.random(0, 1)] * a; return { x: e.x + n * Math.cos(t), y: e.y + n * Math.sin(t) } } function createParticule(e, t) { var a = {}; return a.x = e, a.y = t, a.color = colors[anime.random(0, colors.length - 1)], a.radius = anime.random(16, 32), a.endPos = setParticuleDirection(a), a.draw = function() { ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.fillStyle = a.color, ctx.fill() }, a } function createCircle(e, t) { var a = {}; return a.x = e, a.y = t, a.color = "#F00", a.radius = .1, a.alpha = .5, a.lineWidth = 6, a.draw = function() { ctx.globalAlpha = a.alpha, ctx.beginPath(), ctx.arc(a.x, a.y, a.radius, 0, 2 * Math.PI, !0), ctx.lineWidth = a.lineWidth, ctx.strokeStyle = a.color, ctx.stroke(), ctx.globalAlpha = 1 }, a } function renderParticule(e) { for (var t = 0; t < e.animatables.length; t++) e.animatables[t].target.draw() } function animateParticules(e, t) { for (var a = createCircle(e, t), n = [], i = 0; i < numberOfParticules; i++) n.push(createParticule(e, t)); anime.timeline().add({ targets: n, x: function(e) { return e.endPos.x }, y: function(e) { return e.endPos.y }, radius: .1, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule }).add({ targets: a, radius: anime.random(80, 160), lineWidth: 0, alpha: { value: 0, easing: "linear", duration: anime.random(600, 800) }, duration: anime.random(1200, 1800), easing: "easeOutExpo", update: renderParticule, offset: 0 }) } function debounce(fn, delay) { var timer return function() { var context = this var args = arguments clearTimeout(timer) timer = setTimeout(function() { fn.apply(context, args) }, delay) } } var canvasEl = document.querySelector("#fireworks"); if (canvasEl) { var ctx = canvasEl.getContext("2d"), numberOfParticules = 30, pointerX = 0, pointerY = 0, tap = "mousedown", colors = ["#FF1461", "#18FF92", "#5A87FF", "#FBF38C"], setCanvasSize = debounce(function() { canvasEl.width = 2 * window.innerWidth, canvasEl.height = 2 * window.innerHeight, canvasEl.style.width = window.innerWidth + "px", canvasEl.style.height = window.innerHeight + "px", canvasEl.getContext("2d").scale(2, 2) }, 500), render = anime({ duration: 1 / 0, update: function() { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height) } }); document.addEventListener(tap, function(e) { "sidebar" !== e.target.id && "toggle-sidebar" !== e.target.id && "A" !== e.target.nodeName && "IMG" !== e.target.nodeName && (render.play(), updateCoords(e), animateParticules(pointerX, pointerY)) }, !1), setCanvasSize(), window.addEventListener("resize", setCanvasSize, !1) } </script>

2022年09月03日
5,254 阅读
0 评论
33 点赞

2022-09-02

JS唤醒win10消息通知 // 判断浏览器是否支持唤醒 if (window.Notification) { let popNotice = () => { if (!Notification.permission === 'granted') return const notification = new Notification('阿巴阿巴', { body: '提示提示提示' }) // 点击通知的回调函数 notification.onclick = function () { window.open('https://baidu.com') notification.close() } } /* 授权过通知 */ if (Notification.permission === 'granted') { popNotice() } else { /* 未授权，先询问授权 */ Notification.requestPermission(function (permission) { popNotice() }) } }{callout color="#29bd00"}如果是WIN10系统的话，可以直接将上面代码复制到F12控制台运行{/callout}

2022年09月02日
3,570 阅读
0 评论
43 点赞

2022-09-01

原生JS实现一个验证码功能定义一个用于显示验证码的canvas<canvas width="100" height="40"></canvas>生成JS的业务逻辑// 获取canvas let canvas = document.querySelector("canvas") let context = canvas.getContext("2d"); // 定义初始化验证码内容 let nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R','S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x','y', 'z']; drawCode() // 绘制验证码 function drawCode() { context.beginPath() /* 绘制背景色 */ context.fillStyle = "cornflowerblue"; context.fillRect(0, 0, canvas.width, canvas.height) /* 绘制验证码 */ context.fillStyle = "white"; context.font = "25px Arial"; let rand = [], x = [], y = [] for (let i = 0; i < 5; i++) { rand[i] = nums[Math.floor(Math.random() * nums.length)] x[i] = i * 16 + 10; y[i] = Math.random() * 20 + 20; context.fillText(rand[i], x[i], y[i]); } /* rand就是生成后的结果，后面用来判断验证码输入框是否与该值相等 */ console.log(rand); //画3条随机线 for (let i = 0; i < 3; i++) { drawline(canvas, context); } // 画30个随机点 for (let i = 0; i < 30; i++) { drawDot(canvas, context); } } // 随机线 function drawline(canvas, context) { //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数 context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数 context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height)); context.lineWidth = 0.5; context.strokeStyle = 'rgba(50,50,50,0.3)'; context.stroke(); } // 随机点 function drawDot(canvas, context) { let px = Math.floor(Math.random() * canvas.width); let py = Math.floor(Math.random() * canvas.height); context.moveTo(px, py); context.lineTo(px + 1, py + 1); context.lineWidth = 0.2; context.stroke(); }

2022年09月01日
3,746 阅读
0 评论
44 点赞

2022-08-29

原生JS模拟虚拟dom，虚拟dom转真实dom <div id="root" class="aaa"> <div class="title">11</div> <div class="title">222</div> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> <script type="text/javascript"> class VNode { constructor(name, attrs, value, type) { this.name = name this.attrs = attrs this.value = value this.type = type this.children = [] } addChildren(node) { this.children.push(node) } } function create(node) { let _vnode = null if (node.nodeType === 1) { const attributes = [...node.attributes] const attrs = attributes.reduce((prev, curr) => { prev[curr.name] = curr.value return prev }, {}); _vnode = new VNode(node.nodeName.toLowerCase(), attrs, null, node.nodeType) for (let item of node.childNodes) { _vnode.addChildren(create(item)) } } else if (node.nodeType === 3) { _vnode = new VNode(node.nodeName.toLowerCase(), null, node.nodeValue, node.nodeType) } return _vnode } let vnode = create(document.querySelector("#root")) console.log(vnode); function parse(node) { let nodeEl = null if (node.type === 1) { nodeEl = document.createElement(node.name) for (let key in node.attrs) nodeEl.setAttribute(key, node.attrs[key]) node.children.forEach(item => { nodeEl.appendChild(parse(item)) }); } else { nodeEl = document.createTextNode(node.value) } return nodeEl } let dom = parse(vnode) console.log(dom); </script>

2022年08月29日
2,356 阅读
0 评论
130 点赞

2022-08-28

Vue底层判断标签的性能优化方法在vue中，如果写div、span等正常的html标签，vue会解析成传统的html标签，但当写不是这些标签的时候，vue会认为他是一个组件，例如：<Custom></Custom>。是如何做到这种判断的呢，首先自己来实现一个这样的判断const tags = 'div,span,img,a'.split(",") function checkTag(tag) { return tags.some(item => item === tag) } console.log(checkTag('Custom')); // false console.log(checkTag('div')); // true console.log(checkTag('a')); // true这里的实现方案有很多，可以用for、some、forEach等，但是都是离不开循环，思考这样的一个问题，传入一个a，a在字符串最后一个位置，所以会循环4次来判断是否包含a，如果页面上的标签极多，甚至会有上万次的循环再来查看Vue实现这个的方式，大致源码如下const tags = 'div,span,img,a' function makeMap(str) { var map = Object.create(null); var list = str.split(','); for (var i = 0; i < list.length; i++) { map[list[i]] = true; } return function (val) { return map[val]; } } const isHtmlTag = makeMap(tags) isHtmlTag('div') isHtmlTag('Custom') isHtmlTag('a')这里可以看出，实现出一个柯里化函数，并且也是一个闭包状态。此时，在第一次调用时，会循环一次，后续不论在去判断什么标签，都不会再去循环，因为第一次的循环结果利用闭包已经存在了内存里，这就是闭包能带来的性能优化

2022年08月28日
2,134 阅读
0 评论
151 点赞

2022-08-27

ECharts社区合集整理 ECharts社区合集整理

2022年08月27日
2,832 阅读
0 评论
56 点赞

2022-08-27

2022年08月27日
5,349 阅读
0 评论
135 点赞

2022-08-18

谷歌插件分享 - 前端必备 Web 开发者助手 FeHelper 插件介绍插件支持 Chrome、Firefox、MS-Edge 浏览器，内部工具包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、随机密码生成、Markdown、网页油猴、网页取色器、脑图(Xmind)等贴心工具等插件预览官方地址https://www.baidufe.com/fehelper/index/index.html扩展功能FeHelper功能会逐渐增加，所有新的工具会自动出现在FH应用市场，查看介绍，可以直接去官网： https://www.baidufe.com/fehelper/index/index.htmlJSON自动美化（页面自动检测并格式化）JSON手动美化（粘贴文本、手动格式化）JSON比对工具（支持左右两个JSON片段进行键值对比较）字符串编解码（Unicode/UTF8/Base64/MD5）代码美化工具（HTML/CSS/JS/XML/SQL）代码压缩工具（HTML/CSS/JS）二维码生成器（支持当前页面、图片、链接、选中的文字生成QrCode）二维码解码器（支持网页二维码右键解码）简易Postman（Api接口测试，模拟HEAD/GET/POST方式）网页滚动截屏（将当前整个网页转为图片并保存）Markdown转换（支持Markdown与HTML的互转）页面取色工具（滑动鼠标随意取色）Js正则表达式（正则测试、常用正则列表）时间(戳)转换（Unix戳与本地时间的互转）图片Base64（任意图片转DataURI格式）随机密码生成（任意字符、任意长度、随机生成）多维小工具集（进制转换、RGB/HEX颜色转换、Crontab、还款计算器等）网页油猴工具（网页特效、网页定制、脚本注入、自动刷新等）我的便签笔记（便签笔记，支持导出）便捷思维导图（网页版的脑图工具）... 更多工具，请去官网查看：https://www.baidufe.com/fehelper/index/index.html开源仓库https://github.com/zxlie/FeHelper

2022年08月18日
7,273 阅读
0 评论
511 点赞

2022-08-14

ElementUI表格不调用后端接口实现分页功能  <el-table border :data="itemList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"> .... </el-table> <script> data() { return { // 所有的数据列表 itemList: [....], // 当前页码 currentPage: 1, // 分页尺寸 pageSize: 10, // 分页总数 pageTotal: 30 } } </script>

2022年08月14日
7,355 阅读
0 评论
112 点赞