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吧