React Ant design pro 访问服务器接口，获取数据显示_ant design pro如何访问数据库

                                                          React Ant design pro 访问服务器接口

一、前两天更新了Ant design pro环境搭建，需要了解的小伙伴可以看一下之前的内容，还有react基础教程噢。

二、框架搭建完后，一般第一时间都是查看官方文档，但我依然看的还是一头水务，有许多知识点还是不太了解。

       官方文档地址：https://pro.ant.design/docs/getting-started-cn

       里面已经详细的介绍了一些最基本的框架基础，每个文件夹是做什么用的，都已经进行了阐述，文档一定要多读几遍，多读几遍才能看到一些已经被自己忽略掉的知识点。刚拿到框架，无非就是了解页面该怎么写，菜单、路由在哪控制，与服务器该怎样进行通讯获取数据。这里我主要说一下怎么连接数据库，拿取数据显示。

三、知识点准备：

整个框架核心，应该了解一下dva是怎么操作数据的。dva官方地址：https://dvajs.com/guide/,这里就不在过多赘述了。

      官方文档给出的请求流程：

      在 Ant Design Pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

1. UI 组件交互操作；
2. 调用 model 的 effect；
3. 调用统一管理的 service 请求函数；
4. 使用封装的 request.ts 发送请求；
5. 获取服务端返回；
6. 然后调用 reducer 改变 state；
7. 更新 model。

四、前端部分编写

先看一下我的目录文件,需要创建或者更改的文件我都已经标注：

先在config.js文件中添加页面菜单：

在pages中创建页面，我的页面为Shop(记住页面名字要和config.js 文件配置一致噢)：

index.jsx文件代码如下：

import React, { PureComponent } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import TableBordered from './TableBordered';
 
@connect(({ shop }) => ({
  ...shop,
}))
 
class Shop extends PureComponent {
  // 连接models层
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'shop/queryUser1',
      payload: {
        a: '1',
        b: '2',
      },
    });
  }
 
  render() {
    const { data } = this.props;
    return (
      <PageHeaderWrapper>
        <TableBordered arr={data}/>
      </PageHeaderWrapper>
    );
  }
}
 
export default Shop;

 shop.less

// 样式文件默认使用 CSS Modules，如果需要，你可以在样式文件的头部引入 antd 样式变量文件：
 
@import "~antd/lib/style/themes/default.less";

这里我创建了一个表格子组件TableBordered

import React,{ PureComponent } from "react";
import { Table } from "antd";
import styles from "./index.less";
 
const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key:"id"
  },
  {
    title: "姓名",
    dataIndex: "userName",
    render: text => <a>{text}</a>,
    key: "userName"
  },
  {
    title: "年龄",
    className: "column-money",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "学号",
    dataIndex: "studentNo",
    key: "studentNo"
  },
  {
    title: "性别",
    dataIndex: "sex",
    key: "sex"
  }
];
 
class TableBordered extends PureComponent {
  render() {
    return (
      <div className={styles.container}>
        <div id="components-table-demo-bordered">
          <Table
            columns={columns}
            dataSource={[this.props.arr]}
            bordered
          />
        </div>
      </div>
    )
  }
}
 
export default TableBordered
 

index.less

.container {
  :global {
    th.column-money,
    td.column-money {
      text-align: right !important;
    }
  }
}

然后创建models层shop.js:

 
import { queryUser1 } from "@/services/shop";
 
export default {
  namespace: "shop",
 
  state: {
    data: {}
  },
 
  effects: {
    /**
     * @param payload 参数
     * @param call 执行异步函数调用接口
     * @param put 发出一个 Action，类似于 dispatch 将服务端返回的数据传递给上面的state
     * @returns {IterableIterator<*>}
     */
    *queryUser1({ payload }, { call, put }) {
      const response = yield call(queryUser1, payload);
      yield put({
        // 这行对应下面的reducers处理函数名字
        type: "save",
        payload: response
      });
    }
  },
 
  reducers: {
    /**
     *
     * @param state
     * @param action
     * @returns {{[p: string]: *}}
     */
    save(state, action) {
      return {
        ...state, 
        data: action.payload 
      };
    }
  }
};

在创建service层，shop.js

import { stringify } from "qs";
// ant 自己封装好的发送ajax请求的工具
import request from "@/utils/request";
 
export async function queryUser1(params) {
  return request(`/server/api/test/user?${stringify(params)}`);
}
 
export async function queryUser2(params) {
  return request(`/server/api//test/user?${params}`, {
    method: "POST"
  });
}

最后一步，修改配置config文件夹下的proxy.js:

至此前端部分就已经全部完成了。

五、后端部分编写

我这里采用的是spring boot，具体搭建顺序我这里就不做过多重复说明，请自行百度，也就几步操作，搭建完后，创建一个TestController控制器：

package com.myapp.lsj.controller;
 
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.util.HashMap;
import java.util.Map;
 
@RestController
@RequestMapping("api/test")
public class TestController {
    @RequestMapping("user")
    public Map<String, Object> user(String a, String b) {
        Map<String, Object> map = new HashMap<>();
        map.put("id", "1");
        map.put("userName", "张三");
        map.put("age", 18);
        map.put("studentNo", "201602010246");
        map.put("sex", "男");
        return map;
    }
}

六、运行结果效果：

由于我还在是初学阶段，在此记录一下自己的学习过程，其中还有许多需要优化的地方，接下来我会更新怎样去进行增删改操作，和大家一起进行学习，强烈建议：一定要先去认真看一遍es6语法，该框架采用的都是es6语法，比如：...、箭头函数等各自的用法，在看代码的过程中，不知道的语法点和写法，一定要先进行查询资料了解，这样更有利于理解代码。

欢迎来交流：1798274010@qq.com