使用antd开发后台管理前端

原创
09/28 20:43
阅读数 34

这一篇主要用来记录使用antd开发后台管理的前台页面步骤和遇到的坑

原因

不用现成的antdPro,而是用antd开发,有以下几方面的原因:

  1. antdPro启动速度太慢,修改一个东西好,要加载好半天才能刷新出来
  2. 很多东西感觉封装的过度了,增加了学习成本,但是不可否认,确实减少了大量的重复代码

开始使用antd

  1. 先介绍一款好用的工具,tyarn,自动配置了国内的源,用法跟yarn一样,速度很快
  2. 创建react项目

tyarn create react-app antd-admin

  1. 引入antd

tyarn add antd

目前的antd版本是4.16.13,需要将less-loader降版本到5,否则会报错,希望以后会解决这个问题,less-loader降到版本5后,使用 @antd/pro-layout 也会报类似的错,不知如何解决,知道怎么解决的老兄指点一下,谢谢。

  1. 引入axios,作为网络请求工具

tyarn add axios

使用axios,最好创建实例,在实例里修改需要的配置,防止全局修改配置,污染其他请求

  1. 安装react路由库

tyarn add react-router-dom

  1. 配置代理,目前在package.json配置代理,只支持字符串格式,不支持对象,对于复杂点的代理,不能满足,官方推荐使用 http-proxy-middleware 来配置代理,本人没有安装这个,而是暴露出webpack配置,执行命令 tyarn eject 即可暴露出webpack配置文件,直接在webpack配置里面进行代理的配置,配置文件为 config/webpackDevServer.config.js ,修改proxy属性即可配置,下面是我的代理配置
proxy: {
      "/api": {
        "target": "http://localhost:8442/",
        "changeOrigin": true,
        "pathRewrite": {
          "^/api": ""
        }
      },
      "/img": {
        "target": "http://localhost:8001/",
        "changeOrigin": true,
        "pathRewrite": {
          "^/img": ""
        }
      },
      "/baiduApi": {
        "target": "http://api.fanyi.baidu.com",
        "changeOrigin": true,
        "secure": false,
        "pathRewrite": {
          "^/baiduApi": ""
        }
      }
    },

项目中用到了百度翻译的api,很多这种api是不支持跨域的,因此在这里配置个代理,即可解决实际跨域的问题,在发布时,同样在nginx里面做一个代理,

location /baiduApi {
	proxy_pass http://api.fanyi.baidu.com;
	rewrite "^/baiduApi/(.*)$" /$1 break; 
}

至此,基本环境就搭建好了,可以愉快的开发了,对于后续的坑,本人遇到了再做补充。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部