前言:
之前有一段时间做过react + antd的项目,还挺熟,但是现在在公司一直用的是vue,随着时间的推移,记忆也慢慢消失,所有趁工作之余的休息时间来写了这个小例子,实现本地起服务,调本地mongo数据,当然,你也可以放线上或者VPS上预览。
线上demo
另外也有一个vue+ element 的项目 GitHub
点击获取完整代码 ;欢迎? 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'])
})
}
});
}