vue之后台管理系统遇到的几个痛点

时间:2022-02-26 16:45:52

杂七杂八的一些日总结

1、vue(最)合理的处理表单提交和初始化表单数据显示的方式

对于表单处理,繁琐的一个地方就是当出现多个下拉选择的表单框的时候,我们需要进行多次将选择的文本去换对应的id值的操作,然后传给后端。

对于表单中的选择框的数据格式,在获取数据时,后端应该直接返回id,而不是对应的文本,因为我们最终提交的时候传给后端的也是id,格式统一,更方便前端定义变量;对于简单的表单,我们只需要定义一个对象来保存从后端获取到的所有的表单数据(后端通常是会返回一个包含了所有表单数据的一个对象),在没有改变表单数据的情况下,我们可以直接向后端提交这个变量对象,对,这里要说的是,vue中对表单的处理,一定是面向的是一个对象,也就是说在初始化表单显示数据的时候,是对象点属性的格式来读数据,而不是,将表单中的值裸露出来读。统一定义成一个对象,这样方便我们通过vue中的watch来监听表单是否有被编辑过。

对于复杂一点的表单,比如同时有多个相同结构的表单,这种表单中有下拉选择框,这个时候,我们都是通过定义两个变量来处理表单,一个数组变量存表单的值,它包含将下拉选择框id的值换成了对应的文本的属性,另一个是一个对象,存表单的值,最终要提交到后端的。

2、检测表单是否有空值,有空值就不能提交表单。

考虑这种格式数据的情况,写一个健壮性的方法来判断,会省事很多。

	         let obj = {
classroom_id: "1",
classroom_name: "读政治家xxx",
detail_info2: [{
classroom_id: "1",
classroom_name: "读政治家xxx",
},
{
classroom_id: "1",
classroom_name: "读政治家xxx",
},
],
detail_info: {
classroom_id: "1",
classroom_name: "读政治家xxx",
classrooms: ["读政治家xxx","读政治家xxx","读政治家xxx"]
},
bg_url: "http:www.xxxx.com/pic/url"
};

3、每种选择框都封住成了组件,而每一个模块(版本大纲、每日内容、挑战配置)又是一个组件,像每日内容里面组件里面还有一个子组件。每当改变一个表单框时,我需要通过this.$emit 三层才能将数据传到最外层父组件去处理逻辑,当同时有多个相同的表单框出现在同一个表单里的时候,还需要去区分是哪个表单。

单纯的使用组件,很好的将样式复用了,让我们少写一些css,然后对于逻辑处理上,仿佛又变得繁琐了一些。

2、3是提出的问题,待优化~

vue之后台管理系统遇到的几个痛点