React基础之项目实战

规范的项目结构

安装scss

npm install sass -D

安装Ant Design组件库

内置了一些常用的组件

npm install antd --save

路由基础配置

npm i react-router-dom

路由基本入口

import Layout from "../page/Layout";

import Login from "../page/Login";

import { createBrowserRouter } from "react-router-dom";

const router=createBrowserRouter([

    {

        path:"/",

        element:<Layout/>

    },

    {

        path:"/login",

        element:<Login/>

    }

])

export default router

主index.js入口配置

import React from 'react';

import ReactDOM from 'react-dom/client';

import { RouterProvider } from 'react-router-dom';

import router from './router';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <RouterProvider router={router}/>

  </React.StrictMode>

);

配置@别名路径

安装craco工具包

npm i @craco/craco -D

也就是将替换成@

1.创建craco.config.js配置文件

const path = require('path')

module.exports = {

  // webpack 配置

  webpack: {

    // 配置别名

    alias: {

      // 约定：使用 @ 表示 src 文件所在路径

      '@': path.resolve(__dirname, 'src')

    }

  }

}

2.将package.json进行替换的scripts

  "scripts": {

    "start": "craco start",

    "build": "craco build",

    "test": "craco test",

    "eject": "craco eject"

  },

添加路径提示

1.创建jsconfig.json

{

    "compilerOptions": {

      "baseUrl": "./",

      "paths": {

        "@/*": ["src/*"]

      }

    }

  }

Login开发通过使用antDesion组件

Token持久化

因为Redux是基于浏览器内容的存储方法，刷新时状态会恢复为初始值，比如登录之后Token再刷新页面之后就会丢失

我们可以在获取到token之后，就在本地的localStorage进行存储，在进行token初始化的时候，先判断token在localStorage中有没有，如果没有则为空，如果有那就用localStrage中的

token请求头注入

import axios from 'axios'

import { getToken } from './token'

const request = axios.create({

  baseURL: 'http://geek.itheima.net/v1_0',

  timeout: 5000

})

// 添加请求拦截器

request.interceptors.request.use((config)=> {

  //操作config 注入token数据

  //1.获取tolen

  const token=getToken()

  //2.注入token

  if(token){

    config.headers.Authorization = `Bearer ${token}`

  }

    return config

  }, (error)=> {

    return Promise.reject(error)

})

// 添加响应拦截器

request.interceptors.response.use((response)=> {

    // 2xx 范围内的状态码都会触发该函数。

    // 对响应数据做点什么

    return response.data

  }, (error)=> {

    // 超出 2xx 范围的状态码都会触发该函数。

    // 对响应错误做点什么

    return Promise.reject(error)

})

export { request }

token跳转

1.封装路由组件

//封装高阶组件

//核心逻辑：有token 正常跳转，无token去登录

import { Navigate } from 'react-router-dom'

import { getToken } from '@/utils'

export function AuthRoute  ({ children })  {

    const isToken = getToken()

    if (isToken) {

      return <>{children}</>

    } else {

     return <Navigate to={'/login'} replace/>

    }

  }

 

2.在路由配置中应用

import Layout from "@/page/Layout";

import Login from "@/page/Login";

import { createBrowserRouter } from "react-router-dom";

import { AuthRoute } from "@/components/AuthRouter";

const router=createBrowserRouter([

    {

        path:"/",

        element:<AuthRoute><Layout/></AuthRoute>

    },

    {

        path:"/login",

        element:<Login/>

    }

])

export default router

初始化样式

npm install normalize.css0

并在项目入口index配置

import 'normalize.css'

设置Token失效或错误重新跳转登录页

import axios from 'axios'

import { getToken, removeToken } from '@/utils'

import router from '@/router'

const request = axios.create({

  baseURL: 'http://geek.itheima.net/v1_0',

  timeout: 50000

})

// 添加请求拦截器

request.interceptors.request.use((config)=> {

  //操作config 注入token数据

  //1.获取tolen

  const token=getToken()

  //2.注入token

  if(token){

    config.headers.Authorization = `Bearer ${token}`

  }

    return config

  }, (error)=> {

    return Promise.reject(error)

})

// 添加响应拦截器

request.interceptors.response.use((response)=> {

    // 2xx 范围内的状态码都会触发该函数。

    // 对响应数据做点什么

    return response.data

  }, (error)=> {

    //添加401 token失效

    if(error.response.status===401){

      removeToken()

      router.navigate('/login')

      window.location.reload()

    }

   

    return Promise.reject(error)

})

export { request }

快速接入Echart基础图标

npm i echarts

import { useEffect, useRef } from 'react'

import * as echarts from 'echarts'

//柱状图

const BarChart=({title})=>{

    const chartRef = useRef(null)

    useEffect(() => {

      var chartDom = document.getElementById('main');

      var myChart = echarts.init(chartDom);

      var option;

     

      option = {

          title:{

              text:title

          },

        xAxis: {

          type: 'category',

          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

        },

        yAxis: {

          type: 'value'

        },

        series: [

          {

            data: [120, 200, 150, 80, 70, 110, 130],

            type: 'bar'

          }

        ]

      };

     

      option && myChart.setOption(option);

    }, [])

    return  <div id='main'style={{ width: '400px', height: '300px' }} />

}

export default BarChart

在其他部分复用

import BarChart from "@/components/BarChart"

const Home = () => {

  return (

    <div>

     <BarChart title='三大框架满意度'/>

    </div >

  )

}

export default Home

富文本编辑器

npm install react-quill