初學者使用react+antd實現表格+彈窗

github地址： https://github.com/YepFury/react-table-demo
趁著專案間歇，試著寫了一下未接觸的react，找了一下資料，決定使用ant-design元件庫，因為基本是完全的react新手，因此對著官網教程及查詢資料簡單的實現了一下使用vue實現過的表格+彈窗。

準備

Ant-Design

環境安裝

npm install yarn -g
npm install create-react-app -g

建立專案

create-react-app table-demo

工具會自動初始化一個腳手架並安裝 React 專案的各種必要依賴

顯示配置（按照個人理解是否需要）

yarn eject  && y

安裝依賴

雖然腳手架回安裝一些依賴，但是缺了必要的元件庫以及一些常用庫

yarn add antd
yarn add axios

啟動專案

cd table-demo
yarn start

其他

因為習慣使用less，所以還是打算在react中使用less語法，在專案中配置less語法的方法除了antd官網介紹的自定義主題，使用react-app-rewrite-less外掛外，還有就是在對應的webpack配置檔案中修改，即修改webpack.config.dev.js

和webpack.config.prod.js，修改如下：

1. 修改webpack.config.dev.js

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
+ const lessRegex = /\.(less)$/;
+ const lessModuleRegex = /\.module\.(less)$/
 
;

//...

module.exports = {
    module: {
        rules: [
          + {
          +     test: lessRegex,
          +     exclude: lessModuleRegex,
          +     use: getStyleLoaders({importLoaders: 2}, 'less-loader')
          + },
          + {
          +     test: lessModuleRegex,
          +     use: getStyleLoaders(
          +         {
          +             importLoaders: 2,
          +             modules: true,
          +             getLocalIdent: getCSSModuleLocalIdent,
          +         },
          +         'less-loader'
          +     ),
          + },
        ]
    }
}

2. 修改webpack.config.prod.js

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
+ const lessRegex = /\.(less)$/;
+ const lessModuleRegex = /\.module\.(less)$/;

//...

module.exports = {
    module: {
        rules: [
          + {
          +     test: lessRegex,
          +     exclude: lessModuleRegex,
          +     loader: getStyleLoaders(
          +         {
          +             importLoaders: 2,
          +             sourceMap: shouldUseSourceMap,
          +         },
          +         'less-loader'
          +     ),
          + },
          + {
          +     test: lessModuleRegex,
          +     loader: getStyleLoaders(
          +         {
          +             importLoaders: 2,
          +             sourceMap: shouldUseSourceMap,
          +             modules: true,
          +             getLocalIdent: getCSSModuleLocalIdent,
          +         },
          +         'less-loader'
          +     ),
          + },
        ]
    }
}

開發

建立檔案目錄

建立檔案

1. /services/request.js

import axios from 'axios';

const request = axios.create({
    baseURL: 'http://192.168.x.x:7788/api',
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json'
    }
})
request.interceptors.request.use(config => {
    return config;
}, error => {
    return new Promise.inject(error);
})

request.interceptors.response.use(response=>{
    return response.data
},error=>{
    new Promise.inject(error)
})

export default request;

2. /services/api.js 將請求方法進行封裝，統一管理

import request from './request';

export async function getTableData(params) {
    return request.get('/table/allData', {
        params: params
    })
}
// post  all

引入antd

修改 src/App.js，引入 antd

import React, { Component } from 'react';

修改 src/App.css，在檔案頂部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

引入完之後按照自己的需要引入不同的元件使用即可，過程可參照antd官方文件。

效果圖

相關推薦