最近帮老板做一个政府部门有关的小型 B/S 用户管理系统,做得累死了。有一些心得和 V 友分享 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
my101du
V2EX    职场话题

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

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

    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     Solana     5555 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 29ms UTC 07:21 PVG 15:21 LAX 00:21 JFK 03:21
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86