React + Node.JS巧妙实现后台管理系统实践经验

目前因学业任务比较重，没有好好的完善，现在比较完善的只有题库管理，新增题库，修改题库以及登录的功能，但搭配小程序使用，主体功能已经实现了

此后台系统是为了搭配我的另一个项目 School-Partners学习伴侣微信小程序而开发的。是一个采用Taro多端框架开发的跨平台的小程序。感兴趣的可以看一下之前的文章

希望大佬们走过路过可以给个star鼓励一下,感激不尽~
https://github.com/zhcxk1998/School-Partners

这个是小程序的介绍文章
小程序介绍文章，使劲戳！

无图无真相！先上几个图~

运行截图

1. 登录界面

2. 题库管理

3. 修改题库

技术分析

就来说一下项目中自己推敲做出来的几个算是亮点的东西吧

1. 使用Hook封装API访问工具

本项目采用的UI框架是Ant-Design框架
因为这个项目的后台对于表格有着比较大的需求，而表格加载就需要使用到Loading的状态，所以就特地封装一下便于之后使用

首先我们先新建一个文件useService.ts
然后我们先引入axios来作为我们的api访问工具

import axios from 'axios'

const instance = axios.create({
  baseURL: '/api',
  timeout: 10000,
  headers: {
    'Content-Type': "application/json;charset=utf-8",
  },
})

instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.common['Authorization'] = token;
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  res => {
    let { data, status } = res
    if (status === 200) {
      return data
    }
    return Promise.reject(data)
  },
  error => {
    const { response: { status } } = error
    switch (status) {
      case 401:
        localStorage.removeItem('token')
        window.location.href = './#/login'
        break;
      case 504:
        message.error('代理请求失败')
    }
    return Promise.reject(error)
  }
)

先将axios的拦截器，基本配置这些写好先

接着我们实现一个获取接口信息的方法useServiceCallback

const useServiceCallback = (fetchConfig: FetchConfig) => {
  // 定义状态，包括返回信息，错误信息，加载状态等
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [response, setResponse] = useState<any>(null)
  const [error, setError] = useState<any>(null)
  const { url, method, params = {}, config = {} } = fetchConfig

  const callback = useCallback(
    () => {
      setIsLoading(true)
      setError(null)
      // 调用axios来进行接口访问，并且将传来的参数传进去
      instance(url, {
        method,
        data: params,
        ...config
      })
        .then((response: any) => {
          // 获取成功后，则将loading状态恢复，并且设置返回信息
          setIsLoading(false)
          setResponse(Object.assign({}, response))
        })
        .catch((error: any) => {
          const { response: { data } } = error
          const { data: { msg } } = data
          message.error(msg)
          setIsLoading(false)
          setError(Object.assign({}, error))
        })
    }, [fetchConfig]
  )

  return [callback, { isLoading, error, response }] as const
}

这样就完成了主体部分了，可以利用这个hook来进行接口访问，接下来我们再做一点小工作

const useService = (fetchConfig: FetchConfig) => {
  const preParams = useRef({})
  const [callback, { isLoading, error, response }] = useServiceCallback(fetchConfig)

  useEffect(() => {
    if (preParams.current !== fetchConfig && fetchConfig.url !== '') {
      preParams.current = fetchConfig
      callback()
    }
  })

  return { isLoading, error, response }
}

export default useService

我们定义一个useService的方法，我们通过定义一个useRef来判断前后传过来的参数是否一致，如果不一样且接口访问配置信息的url不为空就可以开始调用useServ