React 是什么？
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
目标
使用React构建一个非常简单CRUD应用程序，以便您更好地了解它的工作方式。
完整的 demo 代码请访问 https://github.com/zcqiand/crud
演示
列表页面
QQ20200331181642.png
添加页面
QQ20200331182730.png
编辑页面
QQ20200331182859.png
构建
创建React应用
Facebook创建了Create React App，该环境预先配置了构建React应用所需的一切。它将创建一个实时开发服务器，使用Webpack自动编译React，JSX和ES6，自动前缀CSS文件，并使用ESLint测试和警告代码中的错误。
create-react-app react
安装完成后，移至新创建的目录并启动项目。
cd react
npm start
一旦运行此命令，localhost:3000新的React应用程序将弹出一个新窗口。
QQ20200331185411.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 (
<Router>
<div>
<ul>
<li>
<Link to="/">商品</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<GoodsIndex />
</Route>
<Route path="/goods/add">
<GoodsAdd />
</Route>
<Route path="/goods/:id/edit" render={(props) => <GoodsEdit {...props} />} />
</Switch>
</div>
</Router>
)
}
构建列表页面
import React, { Component } from "react";
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 || []
return (
<div>
<button onClick={this.addGoods}>添加</button>
<table>
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
items.map(
(item, index) =>
<tr key={item.Id}>
<td>{index+1}</td>
<td>{item.Name}</td>
<td>{item.Describe}</td>
<td>
<button onClick={() => this.editGoods(item.Id)}>编辑</button>
<button onClick={() => this.deleteGoods(item.Id)}>删除</button>
</td>
</tr>)
}
</tbody>
</table>
</div>
)
}
}
构建添加页面
import React, { Component } from "react";
import qs from 'qs';
export default class GoodsAdd extends Component {
componentDidMount() {
}
createGoods = () => {
console.log('createGoods');
const param = {
Name: this.Name.value,
Describe: this.Describe.value
}
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 = "/";
})
}
render() {
return (
<div>
<fieldset>
<legend>添加商品</legend>
<label>名称: </label>
<input type="text" name="Name" style={{ width: 500 }} ref={Name => this.Name = Name} />
<p />
<label>描述: </label>
<textarea type="text" name="Describe" style={{ width: 500 }} ref={Describe => this.Describe = Describe} />
<p />
<button onClick={this.createGoods}>新增</button>
</fieldset>
</div >
)
}
}
构建编辑页面
import React, { Component } from "react";
import qs from 'qs';
export default class GoodsEdit extends Component {
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.Name.value = result.Result.Name
this.Describe.value = result.Result.Describe
}
})
}
updateGoods = () => {
console.log('updateGoods');
const param = {
Name: this.Name.value,
Describe: this.Describe.value,
Id: this.props.match.params.id
}
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 = "/";
})
}
render() {
return (
<div>
<fieldset>
<legend>编辑商品</legend>
<label>名称: </label>
<input type="text" name="Name" style={{ width: 500 }} ref={Name => this.Name = Name} />
<p />
<label>描述: </label>
<textarea type="text" name="Describe" style={{ width: 500 }} ref={Describe => this.Describe = Describe} />
<p />
<button onClick={this.updateGoods}>更新</button>
</fieldset>
</div>
)
}
}
网友评论