前端：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中的数据 
后端打印的参数值 
后端返回成功的打印，与页面的提示
