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 交互到服務端處理流程是這樣的：
- UI 組件交互操作；
- 調用 model 的 effect；
- 調用統一管理的 service 請求函數；
- 使用封裝的 request.ts 發送請求；
- 獲取服務端返回；
- 然後調用 reducer 改變 state；
- 更新 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語法，比如：...、箭頭函數等各自的用法，在看代碼的過程中，不知道的語法點和寫法，一定要先進行查詢資料瞭解，這樣更有利於理解代碼。
歡迎來交流：[email protected]