前言：
之前有一段时间做过react + antd的项目，还挺熟，但是现在在公司一直用的是vue，随着时间的推移，记忆也慢慢消失，所有趁工作之余的休息时间来写了这个小例子，实现本地起服务，调本地mongo数据，当然，你也可以放线上或者VPS上预览。[demo](http://144.34.148.126:10000/) ;
另外也有一个vue+ element 的项目 [GitHub](https://github.com/chengheai/mongodb-vue)
[完整代码](https://github.com/chengheai/mongo-react) ;欢迎???? star follow
如有问题请在GitHub上留言，谢谢！
效果图
登录
- 使用sessionStorage在登录的时候setItem用户名，然后在components下Header.jsx去getItem用户名
主要代码
handleSubmit = (e) => {
const { dispatch } = this.props;
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
dispatch(routerRedux.replace('/list'));
console.log('Received values of form: ', values);
sessionStorage.setItem('guest', values.userName)
}
});
}
添加与编辑，添加图片
- 编辑与添加共用一个抽屉，加一个types用来区别是编辑还是添加
主要代码
handleSubmit = (e) => {
let that = this;
const { dispatch } = this.props;
const { types, editForm } = this.state;
e.preventDefault();
if(types === 2){
this.props.form.validateFields((err, values) => {
values = Object.assign(editForm, values);
if (!err) {
// message.loading('正在添加...');
dispatch({
type: 'heroModel/put_heros',
payload: values,
callback: (res) => {
message.success('修改成功');
this.setState({
visible: false,
editId: ''
});
this.props.form.resetFields();
that.getData();
}
})
}
});
} else {
this.props.form.validateFields((err, values) => {
if (!err) {
// message.loading('正在添加...');
dispatch({
type: 'heroModel/post_hero',
payload: values,
callback: (res) => {
message.success('添加成功');
this.setState({
visible: false,
});
this.props.form.resetFields();
that.getData();
}
})
}
});
}
}
分页与删除
主要代码
server.js
router.get("/hero", (req, res) => {
// console.log('========',req.query.pageSize)
// console.log('+++++++++++++',Hero.count())
var total = 0;
Hero.count({}, function(err, count){
if(err) return;
total = count;
res.set('x-header', total)
})
Hero.find({})
.limit(Math.min(parseInt(req.query.pageSize) || 10, 100))
.skip(parseInt(req.query.currentPage -1) * req.query.pageSize || 0)
.sort({ updatedAt: -1 })
.then(heros => {
res.json(heros);
})
.catch(err => {
res.json(err);
})
});
list.js
handleTableChange = (pagination, filters, sorter) => {
console.log(pagination);
// let that = this;
const { pageSize, current } = pagination;
const { dispatch } = this.props;
const { payload } = this.state;
this.setState({
pagination: {
currentPage: current,
pageSize,
},
});
const query = {
...payload,
pageSize,
currentPage: current
};
dispatch({
type: 'heroModel/get_heros',
payload: query,
callback: res => {
this.setState({
tableData: res.data,
// eslint-disable-next-line
total: parseInt(res.headers['x-header'])
})
}
});
}