前端：Ant-Design，大部分使用了ES6的寫法
後端：Vertx
前端可以分爲幾個部分：
-
index.js 渲染頁面
-
model.js 命名空間與方法的調用等
-
server.js 請求路徑
-
_mock.js 可供測試數據(不是必要的)
後端使用註解的方式進行訪問。
舉例：（後端模擬表格數據，傳到前端，渲染頁面；點擊編輯按鈕，傳入參數到後臺，後臺返回成功提示。）
1.後端模擬表格數據，先要觀察Ant-Design表格中的數據格式是Map<String,Object>其中必須有key
//如果當前類中的所有方法都是返回AjaxResult，註解方法則可以修改爲RestController
@Controller
@RequestMapping("/warn")
public class WarningRepositoryController extends BaseController {
//這裏返回的類型是AjaxResult是封裝的一個公用方法，其實就是返回一個Object
@ResponseBody
@RequestMapping(value = "/index",isVerifyAuth = false)
public AjaxResult index(){
Map<String,Object> result = new HashMap<String,Object>();
List<Map> list = new ArrayList<>();
Map<String,Object> map1 = new HashMap<String,Object>();
map1.put("id",1);
map1.put("key",1);
map1.put("name","監測項1");
map1.put("type","告警類型1");
map1.put("number","0");
list.add(map1);
Map<String,Object> map2 = new HashMap<String,Object>();
map2.put("id",2);
map2.put("key",2);
map2.put("name","監測項2");
map2.put("type","告警類型2");
map2.put("number","0");
list.add(map2);
result.put("data",list);
return AjaxResult.successData(result);
}
@ResponseBody
@RequestMapping(value = "/editIndex", isVerifyAuth = false)
public AjaxResult editIndex(Integer id ,String reason,String method){
System.out.println(id + " " + reason +" " + method);
return success();
}
}
//其中key爲必須，不然到前端console會報錯
2.當前已經可以將數據傳到前端，那麼就要將數據渲染到頁面。
service.js
import request from '@/utils/request';
export async function index() {
return request('/api/index',{
method: 'post'
})
}
export async function editIndex() {
return request('/api/editIndex',{
method: 'post'
})
}
//訪問方法index
model.js
import { message } from 'antd';
import {editIndex,index} from './service';
const Model = {
namespace: 'test',
state: {
indexData:[] //聲明放後端表格數據變量
},
reducers: {//方法的回調
indexList(state,action) { //更新後臺返回的數據到state中
return{
...state,
indexData.payload.data
};
}
},
effects: {
*getIndexData(_,{call,put}){
const res = yield call(index);//調用後臺接口
yield put({
type: 'indexList', //這裏的type與回調方法中的方法名要一致
payload: res.data
});
},
*editIndexById({ payload },{ call}){//payload爲參數
const res = yield call(editIndex, payload);
console.log(res);
if(res.code === 0){
message.success("修改成功");
}else{
message.error("修改失敗");
}
}
}
};
export default Model;
index.jsx
import React from 'react';
import { Table, Card,Button,Input } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { router } from 'umi';
import { connect } from 'dva';
import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined";
class IndexModel extends React.Component {
constructor(props) {
super(props);
this.state=({
indexData:[]
})
}
state = {
createModalVisible: false,//點擊編輯按鈕，控制model頁面是否隱藏
setModalValues: false,//是否傳入默認值到編輯頁面
dataSource:[] //當前頁面存儲表格數據變量
};
componentDidMount() {
//注意務必先使用dva中的connect建立連接，否則是無法調用props中的dispatch法的
this.props.dispatch({
//調用model中的方法發起請求，（model的命名空間+方法名）
type: 'test/getIndexData'
});
}
componentWillReceiveProps(nextProps){
//第一次能獲取到modals數據的地方,
//這個生命週期的nextProps能獲取到你將要綁定進入props的companyInfo
// console.log(nextProps.repositoryData);
//同樣，你可以把companyInfo，映射到你這個類的state中去，通過使用this.setState方法
this.setState({
dataSource:nextProps.indexData
})
}
render() {
const columns = [
{
title: '序號',
dataIndex: 'id',
key: 'id',
},
{
title: '監測項',
dataIndex: 'name',
key: 'name'
},
{
title: '告警類型',
dataIndex: 'type',
key: 'type',
},
{
title: '項目',
dataIndex: 'number',
key: 'number',
},
{
title: '操作',
dataIndex: 'option',
valueType: 'option',
render={(text, record) => (
<span>
<a
onClick={() => {
this.setState({ createModalVisible: true });//顯示modal頁面
this.setState({ setModalValues: record });//傳入表格一行的數據到新頁面中
}}
>
編輯
</a>
<Divider type={'vertical'} />
<a>
刪除
</a>
</span>
)},
},
];
return (
<div>
<PageHeaderWrapper title="設置">
<Card>
<Table columns={columns} dataSource={this.state.dataSource}/> //表格賦值
</Card>
</PageHeaderWrapper>
//爲true顯示頁面
{this.state.createModalVisible ? (
<ModalPage
// 編輯解決方案返回json字符串，需要轉換爲對象
onSubmit={async value => {
console.log("value" + value);
dispatch({
type: 'test/editIndexById',
payload : value
});
this.setState({ createModalVisible: false });
this.setState({ setModalValues: {} });
}}
onCancel={() => {
this.setState({ createModalVisible: false });
this.setState({ setModalValues: {} });
}}
createModal={this.state.createModalVisible}
values={this.state.setModalValues}
/>
) : null}
</div>
);
}
}
//這裏的index爲model.js中的命名空間，必須是唯一的
//indexData是model.js中聲明的變量
export default connect(({test}) => ({
test,indexData:test.indexData
}))(IndexModel);
3.點擊編輯，傳參數到後端，後端打印參數後返回成功到前端響應。
modal.jsx
import React from 'react';
import { Button, Drawer, Form, Input } from 'antd';
class ModalPage extends React.Component {
constructor(props) {
super(props);
}
formRef = React.createRef();
state = { reason: '', method: '' };
handleName = e => {
this.setState({reason:e.target.value});
};
handleType = e => {
this.setState({method:e.target.value})
};
render() {
return (
<div>
<Drawer
title="Basic Drawer"
placement="right"
maskClosable={false}
closable={false}
visible={this.props.createModal}
>
<Form ref={this.formRef} layout="vertical" hideRequiredMark>
<Form.Item
label="問題原因"
name="reason"
>
<Input
type="text"
placeholder="請輸入問題原因"
defaultValue={this.props.values.reason}
onChange={e => this.handleName(e)}
/>
</Form.Item>
<Form.Item label="解決方案" name="method">
<Input
type="text"
placeholder="請輸入解決方案"
defaultValue={this.props.values.method}
onChange={e => this.handleType(e)}
/>
</Form.Item>
</Form>
<Button style={{ marginRight: 8 }} onClick={this.props.onCancel}>
Cancel
</Button>
<Button
type="primary"
onClick={() => {
this.props.onSubmit(
'{"id":'+this.props.values.id+',"reason":"' + this.state.reason + '","method":"' + this.state.method + '"}',
);
}}
>
Submit
</Button>
</Drawer>
</div>
);
}
}
//當前頁面的this.props.values都爲父頁面index.js點擊編輯record中的值
//onCancel、onSubmit 都爲父頁面的方法
//因爲前段傳入到後端的參數爲json格式，所以這裏可以直接拼接一個字符串返回到父頁面進行處理
export default ModalPage;
現在展示一下效果圖：
console中的數據 
後端打印的參數值 
後端返回成功的打印，與頁面的提示
