EXTJS和javaweb应用的开发思路

最近，做些几个基于extjs界面的应用，在此，总结一下要点。标题是基于javaweb，但是基本上各种服务器端语言都适用。使用Extjs做界面，无非就是取消了原来很多的jsp文件，转而使用Extjs来访问，但有些地方多少有些不方便，以下是我自己遇到的问题和经验。

1.多少个jsp合适呢？没有特殊要求的话，2个就可以，一个是login，一个是系统主页。登录页一般需要比较花哨，单独做一页，比较容易套用样式；主页则包含主要的布局，功能，而功能靠extjs来实现。对于一些特殊的页面，比如需要特定html头（doctype/指定特定的ie版本等）的页面/activex控件，只能单独用一个页面去搞，在Extjs中可以使用Panel里面的html属性指定一个iframe来加载此页面。

2.获得登录用户相关的信息或者服务器端信息（如当前日期，js里的时间很多时候需要真正的当前日期，而不是客户端上的时间，不靠谱啊）。这个我使用服务器端程序生成一个mime类型为text/javascript的page。可以是servlet/action之类的东西，然后再首页上当作js文件来引用。这样就不需要用ajax去服务器取，效率较高其运行稳定。如果这有的信息需要更新，比如用户修改了自己的真实姓名，可以重新加载这个服务器端的js，我用了jquery的$.getScript方式来更新，也就是用户修改自己的信息成功后，调用$.getScript('userdata.action',callback)这种方式。

3.登录超时的判断。这里需要2种判断：1是用户刷新主页面，这就用普通的Filter来判断，超时了就跳回登录页；2时ajax请求的时候判断超时，当然也是用filter，但是用js构建界面无法响应filter中进行的跳转，需要加点处理，让js可以获得超时的信息，并用js进行跳转。比如没有超时，给httpHeader增加个sessionstatus=pass这样的值，

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		HttpServletRequest req = (HttpServletRequest)request;

		Member currentMember = SysUtil.getCurrentMember(req);//获得当前登录用户
		HttpServletResponse rep = ((HttpServletResponse)response);
		if(currentMember != null){
			rep.setHeader("sessionstatus", "pass");
chain.doFilter(request, response);
 }}
<pre>

server端filter的代码可能是这样：

<p></p><p>在客户端，用Extjs的Ajax事件进行捕捉，例如：</p><p></p><pre code_snippet_id="480857" snippet_file_name="blog_20141008_2_738930" name="code" class="javascript">Ext.Ajax.on('requestcomplete',checkUserSessionStatus, this);    
function checkUserSessionStatus(conn,response,options){
//alert("checkUserSessionStatus")
    //Ext重新封装了response对象
if(response.getResponseHeader){
var sessionstatus = response.getResponseHeader("sessionstatus");
if(sessionstatus != 'pass'){
       alert("登录超时，重新进入系统");
       window.location = "login.jsp";
}
}
    
}

4.javascript闭包的使用。在普通页面里可以不用闭包，因为页面引用的js相对较少，没用的js文件可以不引用，要找个js文件里的内容相对容易。而基于extjs或者其他js界面框架的程序，js文件肯定很多，而且大部分都需要在系统主页上引用，这很可能造成查找一个函数很吃力的情况，也不利于编写清晰的代码。所以必须使用闭包来把各个功能里面的js函数区分开。比如可以用ProjectName.modelName这种方式来分包，比如创建用户列表的函数位于UserInfo.js里面，此可以这样写：

var MyProject.UserInfo = {};//MyProject应该在主js文件中定义，如var MyProject = {};
MyProject.UserInfo.createUserList = function(){
   //创建用户列表面板的代码。。。
}

EXTJS和javaweb应用的开发思路

猜你喜欢