react实战——react旅游网
慕课网react实战
- 搭建项目
- 问题
- 1.按照官网在index.tsx中引入antd出错?
- 2.typescript中如何使用react-router
- 3.react-router
- 3.1 V6
- 3.2 V5
- 3.3V6实现私有路由
- 4.函数式组件接收props参数时定义数据接口?
- 5.使用TypeScript开发react项目:
- 6.要使一个组件拥有路由组件的history、location、match等属性
- 7.书写代码规范上的一些问题
- 8.使用redux和react-redux
- 8.1使用react-redux
- 8.2类式组件中使用react-redux
- 8.3函数式组件中使用react-redux(使用hooks函数)
- 8.4使用redux
- 8.5异步处理redux-thunk——可以在action中处理异步任务
- 8.6自定义中间件
- 8.7redux-tooltik
- 9.I18n网站国际化
- 10.获得全局数据的两种方式?
- 10.1 在类组件中使用高阶函数
- 10.2在函数式组件中使用hooks
- 11.如何处理请求得到的html字符串为网页
- 12.登录相关
- 12.1单点登录与JWT
- 13报错
- 网络请求
- axios
- 对悬空数据做预处理!!!!!
- 避免在useEffect中一直请求网络数据
搭建项目
创建基于typescript的react项目:create-react-app react-travel --template typescript
安装依赖:npm install typescript-plugin-css-modules --save-dev
问题
1.按照官网在index.tsx中引入antd出错?
出错时因为路径问题:官网中是:import 'antd/dist/antd.css';,但是在依赖目录中没有antd.css文件,只有reset.css,所以改变路径即可:
import 'antd/dist/reset.css';
2.typescript中如何使用react-router
- react-router并没有提供原生typescript的支持,所以我们需要安装react-router的类型定义,
npm install --save-dev @types/react-router-dom
typescript的支持我们只在开发过程中使用,所以安装的开发依赖中-dev(结余上线后的体积) - 怎么样我们才能知道一个框架有没有原生的支持typescript呢:
-上网搜
-直接使用,没有出现类型的提示警告之类的,就是支持的。
3.react-router
3.1 V6

<Route path="*" element={<p>There's nothing here: 404!</p>} />
3.2 V5
函数式组件中使用

3.3V6实现私有路由


解决方案:
在v6中,您应该将组件作为“元素”传递,例如像这样:
<Route path="/" element={<Dashboard/>}>

4.函数式组件接收props参数时定义数据接口?
在利用typescript编写react项目时,函数式组件需要定义返回值类型。传递的props参数的类型,就是使用interface泛型定义的
5.使用TypeScript开发react项目:
- 函数式组件写法有区别与js的,区别就是函数式组件需要写成箭头函数,传递props参数时需要指定类型,interface泛型。
- 什么时候使用ReactComponentProps

- 使用redux时需要做的处理
6.要使一个组件拥有路由组件的history、location、match等属性
- 需要使用withRouter将组件包裹起来(reactrouter6以下版本),还可以使用useHistory、useLocation、useParams、useRouteMatch(函数式组件中)
- reactRouter6需要使用hooks钩子,useXxxx,钩子只能在函数式组件中使用
要在类式组件中使用的话,可以使用高阶组件,对类组件进行一个包裹,让原始类组件拥有useNavigate功能
7.书写代码规范上的一些问题
1. 函数式组件中元素调用方法时加不加括号,写不写this,什么时候用箭头函数
2.reducer中赋新值时的解构
3. 什么是高阶组件
8.使用redux和react-redux



8.1使用react-redux
npm i react-redux,它并不原生支持typescript,需要再安装npm install @types/react-redux --save-dev
8.2类式组件中使用react-redux
就是笔记中那样,导入connect包裹连接UI组件和容器组件
8.3函数式组件中使用react-redux(使用hooks函数)
使用钩子函数useSelector(解决组件和store的耦合问题),可以连接store
使用钩子函数useDispatch()分发dispatch
使用完以上两个钩子函数后就可以直接连接起状态数据和action了,不需要再导入store
Header组件
8.4使用redux
类式组件和函数式组件都一样,在需要使用数据的地方,引入store,使用store.getStore()获取数据,使用store.dispatch()分发动作
HomePage组件
8.5异步处理redux-thunk——可以在action中处理异步任务
8.6自定义中间件

8.7redux-tooltik
redux-tooltik.js.org
以下是编写状态管理


createSlice:action与reducer捆绑在一起了
将detail从MVC修改到redux-tooltik
以下是编写异步数据操作


9.I18n网站国际化



这两个框架本身就都支持原生typescript,不需要再额外安装对typescript的类型声明文件
10.获得全局数据的两种方式?
10.1 在类组件中使用高阶函数
10.2在函数式组件中使用hooks
11.如何处理请求得到的html字符串为网页
要通过特定的API渲染
12.登录相关
12.1单点登录与JWT
JWT是干什么的
官网:jwt.io
全称为JSON Web Token,JWT的作用是用户授权,而不是用户的身份认证。
用户授权
用户授指当前用户有足够的权限访问特定的资源(错误状态码:403forbidden禁止访问)
用户认证
用户认证指的是使用用户名、密码来验证当前用户的身份(就是用户登录,错误状态码401Unauthorized未授权)


解码jwt
npm i jwt-decode
npm i jwt-decode @types/jwt-decode --save const token = jwtDecode(jwt);
登录持久化
npm install redux-persist
需要做的操作:


13报错

interface MyComponentProps extends RouteComponentProps {
touristRouteId: string;
}
const MyComponent: React.FC<MyComponentProps> = ({ match, location, history, touristRouteId }) => {
const [data, setData] = useState<any>(null); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { const response = await fetch(`API_URL/${touristRouteId}`); const data = await response.json(); setData(data); } catch (error) { console.error(error); } }; if (!data) { return <div>Loading...</div>; // 返回加载中的占位符 } return ( // 返回 JSX 元素 <div> <h1>{data.title}</h1> // ... </div> );};export default MyComponent;
Argument of type ‘{ payload: undefined; type: “userSlice/logOut”; }’ is not assignable to parameter of type ‘LanguageActionTypes’. Type ‘{ payload: undefined; type: “userSlice/logOut”; }’ is not assignable to type ‘InterLanguageNew’. Types of prope
网络请求
axios
安装axiosnpm i axios 自带TS
对悬空数据做预处理!!!!!
先执行构造函数,productList为空,紧接着会渲染UI,这时候为空,而componnetDidMount会在组件完全挂载完后执行,所以报错。
处理方法一:在没有数据的时候显示加载中…
避免在useEffect中一直请求网络数据

App.tsx
Header.tsx(显示购物车中有几种)
DetailPage.tsx(添加到购物车的动作)
相关文章:
react实战——react旅游网
慕课网react实战 搭建项目问题1.按照官网在index.tsx中引入antd出错?2.typescript中如何使用react-router3.react-router3.1 V63.2 V53.3V6实现私有路由 4.函数式组件接收props参数时定义数据接口?5.使用TypeScript开发react项目:6.要使一个组…...
ChatGPT 串接到 Discord - 团队协作好助理
ChatGPT 串接到 Discord - 团队协作好助理 ChatGPT 是由 OpenAI 开发的一个强大的语言模型,本篇文章教你如何串接 Discord Bot ,协助团队在工作上更加高效并促进沟通与协作。使 ChatGPT 发挥出最大的功效,进一步提升工作效率和团队协作能力。…...
js随机整数
在JavaScript中,您可以使用 Math.random() 函数生成一个0到1之间的随机数(包括0,但不包括1),然后通过适当的缩放和取整,可以得到一个随机整数。以下是一个简单的函数,用于生成指定范围内的随机整…...
.Net预处理器指令
1.最常用的预处理器指令#region #endregion,来定义可在大纲中折叠的代码区域. #region MyClass def public class MyClass { static void Main() { } } #endregion 2.定义符号预处理器指令:来定义或取消定义条件编译的符号: #…...
首屏性能优化:提升用户体验的秘籍
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
11.Node.js入门
一.什么是 Node.js Node.js 是一个独立的 JavaScript 运行环境,能独立执行 JS 代码,因为这个特点,它可以用来编写服务器后端的应用程序 Node.js 作用除了编写后端应用程序,也可以对前端代码进行压缩,转译,…...
对中国境内所有地区KFC门店基本信息的统计(简略版)
我们要获取每个地区的kfc信息就要先获取中国一共有哪些地区 中国所有城市名称获取 import requests from lxml import etreewith open(f./省份.txt, w) as fp:fp.write() with open(f./城市.txt, w) as fp:fp.write()url1http://www.kfc.com.cn/kfccda/storelist/index.aspx#…...
Linux上安装torch-geometric(pyg)1.7.2踩坑记录
重点:1.一定要在创建虚拟环境的时候设置好python版本。2.一定要先确定使用1.X还是2.X的pyg库,二者不兼容。3.一定要将cuda、torch、pyg之间的版本对应好。所以,先确定pyg版本,再确定torch和cuda的版本。 结论:如果在u…...
线程有几种状态,状态之间的流转是怎样的?
Java中线程的状态分为6种: 1.初始(NEW):新创建了一个线程对象,但还没有调用start()方法。 2.运行(RUNNABLE):Java线程中将就绪(READY)和运行中(RUNNING)两种状态笼统的称为“运行”…...
vs创建asp.net core webapi发布到ISS服务器
打开服务器创建test123文件夹,并设置共享。 ISS配置信息: 邮件网站,添加网站 webapi asp.net core发布到ISS服务器网页无法打开解决方法 点击ISS Express测试,可以成功打开网页。 点击生成,发布到服务器 找到服务器IP…...
【解读】OWASP大语言模型应用程序十大风险
OWASP大型语言模型应用程序前十名项目旨在教育开发人员、设计师、架构师、经理和组织在部署和管理大型语言模型(LLM)时的潜在安全风险。该项目提供了LLM应用程序中常见的十大最关键漏洞的列表,强调了它们的潜在影响、易利用性和在现实应用程序…...
LLM实施的五个阶段
原文地址:Five Stages Of LLM Implementation 大型语言模型显着提高了对话式人工智能系统的能力,实现了更自然和上下文感知的交互。这导致各个行业越来越多地采用人工智能驱动的聊天机器人和虚拟助手。 2024 年 2 月 20 日 介绍 从LLMs的市场采用情况可以…...
C++学习随笔(1)——初识篇
前面一章我们简单介绍了一下C与C语言之间的关系,本章就让我们来正式入门学习一下C吧! 目录 1.第一个C程序 2.头文件 (1)简介 (2)常见的头文件: 2. 命名空间 2.1 命名空间定义 2.2 命名空…...
线上应用部署了两台load为1四核服务器
线上应用部署了两台服务器。 项目发布后,我对线上服务器的性能进行了跟踪,发现一台负载为3,另一台负载为1,其中一台四核服务器已经快到瓶颈了,所以我们紧急排查原因。 1、使用TOP命令查看占用CPU较大的负载和进程&…...
GPT实战系列-LangChain如何构建基通义千问的多工具链
GPT实战系列-LangChain如何构建基通义千问的多工具链 LLM大模型: GPT实战系列-探究GPT等大模型的文本生成 GPT实战系列-Baichuan2等大模型的计算精度与量化 GPT实战系列-GPT训练的Pretraining,SFT,Reward Modeling,RLHF GPT实…...
【vue2基础教程】vue指令
文章目录 前言一、内容渲染指令1.1 v-text1.2 v-html1.3 v-show1.4 v-if1.5 v-else 与 v-else-if 二、事件绑定指令三、属性绑定指令总结 前言 Vue.js 是一款流行的 JavaScript 框架,广泛应用于构建交互性强、响应速度快的现代 Web 应用程序。Vue 指令是 Vue.js 中…...
P4551 最长异或路径
最长异或路径 题目描述 给定一棵 n n n 个点的带权树,结点下标从 1 1 1 开始到 n n n。寻找树中找两个结点,求最长的异或路径。 异或路径指的是指两个结点之间唯一路径上的所有边权的异或。 输入格式 第一行一个整数 n n n,表示点数…...
鸿蒙OpenHarmony HDF 驱动开发
目录 序一、概述二、HDF驱动框架三、驱动程序四、驱动配置坚持就有收获 序 最近忙于适配OpenHarmonyOS LiteOS-M 平台,已经成功实践适配平台GD32F407、STM32F407、STM32G474板卡,LiteOS适配已经算是有实际经验了。 但是,鸿蒙代码学习进度慢下…...
深度学习:如何面对隐私和安全方面的挑战
深度学习技术的广泛应用推动了人工智能的快速发展,但同时也引发了关于隐私和安全的深层次担忧。如何在保护用户隐私的同时实现高效的模型训练和推理,是深度学习领域亟待解决的问题。差分隐私、联邦学习等技术的出现,为这一挑战提供了可能的解…...
【操作系统概念】第12章:大容量存储阶段
文章目录 0.前言12.1 概述12.2磁盘结构12.3 磁盘调度12.3.1 FCFS调度12.3.2 SSTF调度12.3.3 SCAN调度12.3.4 C-SCAN调度12.3.5 如何选择磁盘调度 0.前言 文件系统从逻辑上来看包括三部分。第10章讨论了文件系统的用户和程序员的接口。第11章描述了操作系统实现这种接口的内部数…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
抽象类和接口(全)
一、抽象类 1.概念:如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象,这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法,包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中,⼀个类如果被 abs…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机,交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息,系统版本:Ubuntu22.04.5 LTS;内核版本…...
