Raink老师
Raink老师

9. TypeScript 泛型

TypeScript 中的泛型使开发者能够编写灵活、可重用的代码，同时保持类型安全。它们允许动态定义类型，确保函数、类和接口可以适用于任何数据类型。这有助于避免重复，提高代码的模块化，使其既类型安全又具备适应性。

一、认识泛型

当程序员需要创建可重用组件时，可以使用 TypeScript 的泛型类型，因为它们用于创建可以处理各种数据类型的组件，并提供类型安全性。可重用组件可以是类、函数和接口。TypeScript 泛型可以以多种方式使用，例如函数泛型、类泛型和接口泛型。

(一) 语法

function functionName (returnValue : T) : T {
  return returnValue;
}

(二) 用法示例

1. 例一

在这个例子中，我们创建了一个可以接受任意类型数据的泛型函数。我们只需要在参数中传入任何类型的数据，然后就可以通过 reverseArray 函数对该值进行反转。

function reverseArray(array: T[]): T[] {
  return array.reverse();
}

const strArray: string[] = reverseArray(["Java", "Python", "C++"]);
const numArray: number[] = reverseArray([1, 2, 3, 4, 5]);
const boolArray: boolean[] = reverseArray([false, true]);

console.log(strArray);
console.log(numArray);
console.log(boolArray);

输出：

[ 'C++', 'Python', 'Java' ]
[ 5, 4, 3, 2, 1 ]
[ true, false ]

2. 例二

在这个例子中，我们创建了一个泛型接口，通过它我们创建了一个对象和字符串类型的值，并将它们打印在控制台中。

// 定义一个泛型接口 Resource，T 是类型参数
interface Resource {
  id: number;               // 资源 ID
  resourceName: string;     // 资源名称
  data: T;                  // 泛型数据字段，类型由使用者决定
}

// 使用对象类型实现泛型接口
const person: Resource = {
  id: 1,                    // 资源 ID 为 1
  resourceName: 'Person',   // 资源名称为 "Person"
  data: {                   // data 是一个对象类型
    name: 'John',         // 姓名
    age: 25               // 年龄
  }
}
console.log(person);          // 打印 person 对象

// 使用字符串数组类型实现泛型接口
const employee: Resource = {
  id: 2,                      // 资源 ID 为 2
  resourceName: 'Employee',   // 资源名称为 "Employee"
  data: ['Employee 1', 'Employee 1']  // data 是一个字符串数组
}
console.log(employee);          // 打印 employee 对象
 
  
输出：
 
  
{
  "id": 1,
    "resourceName": "Person",
    "data": {
    "name": "John",
      "age": 25
  }
} 
{
  "id": 2,
    "resourceName": "Employee",
    "data": [
    "Employee 1",
    "Employee 1"
  ]
} 
 
  
二、泛型函数
 
  
TypeScript 泛型函数允许你创建可以处理多种类型的数据的函数，同时保持类型安全。通过使用尖括号（）中定义的类型参数，泛型使函数能够在不同的数据类型上运行，而不会失去 TypeScript 类型检查所带来的优势。
 
  
(一) 语法
 
  
function functionName(parameterName: T): ReturnType {
  // 函数实现
}
 
  
这里：
 
  
     
   
  • functionName 是你的泛型函数的名称。
    •  
   
  •  是类型参数 T，它允许你在函数内部处理不同的数据类型。
    •  
   
  • parameterName 表示函数参数的名称，T 指定该参数接受的数据类型。
    •  
   
  • ReturnType 指定函数预期返回值的类型。
    •  
  
 
  
(二) 用法示例
 
  
1. 例一
 
  
TypeScript 中带有单个类型参数的泛型函数能够处理多种数据类型，同时保证类型安全。你可以显式指定类型，也可以让 TypeScript 推断参数和返回值的类型。
 
  
function foo(arg: T): T {
  return arg;
}

let result1: string = foo("TYPESCRIPT");
let result2: number = foo(740);
let result3: boolean = foo(false);

console.log(result1);
console.log(result2);
console.log(result3);
 
  
输出：
 
  
GEEKSFORGEEKS
740
false
 
  
2. 例二
 
  
带有数组参数的泛型函数允许你处理不同类型的数组。通过使用类型参数，该函数可以处理各种元素类型的数组，同时保持类型安全。
 
  
function arrayEl(arr: T[]): void {
  for (const x of arr) {
    console.log(x);
  }
}

let elements: number[] = [101, 102, 103];
arrayEl(elements);

let elements1: string[] = ["吃饭", "睡觉", "打豆豆"];
arrayEl(elements1);
 
  
输出：
 
  
101
102
103
吃饭
睡觉
打豆豆
 
  
3. 例三
 
  
在这个例子中，函数 mergeArrays 将两种不同类型的数组合并为一个。它接收类型为 T 和 U 的数组，返回类型为 (T | U)[] 的数组。
 
  
function mergeArrays(arr1: T[], arr2: U[]): (T | U)[] {
  return [...arr1, ...arr2];
}

// 不同类型的数组
const numbers: number[] = [1, 2, 3];
const words: string[] = ["hello", "world"];

// 合并不同类型的数组
const mergedArray: (number | string)[] = mergeArrays(numbers, words);

// 输出合并后的数组
console.log(mergedArray);
 
  
输出：
 
  
[1, 2, 3, "hello", "world"]
 
  
(三) 总结
 
  
在 TypeScript 中，泛型函数允许你构建能够处理不同数据类型的通用函数，同时确保代码的类型安全，避免错误。这种灵活性非常实用，尤其是在你希望创建能够应对多种情况而无需重复代码的函数时。无论是处理数组、对象还是其他数据结构，泛型函数都能帮助你编写更简洁、更安全的代码。
 
  
三、泛型约束
 
  
在 TypeScript 中，泛型约束（Generic Constraints）通过使用 extends 关键字来限制可以与泛型类型一起使用的类型。这确保了泛型类型遵循特定的结构或接口，从而能够在泛型中访问某些属性或方法。
 
  
(一) 什么是泛型约束？
 
  
     
   
  • TypeScript 的泛型使我们能够编写可重用的代码，能够处理不同的数据类型。我们可以创建可以与不同数据类型一起工作的函数、类或接口。
    •  
   
  • 泛型使用  的形式定义，这种 T 类型可以用于函数参数、返回值等的类型定义。
    •  
   
  • 泛型约束用于对泛型类型参数可使用的类型施加限制。
    •  
   
  • 这种限制带来了类型检查，确保变量在被使用之前具备某种类型的值。
    •  
   
  • 这种检查机制有助于最大限度地减少运行时错误的发生。
    •  
  
 
  
语法：
 
  
function genericConstraintFunction(param: T): void {
  // ...
}
 
  
含义如下：
 
  
     
   
  • T 是泛型类型参数。
    •  
   
  • extends GenericConstraintType 指定了一个约束条件，要求类型参数 T 必须继承或符合 GenericConstraintType 类型的结构。
    •  
  
 
  
(二) 用法示例
 
  
1. 例一
 
  
在此示例中，Sports 接口具有一个 name 属性。printSportName 函数使用 extends 来确保其参数在执行前符合 Sports 类型的结构。
 
  
// 使用 name 属性定义 Sports 接口
interface Sports {
  name: string;
}

// 定义函数，确保传入的类型 T 继承自 Sports
function printSportName(sport: T): void {
  console.log(sport.name); // 输出运动名称
}

// 创建一个 Sports 类型的对象
let sport: Sports = { name: "棒球" };

// 使用 sport 对象调用函数
printSportName(sport);
 
  
输出：
 
  
baseball
 
  
2. 例二
 
  
在此示例中，我们使用 extends keyof 来确保泛型类型参数 K 是类型 T 的一个键。这种做法强制要求 K 必须是 T 的一个有效属性。
 
  
interface Sports {
  name: string;
  players: number;
}

// 泛型函数，限制 T 必须扩展自 Sports，K 必须是 T 的键
function getNumberOfPlayers
  (sport: T, players: K): T[K] {
    return sport[players];
  }

let sport: Sports = { name: "baseball", players: 9 };

// 'players' 被推断为 number 类型
let players: number = getNumberOfPlayers(sport, 'players');
console.log(`球员人数为：${players}`);
 
  
输出：
 
  
球员人数为：9
 
  
3. 例三
 
  
在此示例中，我们确保泛型类型参数的类对象实现了特定的接口。
 
  
// 定义一个接口 Sports
interface Sports {
  name: string;
  players: number;
  getNumberOfGloves(): number; // 获取手套数量的方法
}

// 定义一个实现 Sports 接口的类 Baseball
class Baseball implements Sports {
  constructor(public name: string, public players: number) { }

  // 实现接口中的方法
  getNumberOfGloves(): number {
    return this.players * 2;
  }
}

// 定义一个泛型函数，约束类型 T 必须实现 Sports 接口
function getNumberOfGloves(sport: T): void {
  console.log(`所需手套数量为：${sport.getNumberOfGloves()}`);
}

// 创建 Baseball 类的实例
let baseball = new Baseball("baseball", 9);
getNumberOfGloves(baseball); // 输出：所需手套数量为：18
 
  
输出：
 
  
所需手套数量为：18
 
  
四、泛型接口
 
  
在 TypeScript 中创建带有泛型类型的接口是一项强大的功能，它提升了代码的灵活性和可复用性。通过定义带有泛型类型参数的接口，你可以创建适用于多种数据类型的组件，同时保持类型安全。
 
  
(一) 带有单一泛型类型参数的接口
 
  
interface InterfaceName {
  // 接口成员
}
 
  
定义一个带有单一泛型类型参数的接口，可以创建通用组件，这些组件能够在不同数据类型间灵活操作。此方法提升了代码的灵活性，并通过抽象具体的数据实现，促进代码的重用。
 
  
下面的代码创建了一个带有单个泛型类型参数的接口。
 
  
interface Box {
  getItem(): T;
  setItem(item: T): void;
}

class MyBox implements Box {
  private item: T;

  getItem(): T {
    return this.item;
  }

  setItem(item: T): void {
    this.item = item;
  }
}

const stringBox: Box = new MyBox();
stringBox.setItem("Hello, Generics!");
console.log("字符串的值:", stringBox.getItem());
 
  
输出：
 
  
字符串的值:Hello, Generics!
 
  
(二) 多泛型类型参数
 
  
TypeScript 也支持带有多个泛型类型参数的接口，使开发者能够设计高度可定制且参数化的组件。
 
  
下面的代码创建了一个带有多个泛型类型参数的接口。
 
  
interface Pair {
  key: K;
  value: V;
}

const pair: Pair = { key: 1, value: "One" };
console.log("Key:", pair.key, ", Value:", pair.value);
 
  
输出：
 
  
Key: 1,  Value: One 
 
  
五、泛型与类
 
  
TypeScript 中在泛型中使用类类型，可以让你通过指定泛型参数为类的构造函数，创建更灵活且可重用的代码。当你想操作类的实例，同时又希望保持类型安全时，这种方式特别有用。你可以定义一个接受类构造函数的泛型类型，然后使用该类型来创建和操作这些类的实例。
 
  
(一) 语法
 
  
function createInstance(
  constructor: new (...args: any[]) => T,
  ...args: any[]
): T {
  // 创建并返回指定类的实例
  return new constructor(...args);
}
 
  
说明：
 
  
     
   
  • T 是一个泛型类型参数，表示要创建的实例的类型。它允许你指定工厂函数的期望返回类型。
    •  
   
  • constructor 是类构造函数的引用。
    •  
   
  • new (...args: any[]) => T 表示该构造函数可以接受任意数量的参数（...args: any[]），并返回类型为 T 的实例。
    •  
   
  • ...args: any[] 使用剩余参数语法，接受任意数量的额外参数，这些参数会在创建实例时传递给构造函数。
    •  
  
 
  
(二) 用法示例
 
  
1. 例一
 
  
在这个例子中，我们定义了一个名为 createInstance 的泛型工厂函数。它接受一个类的构造函数（constructor）和任意数量的附加参数（...args）。createInstance 函数通过使用传入的参数调用构造函数，创建并返回指定类的实例。
 
  
// 定义一个泛型工厂函数
function createInstance(constructor:
                           new (...args: any[]) => T, ...args: any[]): T {
  return new constructor(...args);
}

// 示例类
class Product {
  constructor(
    public name: string,  // 产品名称
    public price: number) { }  // 产品价格
}

class Person {
  constructor(
    public name: string,  // 人名
    public age: number) { }  // 年龄
}

// 使用工厂函数创建实例
const laptop = createInstance(Product, 'Laptop', 999);
console.log(laptop);

const user = createInstance(Person, 'TypeScript', 30);
console.log(user);
 
  
输出：
 
  
Product { name: 'Laptop', price: 999 }
Person { name: 'TypeScript', age: 30 }
 
  
2. 例二
 
  
在这个例子中，我们定义了一个基类 Animal，包含一个 name 属性和一个 makeSound 方法。Dog 类继承自 Animal，新增了 breed 属性并重写了 makeSound 方法。我们创建了一个泛型函数 printAnimalInfo，该函数接受一个类型为 T 的参数，且 T 必须继承自 Animal 类。这意味着它可以接受 Animal 类或其子类的实例。然后我们创建了 Animal 和 Dog 的实例，并分别调用 printAnimalInfo 函数。
 
  
// 定义基类 Animal
class Animal {
  // 构造函数，初始化公开属性 name
  constructor(public name: string) { }

  // 返回动物发出的通用声音
  makeSound(): string {
    return "Some generic animal sound";
  }
}

// 定义继承自 Animal 的子类 Dog
class Dog extends Animal {
  // 构造函数，接收 name 和 breed 两个参数
  constructor(name: string, public breed: string) {
    super(name);  // 调用父类构造函数，初始化 name
  }

  // 重写父类的 makeSound 方法，返回狗叫声
  makeSound(): string {
    return "Woof! Woof!";
  }
}

// 定义泛型函数，要求类型 T 继承自 Animal
function printAnimalInfo
  (animal: T): void {
    // 打印动物的名字
    console.log(`Name: ${animal.name}`);
    // 打印动物的叫声（调用 makeSound 方法）
    console.log(`Sound: ${animal.makeSound()}`);
  }

// 创建 Animal 类的实例
const genericAnimal = new Animal("Generic Animal");
// 创建 Dog 类的实例
const myDog = new Dog("Buddy", "Golden Retriever");

// 使用泛型函数，分别传入 Animal 和 Dog 实例
printAnimalInfo(genericAnimal);
printAnimalInfo(myDog);
 
  
输出：
 
  
Name: Generic Animal
Sound: Some generic animal sound
Name: Buddy
Sound: Woof! Woof!
 
  
六、泛型对象类型
 
  
TypeScript 泛型对象类型允许你为对象创建灵活且可复用的类型定义。这些泛型类型可以处理不同结构的对象，同时保证类型安全，确保代码既健壮又具有适应性。它们特别适合用于创建能够处理多种对象结构的函数或类，同时保持类型的正确性。
 
  
(一) 语法
 
  
type MyGenericObject = {
  key: string;
  value: T;
};
 
  
(二) 用法示例
 
  
1. 键值对
 
  
在此示例中，我们创建了一个泛型对象类型来表示键值对。类型参数 T 表示值的类型，使得可以使用不同的数据类型。
 
  
type KeyValuePair = {
  key: string;
  value: T;
};

const stringPair: KeyValuePair = { key: 'name', value: 'John' };
const numberPair: KeyValuePair = { key: 'age', value: 30 };

console.log(stringPair);
console.log(numberPair);
 
  
输出：
 
  
{ key: 'name', value: 'John' }
{ key: 'age', value: 30 }
 
  
2. 封装数据属性
 
  
在此示例中，我们定义了一个泛型对象类型，用于封装指定类型 T 的数据属性。这个例子展示了泛型对象类型如何存储和访问不同的数据类型。
 
  
type DataContainer = {
  data: T;
};

const numericData: DataContainer = { data: 25 };
const stringData: DataContainer = { data: 'TypeScript' };

console.log(numericData.data);
console.log(stringData.data);
 
  
输出：
 
  
25
TypeScript
 
  
(三) 总结
 
  
TypeScript 的泛型对象类型提供了一种强大的方式来创建灵活、可复用且类型安全的对象定义。通过利用这些类型，你可以构建更健壮且适应性更强的代码，确保函数和类能够处理不同的对象结构，同时保持严格的类型正确性。这种方法提升了代码的可维护性，降低了出错的风险，成为 TypeScript 开发者工具箱中不可或缺的重要工具。
 
  
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(2025,TypeScript学习指南,typescript,javascript,前端)

        

            

                
    
                    
  • 移动端城市区县二级联动选择功能实现包
                        good2know

                        
    本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery
    
                    
    • 
                    
  • day15｜前端框架学习和算法
                        universe_01
前端算法笔记
                        
    T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的
    
                    
    • 
                    
  • 车载刷写架构 --- 整车刷写中为何增加了ECU 队列刷写策略？
                        汽车电子实验室
电子电器架构——刷写方案车载电子电气架构架构开发语言车载诊断进阶篇汽车中央控制单元HPC软件架构关于网关转发性能引起的思考
                        
    我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：周末洗了一个澡，换了一身衣服，出了门却不知道去哪儿，不知道去找谁，漫无目的走着，大概这就是成年人最深的孤独吧!旧人不知我近况，新人不知我过往，近况不该旧人知，过往不与新人讲。纵你阅人何其多，再无一人恰似我。时间不知不觉中，来到新的一年。2025开始新的忙碌。成年人的我也不知道去哪里渡
    
                    
    • 
                    
  • 通义万相2.2：开启高清视频生成新纪元
                        Liudef06小白
特殊专栏AIGC人工智能人工智能通义万相2.2图生视频
                        
    通义万相2.2：开启高清视频生成新纪元2025年7月28日，中国AI领域迎来里程碑时刻——通义万相团队正式开源其革命性视频生成模型Wan2.2的核心权重，这标志着开源社区首次获得支持720P高清视频生成的先进模型架构。一、架构革新：混合专家系统1.1MoE视频扩散架构通义万相2.2首次将混合专家（MoE）架构引入视频扩散模型，通过双专家系统实现计算效率与模型容量的平衡：classMoEVideoD
    
                    
    • 
                    
  • 2025年SDK游戏盾终极解析：重新定义手游安全的“隐形护甲”
                        上海云盾商务经理杨杨
游戏安全
                        
    副标题：从客户端加密到AI反外挂，拆解全链路防护如何重塑游戏攻防天平引言：当传统高防在手游战场“失效”2025年全球手游市场规模突破$2000亿，黑客单次攻击成本却降至$30——某SLG游戏因协议层CC攻击单日流失37%玩家，某开放世界游戏遭低频DDoS瘫痪6小时损失千万。传统高防IP的致命短板暴露无遗：无法识别伪造客户端流量、难防协议篡改、误杀率超15%。而集成于游戏终端的SDK游戏盾，正以“源
    
                    
    • 
                    
  • EasyPlayer播放器系列开发计划2025
                        xiejiashu
EasyPlayerEasyPlayerEasyPlayer播放器RTSP播放器js播放器Web播放器
                        
    EasyPlayer系列产品发展至今，已经超过10年，从最早的EasyPlayerRTSP播放器，到如今维护的3条线：EasyPlayer-RTSP播放器：Windows、Android、iOS；EasyPlayerPro播放器：Windows、Android、iOS；EasyPlayer.js播放器：H5；这3个播放器各有各的应用场景，用户量也是巨大，像RTSP版本的播放器，到今天依然还有很多低
    
                    
    • 
                    
  • 北斗短报文兜底、5G-A增强：AORO P1100三防平板构建应急通信网络
                        

                        
    公网中断的灾区现场，泥石流阻断了最后一条光缆。一支救援队却在废墟间有序穿行，队长手中的三防平板正闪烁着北斗卫星信号，定位坐标与伤亡信息化作一行行短报文，穿透通信孤岛直达指挥中心。这是AOROP1100三防平板搭载的北斗短报文功能在应急救援中的真实场景，更代表了工业移动终端在极端环境下的能力跃迁。AOROP1100三防平板作为遨游通讯2025年推出的旗舰三防设备，AOROP1100三防平板的技术基底
    
                    
    • 
                    
  • 用代码生成艺术字：设计个性化海报的秘密
                        

                        
    本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准
    
                    
    • 
                    
  • vue element 封装表单
                        影子信息
vuevue.jsjavascript前端
                        
    背景：在前端系统开发中，系统页面涉及到的表单组件比较多，所以进行了简单的封装。封装的包括一些Form表单组件，如下：input输入框、select下拉框、等实现效果：理论知识：表单组件官方链接：点击跳转封装组件：封装组件的思路：不封装element组件，每一个input组件绑定一个form对象，例如官网。简单封装element组件，利用for循环生成form表单的每一项el-form-item。进
    
                    
    • 
                    
  • 前端面试每日 3+1 —— 第39天
                        浪子神剑

                        
    今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss
    
                    
    • 
                    
  • HikariCP调试日志深度解析：生产环境故障排查完全指南
                        

                        
    HikariCP调试日志深度解析：生产环境故障排查完全指南更新时间：2025年7月4日|作者：资深架构师|适用版本：HikariCP5.x+|难度等级：中高级前言在生产环境中，数据库连接池往往是系统性能的关键瓶颈。HikariCP作为当前最流行的Java连接池，其调试日志包含了丰富的运行时信息，能够帮助我们快速定位和解决各种连接池相关问题。本文将深入解析HikariCP的日志体系，提供一套完整的故
    
                    
    • 
                    
  • 前端数据库：IndexedDB从基础到高级使用指南
                        

                        
    文章目录前端数据库：IndexedDB从基础到高级使用指南引言一、IndexedDB概述1.1什么是IndexedDB1.2与其他存储方案的比较二、基础使用2.1打开/创建数据库2.2基本CRUD操作添加数据读取数据更新数据删除数据三、高级特性3.1复杂查询与游标3.2事务高级用法3.3性能优化技巧四、实战案例：构建离线优先的待办事项应用4.1数据库设计4.2同步策略实现五、常见问题与解决方案5.
    
                    
    • 
                    
  • 【2025/07/20】GitHub 今日热门项目
                        Albert_Lsk
Github推荐github开源协议人工智能开源
                        
    GitHub今日热门项目每日精选优质开源项目|发现优质开源项目，跟上技术发展趋势报告概览统计项数值说明报告日期2025-07-20(周日)GitHubTrending每日快照数据时间21:28:08实时爬取生成项目总数15个精选热门开源项目⭐总星数392.7K社区认可度指标今日热度+4.5K24小时新增关注数据洞察核心指标项目总览15个精选项目⭐社区认可392.7K总星标数今日热度4.5K新增关注
    
                    
    • 
                    
  • 【Java Web实战】从零到一打造企业级网上购书网站系统 | 完整开发实录（三）
                        笙囧同学
java前端状态模式
                        
    核心功能设计用户管理系统用户管理是整个系统的基础，我设计了完整的用户生命周期管理：用户注册流程验证失败验证通过验证失败验证通过用户名已存在用户名可用失败成功用户访问注册页面填写注册信息前端表单验证显示错误提示提交到后端后端数据验证返回错误信息用户名唯一性检查提示用户名重复密码加密处理保存用户信息保存成功?显示系统错误注册成功跳转登录页面登录认证机制深度解析我实现了一套企业级的多层次安全认证机制：认
    
                    
    • 
                    
  • 从零到一：打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战
                        

                        
    作者简介：笙囧同学，中科院计算机大模型方向硕士，全栈开发爱好者联系方式：[email protected]各大平台账号：笙囧同学座右铭：偷懒是人生进步的阶梯前言在AI技术飞速发展的今天，如何将前沿的大模型技术与实际应用相结合，一直是我们开发者关注的焦点。今天，笙囧同学将带大家从零开始，构建一个基于GigaChatAI的艺术创作平台，实现React前端+Django后端的完整全栈解决方案。这不仅仅是
    
                    
    • 
                    
  • Claude Code 超详细完整指南（2025最新版）
                        笙囧同学
python
                        
    终端AI编程助手|高频使用点+生态工具+完整命令参考+最新MCP配置目录快速开始（5分钟上手）详细安装指南系统要求Windows安装（WSL方案）macOS安装Linux安装安装验证配置与认证首次认证环境变量配置代理配置⚡基础命令详解启动命令会话管理文件操作Think模式完全指南MCP服务器配置详解MCP基础概念添加MCP服务器10个必备MCP服务器MCP故障排除记忆系统详解高级使用技巧成本控制策
    
                    
    • 
                    
  • 14.tornado操作之应用Websocket协议实现聊天室功能
                        孤寒者
Tornado框架从入门到实战websockettornado聊天室功能实现python
                        
    目录：每篇前言：1.什么是WebSocket（1）定义（2）优点（3）和HTTP对比（4）适用场景2.WebSocket关键方法3.本tornado项目中使用WebSocket（1）准备一个聊天室的页面：第一步：编写视图：第二步：编写接口：（app.py中加入以下接口！）第三步：编写前端页面：测试接口——响应OK！（2）使用WebSocket：（3）聊天室的聊天功能的最终实现：第一步：战前准备第二
    
                    
    • 
                    
  • 2025最新系统 Git 教程（七）（完结）
                        嘿rasa
2025最新教程系列git
                        
    第4章分布式Git4.1分布式Git-分布式工作流程你现在拥有了一个远程Git版本库，能为所有开发者共享代码提供服务，在一个本地工作流程下，你也已经熟悉了基本Git命令。你现在可以学习如何利用Git提供的一些分布式工作流程了。这一章中，你将会学习如何作为贡献者或整合者，在一个分布式协作的环境中使用Git。你会学习为一个项目成功地贡献代码，并接触一些最佳实践方式，让你和项目的维护者能轻松地完成这个过
    
                    
    • 
                    
  • 2025最新Mybatis-plus教程（二）
                        

                        
    三、CRUD（一）BaseMapper接口方法介绍BaseMapper中提供了crud方法，具体方法如下：//插入一条记录intinsert(Tentity);//根据entity条件，删除记录intdelete(@Param(Constants.WRAPPER)Wrapperwrapper);//删除（根据ID批量删除）intdeleteBatchIds(@Param(Constants.COL
    
                    
    • 
                    
  • 2025最新Mybatis-plus教程（四）
                        

                        
    五、MyBatis-Plus的service封装（一）通用Service简介MyBatis-Plus除了通用的Mapper还有通用的Service层，这也减少了相对应的代码工作量，把通用的接口提取到公共。其实按照mp的这种思想，可以自己也实现一些通用的Controller。（二）通用Service方法介绍/***插入一条记录（选择字段，策略插入）**@paramentity实体对象*/defaul
    
                    
    • 
                    
  • 2025最新Mybatis-plus教程（三）
                        

                        
    四、MyBatis-Plus条件构造器（一）条件构造器介绍在MyBatis-Plus中提了构造条件的类Wrapper，它可以根据自己的意图定义我们需要的条件。Wrapper是一个抽象类，一般情况下我们用它的子类QueryWrapper来实现自定义条件查询。（二）selectOne方法@TestpublicvoidtestSelectOne(){ QueryWrapperqueryWrapper=n
    
                    
    • 
                    
  • 为什么学习Web前端一定要掌握JavaScript？
                        web前端学习指南

                        
    为什么学习Web前端一定要掌握JavaScript？在前端的世界里，没有什么是JavaScript实现不了的，关于JS有一句话：凡是可以用JavaScript来写的应用，最终都会用JavaScript，JavaScript可运行在所有主要平台的所有主流浏览器上，也可运行在每一个主流操作系统的服务器端上。现如今我们在为网站写任何一个主要功能的时候都需要有懂能够用JavaScript写前端的开发人员。
    
                    
    • 
                    
  • 小架构step系列25：错误码
                        秋千码途
架构java
                        
    1概述一个系统中，可能产生各种各样的错误，对这些错误进行编码。当错误发生时，通过这个错误码就有可能快速判断是什么错误，不一定需要查看代码就可以进行处理，提高问题处理效率。有了统一的错误码，还可以标准化错误信息，方便把错误信息纳入文档管理和对错误信息进行国际化等。没有错误码的管理，开发人员就会按自己的理解处理这些错误。有些直接把堆栈直接反馈到前端页面上，使用看不懂这些信息体验很差，也暴露了堆栈信息有
    
                    
    • 
                    
  • Java朴实无华按天计划从入门到实战（强化速战版-66天）
                        岫珩
Java后端java开发语言学习Java时间安排学习计划
                        
    致敬读者感谢阅读笑口常开生日快乐⬛早点睡觉博主相关博主信息博客首页专栏推荐活动信息文章目录Java朴实无华按天计划从入门到实战（强化速战版-66天）1.基础（18）1.1JavaSE核心（5天）1.2数据库与SQL（5天）1.3前端基础（8天）2.进阶（17天）2.1JavaWeb核心（5天）2.2Mybatis与Spring全家桶（6天）2.3中间件入门（4天）2.4实践项目（2天）3.高阶（1
    
                    
    • 
                    
  • Docker部署Minio
                        YiShuoChen666
eureka云原生dockerminio
                        
    一、拉取镜像dockerpullminio/minio:RELEASE.2025-04-22T22-12-26Z注：这里使用的版本是RELEASE.2025-04-22T22-12-26Z，最新的版本Web-UI界面没有管理bucket和其它的操作按钮，需要通过mc命令来实现，这对于新手很不友好二、创建目录，来存放minio的配置和将来放的文件mkdir-p/home/minio/configmk
    
                    
    • 
                    
  • 《跨域资源共享CORS的深层逻辑与前端实践精要》
                        

                        
    不同源头的资源交互已成为常态，而跨域资源共享（CORS）正是支撑这种交互的隐形架构。现代Web安全体系中平衡开放与防护的精妙设计。理解CORS的深层逻辑，不仅能解决实际开发中的跨域难题，更能触及网络安全与资源流通的核心矛盾，为前端工程师构建稳健的应用提供底层认知支撑。跨域资源共享的诞生，源于网络安全与应用发展的必然冲突。浏览器的同源策略，作为早期网络安全的基石，通过限制不同源文档的交互，有效阻挡了
    
                    
    • 
                    
  • 深入了解 Kubernetes（k8s）：从概念到实践
                        

                        
    目录一、k8s核心概念二、k8s的优势三、k8s架构组件控制平面组件节点组件四、k8s+docker运行前后端分离项目的例子1.准备前端项目2.准备后端项目3.创建k8s部署配置文件4.部署应用到k8s集群在当今云计算和容器化技术飞速发展的时代，Kubernetes（简称k8s）已成为容器编排领域的事实标准。无论是互联网巨头、传统企业还是初创公司，都在广泛采用k8s来管理和部署容器化应用。本文将带
    
                    
    • 
                    
  • Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录
                        二倍速播放
前端vue.js
                        
    1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非
    
                    
    • 
                    
  • 从零到大厂：硬件程序员的硬核修炼手册——2025版面试笔试全攻略
                        small_wh1te_coder
c面试嵌入式面试职场和发展c算法嵌入式硬件汇编linux
                        
    从零到大厂：嵌入式程序员的硬核修炼手册——2025版面试笔试全攻略第一章：C语言的内功心法——从“会用”到“精通”的蜕变引子：C语言，嵌入式江湖的“独孤九剑”兄弟，你是不是觉得C语言都学烂了？指针、数组、结构体，这些东西张口就来。但为啥一到大厂面试，或者遇到稍微复杂点的嵌入式项目，就感觉力不从心，甚至有点懵圈？原因很简单：你可能只是“会用”C语言，离“精通”C语言，特别是“精通”嵌入式领域所需的C
    
                    
    • 
                    
  • CSDN原力榜42名-深圳区！全站14k名！我如何一周狂发14篇，篇篇爆款引爆社区，成为你“技术跃迁”的唯一选择？
                        small_wh1te_coder
c算法面试算法c面试职场和发展
                        
    一、数据不会说谎！我，就是CSDN深圳圈圳原力榜63名一路狂飙至44名，我们共同见证了硬核力量的爆发！这仅仅是个开始就在你们为我欢呼、为我点赞、为我收藏的同时，我并没有停下脚步！因为我深知，技术之路，逆水行舟，不进则退！真正的硬核，是永不停歇的探索，是持续不断的输出！现在，请睁大你的眼睛，看好了！这是我CSDN博客，在2025年7月14日至7月21日这一周，交出的“王炸”级答卷！数据不会说谎！这份
    
                    
    • 
                                
  • 枚举的构造函数中抛出异常会怎样
                                    bylijinnan
javaenum单例
                                    
    首先从使用enum实现单例说起。 
 
为什么要用enum来实现单例？ 
这篇文章（ 
http://javarevisited.blogspot.sg/2012/07/why-enum-singleton-are-better-in-java.html）阐述了三个理由： 
1.enum单例简单、容易，只需几行代码： 
 

public enum Singleton {
	INSTANCE;
    
                                
    • 
                                
  • CMake 教程
                                    aigo
C++
                                    
    转自：http://xiang.lf.blog.163.com/blog/static/127733322201481114456136/ 
  
CMake是一个跨平台的程序构建工具，比如起自己编写Makefile方便很多。 
介绍：http://baike.baidu.com/view/1126160.htm 
本文件不介绍CMake的基本语法，下面是篇不错的入门教程： 
http:
    
                                
    • 
                                
  • cvc-complex-type.2.3: Element 'beans' cannot have character
                                    Cb123456
springWebgis
                                    
      cvc-complex-type.2.3: Element 'beans' cannot have character 
    Line 33 in XML document from ServletContext resource [/WEB-INF/backend-servlet.xml] is i
    
                                
    • 
                                
  • jquery实例:随页面滚动条滚动而自动加载内容
                                    120153216
jquery
                                    
    <script language="javascript">
$(function (){
	var i = 4;$(window).bind("scroll", function (event){
		//滚动条到网页头部的 高度，兼容ie,ff,chrome
		var top = document.documentElement.s
    
                                
    • 
                                
  • 将数据库中的数据转换成dbs文件
                                    何必如此
sqldbs
                                    
    旗正规则引擎通过数据库配置器（DataBuilder）来管理数据库，无论是Oracle，还是其他主流的数据都支持，操作方式是一样的。旗正规则引擎的数据库配置器是用于编辑数据库结构信息以及管理数据库表数据，并且可以执行SQL 语句，主要功能如下。 
1)数据库生成表结构信息： 
        主要生成数据库配置文件(.conf文
    
                                
    • 
                                
  • 在IBATIS中配置SQL语句的IN方式
                                    357029540
ibatis
                                    
    在使用IBATIS进行SQL语句配置查询时，我们一定会遇到通过IN查询的地方，在使用IN查询时我们可以有两种方式进行配置参数：String和List。具体使用方式如下： 
 
1.String:定义一个String的参数userIds，把这个参数传入IBATIS的sql配置文件，sql语句就可以这样写： 
 
 
 
<select id="getForms" param
    
                                
    • 
                                
  • Spring3 MVC 笔记（一）
                                    7454103
springmvcbeanRESTJSF
                                    
        
     自从 MVC 这个概念提出来之后 struts1.X  struts2.X   jsf 。。。。。 
这个view 层的技术一个接一个！ 都用过！不敢说哪个绝对的强悍！ 
要看业务，和整体的设计！ 
 
     最近公司要求开发个新系统！
    
                                
    • 
                                
  • Timer与Spring Quartz 定时执行程序
                                    darkranger
springbean工作quartz
                                    
    有时候需要定时触发某一项任务。其实在jdk1.3，java sdk就通过java.util.Timer提供相应的功能。一个简单的例子说明如何使用，很简单： 1、第一步，我们需要建立一项任务，我们的任务需要继承java.util.TimerTask package com.test; import java.text.SimpleDateFormat; import java.util.Date; 
    
                                
    • 
                                
  • 大端小端转换，le32_to_cpu 和cpu_to_le32
                                    aijuans
C语言相关
                                    
    大端小端转换，le32_to_cpu 和cpu_to_le32   字节序  
http://oss.org.cn/kernel-book/ldd3/ch11s04.html 
        小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高级的平台以另一种方式(大端)
    
                                
    • 
                                
  • Nginx负载均衡配置实例详解
                                    avords

                                    
    [导读] 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡，单从字面上的意思来理解就可以解  负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。 
负载均衡 
先来简单了解一下什么是负载均衡
    
                                
    • 
                                
  • 乱说的
                                    houxinyou
框架敏捷开发软件测试
                                    
    从很久以前，大家就研究框架，开发方法，软件工程，好多！反正我是搞不明白！   
这两天看好多人研究敏捷模型，瀑布模型！也没太搞明白.    
不过感觉和程序开发语言差不多，   
瀑布就是顺序，敏捷就是循环.    
瀑布就是需求、分析、设计、编码、测试一步一步走下来。而敏捷就是按摸块或者说迭代做个循环，第个循环中也一样是需求、分析、设计、编码、测试一步一步走下来。   
  
也可以把软件开发理
    
                                
    • 
                                
  • 欣赏的价值——一个小故事
                                    bijian1013
有效辅导欣赏欣赏的价值
                                    
    　　第一次参加家长会，幼儿园的老师说："您的儿子有多动症，在板凳上连三分钟都坐不了，你最好带他去医院看一看。"　　回家的路上，儿子问她老师都说了些什么，她鼻子一酸，差点流下泪来。因为全班30位小朋友，惟有他表现最差；惟有对他，老师表现出不屑，然而她还在告诉她的儿子："老师表扬你了，说宝宝原来在板凳上坐不了一分钟，现在能坐三分钟。其他妈妈都非常羡慕妈妈，因为全班只有宝宝
    
                                
    • 
                                
  • 包冲突问题的解决方法
                                    bingyingao
eclipsemavenexclusions包冲突
                                    
    包冲突是开发过程中很常见的问题： 
其表现有： 
1.明明在eclipse中能够索引到某个类，运行时却报出找不到类。 
2.明明在eclipse中能够索引到某个类的方法，运行时却报出找不到方法。 
3.类及方法都有，以正确编译成了.class文件，在本机跑的好好的，发到测试或者正式环境就 
抛如下异常： 
 
java.lang.NoClassDefFoundError: Could not in
    
                                
    • 
                                
  • 【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j
                                    bit1129
Stream
                                    
    先来一段废话： 
实际工作中，业务系统的日志基本上是使用Log4j写入到日志文件中的，问题的关键之处在于业务日志的格式混乱，这给对日志文件中的日志进行统计分析带来了极大的困难，或者说，基本上无法进行分析，每个人写日志的习惯不同，导致日志行的格式五花八门，最后只能通过grep来查找特定的关键词缩小范围，但是在集群环境下，每个机器去grep一遍，分析一遍，这个效率如何可想之二，大好光阴都浪费在这上面了
    
                                
    • 
                                
  • sudoku solver in Haskell
                                    bookjovi
sudokuhaskell
                                    
    这几天没太多的事做，想着用函数式语言来写点实用的程序，像fib和prime之类的就不想提了（就一行代码的事），写什么程序呢？在网上闲逛时发现sudoku游戏，sudoku十几年前就知道了，学生生涯时也想过用C/Java来实现个智能求解，但到最后往往没写成，主要是用C/Java写的话会很麻烦。 
  
现在写程序，本人总是有一种思维惯性，总是想把程序写的更紧凑，更精致，代码行数最少，所以现
    
                                
    • 
                                
  • java apache ftpClient
                                    bro_feng
java
                                    
    最近使用apache的ftpclient插件实现ftp下载，遇见几个问题，做如下总结。 
1. 上传阻塞，一连串的上传，其中一个就阻塞了，或是用storeFile上传时返回false。查了点资料，说是FTP有主动模式和被动模式。将传出模式修改为被动模式ftp.enterLocalPassiveMode();然后就好了。 
 
看了网上相关介绍，对主动模式和被动模式区别还是比较的模糊，不太了解被动模
    
                                
    • 
                                
  • 读《研磨设计模式》-代码笔记-工厂方法模式
                                    bylijinnan
java设计模式
                                    
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 
 
 


package design.pattern;

/*
 * 工厂方法模式：使一个类的实例化延迟到子类
 * 某次，我在工作不知不觉中就用到了工厂方法模式（称为模板方法模式更恰当。2012-10-29）：
 * 有很多不同的产品，它
    
                                
    • 
                                
  • 面试记录语
                                    chenyu19891124
招聘
                                    
    或许真的在一个平台上成长成什么样，都必须靠自己去努力。有了好的平台让自己展示，就该好好努力。今天是自己单独一次去面试别人，感觉有点小紧张，说话有点打结。在面试完后写面试情况表，下笔真的好难，尤其是要对面试人的情况说明真的好难。 
今天面试的是自己同事的同事，现在的这个同事要离职了，介绍了我现在这位同事以前的同事来面试。今天这位求职者面试的是配置管理，期初看了简历觉得应该很适合做配置管理，但是今天面
    
                                
    • 
                                
  • Fire Workflow 1.0正式版终于发布了
                                    comsci
工作workflowGoogle
                                    
    Fire Workflow 是国内另外一款开源工作流，作者是著名的非也同志，哈哈.... 
 官方网站是 http://www.fireflow.org 
 
 经过大家努力,Fire Workflow 1.0正式版终于发布了 
 
 正式版主要变化: 
1、增加IWorkItem.jumpToEx(...)方法，取消了当前环节和目标环节必须在同一条执行线的限制，使得自由流更加自由 
2、增加IT
    
                                
    • 
                                
  • Python向脚本传参
                                    daizj
python脚本传参
                                    
    如果想对python脚本传参数，python中对应的argc, argv(c语言的命令行参数)是什么呢？ 
需要模块：sys 
参数个数：len(sys.argv) 
脚本名：    sys.argv[0] 
参数1：     sys.argv[1] 
参数2：     sys.argv[
    
                                
    • 
                                
  • 管理用户分组的命令gpasswd
                                    dongwei_6688
passwd
                                    
    NAME：  gpasswd - administer the /etc/group file 
SYNOPSIS： 
 gpasswd group 
 gpasswd -a user group 
 gpasswd -d user group 
 gpasswd -R group 
 gpasswd -r group 
 gpasswd [-A user,...] [-M user,...] g
    
                                
    • 
                                
  • 郝斌老师数据结构课程笔记
                                    dcj3sjt126com
数据结构与算法
                                    
    <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
    
                                
    • 
                                
  • yii2 cgridview加上选择框进行操作
                                    dcj3sjt126com
GridView
                                    
    页面代码
<?=Html::beginForm(['controller/bulk'],'post');?>
<?=Html::dropDownList('action','',[''=>'Mark selected as: ','c'=>'Confirmed','nc'=>'No Confirmed'],['class'=>'dropdown',])
    
                                
    • 
                                
  • linux mysql
                                    fypop
linux
                                    
    enquiry mysql version in centos linux 
yum list installed | grep mysql 
yum -y remove mysql-libs.x86_64 
enquiry mysql version in yum repositoryyum list | grep mysql oryum -y list mysql* 
install mysq
    
                                
    • 
                                
  • Scramble String
                                    hcx2013
String
                                    
    Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrings recursively. 
Below is one possible representation of s1 = "great":
    
                                
    • 
                                
  • 跟我学Shiro目录贴
                                    jinnianshilongnian
跟我学shiro
                                    
    历经三个月左右时间，《跟我学Shiro》系列教程已经完结，暂时没有需要补充的内容，因此生成PDF版供大家下载。最近项目比较紧，没有时间解答一些疑问，暂时无法回复一些问题，很抱歉，不过可以加群（334194438/348194195）一起讨论问题。 
  
  
----广告-----------------------------------------------------
    
                                
    • 
                                
  • nginx日志切割并使用flume-ng收集日志
                                    liyonghui160com

                                    
      
   nginx的日志文件没有rotate功能。如果你不处理，日志文件将变得越来越大，还好我们可以写一个nginx日志切割脚本来自动切割日志文件。第一步就是重命名日志文件，不用担心重命名后nginx找不到日志文件而丢失日志。在你未重新打开原名字的日志文件前，nginx还是会向你重命名的文件写日志，linux是靠文件描述符而不是文件名定位文件。第二步向nginx主
    
                                
    • 
                                
  • Oracle死锁解决方法
                                    pda158
oracle
                                    
    　select p.spid,c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$process p,v$session a, v$locked_object b,all_objects c where p.addr=a.paddr and a.process=b.process and c.object_id=b.
    
                                
    • 
                                
  • java之List排序
                                    shiguanghui
list排序
                                    
       在Java Collection Framework中定义的List实现有Vector，ArrayList和LinkedList。这些集合提供了对对象组的索引访问。他们提供了元素的添加与删除支持。然而，它们并没有内置的元素排序支持。 　　你能够使用java.util.Collections类中的sort()方法对List元素进行排序。你既可以给方法传递
    
                                
    • 
                                
  • servlet单例多线程
                                    utopialxw
单例多线程servlet
                                    
    转自http://www.cnblogs.com/yjhrem/articles/3160864.html 
和   http://blog.chinaunix.net/uid-7374279-id-3687149.html 
Servlet 单例多线程 
Servlet如何处理多个请求访问？Servlet容器默认是采用单实例多线程的方式处理多个请求的：1.当web服务器启动的
    
                                
    •