react+AntDesign 之 pc端零到一

1.环境搭建以及初始化目录

CRA是一个底层基于webpack快速创建React项目的脚手架工具

# 使用npx创建项目
npx create-react-app react-jike

# 进入到项
cd react-jike

# 启动项目
npm start

2.安装SCSS

SASS 是一种预编译的 CSS，支持一些比较高级的语法，可以提高编写样式的效率，CRA接入scss非常简单只需要我们装一个sass工具

1. 安装解析 sass 的包：npm i sass -D
2. 创建全局样式文件：index.scss

3.安装Ant Design

npm install antd --save

4.配置基础路由Router

npm i react-router-dom

pages/Layout/index.js

const Layout = () => {
  return <div>this is layout</div>
}
export default Layout

pages/Login/index.js

const Login = () => {
  return <div>this is login</div>
}
export default Login

router/index.js

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

import Login from '../pages/Login'
import Layout from '../pages/Layout'

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 './index.scss'
import router from './router'
import { RouterProvider } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
    <RouterProvider router={router} />
)

5.配置别名路径@

1. 安装 craco 工具包
2. 增加 craco.config.js 配置文件
3. 修改 scripts 命令
4. 测试是否生效

npm i @craco/craco -D

const path = require('path')

module.exports = {
   
  // webpack 配置
  webpack: {
   
    // 配置别名
    alias: {
   
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  }
}

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

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

import Login from '@/pages/Login'
import Layout from '@/pages/Layout'

const router = createBrowserRouter([
  {
   
    path: '/',
    element: <Layout />,
  },
  {
   
    path: '/login',
    element: <Login />,
  },
])

export default router

VsCode提示配置

实现步骤

1. 在项目根目录创建 jsconfig.json 配置文件
2. 在配置文件中添加以下配置

代码实现

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

:::warning
说明：VSCode会自动读取jsconfig.json 中的配置，让vscode知道@就是src目录
:::

6.gitee管理项目

git remote add origin http
git add .
git commit -m 'init'
git push

7.登陆模块开发

**实现步骤**
 1. 在 `Login/index.js` 中创建登录页面基本结构
 2. 在 Login 目录中创建 index.scss 文件，指定组件样式
 3. 将 `logo.png` 和 `login.png` 拷贝到 assets 目录中

代码实现
pages/Login/index.js

import './index.scss'
import { Card, Form, Input, Button } from 'antd'
import logo from '@/assets/logo.png'

const Login = () => {
  return (
    <div className="login">
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        <Form>
          <Form.Item>
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item>
            <Input size="large" placeholder="请输入验证码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" size="large" block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login

pages/Login/index.scss

.login {
   
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: center/cover url('~@/assets/login.png');

  .login-logo {
   
    width: 200px;
    height: 60px;
    display: block;
    margin: 0 auto 20px;
  }

  .login-container {
   
    width: 440px;
    height: 360px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px rgb(0 0 0 / 10%);
  }

  .login-checkbox-label {
   
    color: #1890ff;
  }
}

表单校验实现

**实现步骤**
1. 为 Form 组件添加 `validateTrigger` 属性，指定校验触发时机的集合
2. **为 Form.Item 组件添加 name 属性**
3. 为 Form.Item 组件添加 `rules` 属性，用来添加表单校验规则对象

代码实现
page/Login/index.js

const Login = () => {
  return (
    <Form validateTrigger={['onBlur']}>
      <Form.Item
        name="mobile"
        rules={[
          { required: true, message: '请输入手机号' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号码格式不对'
          }
        ]}
      >
        <Input size="large" placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item
        name="code"
        rules={[
          { required: true, message: '请输入验证码' },
        ]}
      >
        <Input size="large" placeholder="请输入验证码" maxLength={6} />
      </Form.Item>
    
      <Form.Item>
        <Button type="primary" htmlType="submit" size="large" block>
          登录
        </Button>
      </Form.Item>
    </Form>
  )
}

获取登录表单数据

**实现步骤**
1. 为 Form 组件添加 `onFinish` 属性，该事件会在点击登录按钮时触发
2. 创建 onFinish 函数，通过函数参数 values 拿到表单值
3. Form 组件添加 `initialValues` 属性，来初始化表单值

代码实现
pages/Login/index.js

// 点击登录按钮时触发 参数values即是表单输入数据
const onFinish = formValue => {
  console.log(formValue)
}

<Form
  onFinish={ onFinish }
>...</Form>

封装request工具模块

业务背景: 前端需要和后端拉取接口数据，axios是使用最广的工具插件，针对于项目中的使用，我们需要做一些简单的封装

 **实现步骤**
 1. 安装 axios 到项目  
 2. 创建 utils/request.js 文件
 3. 创建 axios 实例，配置 `baseURL，请求拦截器，响应拦截器` 
 4. 在 utils/index.js 中，统一导出request

npm i axios

import axios from 'axios'

const http = axios.create({
   
  baseURL: 'http://geek.itheima.net/v1_0',
  timeout: 5000
})

// 添加请求拦截器
http.interceptors.request.use((config)=> {
   
    return config
  }, (error)=> {
   
    return Promise.reject(error)
})

// 添加响应拦截器
http.interceptors.response.use((response)=> {
   
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response.data
  }, (error)=> {
   
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error)
})

export {
    http }

import {
    request } from './request'
export {
    request }

使用Redux管理token

npm i react-redux @reduxjs/toolkit //安装Redux相关工具包

配置Redux

import {
    createSlice } from '@reduxjs/toolkit'
import {
    http } from '@/utils'
const userStore = createSlice({
   
  name: 'user',
  // 数据状态
  initialState: {
   
    token:''
  },
  // 同步修改方法
  reducers: {
   
    setUserInfo (state, action) {
   
      state.userInfo = action.payload
    }
  }
})

// 解构出actionCreater
const {
    setUserInfo } = userStore.actions

// 获取reducer函数
const userReducer = userStore.reducer

// 异步方法封装
const fetchLogin = (loginForm) => {
   
  return async (dispatch) => {
   
    const res = await http.post('/authorizations', loginForm)
    dispatch(setUserInfo(res.data.token))
  }
}

export {
    fetchLogin }

export default userReducer

store下index.js

import {
    configureStore } from '@reduxjs/toolkit'

import userRed