配置Vite+React+TS项目
初始化
执行npm create vite并填写项目名、用那个框架。。
配置
路径别名
在vite.config.ts里面配置:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'export default defineConfig({plugins: [react()],resolve: {alias: {"@": path.resolve(__dirname, './src') // 路径别名...}}
})
如果开发环境是ts,会提示如找不到path或找不到__dirname等,需要先安装一下node的类型声明文件:
npm i -D @types/node
然后去修改根目录的tsconfig.json文件,不然你使用路径别名引入组件的时候会报错:
{"compilerOptions": {/* path alias */"paths": {"@/*": ["src/*"],...}},
}
配置Less
直接执行npm i less就行
路由
react-router-dom是处理项目中路由问题的组件库,默认是没有这个组件库,需要额外下载:
npm add react-router-dom --save-dev
在根目录下的index.tsx里面把<App />外层包裹上:
import { BrowserRouter } from "react-router-dom";
import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement
);
root.render(<BrowserRouter><App /> </BrowserRouter>
);
自己去src里面创建router文件夹处理路由的信息,然后在App.tsx里面加上useRoutes:
import { Suspense } from 'react';
import { useRoutes } from 'react-router-dom'
import './App.css';
import routes from "./router"; // router文件夹的路由信息function App() {return (<div className="App"><Suspense fallback="loading"><div className="main">{useRoutes(routes)}</div></Suspense></div>);
}export default App;
封装Axios
import axios, { AxiosRequestConfig } from 'axios';//默认请求超时时间
const timeout = 30000;//创建axios实例
const service = axios.create({timeout,// 如需要携带cookie 该值需设为truewithCredentials: true,// headers:{// Authorization:"Basic YWRtaW46dGVzdA=="// }
});// function getCookie(cookieName:any) {
// const name = cookieName + "=";
// const decodedCookie = decodeURIComponent(document.cookie);
// const cookieArray = decodedCookie.split(';');
// for (let i = 0; i < cookieArray.length; i++) {
// let cookie = cookieArray[i];
// while (cookie.charAt(0) === ' ') {
// cookie = cookie.substring(1);
// }
// if (cookie.indexOf(name) === 0) {
// return cookie.substring(name.length, cookie.length);
// }
// }
// return "";
// }// const yourCookieValue = getCookie("FLOWABLE_REMEMBER_ME");// 统一请求拦截 可配置自定义headers 例如 language、token等
service.interceptors.request.use((config: any) => {// if(config.url.includes("/workFlow")){// config.headers.cookie = 'FLOWABLE_REMEMBER_ME' + yourCookieValue// console.log(config.headers);// }return config},error => {console.log(error)Promise.reject(error)}
)// axios返回格式
interface axiosTypes<T>{data: T;status: number;statusText: string;
}// axios.create()// 后台响应数据格式
// interface responseTypes<T>{
// code: number,
// msg: string,
// result: T
// }//核心处理代码 将返回一个promise 调用then将可获取响应的业务数据
const requestHandler = <T>(method: 'get' | 'post' | 'put' | 'delete' | 'patch', url: string, params: object = {}, config: AxiosRequestConfig = {}): Promise<T> => {// let response: Promise<axiosTypes<responseTypes<T>>>;let response: Promise<axiosTypes<any>>;// if(url.includes('/flowable')) config = {// headers:{// 'Cookie': 'FLOWABLE_REMEMBER_ME' + yourCookieValue// }}switch(method){case 'get':response = service.get(url, {params: { ...params }, ...config});break;case 'post':response = service.post(url, params, {...config});break;case 'put':response = service.put(url, {...params}, {...config});break;case 'delete':response = service.delete(url, {params: { ...params }, ...config});breakcase 'patch':response = service.patch(url, {...params}, {...config});break;}return new Promise<T>((resolve, reject) => {response.then(res => {// 业务代码 可根据需求自行处理const data = res.data;if(res.status !== 200 && res.status !== 304){// 特定状态码 处理特定的需求if(data.code == 401){console.log('登录异常,执行登出...');}const e: string = JSON.stringify(data);console.log(`请求错误:${e}`)reject(data);}else{// 数据请求正确 使用 resolve 将结果返回resolve(res.data);}}).catch(error => {const e: string = JSON.stringify(error);console.log(`网络错误:${e}`)reject(error);})})
}// 使用 request 统一调用,包括封装的get、post、put、delete等方法
const request = {get: <T>(url: string, params?: object, config?: any) => requestHandler<T>('get', url, params, config),post: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('post', url, params, config),put: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('put', url, params, config),delete: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('delete', url, params, config),patch: <T>(url: string, params?: object, config?: AxiosRequestConfig) => requestHandler<T>('patch', url, params, config),
};// 导出至外层,方便统一使用
export { request };
相关文章:
配置Vite+React+TS项目
初始化 执行npm create vite并填写项目名、用那个框架。。 配置 路径别名 在vite.config.ts里面配置: import { defineConfig } from vite import react from vitejs/plugin-react import path from pathexport default defineConfig({plugins: [react()],reso…...
2.13:C语言测试题
21.(b) 6 22.(b) cd 23.b) 5 4 1 3 2 栈:先进后出 24. b,c,d:10,12,120 25.2,5 26.越界访问,可能正常输出,可能段错误 27. 0,41 28. a)11 b) 320 29. aab; ba-b; aa-b; 30. p150x801005; p250x810…...
ubuntu22.04 有一台机器说有4T硬盘,但是df的时候看不到,怎么查找
在 Ubuntu 22.04 上,如果你有一块硬盘在使用df命令时未显示,这通常意味着硬盘尚未被挂载或者根本未被分区和格式化。以下是一些步骤来帮助你识别和准备新硬盘: 1. 检查硬盘是否被系统识别 首先,使用lsblk命令来检查系统是否识别…...
【机器学习】数据清洗之识别重复点
🎈个人主页:甜美的江 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:机器学习 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步…...
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件
鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavDestination组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、NavDestination组件 作为NavRouter组件的子组件,用于显示导…...
tokio tcp通信
引入crate tokio { version "1.35.1", features ["full"] } 服务端 use std::time::Duration; use tokio::{io::{AsyncBufReadExt, AsyncWriteExt},net::{tcp::{OwnedReadHalf, OwnedWriteHalf},TcpListener, TcpStream,},sync::mpsc, };#[tokio::ma…...
LCR 122. 路径加密【简单】
LCR 122. 路径加密 假定一段路径记作字符串 path,其中以 "." 作为分隔符。现需将路径加密,加密方法为将 path 中的分隔符替换为空格 " ",请返回加密后的字符串。 示例 1: 输入:path "a.ae…...
SpringUtils 工具类,方便在非spring管理环境中获取bean
应用场景: 1 可用在工具类中, 2 spring【Controller,service】环境中, 3 其中的一个方法getAopProxy可获得代理对象,需要将 EnableAspectJAutoProxy(exposeProxy true) 允许获取代理对象 import org.springframework.aop.framew…...
JavaWeb之请求
请求 客户端请求由ServletRequest类型的request对象表示,在HTTP请求场景下,容器提供的请求对象的具体类型为HttpServletRequest HTTP的请求消息分为三部分:请求行、请求头、请求正文。 请求行对应方法 // 获取请求行中的协议名和版本public S…...
VsCode中常用的正则表达式操作
在vscode中可以使用正则表达式来进行搜索内容,极大的方便了我们对大量数据中需要查看的信息进行筛选,使用正则搜索时点击 .* 此文章会持续补充常用的正则操作 1.光标选中搜索到的内容 将搜索的内容进行全选,举例:在如下文件中我需…...
ubuntu22.04@laptop OpenCV Get Started: 007_color_spaces
ubuntu22.04laptop OpenCV Get Started: 007_color_spaces 1. 源由2. 颜色空间2.1 RGB颜色空间2.2 LAB颜色空间2.3 YCrCb颜色空间2.4 HSV颜色空间 3 代码工程结构3.1 C应用Demo3.2 Python应用Demo 4. 重点分析4.1 interactive_color_detect4.2 interactive_color_segment4.3 da…...
mysql 查询性能优化关键点总结
MySQL查询性能优化是数据库管理的重要环节,良好的性能优化可以提高查询效率,降低系统负载。以下是一些关键点,用于优化MySQL查询性能: 1. 索引优化 索引是MySQL查询优化的重要手段,合理的索引可以大大…...
React - 分页插件默认是英文怎么办
英文组件的通用解决方案 这里以分页插件为例: 大家可以看到,最后的这个页面跳转提示文字为Go to,不是中文,而官网里面的案例则是: 解决方案: import { ConfigProvider } from antd; import zhCN from an…...
揭开Markdown的秘籍:引用|代码块|超链接
🌈个人主页:聆风吟 🔥系列专栏:Markdown指南、网络奇遇记 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. ⛳️Markdown 引用1.1 🔔引用1.2 🔔嵌套引用1.3 &…...
【C语言】Debian安装并编译内核源码
在Debian 10中安装并编译内核源码的过程如下: 1. 安装依赖包 首先需要确保有足够的权限来安装包。为了编译内核,需要有一些基础的工具和库。 sudo apt update sudo apt upgrade sudo apt install build-essential libncurses-dev bison flex libssl-d…...
使用 C++23 从零实现 RISC-V 模拟器(6):权限支持
本节内容增加了权限表示,设置了三种权限。当 cpu 初始化时默认的权限为 Machine 模式。接下来实现这三种特权模式,随后实现 sret 和 mret 指令。 RISC-V定义了三种特权等级,分别是用户态(User Mode)、监管态ÿ…...
针对某终端安全自检钓鱼工具的分析
前言 朋友微信找到我,说某微信群利用0day通告进行钓鱼,传播名为“终端安全自检工具”的恶意文件,然后还给了两个IP地址,如下: 咱们就来详细看看这个工具吧。 样本信息 拿到样本,样本的图标,如…...
XSS数据接收平台
一.使用xss数据接收平台的好处: 正常执行反射型xss和存储型xss,反射型xss在执行poc时,会直接在页面弹出执行注入的poc代码;存储型则是,在将poc代码注入用户的系统中后,用户访问有存储型xss的地方ÿ…...
MySQL 基础知识(六)之数据查询(一)
目录 1 基本查询 1.1 查询相关列 (select * / 列名) 1.2 别名 (as) 1.3 去重 (distinct) 1.4 对列中的数据进行运算 (、-、*、/) 2 条件查询 (where) 2.1 等值查询 () 2.2 非等值查询 (>、<、>、<、!、><) 2.3 逻辑判断 (and、or、not) 2.4 区间判…...
C#使用哈希表对XML文件进行查询
目录 一、使用的方法 1.Hashtable哈希表 2.Hashtable哈希表的Add方法 (1)定义 (2)示例 3.XML文件的使用 二、实例 1.源码 2.生成效果 可以通过使用哈希表可以对XML文件进行查询。 一、使用的方法 1.Hashtable哈希表…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
Zustand 状态管理库:极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库,特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
宇树科技,改名了!
提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中,明确沟通敏捷转型目的尤为关键,团队成员只有清晰理解转型背后的原因和利益,才能降低对变化的…...
WPF八大法则:告别模态窗口卡顿
⚙️ 核心问题:阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程,导致后续逻辑无法执行: var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题:…...
