V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
my101du
V2EX  ›  职场话题

最近帮老板做一个政府部门有关的小型 B/S 用户管理系统,做得累死了。有一些心得和 V 友分享

  •  1
     
  •   my101du · 2015-01-20 15:22:24 +08:00 · 5236 次点击
    这是一个创建于 3595 天前的主题,其中的信息可能已经有所发展或是发生改变。
    情况:

    1. 这个系统和公司的业务没有一点点联系,是某个政府有关单位的需求。

    2. 因为老板同意我远程在老家工作(兼顾帮忙带带小孩),有着感谢老板、老板要求就尽力执行的想法,看了看最初的需求(有中间人转达),觉得很简单,7、8天就可以搞定。

    3. 该单位对接人发了8张excel/word给我……该对接人文科背景,但思路清晰,描述起需求来简单明了(赞),我知道是要做一个 B/S 结构的在线填表,然后对数据进行一些条件统计(预计300人的用户系统,用户群以40-50岁企业家为主)

    4. 好不容易理解完毕里面 100+ 从没见过的术语、理清条目之间的关系后,建了数据表、伪代码(MySQL+ThinkPHP+BootStrap3)

    5. 要求“填表页面要和word排版一样”(就是那种非常多复杂表格的),吐血三升。终于用直接拷贝word表格到dreamweaver的设计模式里实现……

    6. 中间这个表格变动若干次和扩充功能(这个很正常……)。于是每次调整,就是从 100+ 的input radio checkbox等不断地查找、复制、粘贴、改名……

    7. 因为html结构变动太大,没有使用PHP将数据直接填充到html的方式,而是使用ajax的方式加载json格式的用户数据,自动填充到表单元素里 类似 $("input[name='" + json[key] + "']").val(json[value])

    8. 写了很多处理“关系”的代码,例如某某 radio 会触发另外若干input失效;
    还有就是json的序列化和反序列化。(例如家庭成员可以自己增加到N个,提交后序列化,然后加载到浏览器又反序列化,并根据数量自动创建新的 input 元素)


    前后1个半月过去了,终于上线了。但是评价很不好,对接人抱怨说自己都被用户的投诉电话烦死了。


    出现很多问题,以及应对:

    1. 有人说辛辛苦苦填了一个小时,提交后“提交成功”,再刷新,数据全部不见了。
    检查发现:提交后刷新页面,由于网络问题,ajax加载缓慢,input里还是空白的时候,又点了一次提交。 这个在ajax请求里加上了判断解决,只有得到返回数据,才会把表单显示出来。

    2. 用了jQuery的ajaxSubmit插件,解决了多个表单依次提交的问题。(因为这个表格大概分4个类别,每个类别下有几十个input),但是无法在他们后面再添加一个ajax请求(第二个会无效),最后通过修改提交函数,为其他的ajax请求设置一个if条件来处理。

    3. 在那种可以“自由增加数量”的输入框里,由于低估了用户填写文本的欲望,导致提交到MySQL,被varchar(2000)字段的限制截断了。 最后某个json的值解析的时候报错,导致整个后续的数据处理进程都失败。 后来通过调整json数据解析的顺序和增加容错处理解决。

    4. $("input:hidden[name='xxxx']").val(yyyy),会把 radio的value全部改掉(这个隐藏得好深),然后强行把 <input type=hidden /> 改成 <input type=text class=hide />才避免这个问题


    总结一下:

    1.javascript是一把双刃剑,用不好还是别用了,会砍到自己(比如我这样的渣js技术),直接用PHP+HTML,可以更好地检查到错误

    2. 自己以为的“为了用户方便”添加的一些功能特性,其实并没有必要。稳稳当当地实现功能,操作不方便一点都没什么的。

    3. 不要乐观估计任何一个小事情所消耗的时间。

    4. 以后打死也不干这类事情了。投入时间和产生效益不成正比。


    不知大家有木有一些很好的办法来处理这些问题?
    1. 大量复杂表单元素的管理(可能有的会需要复制多个),有图形化的么? 直接写html眼花
    2. 复杂格式的word表格“变成”web
    3. 少写代码且不出错,实现数据自动填充到对应的input里(包括radio、checkbox、textarea)
    19 条回复    2015-01-21 13:09:04 +08:00
    mkeith
        1
    mkeith  
       2015-01-20 15:43:29 +08:00
    你应该勇angular做这个滴
    zjgsamuel
        2
    zjgsamuel  
       2015-01-20 15:46:34 +08:00
    整那么多radio、checkbox、textarea 看看眼花 能不能设计个excel 的模板 让他们填了 然后上传到网站 然后后台分析EXCEL数据源 展示汇总么~~ 脑洞大开可能和需求有些出入哈~
    hcymk2
        3
    hcymk2  
       2015-01-20 15:48:17 +08:00
    对于复杂表单, 一个页面几十个表单元素,前端的人看着头大看。用户填写的时候,估计也会丢三拉四。
    最好和甲方沟通下,在业务允许的范围类,拆分成几个页面,用next step 来引导,感觉这样效果会好点。
    PP
        4
    PP  
       2015-01-20 15:49:23 +08:00 via iPad
    直接用办公控件,费用估计在两三千块,再订制几个模板,允许管理员修改,提供预览、保存和提交功能。您不会是从头到尾自己写的吧?
    Felldeadbird
        5
    Felldeadbird  
       2015-01-20 15:51:59 +08:00
    表单多确实不应该用太多JS去做了。验错搞死人啊。又累。特别是调试不方便
    my101du
        6
    my101du  
    OP
       2015-01-20 15:56:23 +08:00
    @zjgsamuel 呵呵,他们就是为了避免“人力收集、整理”,所以才想把以前通过传真/快递的word/excel化为web填写的。
    my101du
        7
    my101du  
    OP
       2015-01-20 15:56:59 +08:00
    @hcymk2 不行的,需求方要求“和word格式一致”,便于打印出来盖章
    my101du
        8
    my101du  
    OP
       2015-01-20 15:58:41 +08:00
    @PP 是啊。。。从头到尾写的,前后端代码。
    这种“办公控件”,您是说IE上基于ActiveX?还是ASP.net的?对这块没有了解,求指教。。
    kanta
        9
    kanta  
       2015-01-20 16:10:24 +08:00
    只是方便打印的话 填表那里就不需要word表格样式啦
    PP
        10
    PP  
       2015-01-20 16:16:55 +08:00 via iPad
    @my101du 您把我问住了,我只记得是IE上的,细节还真不清楚,当时验收的几个B/S项目都是采用这种方式,我了解到的情况是金蝶的比较稳定,现在是什么状态我就不知道了,您可以搜一搜。
    mcfog
        11
    mcfog  
       2015-01-20 16:17:20 +08:00   ❤️ 1
    做了两年填表格系统的部分经验

    http://press.mcfog.wang/2013/06/dsl-style-javascript/

    补充一些point

    + 验证逻辑最好**完全**在后台,ajax捅到后台拿着错误画回前台。不要写逻辑等价的javascript和php,不要写逻辑等价的php和javascript
    + 局部引入js模版渲染
    + 注意数据在DOM和JS内存中的双向绑定,可以看看knockoutjs或vuejs找找经验(千万别angular)
    + 考虑拆分步骤的可行性,或者保存草稿功能,不要让用户持续在一个页面工作30分钟以上而不保存数据
    leqoqo
        12
    leqoqo  
       2015-01-20 16:41:51 +08:00   ❤️ 1
    1,拆分表单,例如:项目基本信息一张表单,下一步人员信息一张表单,
    2,每张表单添加按钮 “暂存”,“提交”,暂存不进行数据验证,
    3,word插入书签导入,或者制作excel表单模板导入。
    my101du
        13
    my101du  
    OP
       2015-01-20 16:55:18 +08:00
    @mcfog
    @leqoqo 非常感谢 都是很好的建议!
    flash866
        14
    flash866  
       2015-01-20 17:08:49 +08:00
    哥的经验,但凡是便宜或者加急的项目,都不适合太多的使用AJAX。AJAX看起来简单,不同的网络环境、不同的浏览器,实则很难控制,需要做强大的测试工作。
    jason52
        15
    jason52  
       2015-01-20 17:21:10 +08:00
    @hcymk2 印象深刻是在找工作特别是外企的时候,密密麻麻的表格要填,中文填完了还要来一遍英文的,吐血!!

    而且那时候海投各家都有一套系统,真是不厌其烦,一遍下来一个小时没了。终于中华英才,智联后来出了一键导入功能。

    其中选择日期的控件极其不友好,不能搜索,不能智能感应,只能一个一个找。

    而且一个页面信息太多,看了就让人望而生畏。
    jason52
        16
    jason52  
       2015-01-20 17:25:15 +08:00
    2. 复杂格式的word表格“变成”web
    ===

    word有个域功能,如果最终目的只是为了打印的同一,应该分发word模板下去填写。或者做网站的时候不管word样式呈现,做到内容样式分离,后台抽取内容到你的word模板自动生成。

    很明显你这里为了统一网站最终呈现出word打印效果,绕了一个很大的圈子。
    min
        17
    min  
       2015-01-20 19:40:51 +08:00
    应该让用户下载excel或者word表格,填好上传,程序自动把数据读出来
    ming7435
        18
    ming7435  
       2015-01-20 20:22:05 +08:00
    我记得当年给某个机构做过一个项目,前后持续三年,呵呵。。。。。。。。。。。。。。
    Kabie
        19
    Kabie  
       2015-01-21 13:09:04 +08:00
    打印格式不一定要和显示格式一样…………

    而且其实可以直接背景图片+绝对定位。。。。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2418 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 02:10 · PVG 10:10 · LAX 18:10 · JFK 21:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.