react 请求后端
react 不是双向绑定的


import Common from "./Common"

class RequestUtil {

  // Example POST method implementation:
  static    async  postData(url = '', data = {}) {
      // Default options are marked with *
    //   Common.baseUrl
    if(!url.startsWith("http")){
        url= Common.baseUrl+url
    }
      const response = await fetch(url, {
          method: 'POST', // *GET, POST, PUT, DELETE, etc.
          mode: 'cors', // no-cors, *cors, same-origin
          cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
          credentials: 'same-origin', // include, *same-origin, omit
          headers: {
              'Content-Type': 'application/json'
              // 'Content-Type': 'application/x-www-form-urlencoded',
          },
          redirect: 'follow', // manual, *follow, error
          referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
          body: JSON.stringify(data) // body data type must match "Content-Type" header
      })
      return response.json() // parses JSON response into native JavaScript objects
  }
}

export default RequestUtil
class Table3 extends Compon

ent {
    state = {
        selectedRowKeys: [],
        data:[],
        allList:[],
    }

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys)
        this.setState({ selectedRowKeys })
    }

    componentDidMount(){

        
        RequestUtil.postData('/iotDb/list', { answer: 42 }).then(res => {
            console.log("res") // JSON data parsed by `data.json()` call
            console.log(res)
            // data= res.data.content
            // data= res.Data.content

            // react 请求后端 放入数据
            // console.log('data')
            // console.log(data)

            let  content=res.Data.content
            // content. 
            for (let o of content) {
                // console.log("parse 之前");
                // console.log(o);
                // console.log("o.tags");
                console.log(o.tags);
                o.tags=JsonUtil.stringToArr(o.tags)
                // o.tags=JSON.parse(o.tags)
                o.key=o.id
                // console.log(o);
                console.log("o.tags 解析之后的");
                console.log(o.tags);
            }
            // console.log();
            this.setState({
                allList:content,
                data : content
            })
        })

    }
 return <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.allList} />

后端


/**
 * 分页查询
 let  data= {  
         "address":null ,
         "age":null ,
         "id":null ,
         "name":null ,
         "tags":null 
                  }
 axios.post(Common.baseUrl + "/iotDb/list",data).then((res) => {
 console.log("res");
 console.log(res);
 let   iotDbList=  res.data.data.content
 Toast('查找成功');
 });
 */
@PostMapping("/list")
@ApiOperation(value = "list iotDb", notes = "list iotDb")
public Object list(@RequestBody IotDb iotDb,
@RequestParam(required = false, defaultValue = "0") int pageNumber,
@RequestParam(required = false, defaultValue = "10") int pageSize) {

        try {
        //创建匹配器,需要查询条件请修改此处代码
        ExampleMatcher matcher = ExampleMatcher.matchingAll();

        //创建实例
        Example<IotDb> example = Example.of(iotDb, matcher);
        //分页构造
        Pageable pageable = PageRequest.of(pageNumber, pageSize);
            Page<IotDb> all = iotDbRepository.findAll(example, pageable);
//            for (IotDb db : all) {
//                db.
//            }
            return ReturnT.success(all);

        } catch (Exception e) {
        e.printStackTrace();
        return ReturnT.error(e.getMessage());
        }

        }

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐