`总共 ${total} 条`} /> ); }; export default Index; ``` 弹出窗组件 views/user/components/UserForm.tsx ``` import React, {useState} from 'react'; import {Button, Modal, Form, Input, InputNumber} from 'antd'; import {DeleteOutlined, EditOutlined} from '@ant-design/icons'; const UserForm: React.FC = (props) => { // console.log(props) const {title,open,rowData,handleOk,onFinish,onFinishFailed,handleCancel,confirmLoading,}= props; const [form] = Form.useForm(); form.resetFields(); if(title==='修改'){ form.setFieldsValue(rowData); } console.log(form) return (

); }; export default UserForm; ``` ![table页面](images/react-3.png) ![编辑](images/react-4.png) ![新增](images/react-5.png) ## 五，配置less 暴露配置项 `yarn eject` 安装less和less-loader ` yarn add less less-loader -S` 配置webpack.config.js,在 //style files regexes 最下面配置less ``` // less const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; ``` 在大约530行左右配置 ``` // less { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), sideEffects: true, }, // less { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), }, ``` 如何创建index.less 和index.scss并引用，重新启动项目如果出现如果 Failed to complie，就重新安装一下即可 `yarn add sass -s` ## 六，配置axios和反向代理安装axios 和 http-proxy-middleware `yarn add axios http-proxy-middleware -s` 在config下创建 setupProxy.js ``` const {createProxyMiddleware} = require('http-proxy-middleware'); module.exports = function(app) { app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080/',//后台服务器地址 changeOrigin: true, pathRewrite: { '^/api': '', },})) } ``` 然后修改 config下 path.js的相关配置 ![输入图片说明](images/react-6.png) 配置封装 /http/request.ts ``` import axios from "axios" // 创建axios 赋值给常量service const service = axios.create({ baseURL: '/api', timeout: 5000, headers: {//请求头 "Content-Type": "application/json;charset=UTF-8", // "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", "token": null, } }); // 添加请求拦截器（Interceptors） service.interceptors.request.use(function (config) { // 发送请求之前做写什么 let token = localStorage.getItem("token"); // 如果有token if(token){ // 将token放在请求头 config.headers.authorization = token; } return config; }, function (error) { // 请求错误的回调 return Promise.reject(error); }); // 添加响应拦截器 service.interceptors.response.use(function (response) { // 对响应数据做点什么 return response; }, function (error) { // 响应错误的回调 return Promise.reject(error); }); export default service ``` 配置 /http/index.ts ``` import service from "./request"; // 这个模块封装各种请求方式（如：get，post等等） export function post(url: any, params: {}) { return new Promise(function (resovle, reject) { service.post(url, params) .then((res: any) => { if (!res.data) { resovle(res); } resovle(res.data); }, (err: any) => { reject(err); }) .catch((err: any) => { reject(err); }); }); } export function get(url: String, params: []) { let querystr = ""; for (let key in params) { if (params[key]) { querystr += `${key}=${params[key]}&` } } return new Promise(function (resovle, reject) { service.get(url + "?" + querystr) .then((res: any) => { if (!res.data) { resovle(res); } resovle(res.data); }, (err: any) => { reject(err); }) .catch((err: any) => { reject(err); }); }); } ``` 请求api 封装 /api/user.ts ``` //index.ts import Service from "../http/request" //获取所有用户 export function getUserList(config:any) { const params = new URLSearchParams() params.append("pageNum", config.pageNum) params.append("pageSize", config.pageSize) return Service({ url: "/user/page", data: params, }) } ``` 调用服务 ``` getUserList(page).then((res: any) => { setUsers(res); setPage({pageNum: res.pageNum, pageSize: res.pageSize}); }) ``` ## 结尾到这里我们的React+antd+axios+router的学习就就结束了，欢迎分享给有需要的小伙伴！！！ ## 原文地址 [文章地址](https://ltbk.net/front/react/article/1467.html) ## 效果图 ## Learn More You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). To learn React, check out the [React documentation](https://reactjs.org/).