当前位置：首页 > news >正文

【Typescript学习】使用 React 和 TypeScript 构建web应用（三）所有组件

news 来源：原创 2024/5/8 21:17:53

教程来自freecodeCamp：【英字】使用 React 和 TypeScript 构建应用程序
跟做，仅记录用
其他资料：https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide/

第三天

以下是视频(0:40-0:60) 的内容

1 创建TodoList组件

就是装载所有todo卡片container
在这里插入图片描述

App中以prop传入todos数组、setTodos方法
App.tsx

return (<div className="App"><span className='heading'>Taskify</span><InputField todo={todo} setTodo={setTodo} handleAdd={handleAdd}/><TodoList todos={todos} setTodos={setTodos}/>  </div>);

TodoList 中的每一个卡片是SingleTodo组件（在后文），TodoList组件的结构和UI如下
TodoList.tsx

import React from 'react'
import './styles.css'
import { Todo } from "../model";
import SingleTodo from './SingleTodo';
type Props = {todos: Todo[],setTodos: React.Dispatch<React.SetStateAction<Todo[]>>,
}const TodoList:React.FC<Props> = ({todos, setTodos}: Props) => {return (<div className='todos'>{todos.map(todo =>(<SingleTodo key={todo.id}todo={todo}  todos={todos}setTodos={setTodos}/>))}</div>)
}export default TodoList

styles.css

// 之前的省略...
.todos {display: flex;justify-content: space-evenly;width: 90%;flex-wrap: wrap;  /* 元素可以换行 */
}

2 SingleTodo组件

Todo列表中的每个Todo卡片，包括tood描述、编辑按钮、删除按钮和完成按钮
在这里插入图片描述
icons图标我们可以使用react的UI组件react-icons

安装

npm install react-icons

在网页的搜索栏可以搜到按钮的名字
在这里插入图片描述

使用

import React from 'react'
import { Todo } from "../model";
import { AiFillEdit, AiFillDelete } from "react-icons/ai";
import { MdDone } from "react-icons/md";
import './styles.css'
type Props = {todo: Todo,todos: Todo[],setTodos: React.Dispatch<React.SetStateAction<Todo[]>>,
}const SingleTodo = ({todo, todos, setTodos}: Props) => {return (<form className='todos__single'><span className="todos__single--text">{todo.todo}</span><div><span className="icon"><AiFillEdit/></span><span className="icon"><AiFillDelete/></span><span className="icon"><MdDone/></span></div></form>)
}

（SingleTodo的HTML标签是form，因为当修改todo时需要处理submit，后文会实现）
css样式设计
styles.css

// 之前的省略...
.todos__single {display: flex;width: 29.5%;border-radius: 5px;padding: 20px;margin-top: 15px;background-image: url("https://img.freepik.com/free-photo/crumpled-yellow-paper-background-close-up_60487-2390.jpg?size=626&ext=jpg");
}
.todos__single--text {flex: 1;padding: 5px;border: none;font-size: 20px;
}
.todos__single--textJ:focus {outline: none;
}.icon {margin-left: 10px;font-size: 25px;cursor: pointer;
}/* 响应式布局 */
@media (max-width: 1200px) {.todos__single {width: 40%;}
}
@media (max-width: 700px) {.input {width: 95%;}.todos {width: 95%;}.todos__single {width: 100%;}
}

其中响应式布局的效果如下，当宽度小于700px时：
在这里插入图片描述

3 todo的按钮响应函数

分别对三个按钮实现功能，较简单的是点击完成（done）的事件响应和删除（delete）的事件响应
SingleTodo.tsx

// done按钮的响应const handleDone = (id: number) => {// 改变对应todo的isDone属性setTodos(todos.map((todo) => todo.id === id ? {...todo, isDone: !todo.isDone}: todo));};// delete按钮的响应const handleDelete = (id: number ) => {setTodos(todos.filter((todo) => todo.id === id))};return (<form className='todos__single'>{// 如果是完成状态，则用删除线效果todo.isDone ? (// <s> 删除线标签<s className="todos__single--text">{todo.todo}</s>):(<span className="todos__single--text">{todo.todo}</span>)}<div><span className="icon"><AiFillEdit/></span><span className="icon" onClick={()=>handleDelete(todo.id)}><AiFillDelete/></span><span className="icon" onClick={()=>handleDone(todo.id)}><MdDone/></span></div></form>)

点击edit按钮的事件响应逻辑比较复杂

我们需要一个状态变量edit，跟踪当前是否处于“编辑状态”；以及一个状态变量editTodo，跟踪当前输入到todo的文本。

const [edit, setEdit] = useState<boolean>(false);
const [editTodo, setEditTodo] = useState<string>(todo.todo);

在结构里添加显示的逻辑和编辑完成后提交时的事件

<form className='todos__single' onSubmit={(e)=>handleEdit(e, todo.id)}>{   // 如果是edit状态，则显示input框，否则是todo的描述edit ? (<input value={editTodo} onChange={(e)=> setEditTodo(e.target.value)}className='todos__single--text'/>) : (// 如果是完成状态，则用删除线效果todo.isDone ? (// s 下划线标签<s className="todos__single--text">{todo.todo}</s>):(<span className="todos__single--text">{todo.todo}</span>))}...
</form>

处理handleEdit函数

const handleEdit = (e:React.FormEvent, id: number) => {e.preventDefault();  // 禁止默认的页面刷新行为setTodos(todos.map((todo => (todo.id === id? {...todo, todo: editTodo}:todo))))setEdit(false);
}

我们需要点击edit按钮时，input框自动获得焦点，因此用useRef挂载到input框上，同时使用对edit变量的useEffect

  const inputRef = useRef<HTMLInputElement>(null);useEffect(() => {inputRef.current?.focus();}, [edit]);

第三天done！
今天新建了TodoList组件和SingleTodo组件，完成了相应的UI和大部分的逻辑。
UI中需要注意适应窗口的响应式布局、如何使用react-icons框架；组件实现中需要注意具体的逻辑、状态变量如何切换

TodoList.tsx

import React from 'react'
import './styles.css'
import { Todo } from "../model";
import SingleTodo from './SingleTodo';
type Props = {todos: Todo[],setTodos: React.Dispatch<React.SetStateAction<Todo[]>>,
}const TodoList:React.FC<Props> = ({todos, setTodos}: Props) => {return (<div className='todos'>{todos.map(todo =>(<SingleTodo key={todo.id}todo={todo}  todos={todos}setTodos={setTodos}/>))}</div>)
}export default TodoList

SingleTodo.tsx

import React, { useState, useRef, useEffect } from 'react'
import { Todo } from "../model";
import { AiFillEdit, AiFillDelete } from "react-icons/ai";
import { MdDone } from "react-icons/md";
import './styles.css'
type Props = {todo: Todo,todos: Todo[],setTodos: React.Dispatch<React.SetStateAction<Todo[]>>,
}const SingleTodo = ({todo, todos, setTodos}: Props) => {const [edit, setEdit] = useState<boolean>(false);const [editTodo, setEditTodo] = useState<string>(todo.todo);// done按钮的响应const handleDone = (id: number) => {// 改变对应todo的isDone属性setTodos(todos.map((todo) => todo.id === id ? {...todo, isDone: !todo.isDone}: todo));};// edit按钮的响应const handleEdit = (e:React.FormEvent, id: number) => {e.preventDefault();  // 禁止默认的页面刷新行为setTodos(todos.map((todo => (todo.id === id? {...todo, todo: editTodo}:todo))))setEdit(false);}// delete按钮的响应const handleDelete = (id: number ) => {setTodos(todos.filter((todo) => todo.id === id))};const inputRef = useRef<HTMLInputElement>(null);  // 编辑框// edit状态改变时自动获取编辑框的焦点useEffect(() => {  inputRef.current?.focus();}, [edit]);return (<form className='todos__single' onSubmit={(e)=>handleEdit(e, todo.id)}>{   // 如果是edit状态，则显示input框，否则是todo的描述edit ? (<inputref={inputRef} value={editTodo} onChange={(e)=> setEditTodo(e.target.value)}className='todos__single--text'/>) : (// 如果是完成状态，则用删除线效果todo.isDone ? (// s 下划线标签<s className="todos__single--text">{todo.todo}</s>):(<span className="todos__single--text">{todo.todo}</span>))}<div><span className="icon" onClick={()=>{if(!edit && !todo.isDone){setEdit(!edit);  // edit变为true}}}><AiFillEdit/></span><span className="icon" onClick={()=>handleDelete(todo.id)}><AiFillDelete/></span><span className="icon" onClick={()=>handleDone(todo.id)}><MdDone/></span></div></form>)
}export default SingleTodo

明天要使用react reducer hook进行状态管理了，可以先复习一下

使用到的：

react的按钮UI组件react-icons
响应式布局

网络安全零信任学习1：基本概念

读书《白话零信任》一书笔记系列： 1）基本概念传统安全模式在某种程度上假设内网用户、设备和系统是可信的， 忽视了来自内网的威胁。企业一般专注于对外部的防御，内网用户的访问行为往往只受到很少的限制。随着网络攻击手段的提…...

编程日记 2024/5/8 17:53:01

软件测试应用技术--架构相关的注意事项

一、分层架构软件测试 1.1、分层架构层级第一层：表示层（客户端） 第二层：服务层（服务端） 第三层：业务逻辑层（服务端） 第四层：数据层（数据库&…...

编程日记 2024/5/8 8:17:29

IT项目管理【太原理工大学】前置知识点精简总结

根据上次考试以及其他方向考试的经验，这届考试可能偏向出题更灵活，能死记硬背或套公式的题减少，多做准备呀各位大三苦逼人，挂了补考还得回来补考凸^-^凸共勉 （另外，别作弊，今天人工智能考试逮住…...

编程日记 2024/5/8 4:18:56

《Video Mamba Suite》论文笔记（1）Mamba在时序建模中的作用

原文链接 https://arxiv.org/abs/2403.09626https://arxiv.org/abs/2403.09626 原文代码 https://github.com/OpenGVLab/video-mamba-suitehttps://github.com/OpenGVLab/video-mamba-suite 原文笔记 What 《Video Mamba Suite: State Space Model as a Versatile Altern…...

编程日记 2024/5/8 1:41:12

TextMeshPro - 富文本标签

初始文本粗体 斜体 颜色<#ff0000></color> 大小<size></size> <size=60%>中</size><size=1.2em>中</size> 下划线 删除线<s></s> 上标<sup…...

编程日记 2024/5/8 0:27:23

Linux学习之路 -- 文件 -- 文件描述符

前面介绍了与文件相关的各种操作，其中的各个接口都离不开一个整数，那就是文件描述符，本文将介绍文件描述符的一些相关知识。目录 <1>现象 <2>原理文件fd的分配规则和利用规则实现重定向 <1>现象我们可以先通过prin…...

编程日记 2024/5/7 22:11:04

【Typescript学习】使用 React 和 TypeScript 构建web应用（三）所有组件

教程来自freecodeCamp：【英字】使用 React 和 TypeScript 构建应用程序跟做，仅记录用其他资料：https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide/ 第三天以下是视频(0:40-0:60) 的内容目录第三天1 创建Todo…...

编程日记 2024/5/8 21:17:53

7.3 矩阵范数

定义向量有范数，矩阵也有范数，定义和向量范数类似，不过多了一条要求。它的定义如下： 正定性positivity,∥A∥≥0\parallel A\parallel\ge 0∥A∥≥0，只有A0A0A0时才取等号；非负齐次性homogeneity或scalin…...

编程日记 2024/5/6 12:39:01

Jetpack架构组件库：Hilt

Hilt Hilt 是基于 Dagger2 的依赖注入框架，Google团队将其专门为Android开发打造了一种纯注解的使用方式，相比 Dagger2 而言使用起来更加简单。依赖注入框架的主要作用就是控制反转（IOC, Inversion of Control）, 那么什么是控制…...

编程日记 2024/5/8 15:53:14

InstanceNorm LayerNorm

InstanceNorm && LayerNorm author: SUFEHeisenberg date: 2023/01/26 先说结论: 将Transformer类比于RNN：一个token就是一层layer，对一整句不如token有意义原生Bert代码或huggingface中用的都是InstanceNorm instead of LayerNorm&#xff…...

编程日记 2024/5/4 16:47:16

数据结构---堆

堆定义基本操作建堆堆排序优先队列一、堆的定义： 堆必须是一个完全二叉树还得满足堆序性什么是完全二叉树呢？ 完全二叉树只允许最后一行不为满且最后一行必须从左到右排序最后一行元素之间不可有间隔，中间不可有空缺如下几棵树…...

编程日记 2024/5/8 20:33:31

3小时精通opencv(五) 利用TrackBar进行颜色检测

3小时精通opencv(五) 利用TrackBar进行颜色检测参考视频资源:3h精通Opencv-Python 本章内容介绍如何利用TrackBar调节色域, 手动提取到我们需要的颜色文章目录3小时精通opencv(五) 利用TrackBar进行颜色检测创建Trackbar色彩检测创建Trackbar 在opencv中使用createTrackbar函…...

编程日记 2024/4/26 6:27:36

学习记录673@项目管理之进度管理案例

本文主要是进度管理之关键链路法的案例。案例 Perfect 项目的建设方要求必须按合同规定的期限交付系统，承建方项目经理李某决定严格执行项目进度管理，以保证项目按期完成。他决定使用关键路径法来编制项目进度网络图。在对工作分解结构进行认真分析后&…...

编程日记 2024/5/4 7:50:39

【设计模式】结构型模式·组合模式

学习汇总入口【23种设计模式】学习汇总(数万字讲解体系思维导图) 写作不易，如果您觉得写的不错，欢迎给博主来一波点赞、收藏~让博主更有动力吧！ 一.概述又称为部分整体模式，用于把一组相似的对象当作一个单一的对象。组合模式依…...

编程日记 2024/5/4 7:28:02

Vue-Router详解

1、前端路由的发展历程 1.1、认识前端路由路由其实是网络工程中的一个术语： 在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器&…...

编程日记 2024/5/8 16:14:01

Eclipse中的Build Path

Eclipse中的Build Path简介如果修改了Build Path中的中的JRE版本，记得还需要同步修改Java编译器的版本，如下图红框所示简介 Build Path是Java工程包含的资源属性合集，用来管理和配置此Java工程中【除当前工程自身代码以外的其他资源】的引用…...

编程日记 2024/5/6 2:46:02

Python与Matlab混合编程案例

前言因为项目需要，需要批处理很多Matlab的.m文件，从每个文件中提取结果合并到一个文件中。很明显，如果手工统计，几百个文件会累死的。因此立即想到了Python在批处理方面的优势，因此就在网上找了相关资料，…...

编程日记 2024/5/5 20:14:58

stack、queue、priority_queue

容器适配器适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结)，该种模式是将一个类的接口转换成客户希望的另外一个接口。其中stack和queue都是容器适配器，其中stack可以封装vector、list以及我们…...

编程日记 2024/5/8 4:20:02

高通平台开发系列讲解（GPS篇）gpsONE 系统架构

文章目录一、系统架构图二、gpsONE系统组成三、gpsONE交互流程沉淀、分享、成长，让自己和他人都能有所收获！😄 📢高通的定位系统模块，名称叫gpsONE。一、系统架构图二、gpsONE系统组成 GPS系统架构可以分为六个部分： APP层Framework Client端（LocationManager API…...

编程日记 2024/5/8 16:04:23

zkMove——针对Move合约生态的zkVM

1. 引言 Move为不同于Solidity的，开源的安全的智能合约开发语言，最早由Facebook为Diem链创造开发。不过，Move本身设计为与平台无关的语言，具有通用的库、工具，并使得采用完全不同数据模型和执行模型的链的开发者社区都…...

编程日记 2024/5/4 16:23:44

贪心算法的题目

每一步都做出一个局部最优的选择，最终的结果就是全局最优只有一部分问题才能用贪心算法（严格来讲，一个问题能不能用贪心算法需要证明的） 2022.8.30 蔚来笔试题： 有a个y,b个o,c个u,用这些字母拼成一个字符串&#xf…...

编程日记 2024/5/7 20:19:42

线程控制--Linux

文章目录线程理解线程的优点与缺点进程的多个线程共享线程控制线程创建线程终止线程等待线程分离总结线程理解谈及线程，就不得不谈起进程与线程的关系了。学习完前面有关进程的知识，之前我们对进程的定义是：内核数据结构代码和数据。但是今…...

编程日记 2024/5/3 12:09:17

17 | 如何做好面试复盘？将经验提升为能力

前言前言：面试是最好的查漏补缺机会，做好面试复盘又是十分的重要。文章目录前言一. 关于复盘1. 什么是复盘（What）2. 复盘的目的（Why）3. 什么时候需要复盘（When）4. 怎么进行复盘&am…...

编程日记 2024/5/4 7:00:53

数据结构-树

1. 二叉树遍历 #include <stdbool.h> #include "stdio.h" #include "stdlib.h"typedef struct TNode *Position; typedef Position BinTree; // 二叉树类型 typedef char ElementType;// 树结点定义 struct TNode {ElementType Data; // 结点数据Bin…...

编程日记 2024/5/2 11:28:23

Python3 循环语句

本章节将为大家介绍 Python 循环语句的使用。 Python 中的循环语句有 for 和 while。 Python 循环语句的控制结构图如下所示： while 循环 Python 中 while 语句的一般形式： while 判断条件(condition)：执行语句(statements)…… 执行流程…...

编程日记 2024/5/2 13:32:50

时序数据处理中的拟合问题

对于深度学习或机器学习模型而言，我们不仅要求它对训练数据集有很好的拟合（训练误差），同时也希望它可以对未知数据集（测试集）有很好的拟合结果（泛化能力），所产生的测试误差被称为泛化误差。度量泛化能力的好坏，最直观的表现就是模型的过拟合（overfitting）和欠拟合（…...

编程日记 2024/5/8 13:08:52

[数据结构基础]排序算法第一弹 -- 直接插入排序和希尔排序

目录一. 排序的概念及分类 1.1 排序的概念 1.2 常见的排序算法二. 直接插入排序 2.1 直接插入排序的实现逻辑 2.2 直接插入排序的实现代码 2.3 直接插入排序的时间复杂度分析三. 希尔排序 3.1 希尔排序的实现逻辑 3.2 希尔排序实现代码 3.3 希尔排序的效率测试 …...

编程日记 2024/5/7 11:36:02

厚积薄发打卡Day115：Debug设计模式＜简单工厂、工厂方法、抽象工厂＞

厚积薄发打卡Day115：Debug设计模式<简单工厂、工厂方法、抽象工厂> 简单工厂定义由一个工厂对象决定创建出哪一种产品类的实例（严格意义并不是设计模式，更是一种风格） 类型：创建型，但不属于GOF…...

编程日记 2024/5/6 13:21:22

python元组

python元组文章目录python元组一、实验目的二、实验原理三、实验环境四、实验内容五、实验步骤1.创建元组2.访问元组3.修改元组4.删除元组5.索引及截取6.元组运算符7.内置函数总结一、实验目的掌握元组的用法二、实验原理 Python 的元组与列表类似，不同之处在…...

编程日记 2024/5/8 1:38:31

gcc中预定义的宏GNUC __GNUC_MINOR GNUC_PATCHLEVEL__

今天在看Linux系统编程这本书的代码的时候看到了__GNUC__，不太清楚这个宏所以去查了一下，以此记录。GNU C预定义了一系列的宏，这些宏都是以双下划线开始的，这里只讲一下__GNUC__ __GNUC_MINOR__ __GNUC_PATCHLEVEL__，完…...

编程日记 2024/5/8 11:28:00

AxMath使用教程（持续更新中）

前言这两天学了学Latex，主要是为了以后写毕业论文做铺垫，而且Latex在数学公式这一方面，要比Word方便许多，于是我就下载了一款国产的公式编辑器——AxMath。永久会员不贵，只要36元，而且软件很好用&#xf…...

编程日记 2024/5/7 11:29:37

day11 栈和队列 | 20、有效的括号 1047、删除字符串中的所有相邻重复项 150、逆波兰表达式求值

题目 20、有效的括号给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串，判断字符串是否有效。有效字符串需满足： 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序…...

编程日记 2024/5/5 15:29:45

【前端面试】http面试整理

"一问一答"模型的协议客户端通过http请求；服务器端根据请求返回客户想要的资源；客户端接收到资源；http是什么 HTTP是超文本传输协议，是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约…...

编程日记 2024/5/3 19:19:14

倒霉倒霉倒霉(传送门 bfs 三维数组递归综合运用

题目描述“啊！倒霉倒霉倒霉~”龙叔被困在一座大厦里了，可恶的瓦龙把这座大厦点燃了，他借机消灭龙叔。这座大厦有L层，每一层都有R*C个房间。熊熊火焰蔓延十分快，有的房间已经着火了，龙叔没办法通过。这时老爹…...

编程日记 2024/5/5 5:12:25

C++函数定义和调用介绍

C函数定义和调用介绍函数的意义：利用率高，可读性强，利于移植。一个C程序中主函数有且只有一个，是程序的入口，而函数（或称子函数）可以有很多。每个 C 程序都至少有一个函数，即主…...

编程日记 2024/5/8 5:18:35

手把手带初学者快速入门 JAVA Web SSM 框架

博主也是刚开始学习SSM，为了帮大家节省时间，写下SSM快速入门博客有什么不对的地方还请私信或者评论区指出只是一个简单的整合项目，让初学者了解一下SSM的大致结构项目先把框架写好，之后在填写内容项目压缩包完整的蓝奏…...

编程日记 2024/5/8 8:14:27

RocketMQ源码本地搭建调试

1 GitHub源码 git clone https://github.com/apache/rocketmq.git导入IDEA，可在命令行执行mvn compile一下，保证源码能够正确编译。本次我使用的master分支的版本-4.8.0。下面我们开始准备启动Namesrv。 2 启动Namesrv 到namesrv模块找到NamesrvStart…...

编程日记 2024/5/4 20:00:14

Axios 二次封装并使用

index.js import axios from "axios";let token localStorage.getItem("token"); // let token "123213"; class Request {// 自定义变量instance;constructor(config) {// console.log(config)// 创建axios 实例，变量接收this.in…...

编程日记 2024/5/4 13:52:28

【SpringCloud】Nacos集群搭建

集群结构图官方给出的Nacos集群图如下：其中包含3个nacos节点，然后一个负载均衡器代理3个Nacos。这里负载均衡器可以使用nginx。我们接下来要尝试 Nacos集群搭建，效果图如下所示：三个nacos节点的地址：节点ipportnacos1l…...

编程日记 2024/5/8 17:38:54

【CSDN的2022与2023】普普通通的三年，从懵懂、焦虑到坚定、奋进，破除焦虑努力成为更好的自己

大家好，我是黄小黄！一名普通的软件工程在读学生。最近终于闲下来了一丢丢！借着休息之余，来写一篇年度总结散散心~与其说是年度总结，不如说是给大学生活与莽莽撞撞的自己一个交代叭！ 这些都是小标题~碎碎念1…...

编程日记 2024/5/6 20:01:05

k8s单机版使用本地存储local-path-provisioner

在k8s单机环境中，我们经常使用本机路径作为持久化存储。在k8s官方文档中有两种方式使用本机存储，一种是hostPath，另一种是local volume，这两种都不支持动态扩容，并且程序移植改动比较大，而local-path-provi…...

编程日记 2024/5/2 15:24:12

MySQL优化（1）执行计划explain中type属性详解

系列文章目录1.初始化测试数据1.初始化表格（user表）2.初始化表格（product表）3.初始化表格（user表数据初始化）4.初始化表格（product表函数）5.初始化表格（product表数据初始…...

编程日记 2024/4/30 19:59:22

servlet过滤器Filter简要回顾-过滤请求字符编码,/和/*和/**的区别

servlet过滤器Filter简要回顾-过滤请求字符编码,/和/*和/**的区别servlet过滤器1.filter过滤器的含义2.filter过滤器的使用3.测试-过滤字符编码正确响应中文编码3.1 创建servlet用于显示中文字符3.2 自定义过滤器3.3 配置web.xml中的servlet映射以及过滤器请求拦截3.4 运行输出…...

编程日记 2024/5/4 17:34:52

Java链表OJ题

目录1. 删除链表中等于给定值val的所有结点2. 逆置单链表3. 链表的中间结点4. 链表中倒数第k个结点5. 将两个有序链表合并为一个新的有序链表6. 以给定值x为基准将链表分割成两部分7. 判断是否为回文链表8. 两个链表的第一个公共结点9. 判断链表中是否有环10. 链表开始入环的第…...

编程日记 2024/5/5 11:02:26

0、Spring工程构建Spring快速入门Spring配置文件详解注入Sprint相关API

1、Spring工程构建创建工程项目目录文件夹 IDEA选择项目new一个module 配置案例 aop创建创建并下载完毕后，点击file选择projert 选择按照的jdk版本 output选择当前目录， 点击右下方apply 选择facets，点击""号选择web 选择当前…...

编程日记 2024/5/7 8:17:07

网络原理之HTTP/HTTPS、TCP、IP四层协议栈

文章目录一、应用层（一）xml协议（二）json协议（三）protobuffer协议（四）HTTP协议1. 抓包工具，fiddler2. HTTP报文格式3. HTTP请求(Request)（1）URL基本…...

编程日记 2024/5/8 20:23:09

CS61B 2021spring HW0

HW 0: A Java Crash Course 文章目录HW 0: A Java Crash CourseA Basic ProgramCreative Exercise 1a: Drawing a TriangleCreative Exercise 1b: DrawTriangleExercise 2、3Optional: Exercise 4Java可视化orz表达积累参考资料这个hw是optional，然后主要是给至少学…...

编程日记 2024/5/8 3:04:10

自动驾驶环境感知——视觉传感器技术

文章目录1. 摄像头的成像原理1.1 单目视觉传感器的硬件结构1.2 单目视觉的成像原理 –小孔成像模型1.3 单目视觉的成像原理 – 像素坐标系1.4 单目视觉三维坐标系转换 – 外参1.5 单目视觉的坐标系转换 – 从世界坐标点到像素坐标1.6 单目视觉的特性2. 视觉传感器的标定2.1 视觉…...

编程日记 2024/5/4 16:59:50

分享148个ASP源码，总有一款适合您

ASP源码分享148个ASP源码，总有一款适合您下面是文件的名字，我放了一些图片，文章里不是所有的图主要是放不下...， 148个ASP源码下载链接：https://pan.baidu.com/s/1e2PvBmXxZA8C3IelkP8ZtQ?pwdj7lp 提取码&#x…...

编程日记 2024/5/3 1:58:18

Java线程的生命周期的五种状态

前面在《有关Java多线程的几个概念》（https://blog.csdn.net/helloworldchina/article/details/128753898）讲述了Java线程的生命周期的五种状态。在这里再详述一下线程的5种状态。在java中，任何对象都要有生命周期，线程也一样&a…...

编程日记 2024/5/8 2:49:43

springboot自定义拦截器的简单使用和一个小例子

springboot自定义拦截器的使用1. 自定义拦截器2. 拦截器登录验证的小demo2.1 配置pom.xml2.2 创建User的bean组件2.3 创建需要的表单页面以及登录成功的页面2.4 编写controller映射关系2.5 自定义拦截器类，实现intercepetor接口2.6注册添加拦截器，自定义…...

编程日记 2024/5/3 20:02:08

APT之木马静态免杀

前言这篇文章主要是记录手动编写代码进行木马免杀，使用工具也可以免杀，只不过太脚本小子了，而且工具的特征也容易被杀软抓到，指不定哪天就用不了了，所以要学一下手动去免杀木马，也方便以后开发一个只属于…...

编程日记 2024/5/7 16:37:31

设计模式 - 创建型模式_抽象工厂模式

文章目录创建型模式概述Case场景模拟工程模拟早期单机Redis的使用Bad ImplBetter Impl （抽象⼯⼚模式重构代码）定义适配接⼝实现集群适配器接口代理方式的抽象工厂类单元测试小结创建型模式创建型模式提供创建对象的机制， 能够提升已有代码…...

编程日记 2024/5/7 12:46:58

9、断点调试

文章目录9、断点调试9.1 为什么需要Debug9.2 Debug的步骤1 添加断点2 启动调试3 单步调试工具介绍9.3 多种Debug情况介绍1 行断点2 方法断点3 字段断点4 条件断点5 异常断点6 线程断点7 强制结束9.4 自定义调试数据视图9.5 常见问题【尚硅谷】idea实战教程-讲师：宋红…...

编程日记 2024/5/6 15:39:38

yolo结构介绍

更新中 yolo结构：这个是针对最早的v5版本1.0进行讲解，现在2022最新版本是V6.2。有一些细节的差别比如Backbone部分Focus倍替换成6*6的Conv，bottleneckCSP替换为C3，Neck部分SPP被替换成SPPF等 Release v1.0 ultralytics/yolov5 (github.com) # parameters nc: 80 # n…...

编程日记 2024/5/5 20:17:01

大数据技术架构(组件)7——Hive：Filter PushDown Cases And Outer Join Behavior

1.2、Filter PushDown Cases And Outer Join Behavior前提:关闭优化器set hive.auto.convertjoinfalse; set hive.cbo.enablefalse;Inner Join:1、Join On中的谓词: 左表下推、右表下推2、Where谓词:左表下推、右表下推-- 第一种情况: join on 谓词 selectt1.user_id,t2.user_i…...

编程日记 2024/5/5 23:48:26

高阶RAG-ReRank

1.背景-现RAG存在的问题现在很明显，仅仅依靠向量检索技术不足以开发 RAG 应用程序，尤其是在生产环境中部署。以下为案例： 关键词搜索容易返回不回答问题的结果稠密检索容易返回不正确的结果实际RAG检索中也有很多类型问题，…...

编程日记 2024/5/8 19:04:30

第十三届蓝桥杯决赛（国赛）真题 Java B 组【原卷】

文章目录发现宝藏【考生须知】试题 A: 重合次数试题 B: 数数试题 C: 左移右移试题 D: 窗口试题 E: 迷宫试题 F : \mathrm{F}: F: 小球称重试题 G: 背包与魔法试题 H: 修路试题 I: 围栏试题J: 好数发现宝藏前些天发现了一个巨牛的人工智能学习网站，通俗易懂&…...

编程日记 2024/5/8 18:57:47

PHP定时任务框架taskPHP3.0学习记录7宝塔面板手动可以执行自动无法执行问题排查及解决方案（sh脚本、删除超过特定天数的日志文件、kill -9）

PHP定时任务框架taskPHP3.0学习记录 PHP定时任务框架taskPHP3.0学习记录1（TaskPHP、执行任务类的实操代码实例）PHP定时任务框架taskPHP3.0学习记录2（环境要求、配置Redis、crontab执行时间语法、命令操作以及Screen全屏窗口管理器&#xff0…...

编程日记 2024/5/8 17:55:10

代码训练LeetCode(17)存在重复元素

代码训练(17)LeetCode之存在重复元素 Author: Once Day Date: 2024年5月7日漫漫长路，才刚刚开始… 全系列文章可参考专栏: 十年代码训练_Once-Day的博客-CSDN博客参考文章: 219. 存在重复元素 II - 力扣（LeetCode）力扣 (LeetCode) 全球…...

编程日记 2024/5/8 11:21:55

《ESP8266通信指南》12-Lua 固件烧录

往期《ESP8266通信指南》11-Lua开发环境配置-CSDN博客《ESP8266通信指南》10-MQTT通信（Arduino开发）-CSDN博客《ESP8266通信指南》9-TCP通信（Arudino开发）-CSDN博客《ESP8266通信指南》8-连接WIFI（Arduino开发…...

编程日记 2024/5/8 6:04:29

Day44 Java的反射案例

Day44 Java的反射案例文章目录 Day44 Java的反射案例一、反射案例之万能数组扩容二、反射案例之业务与逻辑分离的思想三、反射案例之操作注解一、反射案例之万能数组扩容 1、基本步骤： 获取原始数组的类型： 使用array.getClass().getCompon…...

编程日记 2024/5/7 20:08:19

oracle数据库升级过程中执行catupgrd.sql遇到ORA-01722: invalid number问题的处理

近期，在进行一个WINDOWS环境的oracle 11.2.0.1版本数据库迁移到LINUX环境的oracle 11.2.0.4版本并升级时，因为需要从oracle 11.2.0.1版本升级到oracle 11.2.0.4版本，使用手动运行catupgrd.sql脚本，此时报错： SELECT T…...

编程日记 2024/5/8 17:47:02

前端处理跨域

1、出现跨域的原因同源策略是浏览器提供的一种安全机制，可以防止跨站脚本攻击；同源策略：协议（http / https）、域名 / IP 地址、端口号，一致就是同源，不一致就是不同源； 2、JSONP …...

编程日记 2024/5/8 14:23:33

【功耗问题排查】

一、如何处理具体功耗case 在手机功耗测试中，因为我们在功耗测试中（电源电压）为固定值（老手机一般为3.8V左右，现在的大多项目采用4V左右），那么的大小直接由决定，所以，在沟…...

编程日记 2024/5/8 12:58:11

jupyter lab 与jupter notebook 以及anconda环境

jupyter lab 与jupter notebook 以及anconda环境 jupyter lab 与jupter notebook 以及anconda环境方法一之后需要将虚拟环境的包，导入到jupyter lab中方法二 jupyter lab 与jupter notebook 以及anconda环境 #踩坑/深度学习/jupyter，与深度学环境关于…...

编程日记 2024/5/8 10:50:42

人工智能的关键技术

人工智能的关键技术概念方面学习算法形式模型价值机器学习 1.自动用“模型”匹配“数据” 2.训练“模型”学习“数据” 机器学习算法及应用(热点） 回归、聚类、分类神经网络（输入、输出、变量权重、特征）深度学习（多等级特征…...

编程日记 2024/5/8 9:28:48

CSS 样式清单整理：文字超出部分显示省略号和设置placeholder的字体样式

单行文本的溢出显示省略号（一定要有宽度） p{width:200rpx;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}多行文本溢出显示省略号 p {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}设…...

编程日记 2024/5/8 6:30:44

第三天

目录

1 创建TodoList组件

2 SingleTodo组件

3 todo的按钮响应函数

相关文章：