React进阶 - React项目开发 - 《前端框架》

项目介绍
开发过程

项目介绍

项目：后台管理系统，包含用户管理、订单管理、商品管理等等
技术栈：

react - react函数组件+hooks
redux - react-redux/redux-saga
组件库 - antd4.x.x
TypeScript
脚手架 umi
数据可视化 antv
fetch/axios
表格导入导出 xlsx

项目职责：

负责项目中的用户管理、订单管理、权限管理等模块
负责项目后期的维护和更新

项目亮点：

采用TypeScript来定义数据类型，让项目安全度进一步提高
采用umi，让项目开发效率提升

项目难点：

项目迭代升级
数据可视化
hooks的应用
开发过程
构建项目
UmiJS
项目初始目录和文件

day1 - 页面基本布局

使用Umijs提供的插件 umijs/plugin-layout完成页面基本布局配置

day2 - 完成路由拓展配置

使用Umijs提供的插件 umijs/plugin-layout完成路由拓展配置
- 侧边栏菜单数据根据路由中的配置自动生成
- 侧边栏菜单配置
- 布局路由级别展示/隐藏相关配置
完成Login页面布局
- 登录表达使用antd组件库Form表单的登录框架

day3 - 登录实现包含路由拦截和权限路由

分装常用函数

export function setCookie(name: string, value: string | number, n: number) {
  const oDate = new Date()
  oDate.setDate(oDate.getDate() + n)
  document.cookie = name + '=' + value + ';expires=' + oDate
}
export function getCookie(name: string) {
  const str = document.cookie
  const arr = str.split('; ')
  for (let i = 0; i < arr.length; i++) {
    const newArr = arr[i].split('=')
    if (newArr[0] == name) {
      return newArr[1]
    }
  }
}
export function removeCookie(name: string) {
  setCookie(name, 1, -1)
}

request

tyarn add axios tyarn add qs @types/qs

//todo 封装数据请求
import axios from 'axios'
import qs from 'qs'
import * as cookie from './cookies'
//todo 创建axios自定义实例
const ins = axios.create({
  timeout: 20000,
  baseURL: 'http://59.110.226.77:5000/api/private/v1/'
})
//todo 创建axios拦截器
ins.interceptors.request.use(
  (config) => {
    //todo 携带token
    // config.headers.common[] = token
    config.headers.common['Authorization'] = cookie.getCookie('token')
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)
//todo 封装request函数
interface Options {
  url: string
  method?: string
  data?: any
  type?: string //用于区别我是post请求的那种方式
}
export default function request(options: Options) {
  const { url, method = 'get', data = {}, type = 'form' } = options
  switch (method.toUpperCase()) {
    case 'GET':
      return ins.get(url, { params: data })
    case 'POST':
      if (type === 'json') {
        //json提交
        return ins.post(url, data)
      }
      if (type === 'file') {
        //文件提交
        const p = new FormData()
        for (const key in data) {
          p.append(key, data[key])
        }
        return ins.post(url, p)
      }
      // 进行表单提交  必须转参数【qs】
      return ins.post(url, qs.stringify(data))
    case 'PUT':
      return ins.put(url, data)
    case 'DELETE':
      return ins.delete(url, { data })
    default:
      return ins.get(url, { params: data })
  }
}