首页

vue3实现锚点跳转与滚动监听

需要实现的效果如下: 左侧分类导航栏:点击左侧分类时,页面会滚动到对应的分类区域,同时更新选中状态(高亮)。 右侧内容区:显示每个分类的具体子类别,右侧内容根据滚动位置动态更新左侧导航的选中状态。 路由更新:地址栏的 query 参数随导航栏选中状态动态更新(如 ?group=image)。 实现步骤 1. HTML 结构 <template> <d
发布于 2024-12-12 下午4:53 阅读数 7

在nuxt3中自定义400 和 500 错误页面,以及在页面和 API 中触发这些错误。

项目结构 ├── layouts/ │ └── error.vue # 自定义错误页面 ├── pages/ │ ├── index.vue # 首页 │ ├── trigger400.vue # 用于触发 400 错误的页面 │ └── trigger500.vue # 用于触发 500 错误的页面 ├── server/ │ └── api/ │ ├── throw400.js # 模拟 400 错误的 API │ └── throw500.js # 模拟 500 错误的 API 1. 自定义错误
发布于 2024-12-11 下午4:35 阅读数 25

答应我:别再说你不懂编译原理了

编译对大部分开发人员来说算是“最熟悉的陌生人”吧,我们每天的工作都会接触到它,但是绝大多数情况下编译对于我们来说就是个黑盒子,我们又对它知之甚少,本文就来聊一聊编译原理,让大家能初步了解编译大致的过程和一些相关的点。 编程语言的发展历程 编程语言的发展历程大概可以分为4个阶段: 第一代语言:机器语言 第一代编程语
发布于 2024-12-9 下午5:30 阅读数 47

【Vue3】理解vue3的各种ref:toRef、toRefs、isRef、unref、shallowRef、proxyRefs等。

在Vue3中,我们有很多与响应性相关的函数,比如toRef、toRefs、isRef、unref、shallowRef、proxyRefs等。在实际的开发中,合理地使用这些函数能极大地提高我们的开发效率。本文就一起来看看这些响应性相关的函数的详细用法。 ref() 对于ref,大家并不陌生。我们经常在Vue3中使用它。它的功能是接受一个值并返回一个响应性的对象。我们可以
发布于 2024-11-16 下午3:39 阅读数 286

Nuxt 3 多路径访问同一页面的三种方式:重定向、别名与动态路由

今天看到有小伙伴在Nuxt 3文中社区群里问到这个问题,那就顺便写一篇文章来回答,并且重温一下Nuxt3的路由。 Nuxt 3 多路径访问同一页面 在 Nuxt 3 中,如果你想让两个不同的路径访问同一个页面,有以下几种实现方式: 重定向方式:在其中一个路径中使用 navigateTo 方法重定向到目标页面。 路由别名:在 nuxt.config.ts 中配置路由
发布于 2024-11-16 下午3:39 阅读数 389

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-9-9 下午5:3 阅读数 795

Vue3中计算属性(Computed)和响应式引用(Ref)的区别

有时候在vue3开发中,有些情况我们不知道是使用Computed还是使用Ref比较好,虽然两者都能实现功能。本文我们来探讨一下两者的差异。 计算属性(Computed)是一种基于响应式依赖关系进行缓存运算的属性。当它的依赖关系发生改变时,它就会重新求值。并且只有在它的相关依赖项发生改变时才会重新计算,否则,它会立即返回之前的计算结果,
发布于 2024-9-9 下午5:3 阅读数 904

猫目网站推出Fooocus超快整合包,让创作如虎添翼

Fooocus可以被认为是简洁版Stable Diffusion或者说是免费版的Mid Journey,它采用的是SDXL的内核,界面简洁类似Mid Journey一样的操作方式,它不需要很高的硬件条件就能运行。 近日,猫目网站隆重推出了全新的Fooocus超快整合包应用,为广大创作者提供了一款集成多种功能、操作简便的在线绘画工具。此次上线的Fooocus应用旨在满足各
发布于 2024-9-9 下午5:2 阅读数 621

分布式追踪服务应用实战指南

分布式追踪服务作为解决复杂系统影响效率的重要工具,在企业逐步转向微服务化和分布式系统架构时,应用的复杂性日益上升,也导致了监控技术面临更大的挑战,然而伴随而来的是系统的更加稳定和用户满意度的提高。本文将深入分析分布式追踪服务的优势特点、适用环境、潜在风险及安全保障措施等方面,并详述其在 Python 项目中的集成
发布于 2024-9-3 下午3:48 阅读数 622

遇见 Flux:新的开源AI图像生成器击败了Midjourney、SD3和Auraflow

黑森林实验室(Black Forest Labs)——曾参与开发原始的Stable Diffusion——推出了Flux,这是迄今为止最大的开源文本到图像模型。Flux拥有惊人的120亿参数,可以生成媲美Midjourney的视觉效果,甚至可能超越当前所有其他模型——无论是开源还是闭源。 Flux有三个版本:Flux Dev,是一个开源的社区开发版本,采用非商业许可证;Flux Schnell
发布于 2024-8-4 上午9:39 阅读数 1528

解决Failed building wheel for dlib

报错如下: Building wheels for collected packages: dlib Building wheel for dlib (pyproject.toml) ... error error: subprocess-exited-with-error × Building wheel for dlib (pyproject.toml) did not run successfully. │ exit code: 1 ╰─> [11 lines of output] running bdist_wheel running build running buil
发布于 2024-7-26 上午6:21 阅读数 1278

在 Nuxt 3 项目部署之后,可以通过 Nginx 来配置静态文件(包括图片)的服务

1. 安装 Nginx 确保已经安装了 Nginx: sudo apt update sudo apt install nginx 2. 配置 Nuxt 项目的构建输出 首先,确保Nuxt 3 项目已经构建并生成了静态文件。运行以下命令进行构建: npm run build npm run generate 生成的静态文件通常会放在 .output/public 目录下。 3. 配置 Nginx 编辑 Nginx 配置文件(例如 /etc/nginx/s
发布于 2024-7-4 下午5:31 阅读数 1670

Golang实现手机号脱敏

在Go语言中实现手机号脱敏(即对手机号进行部分隐藏,以保护隐私)可以通过字符串处理函数来实现。以下是一个简单的示例代码: package main import ( "fmt" "strings" ) // DesensitizePhoneNumber 对手机号进行脱敏处理 func DesensitizePhoneNumber(phone string) string { if len(phone) != 11 { return phone } return phon
发布于 2024-6-26 下午11:38 阅读数 1181

在 Ubuntu 上安装 Nginx:详细教程

Nginx 是一个高性能的 HTTP 和反向代理服务器。本文将介绍如何在 Ubuntu 系统上安装 Nginx,包括导入官方签名密钥、设置 apt 仓库、以及安装和配置 Nginx。 步骤 1:安装必要的依赖包 首先,确保你的系统安装了 curl、gnupg2、ca-certificates、lsb-release 和 ubuntu-keyring 这些依赖包。运行以下命令来安装它们: sudo apt install c
发布于 2024-6-17 下午4:25 阅读数 1429

通过使用map()方法从多维数组中提取特定值来创建新数组

const myFavList = [ { id: 23, name: "moketaro", favs :[ { fruits: "Apple" }, { hoby: "reading" } ] }, { id: 11, name: "mokeko", favs :[ { fruits: "lemon" } ] }, { id: 65, name: "mokemasa", favs :[ { fruits: "orange" }, { hoby: "birdwatching" } ] }, { id: 190, name: "mokena", favs :[ { fruits: "kiwi"
发布于 2024-5-12 下午9:58 阅读数 1184

Flutter封装组件之:分割线组件

分割线GRDivider组件 注:如果是无文字分割实线用已有的Divider组件即可 使用方法 GRDivider( dashed: true, height: 2.0, color: Colors.black45, textColor:Colors.red ), 组件API 参数名描述height线条高度color线条颜色text文本内容textColor文本颜色textSize文本大小dashed是否是虚线默认 false 组件源码 /** * author:
发布于 2024-5-12 下午9:48 阅读数 1247

[Nuxt3/TS] 如何指定ES版本

在使用Nuxt3进行开发时,在服务器模块(/server/api)中处理Bigint时,出现了以下错误: 错误:在配置的目标环境("es2019")中无法使用大整数字面量。 从es2020开始支持Bigint,因此,看来需要更改TypeScript的版本。 服务器模块由Nuxt3内部的Nitro引擎驱动,因此,需要将设置传递给Nitro引擎。 可以在nuxt.config.ts中来指定ES版本: expo
发布于 2024-5-12 下午9:29 阅读数 1226

[Java]类解释:关于实例生成

在Java中,通过类(Class)我们可以创建实例(Instance),这是面向对象编程的核心概念之一。类是对象的蓝图,而实例则是根据这个蓝图创建的对象。 假设我们有一个Student类: public class Student { String name; int age; } Student 类定义了学生需要具备的属性,比如名字(name)和年龄(age)。这只是一个模板,我们可以使用它来创建Stu
发布于 2024-5-11 下午3:21 阅读数 1356

搭建Rails 7+MySQL的Docker环境

使用Docker构建Ruby 3.2 + Rails 7 + MySQL 8开发环境。 创建目录和所需文件 打开你的终端: mkdir rails_app cd rails_app # MySQL环境 mkdir -p db/data touch db/my.cnf db/data/.keep # Rails环境 mkdir api touch api/Dockerfile api/Gemfile api/Gemfile.lock api/entrypoint.sh 创建compose.yml文件 //compose.yml ser
发布于 2024-5-11 下午3:6 阅读数 1171

理解并解决数据库中的N+1问题(PHP实例)

N+1问题是一个指在数据库中发送大量的SQL查询,从而增加负载并导致性能下降的问题。当你使用框架进行开发时,你有没有意识到你可能无意中发送了大量的SQL查询? 更具体地说,N+1问题是指在一个过程中,首先通过一个查询获取父数据,然后获取子数据,每获取一个子数据都会生成一个额外的查询,这种状态不断重复。这就是所谓的N+1问题。
发布于 2024-5-11 下午2:29 阅读数 1210

css 文字水平/垂直循环滚动效果

水平 方式一:marquee标签 实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现文字水平循环滚动</title> </head> <style> </style> <body> <!--从右到左滚动 滚动速度scrollamount="10"--> <marquee direction="left
发布于 2024-5-11 下午2:8 阅读数 1127

详解跨源资源共享(CORS)及其在Web开发中的应用

什么是 CORS(跨源资源共享)? CORS(跨源资源共享)是一种基于HTTP并由Web浏览器控制的安全机制。它允许客户端请求来自自身以外源(跨源)的资源。这是为了应对同源策略(SOP{Same Origin Policy})而设计的。所有常见的Web浏览器都实现了它,并于2014年1月被W3C推荐为标准。简单来说,可以将其看作是一种应对跨源资源的技术。 那么它是如
发布于 2024-5-10 下午3:41 阅读数 1324

使用 Laravel 11 实现一个简单的 RESTful API

前言 虽然一般情况下我们通常需要进行验证和异常处理,但是这次主要是介绍API的实施步骤,所以其他的简单介绍一下就过了。 创建Laravel项目 使用 Composer 命令安装 Laravel 10。 composer create-project --prefer-dist laravel/laravel projectName 其中,projectName是你的项目名称 设置API php artisan install:api 快速创建
发布于 2024-5-10 下午3:11 阅读数 1368

【Java】 获取字符串/数组的长度

在Java中,你可以使用以下方法来获取字符串或数组的长度: 获取字符串的长度 String str = "你好,世界!"; int strLength = str.length(); System.out.println("字符串长度为: " + strLength); length()是一个方法,用于获取字符串的长度,返回值是该字符串中的字符数。 获取数组的长度 int[] array = {1, 2, 3, 4, 5}; int array
发布于 2024-5-10 下午2:31 阅读数 1144

Flutter封装组件之:常用标题组件

常用标题GRTitle组件 使用方法 GRTitle( leftTitle: '可点击右侧', leftIcon: Icon(Icons.bookmark_border), rightTitle: '换一换', onTap: (){print('1111');}, rightIcon: Icon(Icons.refresh,color: Colors.black45,size: 18), ), //设置颜色 GRTitle( leftTitle: '有图标标题', leftTitleColor: Colors.red, leftIcon:
发布于 2024-5-10 下午2:0 阅读数 1080
热门推荐
推荐作者
励志每天写一篇文章,有价值的文章,提升自我!
帮助你提高代码质量
写代码为生,亦以此为乐。
阿里巴巴-咸鱼技术团队
暂无描述