用Vue+elmentUI+mock模拟数据实现简单的增删改查

前言:

最近花了一点时间写看一个用mock模拟后端数据展示在前端页面并做简单的增删改查demo
也是现学现卖,有不足的地方,欢迎大家指正。

功能:

主页面如下图所示

首先是查询功能: 同时也包括分页的功能,这里为了看得清楚,我是将每页固定显示5条
在这里插入图片描述
在这里插入图片描述

查看某条信息的详情(这里没有做修改,但实际上修改就是查看和添加的结合,具体可以再变通吧)
在这里插入图片描述
然后就是删除功能:
在这里插入图片描述

最后是添加功能: 添加功能,每一步操作都是一个卡片,是在按钮上设置显示还是隐藏,达到如下动图效果

在这里插入图片描述

里面有一些问题是,mock模拟数据做查询的时候,我没有做模糊查询,添加一条新的记录它的id是当前列表长度+1,这样其实会有一个问题存在,就是一共100条,如果先删除一条,在添加一条,那么新添加的一条id为100,其实id可以做成随机的,就像我添加中展示的收据编号是随机生成的,不是输入的。

mock模拟后台数据,通过接口进行数据传递的实现思路大致如下:(拿收据类型举例)
在这里插入图片描述
为了实现多类型,我是用mock模拟随机造出1-7数字,每个数字编号代表一种类型,传递给前端后,按照编号匹配对应的name即可:
下图是用mock模拟一百条数据:可以看到我的收据类型、状态和支付方式都是用数字代替的
在这里插入图片描述
然后前端这样进行匹配:
在这里插入图片描述
在这里插入图片描述
项目源码已经上传到github上:感兴趣的伙伴可以拉下来看,或者在我写的基础上做修改~
https://github.com/IsMrChen/Practice/tree/vuetest
注意分支哦~
在这里插入图片描述

如果文章对你有帮助,不要忘了给我点个赞吼( ̄▽ ̄)~
欢迎关注我的微信公众号:松鼠技术站

Logo

前往低代码交流专区

更多推荐