React 使用 React Dnd 实现列表拖拽排序
拖拽排序功能在现代的网页应用中非常常见,它提供了一种直观、灵活的方式来让用户自定义内容的顺序。ReactDnd是基于HTML5的拖放API构建的,它能够让你轻松地在React应用中添加拖拽功能。本文介绍如何利用ReactDnd(DragandDrop)这个强大的库来实现一个简易的列表拖拽排序功能。实现步骤一、安装ReactDnd首先,我们需要在项目中安装ReactDnd及其HTML5后端库:np
前端 · 阅读 1421 · 2022年7月30日 23:45

【手写组件库之日历组件教程第一篇】基于React实现日历组件详细教程
日历组件是常见的日期时间相关的组件,围绕日历组件设计师做出过各种尝试,展示的形式也是五花八门。但是对于前端开发者来讲,主要我们能够掌握核心思路,不管多么奇葩的设计我们都能够把它做出来。本文将详细分析如何渲染一个简单的日历组件。在线演示DEMOhttps://calendar.levenx.com/#/simple-calendar实现步骤计算每个月中具体包含的日期因为日历需要把当前月的每一天都展
前端 · 阅读 2975 · 2023年8月24日 22:06

React 内置 Hook 之 useState 深度解析与使用案例
我们都知道React从16.8版本开始引入了Hooks特性,这对于函数式组件来说是一次质的飞跃。它使得我们可以在不必写成class形式的情况下,使用state和其他特性,使代码更简洁,易读和易于测试。在所有的Hooks中,useState 可谓是基础而且非常关键的一个。我们可通过它在功能组件中声明和操作state,这对于传统只能在class组件中操作state的思维是一次重大改变。这次,
前端 · 阅读 2201 · 2024年1月2日 22:57

一篇文章学会 NestJS 的拦截器并且附带实战操作案例
在现代Web开发的世界中,NestJS以其灵活性和强大的功能立足,成为Node.js框架的佼佼者。其中一个引人注目的功能就是拦截器,这是一种可以让开发者更好地控制和补充HTTP请求循环的工具。拦截器让开发者可以在处理程序之前或之后“拦截”HTTP请求,这是解决一系列问题的基石。什么是NestJS拦截器简单来说,拦截器是一种特殊类型的服务,运行在路由处理程序方法之前和之后。它们在每次请求和响应的生命
服务端 · 阅读 3827 · 2023年12月30日 22:39

TypeScript 中的 interface 和 type 有什么区别?应该如何选择?
TypeScript中的interface和type都是声明自定义类型的方式,但它们有一些区别,适用于不同的使用场景。两者使用案例interfaceinterface主要用于描述对象的形状或者类的结构,这是它最经常的应用场景。interface使用示例:interfacePerson{name:string;age:number;}functiongreet(person:Person){re
前端 · 阅读 1964 · 2023年12月20日 23:30

VSCode 如何安装插件的历史版本
在日常开发过程中,我们可能会遇到新版VSCode插件存在问题,无法正常工作的情况。这种情况下,一种可行的解决方案就是安装插件的历史版本。VSCode插件默认安装的都是插件最新的版本,例如下面vscode-styled-compoents插件本人最近面临这种情况,我在项目中使用styled-compoent时,为了实现代码智能提示,官方推荐使用vscode-styled-compoents插件,
前端 · 阅读 1744 · 2023年12月28日 22:03

一篇文章学会如何使用 NestJS 的五种 Provider 提供者
在构建复杂的后端应用中,如何有效地管理和彼此协作的各个部分,以及如何共享和复用功能已成为开发者们重要关注的问题。覆盖这些需求的一种技术就是NestJS中的Providers。这次,让我们一起深入探讨这个关键概念,解密Providers的奥秘,了解它们是如何提供和分配服务的。在这篇文章中,我们将学习五种主要的Provider类型:值提供者、类提供者、工厂提供者、异步工厂提供者和别名提供者,以及如何在
服务端 · 阅读 4111 · 2024年1月2日 21:48

使用 VSCode 开发 Flutter 应用:从入门到实践
Flutter是Google推出的一款开源的移动应用开发框架,可用于快速开发高质量的原生应用。而VisualStudioCode(VSCode)是目前非常流行的一款轻量级代码编辑器,它支持多种编程语言,并且拥有丰富的插件生态。在这篇教程中,我们将详细介绍如何在VSCode中配置和使用Flutter,帮助你高效地开发移动应用。使用步骤一、安装必要的软件在开始使用VSCode开发Flutter应用之
前端 · 阅读 584 · 2024年7月3日 22:21

如何在NestJS中集成Swagger
NestJS是一个高效且适用于构建服务器端应用程序的框架,它基于Node.js并且被设计为灵活和可伸缩。Swagger,现在更多被称为OpenAPI,是一个规范和完整的框架,用于生成、描述、调用和可视化RESTful风格的Web服务。集成Swagger到NestJS可以大大提高你的API的文档质量,并提供一个交互式的用户界面,供开发人员和最终用户使用。本文将详细介绍如何在NestJS项目中集成Sw
服务端 · 阅读 1151 · 2024年1月12日 23:26

Flutter 设置 Lottie 动画的详细教程
Lottie是一个流行的库,可以让你在移动应用中轻松添加高质量的动画。它支持Android、iOS、Web以及其他多个平台,因此非常适合跨平台框架Flutter。在这篇教程中,将简要介绍如何在Flutter应用中使用Lottie动画。什么是Lottie?Lottie是Airbnb设计的一个库,可以帮助开发者轻松添加动画到任何应用。Lottie动画是基于JSON文件的,这些JSON文件通过Adob
前端 · 阅读 754 · 2024年7月17日 12:57
