*****先要安装node.js，使用npm包管理工具 node.js安装方法如下*****
https://blog.csdn.net/shiyaru1314/article/details/54963027
https://blog.csdn.net/qq_42564846/article/details/82688266
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
react脚手架搭建
https://blog.csdn.net/QTFYING/article/details/78665664
1. cd 工程所在路径
2.npm install -g create-react-app // create-react-app安装起来实在是太简单，只需要一条命令，不像别的脚手架，还需要去clone整个脚手架的源码，再在那基础上改
3.create-react-app demo // 创建一个名字为demo的react项目
4.cd demo //进入项目文件夹内
5.npm start //启动你创建的react项目
Ant Design引入和使用
1.npm install antd --save //在项目文件夹内加载antd模块2.修改 src/App.js，引入 antd 的按钮组件。
import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
export default App;3.修改 src/App.css，在文件顶部引入 antd/dist/antd.css。
@import '~antd/dist/antd.css';
.App {
text-align: center;
}1.react的数据双向绑定
iOnchage = e => {
console.log(e)
this.setState({
a:e.target.value
})
}constructor(props) {
super(props)
this.state = {
newsDate: [],
valueHot: 1,
valueRelease: 1,
valueTop: 1,
a: 5,
}
}<input onChange={this.iOnchage} value={this.state.a} />
{this.state.a}2.获取input的用户输入的值
<Input placeholder="Basic usage" style={{ maxWidth: '92%' }} ref={value => {this.addAuthor = value}} />console.log(this.addAuthor.input.value);3.设置滚动
<div style={{height:"100vh",overflowY:"auto"}} >
</div>4.表格序号生成，根据返回值是1或0来控制 是 或 否
{
title: '序号',
dataIndex: 'num',
key: 'num',
align: 'center',
render: (text, recond, index) => `${index + 1}`
}, {
title: '发布状态',
key: 'releaseState',
dataIndex: 'newsReleaseStatus',
align: 'center',
render: (text, recond, index) => {
return recond.newsReleaseStatus === 1 ? '是' : '否'
}
},5.通过传入 e 来获取点击是哪行数据
{
title: '操作',
// dataIndex: 'operation',
key: 'operation',
width: 350,
align: 'center',
// render: operation => (
// <div>
// {operation.map(operation => <Button color="blue" key={operation} style={{width:'70px'}}>{operation}</Button>)}
// </div>
// ),
render: (e, record) => (
<span>
<a
href="###"
className="rewriteOperation"
onClick={() => this.showModalAlter(e)}
>
<Icon type="edit" theme="twoTone" twoToneColor="#a26c00" />
修改
</a>
<Divider type="vertical" />
<Popconfirm
title="确认发布吗?"
onConfirm={() => this.listReleaseBtn(e)}
okText="确定"
cancelText="取消"
>
<a href="###" className="iconOperation">
<Icon
type="notification"
theme="twoTone"
twoToneColor="#527fa9"
/>
发布
</a>
</Popconfirm>
<Divider type="vertical" />
<Popconfirm
title="确认置顶吗?"
onConfirm={() => this.listTop(e)}
okText="确定"
cancelText="取消"
>
<a
href="###"
className="deleteIcon"
// onClick={() => this.listTop(e)}
>
<Icon type="delete" theme="twoTone" twoToneColor="#900000" />
置顶
</a>
</Popconfirm>
<Divider type="vertical" />
<Popconfirm
title="确认热门吗?"
onConfirm={() => this.listHot(e)}
okText="确定"
cancelText="取消"
>
<a
href="###"
className="deleteIcon"
// onClick={() => this.listHot(e)}
>
<Icon type="delete" theme="twoTone" twoToneColor="#900000" />
热门
</a>
</Popconfirm>
<Divider type="vertical" />
<Popconfirm
title="确认删除吗?"
onConfirm={() => this.listDel(e)}
okText="确定"
cancelText="取消"
>
<a
href="###"
className="deleteIcon"
// onClick={() => this.listDel(e)}
>
<Icon type="delete" theme="twoTone" twoToneColor="#900000" />
删除
</a>
</Popconfirm>
</span>
)
}6.filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter过滤器，过滤掉要删的id
listDel = e => {
console.log(e)
let id = e.id
axios
.post(`/news/del/${id}`)
.then(res => {
console.log(res)
// filter过滤器，过滤掉要删的id
let temp = this.state.newsDate.filter(v => {
return id !== v.id
})
this.setState({
newsDate: temp
})
message.success('删除成功')
})
.catch(err => {
console.log(err)
message.error('删除失败')
})
}7.模糊查询，要求根据输入可以有一个或者多个，前端做传参判断
qs.stringify(data) 转换为表单数据格式，需要安装qs插件
// 查询
search = () => {
console.log(this.goodsName.input.value, this.id.input.value)
let data = {}
if (this.goodsName.input.value) {
data.goodsNameLike = this.goodsName.input.value
}
if (this.id.input.value) {
data.id = this.id.input.value
}
if(this.sellerNameLike.input.value){
data.sellerNameLike = this.sellerNameLike.input.value
}
console.log(qs.stringify(data))
axios
.post(
`http://10.58.202.232:8888/admin/goods/goods/list`,
qs.stringify(data)
)
.then(res => {
console.log(res)
// this.findAll()
this.setState({
data: res.data
})
message.success('查询成功')
})
.catch(err => {
console.log(err)
message.error('查询失败')
})
}8.select的根据请求数据进行循环遍历渲染选项，以及获取用户所选的选项
<Select
defaultValue="一级分类"
style={{ width: 130 }}
onSelect={value => this.onSelectFirstType(value)}
>
<Option value="一级分类">一级分类</Option>
{this.state.firstTypeData.map((v, index) => {
return (
<Option value={v.id}>
<Icon type="caret-right" />
{v.typeName}
</Option>
)
})}
</Select>