随笔分类 - 前端
摘要：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=c
阅读全文
摘要：仅供娱乐 代码部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
阅读全文
摘要：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课堂随机点名
阅读全文
摘要：直接保存下面的代码到html文件中，然后浏览器打开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2025新年快乐！万事如意！</title> <meta name="viewport" content="
阅读全文
摘要：dnd-kit 官网 入口： https://ant-design.antgroup.com/docs/react/recommendation-cn 仓库： https://github.com/clauderic/dnd-kit 官网： https://dndkit.com/ 介绍 DnD-Ki
阅读全文
摘要：问题 当我们在后端保存的ansible输出结果，希望在前端展示的时候，发现颜色部分的字符会显示成乱码的形式 而在后端保存的数据 \nPLAY [测试主 ****************************************************************\n\nTASK [
阅读全文
摘要：简介 什么是React Hooks React Hooks是在React 16.8版本中引入的一项重大特性，旨在解决函数组件在复杂场景下的状态管理和生命周期问题。 它们允许在不编写类组件的情况下使用state、生命周期方法等功能，使得函数组件更加简洁、易于理解和复用。 作为React Hooks的核
阅读全文
摘要：背景 有个接口 interface DataType { id: number; name: string; created_at: string; updated_at: string; } 我的数据 { "id": 9, "created_at": "2024-03-11T17:50:16.12
阅读全文
摘要：当我们在函数组件中，希望使用 useEffect 来达到初始化的目的时，会发现总是在初始化的时候执行两遍 问题复现 组件代码部分 import "./assets/App.css"; import { useEffect } from "react"; const App = () => { use
阅读全文
摘要：做一个简单的笔记 有两种方式可以实现 使用标签 BrowserRouter 结合 useRoutes 来实现 使用标签 BrowserRouter 结合 Route 和 Routes 来实现 使用API createBrowserRouter 来实现 注意：createBrowserRouter是6
阅读全文
摘要：在使用react router v6版本的时候，按照之前的方法使用 src/main.tsx 是这样的，几乎不动 import * as React from "react"; import * as ReactDOM from "react-dom/client"; import "~/asset
阅读全文
摘要：问题 当我们使用element的表格组件的时候，空状态会变的非常瘪，就会造成页面非常难看 这样很不美观 解决办法 可以使用插槽设置空状态，并通过css来调整空状态的样式 新建一个空表格 <template> <div> <el-table :data="tableData" stripe style
阅读全文
摘要：目标 在没双击之前，树的节点是文本样式。 在双击之后，节点位置变成输入框形式，原节点的名称显示在输入框中，可以进行修改。 修改完毕之后，当输入框失去焦点的时候，输入框消失，又变成原本的文本样式，并且显示的是修改后的节点名称。 添加一个树 <template> <div> <el-tree :data
阅读全文
摘要：目标 右键点击树组件中的节点，弹出增删改的菜单，要求菜单总是在点击位置的附近 先添加一个树 <template> <div> <el-tree <!-- 绑定数据 --> :data="tree" highlight-current node-key="id" :props="{ children:
阅读全文
摘要：代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu
阅读全文
摘要：背景 background复合属性 字体 font复合属性 字体 body { /*字体系列，从前往后使用 'microsoft yahei'微软雅黑 'simsun'宋体 */ font-family:'Times New Roman', Times, serif; /*大小*/ font-siz
阅读全文
摘要：我们在布局或者设置字体大小的时候经常看到: 22px;, px其实是css里面长度单位 绝对长度 px * 像素 (1px = 1/96th of 1in) cm 厘米 mm 毫米 in 英寸 (1in = 96px = 2.54cm) 相对长度 em 它是描述相对于应用在当前元素的字体尺寸，所以它
阅读全文
摘要：使用 multipart/form-data 类型发起 POST 请求 使用 FormData API 浏览器 const form = new FormData(); form.append('my_field', 'my value'); form.append('my_buffer', new
阅读全文
摘要：默认情况下，axios将 JavaScript 对象序列化为 JSON 。 要以 application/x-www-form-urlencoded 格式发送数据，您可以使用以下选项之一。 浏览器 在浏览器中，可以使用 URLSearchParams API，如下所示： const params =
阅读全文
浙公网安备 33010602011771号