TypeScript实战——ChatGPT前端自适应手机端，PC端

前言

在这里插入图片描述
「作者主页」：雪碧有白泡泡
「个人网站」：雪碧的个人网站
请添加图片描述

可以在线体验哦：体验地址

请添加图片描述

文章目录

  • 前言
  • 引言
  • 先看效果
    • PC端
    • 手机端
  • 实现原理
    • 解释
  • 包的架构
      • 目录

引言

ChatGPT是由OpenAI开发的一种基于语言模型的对话系统。它是GPT（Generative Pre-trained Transformer）模型的一个变种，通过在大规模的互联网文本数据上进行预训练，学习到了丰富的语言知识和语义理解能力。

ChatGPT可以用于多种对话任务，包括回答问题、提供信息、进行闲聊等。它可以理解和生成自然语言，并且能够根据上下文进行连贯的对话。ChatGPT还具备一定的常识推理能力，可以回答一些常见问题，并提供合理的解释。

先看效果

可以在线体验哦：体验地址

PC端

在这里插入图片描述

在这里插入图片描述

手机端

在这里插入图片描述
在这里插入图片描述

实现原理

核心css

@mixin container {background-color: var(--white);border: var(--border-in-light);border-radius: 10px;box-shadow: var(--shadow);color: var(--black);background-color: var(--white);min-width: 200px;min-height: 480px;max-width: 1200px;display: flex;overflow: hidden;box-sizing: border-box;width: var(--window-width);height: var(--window-height);
}.container {@include container();
}@media only screen and (min-width: 200px) {.tight-container {--window-width: 100vw;--window-height: var(--full-height);--window-content-width: calc(100% - var(--sidebar-width));@include container();max-width: 100vw;max-height: var(--full-height);border-radius: 0;border: 0;}
}.window-content {width: var(--window-content-width);height: 100%;display: flex;flex-direction: column;
}

解释

这段代码是一个CSS样式表，定义了一个名为"container"的混合器（mixin），以及一些相关的样式规则。

混合器"container"定义了一个容器的样式，包括背景颜色、边框、圆角、阴影、文字颜色、最小宽度和高度、最大宽度等。它还设置了容器的显示方式为flex，并且设置了溢出隐藏和盒模型为border-box。最后，它使用了自定义的CSS变量来设置容器的宽度和高度。

在样式表中，使用".container"选择器来应用"container"混合器定义的样式。

接下来，使用@media查询来根据设备屏幕尺寸应用不同的样式。在这个例子中，当屏幕宽度大于等于200px时，会应用".tight-container"选择器定义的样式。这些样式重新定义了容器的宽度和高度，以及一些其他属性，使容器适应屏幕的宽度和高度。

最后，定义了".window-content"选择器的样式，设置了窗口内容的宽度为变量"–window-content-width"，高度为100%，并且设置了flex布局的垂直方向为列。

包的架构

  1. apis包：这个包通常用于存放与后端API通信相关的代码。它可能包含一些用于发送HTTP请求、处理响应和处理数据的函数或类。

  2. app包下的components包：这个包通常用于存放应用程序的可重用组件。这些组件可以在整个应用程序中使用，例如导航栏、页脚、按钮等。

  3. config包：这个包通常用于存放应用程序的配置文件。它可能包含一些用于配置应用程序的常量、环境变量或其他设置的文件。

  4. hooks包：这个包通常用于存放自定义的React Hooks。Hooks是一种用于在函数组件中共享状态逻辑的方式，可以帮助开发者更好地组织和重用代码。

  5. icons包：这个包通常用于存放应用程序使用的图标文件。这些图标可以是矢量图形或位图图像，用于在应用程序中显示各种图标。

  6. pages包：这个包通常用于存放Next.js应用程序的页面组件。每个页面组件对应一个路由路径，并且可以通过URL访问。这些页面组件可以包含其他组件和逻辑，用于渲染页面内容。

  7. store包：这个包通常用于存放应用程序的状态管理代码。它可能包含一些用于管理全局状态、共享数据和处理状态变更的函数或类。

  8. styles包：这个包通常用于存放应用程序的样式文件。它可以包含CSS文件、Sass文件、样式变量文件等，用于定义应用程序的样式规则和样式变量。

  9. context包：这个包通常用于存放应用程序的上下文相关的代码。上下文是一种在组件树中共享数据的机制，可以在组件之间传递数据，而不需要通过props一层层传递。在context包中，你可能会找到一些用于创建和管理上下文的函数或类。

  10. types包：这个包通常用于存放应用程序的类型定义文件。类型定义文件用于描述应用程序中的数据结构、函数签名和接口等。它可以提供类型检查和自动补全的功能，帮助开发者在编码过程中避免错误。

  11. utils包：这个包通常用于存放应用程序的工具函数或实用函数。这些函数通常是一些通用的功能，可以在整个应用程序中被多个组件或模块使用。它们可以用于处理数据、执行常见的操作、提供辅助功能等。
    在这里插入图片描述

目录


第Ⅰ部分 精通TypeScript语法第1章 熟悉TypeScript 31.1 使用TypeScript编程的理由 31.2 典型的TypeScript工作流 71.3 使用TypeScript编译器 81.4 了解Visual Studio Code 121.5 本章小结 14第2章 基本类型与自定义类型 152.1 声明变量类型 152.1.1 基本类型标注 162.1.2 函数声明中的类型 202.1.3 union类型 212.2 定义自定义类型 232.2.1 使用type关键字 242.2.2 将类用作自定义类型 252.2.3 将接口用作自定义类型 272.2.4 结构化还是名义类型系统 292.2.5 自定义类型的unions 312.3 any和unknown类型，以及用户定义的类型保护 332.4 微型项目 352.5 本章小结 36第3章 面向对象编程的类和接口 373.1 类 373.1.1 开始了解类继承 383.1.2 访问修饰符public、private、protected 393.1.3 静态变量及singleton(单例)设计模式示例 413.1.4 super()方法与super关键字 433.1.5 抽象类 453.1.6 方法重载 483.2 使用interface 533.2.1 执行合同 533.2.2 扩展接口 553.2.3 接口编程 573.3 本章小结 60第4章 使用枚举和泛型 614.1 使用枚举 614.1.1 数字型枚举 614.1.2 字符串枚举 644.1.3 使用常量枚举 664.2 使用泛型 674.2.1 理解泛型 674.2.2 创建自己的泛型类型 724.2.3 创建泛型函数 764.2.4 强制执行高阶函数的返回类型 804.3 本章小结 81第5章 装饰器与高级类型 835.1 装饰器 845.1.1 创建类装饰器 855.1.2 创建函数装饰器 905.2 映射类型 925.2.1 只读映射类型 925.2.2 声明自己的映射类型 965.2.3 其他内置的映射类型 975.3 条件类型 995.4 本章小结 104第6章 开发工具集 1056.1 源映射 1066.2 TSLint linter 1086.3 使用Webpack绑定代码 1116.3.1 使用Webpack绑定JavaScript 1126.3.2 使用Webpack绑定TypeScript 1166.4 使用Babel编译器 1196.4.1 在JavaScript中使用Babel 1226.4.2 在TypeScript中使用Babel 1246.4.3 在TypeScript与Webpack中使用Babel 1266.5 工具介绍 1286.5.1 Deno介绍 1286.5.2 ncc介绍 1296.6 本章小结 132第7章 在项目中同时使用TypeScript和JavaScript 1337.1 类型定义文件 1337.1.1 了解类型定义文件 1347.1.2 类型定义文件与IDE 1357.1.3 shim与类型定义 1387.1.4 创建自己的类型定义文件 1397.2 使用JavaScript库的TypeScript应用程序示例 1407.3 在JavaScript项目中使用TypeScript 1487.4 本章小结 151第Ⅱ部分 基于TypeScript的区块链应用第8章 开发区块链应用 1558.1 区块链简介 1568.1.1 加密哈希函数 1578.1.2 区块由什么组成 1598.1.3 什么是区块挖掘 1608.1.4 哈希和随机数的迷你项目 1628.2 开发第一个区块链 1648.2.1 项目结构 1648.2.2 创建一个原始区块链 1678.2.3 使用工作证明创建区块链 1708.3 本章小结 173第9章 开发基于浏览器的区块链节点 1759.1 运行区块链Web应用 1769.1.1 项目结构 1769.1.2 使用npm脚本部署应用 1789.1.3 使用区块链Web应用 1799.2 Web客户端 1829.3 挖掘区块 1879.4 使用crypto API生成哈希 1919.5 独立的区块链客户端 1949.6 在浏览器中调试TypeScript 1969.7 本章小结 198第10章 使用Node.js、TypeScript和WebSocket进行客户端-服务器通信 19910.1 使用最长链规则解决冲突 20010.2 为区块链添加服务器 20210.3 项目结构 20310.4 项目的配置文件 20410.4.1 配置TypeScript编译环境 20410.4.2 package.json包含什么 20610.4.3 配置nodemon 20710.4.4 运行区块链App 20810.5 WebSocket简介 21310.5.1 HTTP和WebSocket协议的对比 21410.5.2 将数据从节点服务器推送到普通客户端 21510.6 回顾通知工作流 21910.6.1 回顾服务器代码 22110.6.2 回顾客户端代码 23110.7 本章小结 240第11章 使用TypeScript开发Angular应用程序 24111.1 使用Angular CLI生成并运行一个新的应用程序 24211.2 查看生成的App 24411.3 Angular服务和依赖注入 25011.4 使用ProductService注入的应用 25311.5 使用TypeScript进行抽象编程 25511.6 开始处理HTTP请求 25711.7 表单入门 26111.8 Router基础 26511.9 本章小结 269第12章 使用Angular开发区块链客户端 27112.1 启动Angular区块链应用程序 27112.2 回顾AppComponent 27312.3 回顾TransactionFormComponent 27712.4 回顾BlockComponent 27812.5 回顾服务 28112.6 本章小结 283第13章 使用TypeScript开发React.js应用程序 28513.1 使用React开发最简单的网页 28613.2 使用Create React App生成并运行一个新应用 28813.3 管理组件的状态 29313.3.1 向基于类的组件添加状态 29313.3.2 使用钩子管理函数组件的状态 29413.4 开发一个天气应用程序 29713.4.1 向App组件添加状态钩子 29813.4.2 在App组件中使用useEffect钩子获取数据 30013.4.3 使用props 30613.4.4 子组件如何将数据传递给其父组件 31113.5 Virtual DOM 31313.6 本章小结 314第14章 使用React.js开发区块链客户端 31514.1 启动客户端和消息服务器 31514.2 lib目录中发生的变化 31814.3 smart App组件 32014.3.1 添加事务 32214.3.2 生成一个新区块 32414.3.3 解释useEffect()钩子函数 32514.3.4 使用useCallback()钩子的记忆化缓存(Memoization) 32714.4 presentation组件——TransactionForm 33014.5 presentation组件——PendingTransactionsPanel 33314.6 presentation组件——BlocksPanel和BlockComponent 33514.7 本章小结 337第15章 使用TypeScript开发Vue.js应用程序 33915.1 使用Vue开发最简单的Web页面 34015.2 使用Vue CLI生成和运行新应用程序 34315.3 开发有路由支持的单页应用程序 34915.3.1 使用Vue Router生成一个新应用程序 35015.3.2 在主视图中显示products列表 35315.3.3 使用Vue Router传递数据 35815.4 本章小结 362第16章 用Vue.js开发区块链客户端 36516.1 启动客户端和消息服务器 36616.2 App组件 36916.3 presentation组件——TransactionForm 37216.4 presentation组件——PendingTransactionsPanel 37616.5 presentation组件——BlocksPanel和Block 37816.6 本章小结 382后记 382附录A JavaScript基础知识 383A.1 如何运行代码示例 383A.2 关键字let和const 383A.2.1 var关键字和hoisting(提升) 384A.2.2 使用let和const的块级作用域 385A.3 字面量模板 386A.4 可选参数和默认值 388A.5 箭头函数表达式 389A.6 rest运算符 391A.7 spread运算符 393A.8 解构 394A.8.1 解构对象 394A.8.2 解构数组 397A.9 类和继承 398A.9.1 构造函数 400A.9.2 super关键字和super函数 401A.9.3 静态类成员 402A.10 异步处理 403A.10.1 回调地狱 404A.10.2 promise 404A.10.3 同时执行多个promise 407A.10.4 async-await 408A.11 模块 410A.12 转换器 413

前 言

《TypeScript入门与区块链项目实战》是一本有关编程语言TypeScript的书籍。据开发者在Stack
Overflow上的调查，TypeScript是最受欢迎的编程语言之一。

若每天使用TypeScript，就会更加喜欢它。对TypeScript的喜爱源于它允许我们将关注点放在要解决的主要问题上，而不必将精力放在诸如对象属性名的输入错误等问题上。与用JavaScript编写的代码相比，在TypeScript程序中，在运行时出错的可能性更低。同时，许多IDE都能提供很棒的TypeScript支持，并且可以从我们的项目使用的第三方库中引导我们穿过API的“迷宫”。

  • 🎁本次送书1~3本【取决于阅读量，阅读量越多，送的越多】👈
  • ⌛️活动时间：截止到2023-12月27号
  • ✳️参与方式：关注博主+三连（点赞、收藏、评论）

请添加图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/222303.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ES排错命令

ES排错命令

GET _cat/indices?v&healthred GET _cat/indices?v&healthyellow GET _cat/indices?v&healthgreen确定哪些索引有问题，多少索引有问题。_cat API 可以通过返回结果告诉我们这一点 查看有问题的分片以及原因。 这与索引列表有关，但是索引…
阅读更多...
【介质】详解NVMe SSD存储性能影响因素

【介质】详解NVMe SSD存储性能影响因素

导读： NVMe SSD的性能时常捉摸不定，为此我们需要打开SSD的神秘盒子，从各个视角分析SSD性能影响因素，并思考从存储软件的角度如何最优化使用NVMe SSD，推进数据中心闪存化进程。本文从NVMe SSD的性能影响因素进行分析&am…
阅读更多...
Java智慧工地源码 SAAS智慧工地源码 智慧工地管理可视化平台源码 带移动APP

Java智慧工地源码 SAAS智慧工地源码 智慧工地管理可视化平台源码 带移动APP

一、系统主要功能介绍 系统功能介绍： 【项目人员管理】 1. 项目管理：项目名称、施工单位名称、项目地址、项目地址、总造价、总面积、施工准可证、开工日期、计划竣工日期、项目状态等。 2. 人员信息管理：支持身份证及人脸信息采集&#…
阅读更多...
PLC物联网，实现工厂设备数据采集

PLC物联网，实现工厂设备数据采集

随着工业4.0时代的到来，物联网技术在工厂设备管理领域的应用日益普及。作为物联网技术的重要一环，PLC物联网为工厂设备数据采集带来了前所未有的便捷和高效。本文将围绕“PLC物联网，实现工厂设备数据采集”这一主题，探讨PLC物联网…
阅读更多...
常见可视化大屏编辑器有哪些？

常见可视化大屏编辑器有哪些？

前言： 在当今数字化时代，可视化大屏编辑器成为了数据展示和决策支持的重要工具。大屏编辑器不仅仅是数据的呈现，更是数据背后的故事的讲述者。它通过图表、图形和实时数据的呈现，为用户提供了全面的信息视图，帮助用户更…
阅读更多...
mangokit：golang web项目管理工具，使用proto定义http路由和错误

mangokit：golang web项目管理工具，使用proto定义http路由和错误

文章目录 前言1、mangokit介绍1.1 根据proto文件生成http路由1.2 根据proto文件生成响应码1.3 使用wire来管理依赖注入 2、mangokit实现2.1 protobuf插件开发2.2 mangokit工具 3、使用示例3.1 创建新项目3.2 添加新的proto文件3.3 代码生成 前言 在使用gin框架开发web应用时&a…
阅读更多...
【Week-P2】CNN彩色图片分类-CIFAR10数据集

【Week-P2】CNN彩色图片分类-CIFAR10数据集

文章目录 一、环境配置二、准备数据三、搭建网络结构四、开始训练五、查看训练结果六、总结3.1 ⭐ torch.nn.Conv2d()详解3.2 ⭐ torch.nn.Linear()详解3.3 ⭐torch.nn.MaxPool2d()详解3.4 ⭐ 关于卷积层、池化层的计算4.2.1 optimizer.zero_grad()说明4.2.2 loss.backward()说…
阅读更多...
重生奇迹MU剑士所有装备

重生奇迹MU剑士所有装备

1、普通装备：剑、盾、头盔、披风、手套、鞋子等。 2、精良装备：精良剑、精良盾、精良头盔、精良披风、精良手套、精良鞋子等。 3、稀有装备：稀有剑、稀有盾、稀有头盔、稀有披风、稀有手套、稀有鞋子等。 4、传说装备：传说剑、传…
阅读更多...
数据安全扫描仪荣膺网络安全优秀创新成果大赛优胜奖 - 凸显多重优势

数据安全扫描仪荣膺网络安全优秀创新成果大赛优胜奖 - 凸显多重优势

近日，由中国网络安全产业联盟（CCIA）主办、CCI数据安全工作委员会中国电子技术标准化研究院等单位承办的“2023年网络安全优秀创新成果大赛”获奖名单公布。天空卫士数据安全扫描仪（DSS）产品获得创新成果大赛优胜奖。 本…
阅读更多...
图像处理—小波变换

图像处理—小波变换

小波变换 一维小波变换 因为存在 L 2 ( R ) V j 0 ⊕ W j 0 ⊕ W j 0 1 ⊕ ⋯ L^{2}(\boldsymbol{R})V_{j_{0}}\oplus W_{j_{0}}\oplus W_{j_{0}1}\oplus\cdots L2(R)Vj0​​⊕Wj0​​⊕Wj0​1​⊕⋯，所以存在 f ( x ) f(x) f(x)可以在子空间 V j 0 V_{j_0} Vj0…
阅读更多...
Nginx快速入门：nginx各类转发、代理配置详解｜location、proxy_pass参数详解（五）

Nginx快速入门：nginx各类转发、代理配置详解｜location、proxy_pass参数详解（五）

0. 引言 咱们上节讲解了nginx的负载均衡配置，但是还有很多其他的转发情况，包括不同路径转发至不同的业务服务，通配符识别路径转发等。 今天一起来学习nginx的转发配置 1. location模块的匹配模式 首先我们要了解nginx进行转发代理的核心在…
阅读更多...
c++学习笔记-提高篇-STL标准模板库3（stack容器、queue容器以及list容器）

c++学习笔记-提高篇-STL标准模板库3（stack容器、queue容器以及list容器）

目录 Stack容器 一、Stack容器介绍 二、stack常用接口 三、栈的示例 queue（队列）容器 一、queue容器介绍 二、queue常用接口 三、queue示例 list容器 一、list容器介绍 二、list常用接口及示例 （一）list构造函数 &am…
阅读更多...
使用 Taro 开发鸿蒙原生应用 —— 探秘适配鸿蒙 ArkTS 的工作原理

使用 Taro 开发鸿蒙原生应用 —— 探秘适配鸿蒙 ArkTS 的工作原理

背景 在上一篇文章中，我们已经了解到华为即将发布的鸿蒙操作系统纯血版本——鸿蒙 Next，以及各个互联网厂商开展鸿蒙应用开发的消息。其中，Taro作为一个重要的前端开发框架，也积极适配鸿蒙的新一代语言框架 —— ArkTS。 本文将…
阅读更多...
html5 实现网页截屏 页面生成图片

html5 实现网页截屏 页面生成图片

效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"referrer" content"no-referrer" /><meta name"viewport"content"widthdevice-width,intial-sc…
阅读更多...
Python整数常用的方法汇总与Python3 File(文件) 方法

Python整数常用的方法汇总与Python3 File(文件) 方法

Python整数常用的方法汇总 python&#xff13;基础之整数常用的方法整理 希望对大家学习或者使用python3能具有一定的参考价值。 __abs__ #返回一个数的绝对值 __add__ #两数相加 __and__ #两数按位与操作 __bool__ …
阅读更多...
11种方法判断​软件的安全可靠性​

11种方法判断​软件的安全可靠性​

软件的安全可靠性是衡量软件好坏的一个重要标准&#xff0c;安全性指与防止对程序及数据的非授权的故意或意外访问的能力有关的软件属性&#xff0c;可靠性指与在规定的一段时间和条件下&#xff0c;软件 软件的安全可靠性是衡量软件好坏的一个重要标准&#xff0c;安全性指与防…
阅读更多...
智能优化算法应用：基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蜜獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蜜獾算法4.实验参数设定5.算法结果6.参考文献7.MA…
阅读更多...
centos(linux)安装jenkins

centos(linux)安装jenkins

官网&#xff1a;https://pkg.jenkins.io/redhat/ jdk版本要和jenkins对上&#xff01; 安装官网进行操作&#xff1a; sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.reposudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io-…
阅读更多...
华为Harmony——ArkTs语言

华为Harmony——ArkTs语言

文章目录 一、简单示例二、声明式UI描述创建组件无参有参数 配置属性配置事件配置子组件 三、自定义组件基本用法基本结构成员函数/变量 一、简单示例 我们以一个具体的示例来说明ArkTS的基本组成。如下图所示&#xff0c;当开发者点击按钮时&#xff0c;文本内容从“Hello Wo…
阅读更多...
关于“Python”的核心知识点整理大全35

关于“Python”的核心知识点整理大全35

目录 13.3.4 重构 create_fleet() game_functions.py 13.3.5 添加行 game_functions.py alien_invasion.py 13.4 让外星人群移动 13.4.1 向右移动外星人 settings.py alien.py alien_invasion.py game_functions.py 13.4.2 创建表示外星人移动方向的设置 13.4.3 检…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023