react ts

一、项目搭建

1、创建项目

• 使用vite生成项目

npx create-react-app react-ts-project --template typescript

• 启动项目

yarn start

• 删除无用组件

2、设计目录结构

资源	说明
http	网络请求
assets	公共资源
components	组件
router	路由配置
utils	工具模块
store	状态机
App.tsx	应用根组件
index.tsx	入口ts文件

3、配置sass环境

• 安装sass包

yarn add sass

• 创建全局样式文件

4、craco插件配置

如果要修改CRA的默认配置，有以下几种方案

• 通过第三方库来修改，比如@craco/craco

• 通过执行yarn eject命令，释放react-scripts中的所有配置到项目中

实现步骤

• 安装修改CRA的配置的包

yarn add -D @craco/craco

• 在项目的根目录中创建craco的配置文件(craco.config.js)，并在配置中配置别名

const path=require('path')
module.exports={webpack:{alias:{'@':path.resolve(__dirname,'src')}}
}

• 修改packge.json中的脚本命令

"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"}

• 在代码中，就可以通过@来表示src目录的绝对路径

• 重启项目，让配置生效

@别名路径提示

• 在项目根目录创建tsconfig.json配置文件

• 在配置文件中添加如下配置

{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}}}

5、配置路由

• 安装路由

yarn add react-router-dom
yarn add react-loadable
yarn add @types/react-loadable

下载react-loadable依赖包进行路由懒加载，如果你是typescript，你还需要额外安装@types/react-loadable这个依赖包

• 建立一个loadable.ts，放在src/utils/loadable.ts

import Loadable from 'react-loadable';
export default function withLoadable(comp:any) {return Loadable({//懒加载组件页面loader: comp,loading: () => null})
}

• 在src下创建router目录，在该目录的index.tsx编写路由配置文件

import loadable from '@/utils/loadable'
import {RouteObject} from 'react-router-dom'
const Login=loadable(()=>import('@/views/Login'))
const Home=loadable(()=>import('@/views/Home'))
const Main=loadable(()=>import('@/views/Main'))
const Product=loadable(()=>import('@/views/Product'))
const Category=loadable(()=>import('@/views/Category'))
const routes:Array<RouteObject>=[{path:'/login',element:<Login/>},{path:'/',element:<Home/>,children:[{index:true,element:<Main></Main>},{path:'product/list',element:<Product></Product>}, {path:'product/category',element:<Category></Category>}]}
]
export default routes

• 在App.tsx中通过useRoutes钩子函数来进行集中式配置

import React,{Suspense} from 'react'
import {useRoutes} from 'react-router-dom'
import routes from '@/router'
export default function App() {return (<Suspense fallback={<>loading</>}>{useRoutes(routes)}</Suspense>)
}

• 在项目根目录下的index.tsx中使用<BrowserRouter>包裹<App>

root.render(<BrowserRouter><App/></BrowserRouter>
)

• 在src/Home.tsx组件中配置二级路由出口

import React from 'react'
import {Outlet} from 'react-router-dom'
export default function Home() {return (<div>Home<Outlet></Outlet></div>)
}

6、安装AntD

• 安装AntD组件库

yarn add antd

二、用户登录

1、登录静态页面实现

• 首先在utils目录下创建type.ts文件，这个文件里主要编写接口

export interface IUser{account:string,password:string}

• 在views目录下的Login.tsx文件中编写登录的静态页面

import {Button,Form,Input,message} from 'antd'
import api from '@/api'
import {useNavigate} from 'react-router-dom'export default ()=>{const nav=useNavigate()const onFinish=async(values:any)=>{console.log(values)}return (<Form onFinish={onFinish} style={{ maxWidth: 600 }}><Form.Item label='用户名' name="username"><Input/></Form.Item><Form.Item label='密码' name="password"><Input.Password/></Form.Item><Form.Item><Button type="primary" htmlType='submit'>登录</Button></Form.Item></Form>)
}

2、axios的二次封装

import axios,{ InternalAxiosRequestConfig,AxiosResponse,AxiosError} from "axios";
import {message} from 'antd'
//设置根路径
axios.defaults.baseURL="http://www.zhaijizhe.cn:3005"
//设置请求拦截器
axios.interceptors.request.use((config: InternalAxiosRequestConfig)=>{const token=localStorage.getItem('token')if(token){config.headers.Authorization=token}return config
})
//设置响应拦截器
axios.interceptors.response.use((response:AxiosResponse)=>{return response.data
},(error:AxiosError)=>{switch(error.response?.status){case 500:message.error('服务端出现500错误')breakcase 401:message.error('服务端出现400错误')break;case 404:message.error("没有找到服务端相应资源");break;}return Promise.reject(error)
})
export default axios

3、登录功能的实现

• 在src/types文件夹下编写接口

export default interface IUser{username:stringpassword:string
}

• 编写登录的后端请求API

import request from '@/utils/request'
import IUser from '@/types/IUser'export default{login:(user:IUser)=>request.post('/users/login',user)
}

• 将用户模块汇总到api.tsx中

import users from "./modules/users"
export default{users
}

• 在登录组件中调用登录API,完成登录功能

import {Button,Form,Input,message} from 'antd'
import api from '@/api'
import {useNavigate} from 'react-router-dom'export default ()=>{const nav=useNavigate()const onFinish=async(values:any)=>{const result=await api.users.login(values)if(result.data.code){localStorage.setItem('token',result.data.token)nav('/')}else{message.warning('登录失败')}}return (<Form onFinish={onFinish} style={{ maxWidth: 600 }}><Form.Item label='用户名' name="username"><Input/></Form.Item><Form.Item label='密码' name="password"><Input.Password/></Form.Item><Form.Item><Button type="primary" htmlType='submit'>登录</Button></Form.Item></Form>)
}

三、路由权限

1、静态菜单

import {Outlet,NavLink,useNavigate} from 'react-router-dom'
import React,{useState,useEffect} from 'react'
import '@/assets/css/home.scss'
import {Layout,Menu} from 'antd'
import {WindowsOutlined,TrademarkCircleOutlined,UserOutlined} from '@ant-design/icons'
const {Header,Sider,Content,Footer}=Layout
export default ()=>{const[menuList,setMenuList]=useState<any>([])const nav=useNavigate()useEffect(()=>{const list=[{key:'sub1',label:'日常业务',icon:<WindowsOutlined />,children:[{label:'学员管理',key:'/students'},{label:'班级管理',key:'/classes'}]},{key:'sub2',label:'校区管理',icon:<TrademarkCircleOutlined />,children:[{label:'教师管理',key:'/teachers'},{label:'班主任管理',key:'/directors'},{label:'专业管理',key:'/subjects'}]},{key:'sub3',label:'系统管理',icon:<UserOutlined />,children:[{key:'/users',label:'用户管理'}]}]setMenuList(list)},[])const go=(item:any)=>{nav(item.key)}return (<><Layout><Header><div>蜗牛BOSS管理系统</div></Header>  <Layout style={{height:'750px'}}><Sider><Menu items={menuList} onClick={go}mode="inline"theme="dark"defaultOpenKeys={['sub1','sub2']}defaultSelectedKeys={['/home/students']}></Menu></Sider><Content>{/* 设置子路由出口 */}<Outlet></Outlet></Content></Layout><Footer style={{ textAlign: 'center'}}>Ant Design ©2023 Created by Ant UED</Footer></Layout> </>)
}

2、动态菜单

• 在api/modules/users下编写获取权限菜单的接口

import request from '@/utils/request'
export default{getAuthMenus:()=>request.get('/menus/getAuthMenus')
}

• 在Home.tsx中中调用getAuthMenus接口来完成权限菜单数据的获取

 useEffect(() => {getAuthMenus()}, [])const getAuthMenus = async () => {const result = await api.users.getAuthMenus()console.log(result.data.data)const rList = transformDataToMenus(result.data.data)setMenuList(rList)}

• 将后台的权限菜单数据转成antd格式的菜单数据

/*** 将后台的权限菜单数据转成antd格式的菜单数据*/interface IMenuData {title: stringpath: stringicon: stringchildren?: Array<IMenuData>}interface IMenu {label: stringkey: stringicon: ReactElementchildren?: Array<IMenu>}const transformDataToMenus = (list: Array<IMenuData>) => {return list.map((item: IMenuData) => {let name = item.icon as stringlet iis: any = icons[name as keyof typeof icons]let menuItem: IMenu = { label: item.title, key: item.path, icon: React.createElement(iis) }if (item.children) {menuItem.children = transformDataToMenus(item.children)}return menuItem})}

• 渲染导航列表

<Menuitems={menuList}mode="inline"theme="dark"onClick={goNav}></Menu>

3、动态添加路由表

1、安装和配置RTX

在终端执行

yarn add redux
yarn add react-redux
yarn add @reduxjs/toolkit

在src目录下创建store文件夹，目录结构如下

src|-store|-moudles|-xx.tsx|-yy.tsx|-index

2、创建slice模块

在src/store/reducers目录下创建routeReducer.tsx

import {createSlice,PayloadAction,Dispatch} from '@reduxjs/toolkit'
import {RouteObject} from 'react-router-dom'
import api from '@/api'
import {withLoadable} from '@/utils/loadable'
interface IAuthMenu{rows:Array<any>
}
const initialState:IAuthMenu={rows:[]
}
export const routesSlice=createSlice({name:'getAuthMenu',initialState,reducers:{setAuthRoutes(state,{payload}:PayloadAction<any[]>){state.rows=payload}}
})
export const getAuthRoutesAsync=(routes:any)=>{return async(dispath:Dispatch)=>{console.log('----网络请求-----------');let result=await api.users.getAuthMenus()console.log('aaaa',result.data.data)result.data.data.forEach((item:RouteObject)=>{if(item.children){item.children.forEach((subItem:RouteObject)=>{console.log('ss',subItem)const Module=withLoadable(()=>import(`@/views${subItem.path}`))routes[1].children.push({path:subItem.path,element:<Module/>})})}})dispath(setAuthRoutes(routes))}
}
export const {setAuthRoutes}=routesSlice.actions
export default routesSlice.reducer

3、创建store对象

import {configureStore} from '@reduxjs/toolkit'import menuReducer from './reducers/menus'
const store=configureStore({reducer:{menuReducer}
})
export default store
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

4、创建hooks文件

​
在src/store目录下新建hooks文件import { useDispatch, useSelector } from 'react-redux'
import type { TypedUseSelectorHook } from 'react-redux'
import type { RootState, AppDispatch } from './index'// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
Usage With TypeScript | Redux 中文官网​

5、全局注册store

import ReactDOM from 'react-dom/client';
import App from '@/App'
import {BrowserRouter} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement
);
root.render(<BrowserRouter><App /></BrowserRouter>
);

6、在组件中使用

import { Outlet, NavLink } from 'react-router-dom'
import '@/assets/css/home.scss'
import { Layout,Menu } from 'antd'
import React,{ useEffect, useState } from 'react'
import {WindowsOutlined,TrademarkCircleOutlined,UserOutlined} from '@ant-design/icons'
//导入api
import api from '@/api'
//导入接口
import IMenuData from '@/types/IMenuData'
import IMenu from '@/types/IMenu'
import IMenuFun from '@/types/IMenuFun'
//导入图标
import * as icons from '@ant-design/icons'
//导入useSelector和useDispatch
// import {useSelector,useDispatch} from 'react-redux'
//使用ts的话，hooks使用的是useAppSelector来代替useSelector,使用useAppDispatch来替换useDispatch
import {useAppSelector,useAppDispatch} from '@/store/hooks'
//导入通知对象
import {getRoutesAsync} from '@/store/modules/routesReducer'
//导入routes
import routes from '@/router'import {useNavigate} from 'react-router-dom'const { Header, Sider, Content, Footer } = Layout
export default () => {const[menuList,setMenuList]=useState<Array<any>>([])useEffect(()=>{getAuthMenus()},[])const dispatch=useAppDispatch()const nav=useNavigate()/*** 通过token向后端服务端获取权限数据*/const getAuthMenus=async()=>{const result=await api.users.getAuthMenus()//进行转换const list:Array<IMenu>=transformDataToMenu(result.data.data)setMenuList(list)//向状态机发送通知操作路由表，关键代码dispatch(getRoutesAsync(routes))}//代码略const transformDataToMenu:IMenuFun=(list:Array<IMenuData>)=>{}//进行路由跳转的方法const go=(values:any)=>{nav(values.key)}return (<Layout><Header style={{ color: '#fff' }}>蜗牛BOSS系统</Header><Layout style={{ height: '750px' }}><Sider><MenuonClick={go}items={menuList}theme="dark"mode="inline"></Menu></Sider><Content><Outlet></Outlet></Content></Layout><Footer>&copy;版权前端10期班所有</Footer></Layout>)
}

7、App.tsx

import {useRoutes} from 'react-router-dom'
import routes from '@/router'
import {useAppSelector} from '@/store/hooks'
import {useEffect,useState} from 'react'
export default ()=>{const rows=useAppSelector((state)=>{return state.routesReducer.rows})const[rout,setRout]=useState(routes)useEffect(()=>{console.log('********')console.log('rows',rows)setRout(rows)},[rows])return (<>{useRoutes(rows.length==0?routes:rout)}</>)
}