最近帮老板做一个政府部门有关的小型 B/S 用户管理系统，做得累死了。有一些心得和 V 友分享
my101du · 2015-01-20 15:22:24 +08:00 · 5222 次点击这是一个创建于 3587 天前的主题，其中的信息可能已经有所发展或是发生改变。
情况：
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）
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）
 |
1
mkeith 2015-01-20 15:43:29 +08:00
你应该勇angular做这个滴
|
 |
2
zjgsamuel 2015-01-20 15:46:34 +08:00
整那么多radio、checkbox、textarea 看看眼花 能不能设计个excel 的模板 让他们填了 然后上传到网站 然后后台分析EXCEL数据源 展示汇总么~~ 脑洞大开可能和需求有些出入哈~
|
 |
3
hcymk2 2015-01-20 15:48:17 +08:00
对于复杂表单, 一个页面几十个表单元素，前端的人看着头大看。用户填写的时候，估计也会丢三拉四。
最好和甲方沟通下，在业务允许的范围类，拆分成几个页面，用next step 来引导，感觉这样效果会好点。 |
 |
4
PP 2015-01-20 15:49:23 +08:00 via iPad
直接用办公控件，费用估计在两三千块，再订制几个模板，允许管理员修改，提供预览、保存和提交功能。您不会是从头到尾自己写的吧？
|
 |
5
Felldeadbird 2015-01-20 15:51:59 +08:00
表单多确实不应该用太多JS去做了。验错搞死人啊。又累。特别是调试不方便
|
 |
6
my101du OP @zjgsamuel 呵呵，他们就是为了避免“人力收集、整理”，所以才想把以前通过传真/快递的word/excel化为web填写的。
|
|
8
my101du OP @PP 是啊。。。从头到尾写的，前后端代码。
这种“办公控件”，您是说IE上基于ActiveX？还是ASP.net的？对这块没有了解，求指教。。 |
 |
9
kanta 2015-01-20 16:10:24 +08:00
只是方便打印的话 填表那里就不需要word表格样式啦
|
|
10
PP 2015-01-20 16:16:55 +08:00 via iPad
@my101du 您把我问住了，我只记得是IE上的，细节还真不清楚，当时验收的几个B/S项目都是采用这种方式，我了解到的情况是金蝶的比较稳定，现在是什么状态我就不知道了，您可以搜一搜。
|
 |
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分钟以上而不保存数据 |
 |
12
leqoqo 2015-01-20 16:41:51 +08:00 1
1,拆分表单，例如：项目基本信息一张表单，下一步人员信息一张表单，
2，每张表单添加按钮 “暂存”，“提交”，暂存不进行数据验证， 3，word插入书签导入，或者制作excel表单模板导入。 |
 |
14
flash866 2015-01-20 17:08:49 +08:00
哥的经验，但凡是便宜或者加急的项目，都不适合太多的使用AJAX。AJAX看起来简单，不同的网络环境、不同的浏览器，实则很难控制，需要做强大的测试工作。
|
 |
15
jason52 2015-01-20 17:21:10 +08:00
@hcymk2 印象深刻是在找工作特别是外企的时候，密密麻麻的表格要填，中文填完了还要来一遍英文的，吐血！！
而且那时候海投各家都有一套系统，真是不厌其烦，一遍下来一个小时没了。终于中华英才，智联后来出了一键导入功能。 其中选择日期的控件极其不友好，不能搜索，不能智能感应，只能一个一个找。 而且一个页面信息太多，看了就让人望而生畏。 |
|
16
jason52 2015-01-20 17:25:15 +08:00
2. 复杂格式的word表格“变成”web
=== word有个域功能，如果最终目的只是为了打印的同一，应该分发word模板下去填写。或者做网站的时候不管word样式呈现，做到内容样式分离，后台抽取内容到你的word模板自动生成。 很明显你这里为了统一网站最终呈现出word打印效果，绕了一个很大的圈子。 |
 |
17
min 2015-01-20 19:40:51 +08:00
应该让用户下载excel或者word表格，填好上传，程序自动把数据读出来
|
 |
18
ming7435 2015-01-20 20:22:05 +08:00
我记得当年给某个机构做过一个项目，前后持续三年，呵呵。。。。。。。。。。。。。。
|
 |
19
Kabie 2015-01-21 13:09:04 +08:00
打印格式不一定要和显示格式一样…………
而且其实可以直接背景图片+绝对定位。。。。。。 |
Select Language