Template -- React

React

版本

  • Node 21.6.0
  • Npm 10.2.4

项目

创建

npm init vite 项目名称
  • react
  • js
  • npm i
  • npm run dev

依赖

npm i axios                 # 网络
npm i antd --save           # UI
npm i @ant-design/icons
npm i react-router-dom      # 路由npm i sass -D               # sass
npm i vite-plugin-html -D   # html

环境区分

  • package.json
"scripts" : {"dev": "vite --mode test","dev1": "vite --mode production","build": "vite build --mode test","build1": "vite build --mode production"
}
  • package.json 同级
  • .env.test
NODE_ENV = "test"
VITE_APP_TITLE = "测试"
VITE_APP_BASE_API = "test"
  • .env.production
NODE_ENV = "production"
VITE_APP_TITLE = "生产"
VITE_APP_BASE_API = "production"
  • vite.config.js
import { defineConfig,loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from "vite-plugin-html";
import { resolve } from "path";// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) =>{const env = loadEnv(mode, process.cwd(), ""); return {plugins: [react(),createHtmlPlugin({inject: {data: {title: env.VITE_APP_TITLE,},},}),],resolve: {alias: {"@": resolve(__dirname, "src"), // 设置 `@` 指向 `src` 目录},},base: "./", // 设置打包路径server: {port: 4000, // 设置服务启动端口号open: true, // 设置服务启动时是否自动打开浏览器cors: true, // 允许跨域// 设置代理,根据我们项目实际情况配置// proxy: {//   '/api': {//     target: 'http://xxx.xxx.xxx.xxx:8000',//     changeOrigin: true,//     secure: false,//     rewrite: (path) => path.replace('/api/', '/')//   }// }},};
})
  • index.html
<title><%= title %></title>

axios

  • src/http/index.js
import axios from "axios";let service = axios.create({// baseURL: "https://cnodejs.org/api/v1", //相同绝对路径baseURL:import.meta.env.VITE_APP_BASE_API,timeout: 100000, //超过这么多时间,则请求终止headers: {//请求头携带数据的格式"Content-Type": "application/json;charset=UTF-8",// "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",},
});
// 添加请求拦截器(Interceptors)
service.interceptors.request.use(function (config) {// 发送请求之前做写什么let token = localStorage.getItem("token");// 如果有if (token) {// 放在请求头(token跟后端沟通,他需要什么该成什么就可以了)config.headers.authorization = token;}return config;},function (error) {// 请求错误的时候做些什么return Promise.reject(error);}
);
// 添加响应拦截器
service.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data;},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);export default service;
  • src/http/api.js
import request from "./index";export async function Ceshi(params) {return request({url: "/topics",method: "GET",params,});}export async function Ceshi2(data) {return request({url: "/Storage/GetStorageLack",method: "POST",data,});}
  • 使用
import {useEffect, useRef } from "react";
import { Ceshi } from "@/http/api.js";
function App() {const cache = useRef(null);useEffect(() => {async function fetchData() {cache.current = true;const response = await Ceshi();console.log(response);}if (!cache.current) {fetchData();}}, []);return (<></>);
}

antd

  • 使用
import { Button } from "antd";<><Button type="primary">Button</Button>
</>

sass

.ddd{.adsspan{color: aqua;}
}

router

  • main.jsx
import { HashRouter } from "react-router-dom";
<HashRouter><App></App></HashRouter>
  • App.jsx
import { useRoutes,useNavigate  } from "react-router-dom";const navigate = useNavigate()
const GetRoutes = () => {const routes = useRoutes([{path: "/",element: <Home></Home>,},{path: "/b",element: <B></B>,children: [{path: "/b/aaaa", // /b 需要加,不加找不到element: <C></C> ,},],},{path: "/*",exact: true,element: <div>后台404</div>,},]);return routes;
};
<GetRoutes /><Button type="primary" onClick={()=> navigate('/b/aaaa')}>Button</Button>// 在b页面中加
<Outlet></Outlet>

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

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

相关文章

什么是技术架构?架构和框架之间的区别是什么?怎样去做好架构设计?(一)

什么是技术架构?架构和框架之间的区别是什么?怎样去做好架构设计?(一)。 在软件行业,对于什么是架构,都有很多的争论,每个人都有自己的理解。在不同的书籍上, 不同的作者, 对于架构的定义也不统一, 角度不同, 定义不同。 一、架构是什么 Linux 有架构,MySQL 有架构,J…

漏洞检测和评估【网站子域扫描工具02】

上一篇&#xff1a;爬取目标网站的域名和子域名【网站子域扫描工具01】 在Python中&#xff0c;有一些流行的漏洞扫描库可以对子域进行漏洞扫描和评估&#xff0c;比如Nmap、Sublist3r等。 1.端口扫描 以下是一个简单的示例代码&#xff0c;展示了如何使用Nmap进行基本的端口扫…

由于找不到d3dcompiler_43.dll缺失,无法打开软件的解决方法分享

d3dcompiler43.dll是什么文件&#xff1f;为什么会出现丢失的情况&#xff1f;又该如何解决呢&#xff1f;本文将详细介绍d3dcompiler43.dll的作用和影响&#xff0c;并提供6个有效的解决方法。 一、d3dcompiler43.dll是什么文件&#xff1f; d3dcompiler43.dll是DirectX SDK…

OSPF协议

OSPF:开放式最短路径优先协议 无类别链路状态型路由协议&#xff1b;组播更新224.0.0.5、224.0.0.6支持等开销负载均衡&#xff1b; 链路状态协议&#xff0c;邻居间共享拓扑&#xff0c;优势在于防环和选路&#xff0c;缺点为更新量和计算量很大&#xff1b; 故OSPF为了能够…

Windows 下使用C#开启蓝牙(未解决的坑)

需求 当程序检测到蓝牙未打开时需要程序自动将W10的蓝牙开启。 资料 Turn on/off Bluetooth radio/adapter from cmd/powershell in Windows 10 - Super User 上的这个连接是通过powershell 开启蓝牙具体代码如下 [CmdletBinding()] Param ([Parameter(Mandatory$true)][V…

python脚本多个文件夹下多个文件中sql语句片段比对

一、需求: 日常测试授权脚本,需要检查多个行业文件夹下单独的授权脚本和汇总授权脚本,一个文件根目录下有多个子文件夹,子文件夹下有多个sql文件,人为比对较为耗时。 需要实现在文件中找到某个sql语句片段,然后遍历比对此sql语句片段在各目录各文件中是否一致。 二、思路…

MySQL入门篇:事物操作(开启事物,提交事物,回滚事物),事物四大特性(ACID),并发事物问题(脏读,不可重复读,幻读),事物隔离级别

目录 1.事物简介2.事物操作1.查看/设置事物提交方式&#xff08;方式1&#xff09;2.开启事物&#xff08;方式2&#xff09;3.提交事物4.回滚事物 3.事物四大特性(ACID)1.原子性&#xff08;Atomicity)2.一致性&#xff08;Consistency)3.隔离性&#xff08;lsolation)4.持久性…

MyBatisPlus学习笔记四-扩展功能

1、代码生成器 1.1、官方的1 1.3、官方的2-idea插件 1.3、非官方的-idea插件 2、静态工具 先查询&#xff0c;再分组 3、逻辑删除 4、枚举处理器 5、JSON处理器

使用mininet快速入门ONOS路由交换技术与原理

在SDN下路由交换与传统硬件集成方式的路由交换技术有许多相似之处。其中一个比较重要的点是传统交换机中ASIC (Application Specific Integrated Circuit&#xff0c;专用集成电路)决定了其数据平面所支持的功能&#xff0c;而在SDN中&#xff0c;实现了控制面与数据面的分离。…

UI学习-入门

教程&#xff1a;零基础学UI设计&#xff0c;应该先从哪些设计软件入手&#xff1f;【酸梅干超人出品】 一 软件 云端协作工具&#xff1a;即时设计、figma 原型设计&#xff1a;protopie 平面设计&#xff1a; PS 即时设计可设置动态交互、可设置样机。该平台教学方便做的…

selenium上传单个文件及上传多个文件

单个文件 直接传入文件路径 element driver.find_element_by_xpath(//input[type"file"]) element.send_keys(/home/data/download/test.png)多个文件 使用 \n 或者 \t\n 分割文件路径 element driver.find_element_by_xpath(//input[type"file"]) e…

数组练习 Leetcode 566.重塑矩阵

在 MATLAB 中&#xff0c;有一个非常有用的函数 reshape &#xff0c;它可以将一个 m x n 矩阵重塑为另一个大小不同&#xff08;r x c&#xff09;的新矩阵&#xff0c;但保留其原始数据。 给你一个由二维数组 mat 表示的 m x n 矩阵&#xff0c;以及两个正整数 r 和 c &#…

第五天业务题

5-1 你们项目中签到为什么要使用bitmap bitmap是Redis中的String类型里的一种类型&#xff0c;存储数据是以二进制&#xff08;bit位&#xff09;为单位进行存储的。在处理大量数据统计和判断时&#xff0c;只占用非常小的一部分内存&#xff0c;且计算速度非常高效。 在项目中…

网络工程师:数据库基础知识面试题(八)

84.数据库技术是什么&#xff1f;主流的数据库管理系统软件有哪些? 数据库技术是指用于存储、管理和操作大量结构化数据的技术。它涉及数据库的设计、建模、查询语言、事务处理、数据安全性、性能优化等方面。 主流的数据库管理系统&#xff08;DBMS&#xff09;软件有以下几…

貌似起名可以用这个

貌似起名可以用这个 很多变量或者函数起名字都会移除元音字符&#xff0c;可以考虑使用tr的-d参数&#xff0c;如下&#xff1a; $ echo "Hello World, Welcome to Linux!" | tr -d a,o,e,i Hll Wrld Wlcm t Lnux!不过感觉删除的多了&#xff0c;也不一定是好事。。…

《设计模式的艺术》笔记 - 原型模式

介绍 使用原型实例指定创建对象的种类&#xff0c;并且通过克隆这些原型创建新的对象。原型模式是一种对象创建型模式。 实现 myclass.h // // Created by yuwp on 2024/1/12. //#ifndef DESIGNPATTERNS_MYCLASS_H #define DESIGNPATTERNS_MYCLASS_H#include <iostream&g…

Day32- 贪心算法part06

一、单调递增的数字 题目一&#xff1a;738. 单调递增的数字 738. 单调递增的数字 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递…

k8s---ingress对外服务(ingress-controller)

ingress 概念 k8s的对外服务&#xff0c;ingress service作用现在两个方面&#xff1a; 1、集群内部&#xff1a;不断跟踪的变化&#xff0c;更新endpoint中的pod对象&#xff0c;基于pod的ip地址不断变化的一种服务发现机制。 2、集群外部&#xff1a;类似于负载均衡器&a…

进阶Docker3:Dokerfile构建镜像

目录 Dockerfile 构建基础镜像 基本机构 命令&#xff1a; 命令解释&#xff1a; 准备工作 创建镜像 上传镜像 Dockerfile Dockerfile 是一个文本格式的配置文件&#xff0c; 用户可以使用 Dockerfile 来快速创建自定义的镜像&#xff0c;另外&#xff0c;使 用Docke…

Docker 安装 MySQ

Docker 安装 MySQL MySQL 是世界上最受欢迎的开源数据库。凭借其可靠性、易用性和性能&#xff0c;MySQL 已成为 Web 应用程序的数据库优先选择。 1、查看可用的 MySQL 版本 访问 MySQL 镜像库地址&#xff1a;https://hub.docker.com/_/mysql?tabtags 。 可以通过 Sort b…