第27讲：Struts2对Ajax应用的支持(2)

1主讲：武俊琢第27讲：Struts2对Ajax应用支持（2）11.6实现Ajax校验日期时间拾取器博客网站建设项目河南经贸职业学院信息管理系·武俊琢温故要点回顾：Struts2支持下Ajax标记的使用在项目中导入ajax支持包在JSP网页中引用Ajax标记库在网页的head标记中添加sx:head/常用ajax标记:div、submit、a、autocompleterhreftargetsformId作业中的问题href属性值与Action的配置不同自动完成案例，在地址栏中请求action河南经贸职业学院信息管理系·武俊琢本讲要点与教学目标【教学要点】1、实现Ajax校验2、常用Ajax标记：datetimepicker3、博客网站建设项目【教学目标】了解Ajax校验方法，了解日期拾取器的使用，部署课程设计。河南经贸职业学院信息管理系·武俊琢例1：实现Ajax校验【案例说明】使用sx:sumit、sx:bind、sx:a实现Ajax校验【背景知识】sx:sumit标记validate属性：表示需要进行Ajax校验ajaxAftervalidation属性：true表示Ajax校验成功后不会马上提交sx:bind标记不需提交就可以校验formId：要校验的表单idsources：要绑定的组件名validate：是否校验envents：设置校验事件河南经贸职业学院信息管理系·武俊琢例1：实现Ajax校验【步骤要点】1、JSP视图，quizajax.jsp、quiz_success.jsp2、Action组件，QuizAction.java3、配置Action，引用拦截器栈：jsonValidationWorkflowStack4、配置校验规则5、使用sx:bind对age进行无提交校验sx:bindformId=quizsources=ageevents=onblurvalidate=trueajaxAfterValidation=true/河南经贸职业学院信息管理系·武俊琢例1：实现Ajax校验quizajax.jsp关键代码s:formaction=quizajaxmethod=postid=quizs:textfieldlabel=姓名name=name/s:textfieldlabel=年龄name=age/s:textfieldlabel=喜欢的电脑品牌name=answer/sx:submitvalidate=true//s:formsx:bindformId=quizsources=ageevents=onblurvalidate=trueajaxAfterValidation=true/sx:aformId=quizvalidate=true提交/sx:a河南经贸职业学院信息管理系·武俊琢例2：日期时间拾取器【案例说明】使用sx:datetimepicker标记，输入出生日期，提交给Action组件，并在视图中输出。【背景知识】sx:datetimepicker标记name：输入控件的名称toggleType：绑定效果displayFormat：显示格式value：默认取值，如value=%{'2007-01-01'}language：字符集【月份名称乱码问题解决】（1）sx:headextraLocales=UTF-8/（2）sx:datetimepicker标记的language同样设置为“UTF-8”河南经贸职业学院信息管理系·武俊琢例2：日期时间拾取器【基本步骤】1、创建视图：（1）datetimepicker.jsp：使用datetimepicker标记，标记的name属性设置为birthday（2）showdatetime.jsp：输出birthday属性值2、创建Action类并配置，定义Date类型属性birthdayformaction=datetimemethod=post出生日期：sx:datetimepickername=birthdaytoggleType=wipedisplayFormat=yyyy-MM-dd/s:submit/s:submit/form出生日期：s:propertyvalue=birthday/河南经贸职业学院信息管理系·武俊琢例2：日期时间拾取器【解决乱码问题】（1）sx:headextraLocales=UTF-8/（2）sx:datetimepicker标记的language设置为“UTF-8”河南经贸职业学院信息管理系·武俊琢新浪博客网站-主页主页河南经贸职业学院信息管理系·武俊琢新浪博客网站-个人博客主页河南经贸职业学院信息管理系·武俊琢新浪博客网站-博文列表河南经贸职业学院信息管理系·武俊琢新浪博客网站-评论河南经贸职业学院信息管理系·武俊琢新浪博客网站-注册/登录河南经贸职业学院信息管理系·武俊琢博客网站设计【功能描述】运用Struts2、DAO等技术设计一个简单的博客网站。根据博客网站的特点，实现博客网站应具备的基本功能，主要包括以下功能：1、游客用户可以在博客网站主页单击某博友的博文链接进入博友的个人博客网站，并浏览博文；2、游客用户可以浏览他人博客网站的个人主页、博文列表、详细博文，并可以对博文发表评论；3、用户登录后具备游客用户的所用权限，还具备以下权限：可以管理自己的博客信息，包括发表博文、编辑博文、删除博文、对某篇博文发表评论、修改自己发表的评论、删除自己发表的评论、修改个人信息等4、游客可以注册为博客用户河南经贸职业学院信息管理系·武俊琢博客网站设计【相关技术】Struts2框架相关技术、数据库设计与实现、数据库连接访问、FCKEditor组件等【设计要求】1、可以合作完成，每组最多3人，组内成员必须有明确分工2、编写文档，文档包括以下几部分（1）任务分工明细表（2）需求分析（3）数据库设计（4）模块结构设计（5）界面流程设计3、按要求实现软件功能河南经贸职业学院信息管理系·武俊琢软件开发过程【需求分析与功能设计】（1）分析业务流程，明确软件需要实现哪些功能。（2）通过业务流程分析可初步确定主要界面构成（包括哪几个网页，页面显示哪些内容，页面如何布局），以及页面之间的调用关系。（3）通过业务流程分析数据流（需要处理哪些数据，如何合理组织数据），从而进行数据库设计河南经贸职业学院信息管理系·武俊琢软件开发过程【软件设计流程】（1）开发约定：数据库、表、字段、包、类、方法、Action、JSP等命名规范（2）设计数据库（3）建立界面原型（4）建立项目结构•确定namespace•确定package•确定Action名称•确定Result•将界面原型页面进行修改，匹配现有设置•测试（5）创建数据模型（与数据库表对应的实体类）（6）创建业务模型接口（声明业务方法）（7）具体功能实现分工完成河南经贸职业学院信息管理系·武俊琢作业分组（上报分组名单，要求上交excel表）1、需求分析（编写文档）2、数据库设计（编写文档）3、建立项目结构