商务项目中模块开发总结

        近期在一个商务项目中，负责了一个导入的模块开发，从后台模型的设计到最终编码的开发在一定期限内完成，单从Excel导入来说，实现的手段有很多种，例如常用的POI、JXL等等都可以很容易的实现，两者的优缺点可参考http://yuqun888666.blog.163.com/blog/static/79175267200958111628873/

下面说说自己的整个过程，首先设计后台模型，因为商务项目尽量做得灵活、可配置，所以后台模型对属性验证方面采取了可配置的正则验证设计，表之间级联关系采用常用的主外键关联，一方面优化查询，另一方面对于多个字段来说，count(key)相比count(*)优化，综合设计考虑后，后台模型参考以上几点设计要求基本确定完成了。

        后台设计完之后，开始处理前台开发，首先和很多Web工程类似，都是左侧通过类似树形菜单，然后在右侧根据配置的超链接，显示相应的模块信息，在Excel文件批量导入中，通过一系列的级联操作、单选切换、自定义选择后，由用户可以动态勾选相应的导入信息，对于一系列操作规范、顺序校验后，动态拼接插入Sql，放到一个事务中，然后执行插入操作，基本流程如此......首先为了用户友好，前台采用Ajax的异步方式，这样在用户导入无论成功与否可以通过回调的方式，即时的给用户响应，如果错误信息，用户可以知道某行某列以及错误的原因等等(并且之前说了这些信息都是配置上的，方便了很多的操作)，对于提交操作，由于很多的级联动态信息，所以如果Ajax参数传递方式，参数会有很多变量，所以采用了Ajax Form方式的异步提交，这里使用了Ajax的Form插件，对于回显的时候，由于Tab方式原界面还是保存，界面刷新效果不佳，所以采取的措施是通过弹出层的方式，然后通过动态添加tab，这里弹出层的方式采用了Ajax的一个artDialog插件，下面是两个插件的总结:

 一、jQuery Form Plugin 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要  的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。

       例如:在页面中添加一个Form

    <form id="myForm" action="comment.action" method="post">
       Name: <input type="text" name="name" />
       Comment: <textarea name="comment"></textarea>
       <input type="submit" value="Submit" />
    </form>

       引入Jquery和Form Plugin Javascript后，在JS中如下提交方式即可:

     <script type="text/javascript">
        // wait for the DOM to be loaded
        $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
            $('#myForm').ajaxForm(function() {
                alert("*********");
            });
        });
    </script>

       补充:除了ajaxForm、ajaxSubmit方式外，还有formSerialize方法即将表单序列化、fieldSerialize即将Form中部分元素序列化、resetForm表单重置、clearForm清空form等方法...

ajaxForm 和 ajaxSubmit 都支持大量的可选参数，它们通过可选参数项对象传入。可选参数项对象只是一个简单的 JavaScript对象，里边包含了一些属性和一些值:

target

      用server端返回的内容更换指定的页面元素的内容。 这个值可以用jQuery 选择器来表示, 或者是一个jQuery 对象，    一个 DOM 元素。缺省值： null

url

表单提交的地址。
缺省值： 表单的action的值

type

表单提交的方式，'GET' 或 'POST'.
缺省值： 表单的 method 的值 (如果没有指明则认为是 'GET')

beforeSubmit

表单提交前执行的方法。这个可以用在表单提交前的预处理，或表单校验。如果'beforeSubmit'指定的函数返回false，则表单不会被提交。 'beforeSubmit'函数调用时需要3个参数：数组形式的表单数据，jQuery 对象形式的表单对象，可选的用来传递给ajaxForm/ajaxSubmit 的对象。 数组形式的表单数据是下面这样的格式：

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

缺省值： null

success

当表单提交后执行的函数。 如果'success' 回调函数被指定，当server端返回对表单提交的响应后，这个方法就会被执行。 responseText 和 responseXML 的值会被传进这个参数 (这个要依赖于dataType的类型).

缺省值： null

dataType

指定服务器响应返回的数据类型。其中之一: null, 'xml', 'script', 或者 'json'. 这个 dataType 选项用来指示你如何去处理server端返回的数据。 这个和 jQuery.httpData 方法直接相对应。 下面就是可以用的选项：

'xml': 如果 dataType == 'xml' 则 server 端返回的数据被当作是 XML 来处理， 这种情况下'success'指定的回调函数会被传进去 responseXML 数据

'json': 如果 dataType == 'json' 则server端返回的数据将会被执行，并传进'success'回调函数

'script': 如果 dataType == 'script' 则server端返回的数据将会在上下文的环境中被执行

缺省值： null

如下例子: 
          var options = {
                target:     '#divToUpdate', 
                url:        'comment.php',
                success:    function() {
                alert('*********');
                 }
          };          $('#myForm').ajaxForm(options); 二、artDialog弹出层插件:artDialog是一个轻巧且高度兼容的javascript对话框组件 优点:    1、自适应内容: 无需预设高宽, 对话框与按钮自适应消息内容的大小
   2、文本智能对齐: 如果设置了对话框宽度，短文本居中对齐, 而长文本居左对齐
   3、容错能力: 如果定义的宽度高度小于内容大小不会出现错位
   4、界面机制: 九宫格布局, 样式钩子与结构丰富, 可定制自适应皮肤
   5、跨浏览器支持: 支持 Firefox, Chrome, Safari, IE6+, Opera ..
   6、轻巧: 不依赖第三方库, js压缩后10kb左右
   7、IE6无抖动静止定位: 在 IE6 下可实现与现代浏览器一样完美无闪动静止定位效果
   8、定位修正: 使用自定义坐标的时候智能修正位置, 不会超出边界
   9、拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制 使用方法: 使用的方式类似Jquery的Dialog，导入JS文件后，在界面中配置下参数如下:

<script>
// 设置对话框全局默认配置
(function(){
    var d = art.dialog.defaults;
    
    // 按需加载要用到的皮肤，数组第一个为默认皮肤
    // 如果只使用默认皮肤，可以不填写skin
    d.skin = ['default', 'chrome', 'facebook', 'aero'];
    
    // 支持拖动
    d.drag = true;
    
    // 超过此面积大小的对话框使用替身拖动
    d.showTemp = 100000;
})();
</script>

注:在IE7以下版本对于artDialog弹出的对话框会不起作用，解决方法参考http://hi.baidu.com/ferry2004/blog/item/8dd068df58df2f044954039b.html

常用方法如下:

名称描述art.dialog.alert(content)art.dialog.confirm(content, yesFn, noFn)art.dialog.prompt(content, yesFn, value)art.dialog.open(url, options)art.dialog.close()art.dialog.parentart.dialog.tips(content, time)art.dialog.load(url, options, cache)art.dialog.get(id, win)

警告

确认

提问

弹窗（iframe）

open方法创建的iframe里可用此关闭对话框

open方法创建的iframe里可用此获取来源窗口的window对象

短暂提示

Ajax加载内容

获取指定ID对话框的API. 第一个参数为ID，第二个默认当前window