概览
React 是什么？
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
antd 是什么？
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。
目标
使用React+AntD构建一个非常简单CRUD应用程序，以便您更好地了解它的工作方式。
完整的 demo 代码请访问 https://github.com/zcqiand/crud
演示
列表页面
QQ20200402145823.png
添加页面
QQ20200402150132.png
编辑页面
QQ20200402150153.png
构建
创建React应用
Facebook创建了Create React App，该环境预先配置了构建React应用所需的一切。它将创建一个实时开发服务器，使用Webpack自动编译React，JSX和ES6，自动前缀CSS文件，并使用ESLint测试和警告代码中的错误。
create-react-app react-antd
安装完成后，移至新创建的目录并启动项目。
cd react-antd
npm start
一旦运行此命令，localhost:3000新的React应用程序将弹出一个新窗口。
QQ20200402151735.png
构建路由
安装
npm install react-router-dom
修改App.js代码，放入路由的代码
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import GoodsIndex from "./goods/index";
import GoodsAdd from "./goods/add";
import GoodsEdit from "./goods/edit";
export default function App() {
return (
-
商品
)
}
安装AntD
npm install antd --save
构建列表页面
import React, { Component } from "react";
import { Table, Button } from 'antd';
export default class GoodsIndex extends Component {
constructor(props) {
super(props)
this.state = {
items: []
}
}
componentDidMount() {
this.queryGoods()
}
queryGoods() {
console.log('queryGoods');
const url = "http://localhost:59367/examplemodule/goods"
fetch(url, { method: "get" })
.then(response => response.json())
.then(result => {
console.log(result)
if (result.Code === 0) {
this.setState({
items: result.Result
})
}
})
}
addGoods = () => {
console.log('addGoods');
window.location.pathname = "/goods/add";
}
editGoods = (id) => {
console.log('editGoods');
window.location.pathname = `/goods/${id}/edit`;
}
deleteGoods = (id) => {
console.log('deleteGoods:' + id);
const url = `http://localhost:59367/examplemodule/goods/${id}/delete`
fetch(url, {
method: "post",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(response => response.json())
.then(result => {
console.log(result)
alert("删除成功")
window.location.pathname = "/";
})
}
render() {
const items = this.state.items || []
const columns = [
{
title: '名称',
dataIndex: 'Name',
key: 'Name',
},
{
title: '描述',
dataIndex: 'Describe',
key: 'Describe',
},
{
title: '操作',
key: 'action',
render: (record) => (
),
},
];
return (
)
}
}
构建添加页面
import React, { Component } from "react";
import { Form, Input, Button } from 'antd';
import qs from 'qs';
const { TextArea } = Input;
export default class GoodsAdd extends Component {
render() {
const onFinish = values => {
console.log('onFinish:', values);
const param = values
console.log('param:' + qs.stringify(param));
const url = "http://localhost:59367/examplemodule/goods/create"
fetch(url, {
method: "post",
body: qs.stringify(param), // data can be `string` or {object}!
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(response => response.json())
.then(result => {
console.log(result)
alert("添加成功")
window.location.pathname = "/";
})
};
const onFinishFailed = errorInfo => {
console.log('onFinishFailed:', errorInfo);
};
return (
)
}
}
构建编辑页面
import React, { Component } from "react";
import { Form, Input, Button } from 'antd';
import qs from 'qs';
const { TextArea } = Input;
export default class GoodsEdit extends Component {
formRef = React.createRef();
constructor(props) {
super(props)
this.state = {
item: {}
}
}
componentDidMount() {
this.getGoods(this.props.match.params.id)
}
getGoods(id) {
console.log('getGoods');
const url = `http://localhost:59367/examplemodule/goods/${id}`
fetch(url, { method: "get" })
.then(response => response.json())
.then(result => {
console.log(result)
if (result.Code === 0) {
this.setState({
item: result.Result
})
this.formRef.current.setFieldsValue({
Name: result.Result.Name,
Describe: result.Result.Describe,
});
}
})
}
render() {
const onFinish = values => {
console.log('onFinish:', values);
const param = values
const id = this.props.match.params.id
console.log('param:' + qs.stringify(param));
const url = `http://localhost:59367/examplemodule/goods/${id}/update`
fetch(url, {
method: "post",
body: qs.stringify(param), // data can be `string` or {object}!
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(response => response.json())
.then(result => {
console.log(result)
alert("更新成功")
window.location.pathname = "/";
})
};
const onFinishFailed = errorInfo => {
console.log('onFinishFailed:', errorInfo);
};
return (