二11、【.Net开源框架】EFW框架Web前端开发之目录结构和使用FireBug调试方法

回《【开源】EFW框架系列文章索引》       

EFW框架源代码下载V1.2：http://pan.baidu.com/s/1hcnuA

EFW框架实例源代码下载：http://pan.baidu.com/s/1o6MAKCa

 

       前言：前面多章对EFW框架的核心类库做了详细说明，接下来几章将对框架中的前端及界面层功能进一步讲解，前端分为两个部分Web前端和Winform前端，Web前端主要是在Web系统中使用，就是编写Html代码和JS代码开发网页界面，框架推荐的是JqueryEasyUI做为界面框架；Winform前端在Winform（C/S）系统与WCF(C/S/S)系统中使用，使用DotNetBar2控件开发界面，后来为了知足业务功能需求在此基础上开发了一套本身的自定义控件；

本章从Web界面项目开始入手，包括项目的目录结构与JS代码利用firebug如何进行调试；会详细分析项目中的每一个目录包括的代码文件以及为何这么划分，有什么好处；

本文要点：

1.系统的完整目录结构说明

2.Conifg配置文件目录

3.ModulePlugin业务功能模块目录

4.WebPlugin界面组件目录

5.利用firebug如何调试系统

1.系统的完整目录结构说明

 

开发一个Web系统只须要两个项目便可，包括Books项目（逻辑层代码）与EFWWeb项目（界面层代码），Web控制器、ObjectModel、Entity和Dao的代码都放在Books项目中，并不单独拆分红项目；EFWWeb项目主要两部份内容，ModelPlugin业务模块插件和WebPlugin组件插件；

业务界面代码都放在ModelPlugin目录中，按模块划分，模块中的代码文件又分为aspx文件盒js文件，ModelPlugin目录中内置了框架中的基础功能，分为权限管理、报表管理、消息管理和基础数据；

Web组件功能都放在WebPlugin目录中，按组件划分，框架内置了一些经常使用的组件有Jquery、JqueryEasyUI、FusionCharts、ReportAll、JqueryMobile等；能够把你收集的web组件或本身开发的放在此目录便可；业务模块要使用的直接引用web组件的js文件就能够了；

总的来讲为何要把项目结构与文件目录都设计得这么少，都是为了让咱们看了系统源代码第一印象就以为很是简单、清晰，不会有那种打开解决方案就加载几十个项目，看着就怕了；

2.Conifg配置文件目录

Web系统的配置文件除了Web.Config，其余的都放在Config目录中；为了在开发中方便在解决方案中另外建了一个Config文件夹，并把Web系统的全部配置文件都添加到此文件夹中，这样咱们就很方便找到配置文件做出修改配置；

其中：

1）Web.Config全部web系统中都有的一个配置文件，在这里有几个地方值得注意；

 

2）EntLib.config微软企业库的配置文件，这个文件通常不须要修改，只有其中的数据库链接字符串须要配置一下；

 

3）EFWUnity.config企业库中依赖注入的配置，根据具体的业务对象来配置；

 

3.ModulePlugin业务功能模块目录

EFW框架中内置了四个业务模块包括：

1）权限管理模块，UserLogin与RightManager

2）基础数据模块，BaseDataManager

3）报表管理模块，ReportManager

4）消息管理模块，SysMessage

有了这些模块以后，咱们立刻就能搭建一个成形的新系统，集中力量开发业务功能就好了；咱们再看一个业务模块中aspx文件和js文件，通常来讲都是一个界面文件aspx对应一个脚本文件js，aspx文件内容都是html标签实现界面的编写，js文件都是javascript代码使用Jquery做为主要开发方式，主要是实现向后台请求数据和展现数据；

 

4.WebPlugin界面组件目录

EFW框架中内置了一些经常使用的Web组件，有Jquery、JqueryEasyUI、FusionCharts、ReportAll、JqueryMobile等，下面的文章会详细讲解这些组件的使用；也能够先学习一下网上的资料：

1）JqueryEasyUI：http://www.jeasyui.com/

2）FunsionCharts：http://www.fusioncharts.com/

3）ReportAll：http://www.reportall.com.cn/

4）JqueryMobile;http://jquerymobile.com/

 

5.利用firebug如何调试系统

最后来介绍一些用firebug工具调试javascript代码和利用Ajax向后台控制器请求数据碰到的问题；

1）firebug介绍，我的一直以为用firefox浏览器作web开发调试起来很方便，特别是firebug很是强大，让我感受跟VS调试工具同样；怎么安装就不讲了，很简单网上搜索一下就知道了；安装好了以后就会出现一个虫子同样的图标，点击它就能够启用firebug进行调试；以下图：

 

 

 

见上面三张图，使咱们在调试过程当中用得最多的三个功能，

第一张图：控制台，会列出每一次向后台的请求操做，你能够查看请求发送的参数与接收的结果；查看代码有没有向后台发送请求看此处就能找到问题；

第二张图：HTML，查看页面运行后的HTML代码，通常代码写得很简单，但调试的时候看到的很复杂，不少标签都是动态生成的，由界面框架生成，如JqueryeasyUI；当编写了一个界面代码，可是显示的效果不是你想象中的那样，那么你就须要利用此功能查看生成的HTML查找缘由，是因为哪一个标签没写对了，仍是样式调用得不对等；

第三张图：脚本，页面须要的js文件均可以在此功能中找到，调试就是在此处打断点，一步步运行查看变量的值与执行的过程；调试的操做跟VS工具差很少；

2）下面我就针对Books实例演示一下调试修改书籍这个功能

咱们先在firebug中的Book.js文件的保存书籍的btn_save()方法中打上一个断点，再在后台VS工具中的Books项目中bookController文件中的SaveBook()方法也打上断点；

 

启动项目点击界面上的书籍保存按钮，断点先在firebug中执行，按F10单步执行，运行至formSubmit方法中向后台发送Http请求，这时候断点就跑到VS工具的SaveBook方法中了，按F5执行完后台SaveBook方法，断点又跑到firebug中的formSubmit方法中了，说明Http请求完成，保存数据成功；

 

注意：若是出现进入不了后台SaveBook断点，就必定要核对好Http请求的地址是否正确，项目有么有正常启动加载WebController，WebController上有没有加WebMethod自定义标签，这都是环环相扣的，多熟悉熟悉就搞清楚了；