React(hook)+Typescript+Antd 实现一个可配置的后台管理系统

1.效果预览地址

• 点击这里

2.应用到的技术栈

• React（16.8）+ Typescript（3.5）+Antd（3.2）+redux + sessionStorage + less

3.搭建环境

1.安装官网react脚手架的typescript版本

$ npx create-react-app my-app --typescript
$ # 或者
$ yarn create react-app my-app --typescript
复制代码

2.安装antd、redux与less

npm install -S antd
npm  install redux -S 
复制代码

注意这里：安装less有一些特殊，create-react-app是集成了sass，可是并无集成less，这里安装less须要进行一下操做

npm run eject 
复制代码

对creat react app进行暴露配置文件（此过程不可逆）。而后

npm install less less-loader
复制代码

咱们需求修改 webpack.config.js 配置文件

test: /.css/ test: /.css$/ 的 use 数组配置增长 less-loader

{
  test: /\.(css|less)$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, { loader: require.resolve('less-loader') // compiles Less to CSS } ], }, 复制代码

这样才可以配置好less 而后环境搭建完咱们就能够愉快的进行敲代码啦！

4.框架的使用

打开界面：

红色框框处使咱们第一个须要配置的地方：

1.打开src目录下面的config.js
2.进行配置：
复制代码

sub对应的为为左侧导航。content为导航所对应的表格字段

白色箭头所指数组的前三个元素分别对应导航key值，导航的图标，以及导航的名称。

数组第四个元素为数组，对应为导航子元素的key值以及子元素的名称。

注意：每次添加完子元素时。都要在下面content数组中对应的key值中添加相应的表格字段，好比班级的ke     y为0，那就在content数组中0位置添加表格字段。

表格字段可选width，title，以及是否能够被编辑editable
复制代码

---

1.都设置完成后打开界面
复制代码

2. 以下图能够添加表格内容，删除内容，直接点击空表格进行编辑（刷新页面不会使数据丢失）
复制代码

3.在admin.tsx中暴露新增数据与删除数据的接口，删除元素为子导航的key+被删除数据的key，添加为被删除数据的key+子导航的key。
复制代码

5.编码

首先构建目录结构，总体的目录结构为：

1.src为咱们编码的位置
2.admin为父组件
3.components为子组件
4.sessionStorage里面的api.js 暴露删除以及添加数据的接口，其次保证每次页面刷新存储在redux中的数据不会消失，页面中的数据不会丢失。
5.store就是咱们的仓库，redux存储的数据以及action（行为）
6.config.js:从antd中抽取出来的配置文件，项目完成后只需配置config.js中的文件便可实现动态导航以及表格，在经过暴露的接口进行与后端进行交互。
复制代码

主要交互思路：将antd中表格的配置配置数据公共提取为一个js文件，让antd表格每次初始化依据config.js中咱们本身配置的内容进行初始化，代码将配置文件中的数据进行循环构形成一个导航：

而后切换导航再经过redux进行切换，修改content组件显示的表格。每次更新组件都会讲redux中的数据存入sessionStorage中，页面刷新结束后作判断是否将sessionStorage中的数据存入到redux中，暴露的接口也是经过订阅redux实现的。

具体的编码的内容，能够看下面这个重点！！！

5.贡献源码（开源）

Github：点我访问 看完源码后真的有帮助到你！请给我个star ！！！！！！！感谢！万分感谢！大佬点个star吧