首页

vue3 + Nuxt3 使用AutoAnimate可以快速添加动画

AutoAnimate是什么? 这是FormKit提供的一个动画库。只要安装了这个库,你就可以非常轻松地使用它。虽然这个库支持Vue、React、Preact、Solid、Svelta、Angular和NativeJS,但在本文中,我将介绍如何在Vue中使用它。 官方文档: https://auto-animate.formkit.com/ 设置 首先进行安装 npm install @formkit/auto-animate 接着,在nuxt.con
发布于 2024-3-17 下午9:30 阅读数 181

从 TypeScript 类型概述到 React 中的处理类型

TypeScript 概述 TypeScript 是一种将静态类型引入 JavaScript 的语言。 静态类型有两个主要优点: 类型安全 文档化 类型安全 编译器会进行类型检查,如果程序有错误,就会出现编译错误。 const message: number = 'hello hedy'; console.log(message); 没有编译的时候,webstorm或者VS code就会指出你是否使用不适当的类型编写代
发布于 2024-3-17 下午8:59 阅读数 65

Nuxt3 - 使用 SheetJs 将 JSON 转换并下载为 Excel 文件

安装 npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz 参考文档:https://docs.sheetjs.com/docs/ 代码示例: <script setup> import { ref } from 'vue' import { utils, writeFileXLSX } from 'xlsx' const pres = ref([ { name: '小丽', birthday: '1998-02-22' }, { name: '小美', birthday: '1
发布于 2024-3-17 下午8:50 阅读数 61

htmx基础之hx-post请求和文件上传,配置multer模块和使用文件池

接着上一篇文章~~~ hx-post 属性 到目前为止,我们一直使用 hx-get 属性从服务器中获取数据,但现在我们将使用 hx-post 属性将数据发送到服务器。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt
发布于 2024-3-16 下午3:15 阅读数 51

htmx基础知识之快速配置后端服务和htmx的操作(一)

快速配置后端服务器 我们使用node+express快速创建一个后端服务。 创建一个名字server的目录,执行npm init -y ,将会创建一个 package.json 文件。 npm init -y Wrote to /Users/hedy/Projects/node/server/package.json: { "name": "server2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "tes
发布于 2024-3-15 下午4:5 阅读数 54

没有JavaScript 的动态页面?了解正在迅速流行的 HTMX 基础知识

你是否曾经想过在不使用 JavaScript 的情况下轻松创建动态页面?在这种情况下,可以使用目前正在崭露头角的 HTMX。 HTMX允许开发者在无需使用JavaScript的情况下从服务器接收HTML,并将接收到的页面动态地添加到页面上。 什么是HTMX HTMX(HTMLx)是一种可以通过HTML进行Ajax、CSS和JavaScript的功能扩展的库。基于HTML而非JavaScrip
发布于 2024-3-15 下午4:5 阅读数 68

解决iframe出现滚动条问题

问题描述 假设有如下HTML结构:一个被称为.parent的父级div设置了特定的高度,内部包含一个iframe元素,希望iframe的高度能够自适应父级div的高度。然而通过浏览器观察发现,尽管父级div与iframe看起来高度相同,却出现了令人困惑的滚动条。进一步检查发现,这并非是由于padding或margin的影响。 <div class="parent"> <ifr
发布于 2024-2-25 下午5:30 阅读数 160

解决报错using unaddressable value in

这通常是gorm没有正确使用产生的报错,比如: 正确的写法是 db.Create(&user) 我们写成了 db.Create(user) 只需要传入正确的值即可解决该问题。
发布于 2024-1-25 下午3:8 阅读数 175

JavaScript下载文件

要使用JavaScript从特定的URL下载文件,您可以使用fetch API。以下是一个简单的例子: function downloadFile(fileUrl) { // 发起fetch请求 fetch(fileUrl) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.blob(); }) .then(blob => { // 创建一个URL对象
发布于 2024-1-19 下午10:5 阅读数 188

解决wsl2 mirrored网络时,goland无法debuger的问题

这个问题困扰了我很久,今天终于解决了 我们只需要使用这个skynet2/delve这个库重新build一下dlv,并替换掉goland默认的dlv即可 详细步骤 git clone git@github.com:skynet2/delve.git git checkout goland-wsl2 cd /delve/cmd/dlv go build 执行完上面的命令之后,我们会构建出一个dlv文件 接下来我们只需要替换goland的默认d
发布于 2024-1-19 下午9:39 阅读数 199

设置github代理

https访问 仅为github.com设置socks5代理(推荐这种方式, 公司内网就不用设代理了, 多此一举): git config --global http.https://github.com.proxy socks5://127.0.0.1:1086 其中1086是socks5的监听端口, 这个可以配置的, 每个人不同, 在macOS上一般为1086. 设置完成后, ~/.gitconfig文件中会增加以下条目: [http "https://
发布于 2024-1-19 下午2:11 阅读数 211

设置npm和yarn的代理和registry

因为网络的缘故,在家里有些中间件安装比较费劲,有两种解决方法。 一个是使用国内的镜像网站,比如阿里云的镜像站点。但是这个方法有个需要考虑到的问题,那就是生成的packeage-lock.json 文件中会带有镜像的下载地址,自己家里的机器用没问题,公司的产品会有点不方便。 NPM镜像-NPM下载地址-NPM安装教程-阿里巴巴开源镜像站 ​deve
发布于 2023-12-11 下午1:41 阅读数 570

antdv上传图片前压缩图片

在使用 Ant Design 的上传组件时,如果需要在上传前对图片进行压缩,可以使用一些 JavaScript 库来实现。一个常用的库是 compressorjs,它可以在客户端对图片进行压缩。 以下是一个简单的使用示例: 首先,确保你的项目中已经安装了 compressorjs 库。你可以通过 npm 安装: yarn add compressorjs 然后,使用以下代码示例在上传前压
发布于 2023-12-9 下午3:31 阅读数 639

Bun入门指南(新手必看)

什么是Bun Bun是一个JavaScript和TypeScript应用程序的一体化工具包。它作为一个名为bun的单个可执行文件提供。 其核心是Bun运行时,它是一个快速的JavaScript运行时,旨在作为Node.js的替代品。它是用Zig编写的,并在内部由JavaScriptCore驱动,可以显著减少启动时间和内存使用。 bun​命令行工具还实现了测试运行器、脚本运行器和No
发布于 2023-11-12 下午9:57 阅读数 1061

WSL2 的 2.0 更新彻底解决网络问题

微软今天属于是史诗级更新 WSL2 到 2.0 版本,带来了以下特性: 支持自动回收内存 支持自动释放 WSL2 虚拟硬盘空间 支持和 Windows 使用相同的网络(镜像网络) 支持 DNS Tunneling 支持 Windows 设置的代理 支持 Windows 防火墙 支持 Multicast 详细可以前往:Windows Subsystem for Linux September 2023 update 开启方法: 更
发布于 2023-11-8 下午4:14 阅读数 2254

Nuxt3 – 使用navigateTo更改URL查询并使用watch进行监控

<script lang="ts" setup> const route = useRoute() watch( () => route.query, () => { console.log(route['query']) } ) function move() { navigateTo({ name: 'example', query: { foo: 'bar' }, }) } </script> <template> <button @click="move">move</button> </template&g
发布于 2023-11-7 下午2:13 阅读数 2376

vue3添加百度统计的几种方式

申请百度统计后,会得到一段JS代码,需要插入到每个网页中去,下面有几种方式。 把统计代码插入到index.html入口文件中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="/favicon.ico"> <meta name="viewport" content="width=device-width, initial
发布于 2023-11-7 下午2:11 阅读数 2227

Vue3设置动态head插件unhead的使用,支持title、meta、js等

如果我们想要在vue3的单页面上引入js,或者设置title和meta,我们可以使用unhead插件。 unhead插件文档:https://unhead.unjs.io/setup/vue/installation 安装 yarn add @unhead/vue //或者 npm install @unhead/vue //或者 pnpm add @unhead/vue 挂在 vue3 import { createApp } from 'vue' import { createHead } from '@unhe
发布于 2023-11-6 下午7:4 阅读数 2615

常见的 JavaScript 数据操作

数组操作: 创建一个数组:let arr = []; 向数组添加元素:arr.push(1); 从数组中删除元素:arr.pop(); 获取数组的长度:arr.length; 遍历数组并执行操作:arr.forEach(element => { console.log(element); }); 过滤数组中的元素:let filteredArr = arr.filter(element => element > 5); 字符串操作: 创建一个字符串:le
发布于 2023-10-31 下午6:32 阅读数 4053

vue3 使用window.scrollTop回到页面顶部

如果你想在当前页面切换tab时将页面滚动到顶部,你可以使用window.scrollTo方法来实现。以下是一个示例代码: import { ref, watchEffect } from 'vue'; export default { setup() { const tab = ref(1); // 当前选中的tab,默认为1 watchEffect(() => { // 监听tab的变化 if (tab.value === 2) { // 如果切换到tab 2,将页面
发布于 2023-10-30 上午11:57 阅读数 4633

vue3路由跳转传多个参数

在Vue 3中,你可以使用对象的方式传递多个参数给router.push()方法。以下是一个示例代码: import { useRoute, useRouter } from 'vue-router'; export default { setup() { const route = useRoute(); const router = useRouter(); const changeParams = () => { // 获取当前路径的参数 const id = route.query.id; const
发布于 2023-10-30 上午11:45 阅读数 4371

vue3修改当前路由参数

以下是一个示例代码: import { useRoute, useRouter } from 'vue-router'; export default { setup() { const route = useRoute(); const router = useRouter(); const changeId = () => { // 获取当前路径的参数 const id = route.query.id; // 修改id的值 router.push({ path: '/corpus-detail', query: { id: 4 } });
发布于 2023-10-30 上午11:43 阅读数 3422

sd报错RuntimeError: MPS backend out of memory

这个错误好像只有在mac 上面才会出现 RuntimeError: MPS backend out of memory (MPS allocated: 4.62 GB, other allocations: 8.06 GB, max allowed: 13.57 GB). Tried to allocate 1024.00 MB on private pool. Use PYTORCH_MPS_HIGH_WATERMARK_RATIO=0.0 to disable upper limit for memory allocations (may cause syst
发布于 2023-10-27 上午8:24 阅读数 4241