杂七杂八的一些日总结

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之后台管理系统遇到的几个痛点的更多相关文章

  1. vue+element-ui后台管理系统模板

    vue+element-ui后台管理系统模板 前端:基于vue2.0+或3.0+加上element-ui组件框架 后端:springboot+mybatis-plus写接口 通过Axios调用接口完成 ...

  2. vue重构后台管理系统调研

    Q4要来了,我来这家公司已经一个季度了,通过对公司前端框架的整体认识,对业务的一些认识,发现,这些东西也都是可以重构,无论是v2,还是v3的代码. 首先就要那后台管理来开刀来,现有的技术框架就是php ...

  3. vue开发后台管理系统小结

    最近工作需要用vue开发了后台管理系统,由于是第一次开发后台管理系统,中间也遇到了一些坑,想在这里做个总结,也算是对于自己工作的一个肯定.我们金融性质的网站所以就不将代码贴出来哈 一.项目概述 首先工 ...

  4. 从零开始搭建vue+element-ui后台管理系统项目到上线

    前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...

  5. vue开发后台管理系统有感

    使用vue开发后台近一个月,今天终于完成得差不多了,期间也遇到很多的问题,所以利用现在的闲暇时间做个总结 使用element-ui基础,这次使用了vue-element-admin(github地址) ...

  6. vue写后台管理系统问题概述和解决方案

    一个不错的Demo; http://xmall.exrick.cn/#/home 源码:https://gitee.com/Exrick/xmall-front/blob/master/src/pag ...

  7. vue从入门到女装??:从零开始搭建后台管理系统(二)用vue-docute生成线上文档

    教程 vue从入门到女装??:从零开始搭建后台管理系统(一)安装框架 一个系统开发完成了总要有操作说明手册,接口文档之类的东西吧?这种要全部纯手写就很麻烦了,可以借助一些插件,比如: vue-docu ...

  8. [转载]Vue 2.x 实战之后台管理系统开发(一)

    2. 开发前须知 我的后台管理系统项目运用了如下框架/插件: Vue 2.x —— 项目所使用的 js 框架,我所使用的版本是:2.1.10 vue-router 2 —— Vue 2.x 配套路由, ...

  9. 基于VUE实现的新闻后台管理系统-三

    开始coding啦 ¶分析项目 根据展示效果我们可以分析出,Web页面有两个,一个用于登录,一个用于系统内容控制,我们分别将其命名为Login和Cms,然后进行路由配置. 在src/page下新建Lo ...

随机推荐

  1. visual studio + opencv + contrib

    经过一天的奋战,终把opencv给用起来了.我是用的工具是vs2017+opencv3.3 上午想用mingw+opencv,结果查了很多资料说gcc不支持opencv.我感觉很奇怪,支不支持以后再说 ...

  2. python------面向对象介绍之多态实例

    一. 多态 一种接口,多种实现. 多态性(polymorphisn)是允许你将父对象设置成为和一个或更多的他的子对象相等的技术,赋值之后,父对象就可以根据当前赋值给它的子对象的特性以不同的方式运作. ...

  3. zabbix怎么把英文界面换成中文

    虽然能勉勉强强能看懂大部分英文,但感觉还是直接换中文方便上手一点

  4. openresty 集成lua-resty-mail +smtp2http 扩展灵活的mail 服务

    lua-resty-mail 是一个不错的openresty mail 扩展,我们可以用来进行邮件发送,支持附件功能 smtp2http 是一个smtp 服务,可以将smtp 请求数据转换为http ...

  5. Gravitational Teleport docker-compose简单运行

    Gravitational Teleport 可以作为堡垒机进行使用,为了测试方便使用docker-compose 运行一个all in one 的demo 备注: 官方提供的docker-compo ...

  6. Big-endian/Little-endian, LSB/MSB

    Least significant byte (LSB) Most significant byte (MSB) Big-endian machines store the most-signific ...

  7. PHP 统计一维数组value同样的元素的个数num,并将其转化为下标为数字,值是value和num的二维数组

    近期做一个项目.从数据库查询某个字段得到一个数组key是数字值是channel的一维数组$res,现须要将这个数组变成键是数字值是channel和num(num为同样channel的数量,默觉得0). ...

  8. day 26 网络通讯流程 初识socke

    一. *** C/S架构:客户端(client)/服务端(server)架构, B/S架构:浏览器(browser) / 服务端(server)架构 软件cs架构:浏览器,qq,微信,陌陌等等 硬件c ...

  9. Mysql主从同步问题汇总

    data-1-1主机是master,data-1-2是slave Last_IO_Errno: 1236 slave查看show slave status\G; 显示Last_IO_Errno: 12 ...

  10. TypeScript 之 类型推导

    https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Type%20Inference.html 类型推导:发生在初始化变 ...