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

2015-01-20 15:22:24 +08:00
 my101du
情况:

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

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

补充一些point

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

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

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

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

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

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

而且其实可以直接背景图片+绝对定位。。。。。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/163852

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX