【Vue 知识】Vue.js 挑战-困难
1. 困难 1.1 树组件 在这个挑战中，你需要实现一个树组件，让我们开始吧。 <script setup lang="ts">interface TreeData { key: string; title: string; children: TreeData[];}defineProps<{ data: TreeData[] }>();</script><template> <ul> <li :key="item.key" v-for="item in data"> <span>{{ item.title }}</span> <TreeComponent :data="item.children" v-if="item.children...
【Vue 知识】Vue.js 挑战-中等
1. 中等 1.1 优化性能的指令 Vue.js 提供了一个指令，以便只渲染一次元素和组件，并且跳过以后的更新。你知道它是什么吗 ? 让我们试试 👇: <script setup> import { ref } from "vue"; const count = ref(0); setInterval(() => { count.value++; }, 1000);</script><template> <span v-once> Make it never change: {{ count }}</span></template> 1.2 切换器 这个挑战开始,我们将尝试编写可组合函数，让我们从 useToggle 开始 👇: <script setup lang="ts"> import { ref } from...
【Vue 知识】Vue.js 挑战-简单
1. 热身 Hello，World！在这个挑战中，我们使用基于 vuejs/repl 的 SFC 编码游乐场进行在线编码且通过 StackBlitz 和 Vitest 进行挑战判断。对于这个挑战，您将需要更改以下代码，以使页面正确显示“Hello World”。 <script setup>import { ref } from "vue";const msg = ref("Hello World");</script><template> <div> <h1>{{ msg }}</h1> </div></template> 2. 简单 2.1 生命周期钩子 在这个挑战中，你将使用 组合式 API: 生命周期钩子 来完成它。 以下是你要实现的内容 👇: <script setup lang="ts">import {...
【如何百科】Ubuntu设置Nginx软件包源和安装
1. 安装必要的工具和证书 首先，安装 curl、gnupg2、ca-certificates、lsb-release 和 ubuntu-keyring，并更新软件包列表： apt updateapt install curl gnupg2 ca-certificates lsb-release ubuntu-keyring 2. 导入Nginx签名密钥 使用 curl 下载Nginx签名密钥，然后使用 gpg 命令导入密钥，并将其保存到 /usr/share/keyrings/nginx-archive-keyring.gpg： curl https://nginx.org/keys/nginx_signing.key | gpg --dearmor | sudo tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/null 3. 验证导入的密钥 运行以下命令以验证导入的Nginx签名密钥： gpg --dry-run --quiet --no-keyring --import --import-options...
【Python杂记】使用Python和PIL库将图片转换为WebP格式
1. 问题描述 随着网页设计越来越注重速度和性能，选择合适的图片格式以及优化图片成为了一个不可忽视的问题。WebP 格式因其高效的压缩算法和良好的图像质量而受到开发者的欢迎。但是，将现有的 JPEG 和 PNG 图片转换为 WebP 格式可能会比较麻烦。因此，我们可以编写一个简单的 Python 脚本来批量处理这些图片。 2. 代码解析 下面是一个 Python 脚本，该脚本使用 os 和 PIL 库来将指定文件夹中的 JPEG 和 PNG 图片转换为 WebP 格式。 import osfrom PIL import Imagedef convert_to_webp(input_folder, output_folder): # 创建输出文件夹 if not os.path.exists(output_folder): os.makedirs(output_folder) # 遍历输入文件夹中的所有文件 for filename in os.listdir(input_folder): if...
【杂记】解决Vitepress在Vercel上的Hydration错误
1. 问题描述 在尝试将 Vitepress 静态站点部署到 Vercel 时，遭遇了一个常见的问题。报错信息显示： Hydration completed but contains mismatches。这个错误提示意味着页面在客户端渲染时出现了不匹配的问题。 2. 解决方案 为了解决这个问题，需要在 vercel.json 配置文件中进行一些设置。具体来说，需要启用 cleanUrls 选项，这将帮助正确处理URL和页面路由。以下是如何配置 cleanUrls 的示例： { "cleanUrls": true }
【杂记】解决VSCode+WSL扩展联网失败的问题
1. 现象 环境说明 Windows 11 WSL2 Ubuntu 22.04 VS Code 1.69.2 Clash for Windows 0.19.22 + TUN Mode 在 VS Code 中，通过 Remote - WSL 打开 Ubuntu 子系统中的项目，扩展无法连接到网络，导致扩展功能无法正常使用。 2. 解决方法 打开 VS Code 设置，并搜索 “proxy” ,设置如下proxy即可
【Rust Cookbook系列】十九 Web 编程
1. 提取链接 需要安装error-chain库、reqwest库、select库、url库以及tokio库，可通过以下命令安装 cargo add error_chaincargo add selectcargo add tokio --features fullcargo add reqwestcargo add url [dependencies]error-chain = "0.12.4"reqwest = "0.11.17"select = "0.6.0"tokio = { version = "1.28.0", features = ["full"] }url = "2.3.1" 1.1 从 HTML 网页中提取所有链接 使用 reqwest::get 执行 HTTP GET 请求，然后使用 Document::from_read 将响应信息解析为 HTML 文档。以“a”（锚元素）作为结构体 Name 的参数，将结构体...
【Rust Cookbook系列】十八 文本处理
1. 正则表达式 需要安装regex库和lazy_static库，可通过cargo add regex和cargo add lazy_static 命令安装 [dependencies]lazy_static = "1.4.0"regex = "1.8.1" 1.1 验证并提取电子邮件登录信息 验证电子邮件地址的格式是否正确，并提取 @ 符号之前的所有内容。 use lazy_static::lazy_static;use regex::Regex;fn extract_login(input: &str) -> Option<&str> { lazy_static! { static ref RE: Regex = Regex::new( r"(?x) ^(?P<login>[^@\s]+)@ ([[:word:]]+\.)* ...
【Rust Cookbook系列】十七 科学计算
1. 数学 1.1 线性代数 需要安装ndarray库，可通过cargo add ndarray 命令安装 [dependencies]ndarray = "0.15.6" 1.1.1 矩阵相加 使用 ndarray::arr2 创建两个二维（2-D）矩阵，并按元素方式求和。注意：sum 的计算方式为 let sum = &a + &b，借用 & 运算符获得 a 和 b 的引用，可避免销毁他们，使它们可以稍后显示。这样，就创建了一个包含其和的新数组。 use ndarray::arr2;fn main() { let a = arr2(&[[1, 2, 3], [4, 5, 6]]); let b = arr2(&[[6, 5, 4], [3, 2, 1]]); let sum = &a + &b; println!("{}", a); println!("+"); ...