vite+react搭建人力管理系统项目（1）
一 、vite命令构建（yarn搭建）
yarn create vite----根据提示填写
或
yarn create vite 项目名称 --template react-ts
二 、配置vite启动命令以及添加文件目录
1.vite.config.ts
export default defineConfig({
plugins: [react()],
// 服务器选项
server:{
host:'0.0.0.0',// 输入ip可以访问,指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
open:true,//开发服务器启动时，自动在浏览器中打开应用程序。
}
});
运行结果ip展示为：
➜ Local: http://localhost:5173/
➜ Network: http://2.0.0.1:5173/
➜ Network: http://192.168.xxx.xxx:5173/
2.文件目录
react项目基本src目录需要添加的有：路由router,状态管理库redux,接口请求api，公共组件Components,全局常量constants(按照项目而定)，钩子hooks,布局layout,页面pages，工具utils，插件声明plugins.d.ts(按照项目而定)
同时在vite.config.ts和tsconfig.json配置@/xxx 目录
// 路径变量vite.config.ts
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
"compilerOptions":{
.......
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
3.安装antd router6 redux (提示：先把项目停止再安装)
yarn add antd
yarn add react-router-dom@6
yarn add react-redux @reduxjs/toolkit
安装less
yarn add less
vite.config.ts配置less
// css 预处理器
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
三、基本路由编写
1.新建home和login页面
pages/index.ts 统一暴露
import { lazy } from "react";
export const PageHome = lazy(() => import("@/pages/home"));
export const PageLogin = lazy(() => import("@/pages/login"));
2.实现路由跳转
router/index.tsx
const routeList: RouteObject[] = [
{
path: "/home",
element: <PageHome />,
},
{
path: "/login",
element: <PageLogin />,
},
];
const RouterRender = () => {
return useRoutes(routeList);
};
export default RouterRender;
App.tsx
function App() {
return (
<BrowserRouter>
<RouterRender />
</BrowserRouter>
);
}
3.基本路由编写
// 导航路由
const navRoutes = [
{
path: "/home",
element: lazyLoad(<PageHome />),
meta: {
title: "首页",
icon: "HomeOutlined",
},
},
];
// 全屏路由
const staticRoutes = [
{
path: "./login",
element: lazyLoad(<PageLogin />),
meta: {
title: "登录",
},
},
];
// 容错路由
const notFoundAndNoPower = [
{
path: "*",
element: <Page404 />,
meta: {
title: "notFound",
},
},
{
path: "*",
element: <Page403 />,
meta: {
title: "notPower",
},
},
];
const routeList: RouteObject[] = [
...staticRoutes,
...navRoutes,
...notFoundAndNoPower,
];
const RouterRender = () => {
return useRoutes(routeList);
};
// export const localRouters=getNavRouter(navRoutes)
export default RouterRender;
四、Layout布局
1.使用ant全局配置
App.tsx
import RouterRender from "@/router";
import { BrowserRouter } from "react-router-dom";
import { ConfigProvider } from "antd";
import zhCN from "antd/es/locale/zh_CN";
import "antd/dist/reset.css";
function App() {
return (
<ConfigProvider locale={zhCN}>
<BrowserRouter>
<RouterRender />
</BrowserRouter>
</ConfigProvider>
);
}
export default App;
2.编写layou基本页面以及路由
layout->index.tsx
(里面具体组件样式自己编写)
import { Layout } from "antd";
import styles from "./layout.module.less";
import React from "react";
import ComponentHeader from "./components/ComponentHeader";
import ComponentTabsView from "./components/TabsView";
import { Outlet } from "react-router";
import { LAYOUTS } from "@/constans";
const { Header, Footer, Sider, Content } = Layout;
const ComponentLayout: React.FC = () => {
return (
<Layout>
<ComponentHeader />
<Layout className={styles.container}>
<Sider className={styles.sider} width={206}></Sider>
<Content className={styles.content}>
<ComponentTabsView />
<Content className={styles.outlet}>
<Outlet />
</Content>
<Footer className={styles.footer}>{LAYOUTS.copyright}</Footer>
</Content>
</Layout>
</Layout>
);
};
export default React.memo(ComponentLayout);
layout->layout.module.less
.container {
height: calc(100vh - 48px);
background-color: red;
.sider {
background-color: #fff;
}
.outlet {
margin: 16px;
height: calc(100vh - 48px - 30px - 46px - 51px);
background-color: rebeccapurple;
}
.footer {
text-align: center;
font-size: 12px;
box-shadow: 0 0 5px 1px hsl(0deg 0% 67% / 20%);
}
}
路由修改
const routeList: RouteObject[] = [
{
path: "/",
element: <ComponentLayout />,
children: navRoutes,
},
...staticRoutes,
...notFoundAndNoPower,
];
展示效果
利用路由懒加载Suspense结合nprogress
yarn add nprogress(别忘了plugins.d.ts声明)
component–>Nprogress–>index.tsx
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { useEffect } from "react";
const ComponentNprogress: React.FC = () => {
NProgress.start();
useEffect(() => {
NProgress.done();
}, []);
return <div></div>;
};
export default ComponentNprogress;
router.tsx
之前统一导出的页面借用lazy内置方法，依赖内置组件Suspense，给lazy加上loading指示器组件的一个容器组件（Suspense目前只和lazy配合实现组件等待加载指示器的功能）
编写路由的时候使每个路由对象被lazyLoad包裹这样在layout里面切换路由的时候就实现路由懒加载（上面也会有进度条）
// 懒加载组件
const lazyLoad = (children: ReactNode) => (
<Suspense fallback={<ComponentNprogress />}>{children}</Suspense>
);
五、store-----@
reduxjs/toolkit
redux官网https://redux-toolkit.js.org/tutorials/typescript
基本目录，目前只能确定一个用户相关的切片先写文件
index.ts创建toolkit
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
reducer: {},
});
export default store;
六、配置环境变量、模式
1.vite官网：https://cn.vitejs.dev/guide/env-and-mode.html#env-files
具体情况根据项目而定
由于本项目后端不处理跨域，所以前端开发的时候需要代理，为了区分两种环境不同，代理地址开发环境为/gateway/；生产环境和测试环境为/api（/为相对路径，所以请求的时候看到的是：服务器ip地址/api/接口地址，看不到真是的后端地址的）
.evn.devlopment
#开发环境
VITE_ENV='delevopment'
VITE_API_URL='/getway'
VITE_SERVER_NAME='http://1x.1x5.1x3.222:18082'
.env.production
#线上环境
VITE_ENV='production'
VITE_API_URL='/api'
VITE_SERVER_NAME='http://x0.1xx.1x3.x22:18082'
本地开发代理
vite.config.js
// 服务器选项
server: {
host: "0.0.0.0", // 输入ip可以访问,指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
open: true, //开发服务器启动时，自动在浏览器中打开应用程序。
proxy: {
"/getway": {
target: loadEnv(mode, process.cwd()).VITE_SERVER_NAME, //获取当前环境的变量
rewrite: (path) => path.replace(/^\/getway/, ""),//发送请求的时候把代理的地址删了
},
},
},
测试环境和线上环境都是用nginx代理
打包之后根据不同的环境配置nginx代理，代理地址就是/api了（具体配置自行百度哈）
2.模式
默认的通过运行不同命令走不同的环境不用单独配置了
七、请求api
1.请求需要token，存在cookie中，所以先写一个工具对浏览器缓存的处理
utils–>storage.ts
yarn add js-cookie
import Cookies from "js-cookie";
/**
*window.localStorage浏览器永久缓存
* @method set 设置永久缓存
@method get 设置永久缓存
@method remove 设置永久缓存
@method clear 设置永久缓存
*/
export const Local = {
// 设置永久缓存
set(key: string, val: any) {
// 防止token被误存再local中
if (key === "token") return Cookies.set(key, val);
window.localStorage.setItem(key, JSON.stringify(val));
},
//获取永久缓存
get(key: string) {
if (key === "token") return Cookies.get(key);
let json: any = window.localStorage.getItem(key);
return JSON.parse(json);
},
// 移除永久缓存
remove(key: string) {
if (key === "token") return Cookies.remove(key);
window.localStorage.removeItem(key);
},
// 移除全部永久缓存
clear() {
Cookies.remove("token");
window.localStorage.clear();
},
};
/**
*window.localStorage浏览器临时缓存
* @method set 设置临时缓存
@method get 设置临时缓存
@method remove 设置临时缓存
@method clear 设置临时缓存
*/
export const Session = {
// 设置临时缓存
set(key: string, val: any) {
window.sessionStorage.setItem(key, JSON.stringify(val));
},
// 获取临时缓存
get(key: string) {
let json: any = window.sessionStorage.getItem(key);
return JSON.parse(json);
},
// 移除临时缓存
remove(key: string) {
window.sessionStorage.removeItem(key);
},
// 移除全部临时缓存
clear() {
window.sessionStorage.clear();
},
};
同时要声明一下，要不ts不认识js-cookie
plugins.ts
declare module "js-cookie";
2.写api请求
yarn add axios
api–>serve.ts
/*
* @Description:api请求
* @Author: zt
* @Date: 2023-03-13 15:48:57
* @LastEditors: zt
* @LastEditTime: 2023-03-17 11:40:10
*/
import axios from "axios";
import {
handleAuth,
handleRequestHeader,
handleNetworkError,
handleAuthError,
handleGeneralError,
} from "./tools";
// 请求拦截
axios.interceptors.request.use((config) => {
config = handleRequestHeader(config);
config = handleAuth(config);
return config;
});
// 响应拦截
axios.interceptors.response.use(
(response) => {
// 请求响应不成功直接返回错误
if (response.status !== 200) return Promise.reject(response.data);
// 请求通过进行拦截处理（登录失效、接口返回非200）
handleAuthError(response.data.code) &&
handleGeneralError(response.data.code, response.data.message);
return response;
},
(err) => {
// 请求未成功
handleNetworkError(err?.response?.status);
Promise.reject(err.response);
}
);
interface FcResponse<T> {
code: number;
message: string;
data: T;
}
interface IAnyObj {
[index: string]: unknown;
}
// 请求方式
export const Get = <T>(
url: string,
params: IAnyObj = {},
config?: any
): Promise<[any, FcResponse<T> | undefined]> =>
new Promise((resolve) => {
axios
.get(url, { params, ...config })
.then((result) => {
resolve([null, result.data as FcResponse<T>]);
})
.catch((err) => {
resolve([err, undefined]);
});
});
export const Post = <T>(
url: string,
data: IAnyObj = {},
params: IAnyObj = {},
config?: any
): Promise<[any, FcResponse<T> | undefined]> => {
return new Promise((resolve) => {
axios
.post(url, data, { params, ...config })
.then((result) => {
resolve([null, result.data as FcResponse<T>]);
})
.catch((err) => {
resolve([err, undefined]);
});
});
};
export const Put = <T>(
url: string,
data: IAnyObj = {},
params: IAnyObj = {}
): Promise<[any, FcResponse<T> | undefined]> => {
return new Promise((resolve) => {
axios
.put(url, data, { params })
.then((result) => {
resolve([null, result.data as FcResponse<T>]);
})
.catch((err) => {
resolve([err, undefined]);
});
});
};
export const Delete = <T>(
url: string,
params: IAnyObj = {},
data: IAnyObj = {},
config?: any
): Promise<[any, FcResponse<T> | undefined]> => {
return new Promise((resolve) => {
axios
.delete(url, { params, data, ...config })
.then((result) => {
resolve([null, result.data as FcResponse<T>]);
})
.catch((err) => {
resolve([err, undefined]);
});
});
};
api–>tools.ts
import { Local, Session } from "@/utils/storage";
import { message } from "antd";
export const handleRequestHeader = (config: any) => {
config["baseURL"] = import.meta.env.VITE_API_URL as any;
config["timeout"] = "20000";
return config;
};
export const handleAuth = (config: any) => {
config.headers["token"] = Local.get("token") || "";
return config;
};
export const handleAuthError = (errno: any) => {
const authErrMap: any = {
5000: "登陆失效，需求重新登录", //token失效
};
// Object.hasOwnProperty.call(object, key) 是用于检查一个对象（object）
// 是否具有一个指定属性（key）的方法，它返回一个布尔值。
if (Object.prototype.hasOwnProperty.call(authErrMap, errno)) {
Session.clear();
Local.clear();
window.location.reload(); //刷新当前页面
return false;
}
return true;
};
export const handleGeneralError = (errno: any, errmsg: any) => {
if (errno && errno != 200) {
message.error(errmsg ?? "未知错误");
return false;
}
return true;
};
export const handleNetworkError = (errStatus: number) => {
let errMessage = "未知错误";
const errMsgMap: any = {
400: "请求的错误",
401: "未授权，请重新登录",
403: "拒绝访问",
404: "请求错误，未找到该资源",
405: "请求方法未允许",
408: "请求超时",
500: "服务器端出错",
501: "网络未实现",
502: "网络错误",
503: "服务不可用",
504: "网络超时",
505: "http版本不支持该请求",
};
if (errStatus) {
errMessage = errMsgMap[errStatus] || `其他连接错误--${errStatus}`;
} else {
errMessage = `无法连接到服务器`;
}
message.error(errMessage);
};
基本配置已经写完的，下一步编写页面具体的逻辑…