*****先要安裝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>