01单元1基于JSP指令和标签的Web应用程序开发(校)

单元1基于JSP指令和标签的Web应用程序开发本单元我们一起走进JSP开发领域，开始学习基于Java语言的Web开发技术。通过几个简单Web应用程序学会JavaWeb开发环境的搭建、了解JSP程序的开发过程。重点熟悉JSP应用程序的基本构成、JSP标签和指令的应用、Java代码片段的嵌入以及注释的使用。【问题探析】【问题1】简述HTML静态网页的浏览过程？【问题2】简述JSP动态网页的浏览过程？【知识必备】（1）Server与BrowserServer即服务器，Browser即浏览器。用户必须通过浏览器连接到Web服务器上，才能阅读Web服务器上的文件。信息的提供者建立好Web服务器，用户使用浏览器可以取得该服务器中的文件以及其他信息。（2）HTTPHTTP是一种网络上传输数据的协议，是“HypertextTransferProtocol”的缩写，专门用于传输万维网中的信息资源。（3）HTMLHTML是“HyperTextMarkupLanguage”的缩写，中文译作“超文本标记语言”，是Internet中编写网页的主要标识语言。（4）CSSCSS是“CascadingStyleSheet”的缩写，意为层叠样式表，用于对网页布局、字体、颜色、背景和其他图文效果实现更加精确的控制。（5）JavaScriptJavaScript是一种脚本语言，可以和HTML语言混合在一起使用，用来实现在一个Web页面中与用户交互作用。（6）JSPJSP（JavaServerPages）是由SunMicrosystems公司倡导，众多公司一起参与建立的动态网页技术标准，该技术为创建显示动态生成内容的Web页面提供了一个简捷而快速的方法。在HTML文档中嵌入Java代码片段（Scriptlet）和JSP标签，构成了JSP网页。【操作必备】1．本书开发JavaWeb应用程序采用的软件平台（1）操作系统：WindowsServer2008JavaWeb应用程序开发任务驱动教程2（2）Java开发工具包：JDK1.7.0_40（3）Web服务器：ApacheTomcat7.0（4）JSP程序开发环境：Eclipse2014（5）数据库管理系统：SQLServer20082．搭建JavaWeb开发环境（1）下载开发JavaWeb应用程序所需的开发工具①下载Java开发工具包JDK②下载Web服务器Tomcat③下载Java集成开发环境Eclipse与中文语言包（2）安装配置Java开发工具包JDK（3）安装与启动Tomcat（4）安装Eclipse及中文语言包3．启动Eclipse进入Eclipse主界面4．正确配置Eclipse（1）指定Web浏览器（2）设置JSP程序的编码格式5．在Eclipse集成开发环境中正确配置Tomcat服务器（1）在创建与配置Tomcat服务器（2）在Eclipse集成开发环境中启动Tomcat服务器6．创建必要的文件夹在E:盘创建文件夹“JavaWeb应用程序开发”，然后该文件夹中创建子文件夹“Unit01”，以文件夹“Unit01”作为JavaWeb应用程序的工作空间。【基础应用】【任务1-1】使用Eclipse应用开发平台制作静态页面【任务描述】（1）搭建HTML静态页面的开发环境。（2）创建1个静态Web项目task1-1。（3）创建3个CSS样式文件common.css、header.css、footer.css，分别定义网页的通用样式、网页顶部导航栏的样式和网页底部导航栏的样式。（4）创建1个静态网页common.html，该页面为上、中、下三段式结构。顶部为导航栏，该顶部导航栏左侧依次为欢迎信息、“登录”和“注册”超链接、右侧依次为“我的订单”、“资讯中心”、“帮助中心”和“快递查询”超链接；中间暂为空，用于插入网页的主体内容；底部为导航栏，该底部导航栏包含有多个超链接。该网页的浏览效果如图1-15所示。静态网页common.html将作为创建动态网页的基础网页。【任务实施】1．开发准备（1）准备开发Web应用程序所需的图片文件。单元1基于JSP指令和标签的Web应用程序开发3（2）在DreamweaverCS中创建CSS样式文件。2．启动Eclipse进入Eclipse主界面3．新建静态Web项目task1-14．创建文件夹在Eclipse的【项目资源管理器】中，选择节点“task1-1”中的子节点“WebContent”，并单击鼠标右键，在弹出的快捷菜单中选择【新建】→【文件夹】命令，打开【新建文件夹】对话框，在“文件夹名”文本框中输入文件名“css”，如图1-20所示，单击【完成】按钮，即可在文件夹task1-1中创建一个名称为“css”的子文件夹。以同样的方法在文件夹WebContent中创建另一个名称为“images”的子文件夹。将事先准备好的图片文件拷贝到文件夹“images”中。5．创建CSS在Eclipse的【项目资源管理器】中，选择节点“WebContent”中子节点“css”，并单击鼠标右键，在弹出的快捷菜单中选择【新建】→【其他…】命令，打开【新建】对话框，在该对话框中展开节点“Web”，然后选择“CSSFile”选项，如图1-21所示。单击【下一步】按钮，打开【NewCSSFile】对话框，在父文件夹列表框中选择文件夹“WebContent”中的子文件夹“css”，在“文件名”文本框中输入CSS样式文件的名称为“common.css”，如图1-22所示。单击【完成】按钮，完成CSS样式文件“common.css”的创建。6．创建静态网页在Eclipse的【项目资源管理器】中，选择节点“task1-1”中子节点“WebContent”，并单击鼠标右键，在弹出的快捷菜单中选择【新建】→【HTMLFile】命令，如图1-23所示。然后打开【NewHTMLFile】对话框，在“文件名”文本框中输入文件名“common.html”，如图1-24所示。单击【完成】按钮，完成HTML文件的创建，此时，在Eclipse主界面的【项目资源管理器】的“WebContent”节点下，将自动添加一个名称为“common.html”的节点，如图1-25所示。同时，Eclipse会自动以默认的HTML文件关联的编辑器将文件在右侧的编辑窗口中打开。图1-25【项目资源管理器】中的项目“task1-1”的目录结构创建common.html的默认代码如表1-1所示表1-1common.html的默认代码行号HTML代码01020304!DOCTYPEhtmlhtmlheadmetacharset=UTF-8JavaWeb应用程序开发任务驱动教程4050607080910titleInserttitlehere/title/headbody/body/html在网页common.html中head/head之间编写如下所示的代码，引入所需的CSS样式文件。linkrel=stylesheettype=text/csshref=css/common.csslinkrel=stylesheettype=text/csshref=css/header.csslinkrel=stylesheettype=text/csshref=css/footer.css在网页common.html的标签body和/body之间编写如表1-2所示的代码，实现所需的布局和内容。7．浏览静态网页common.html在Eclipse主界面的【项目资源管理器】中，单击选择新创建的“common.html”文件，在工具栏上单击【运行】按钮中小三角形按钮，在弹出的菜单中选择【运行方式】→【RunonServer】命令，如图1-26所示。打开【RunOnServer】对话框，选择“Chooseanexistingserver”复选框，其也采用默认设置，如图1-27所示。单击【完成】按钮，即可开始运行该项目，common.html网页在IE浏览器中的运行结果如图1-15所示。【任务1-2】创建显示欢迎信息的JSP应用程序【任务描述】（1）搭建JSP应用程序开发环境为了提高Web应用程序的开发效率，将Tomcat服务器配置到Eclipse中，为Web项目指定一个Web应用服务器，然后在Eclipse中操作Tomcat并部署和运行Web项目。同时指定Web浏览器和JSP页面的编码格式。（2）使用应用开发平台Eclipse在动态Web项目task1-2中创建一个JSP应用程序task1-2.jsp，该JSP程序在浏览器中输出“您好，欢迎来到蝴蝶E购网!”的欢迎信息，其浏览效果如图1-28所示。图1-28程序task1-2.jsp在IE浏览器中的浏览结果（3）在动态Web项目task1-2中创建另一个JSP应用程序we1come.jsp，在该JSP程序中添加必要的HTML标签和应用所定义的样式，代码如表1-3所示。其浏览效果如图1-29所示。【任务实施】单元1基于JSP指令和标签的Web应用程序开发51．启动Eclipse进入Eclipse集成开发环境。2．在Eclipse集成开发环境中配置与启动Tomcat服务器（1）指定Web浏览器（2）设置JSP程序的编码格式（3）启动Tomcat服务器3．新建动态Web项目task1-2（1）在Eclipse主界面的【文件】菜单中选择【新建】→【DynamicWebProject】命令，打开【NewDynamicWebProject】对话框，进入【DynamicWebProject】界面，即新建动态Web项目的界面。（2）在“Projectname”文本框中输入项目名称，这里输入“task1-2”；在“Dynamicwebmoduleversion”下拉列表框中选择“3.0”，在“Configuration”下拉列表框中选择选择已经配置好的“DefaultConfigurationforApacheTomcatv7.0”，其他采用默认设置，如图1-30所示。（3）单击【下一步】按钮，打开“配置Java应用”的界面，这里采用默认设置，如图1-31所示。（4）单击【下一步】按钮，进入“WebModule”界面，这里选中“Generateweb.xmldeploymentdescriptor”复选框，新创建的Web项目将自动创建web.xml文件，如图1-32所示。单击【完成】按钮，完成项目task1-2的创建，这时在Eclipse的【项目资源管理器】中将显示新创建的Web项目。4．准备与拷贝CSS样式文件和图像文件在项目文件夹task1-2中创建子文件夹“css”和“images”，将所需的CSS样式common.css、header.css、footer.css文件拷贝到文件夹“css”中，将所需的图像文件拷贝到文件夹“images”中。5．创建JSP程序task1-2.jsp在Eclipse的【项目资源管理器】中，选择节点“task1-2”中子节点“WebContent”，并单击鼠标右键，在弹出的快捷菜单中选择【新建】→【JSPFile】命令，打开【NewJSPFile】对话框，在“文件名”文本框中输入文件名“task1-2.jsp”，如图1-33所示。单击【完成】按钮，完成JSP文件的创建，此时，在Eclipse主界面的【项目资源管理器】的“WebContent”节点下，将自动添加一个名称为“task1-2.jsp”的JSP文件，同时，Eclipse会自动以默认的JSP文件关联的编辑器将文件在右侧的编辑窗口中打开。创建的task1-2.jsp默认的代码如表1-4所示在task1-2.jsp文件的title与/title之间输入“蝴蝶E购网”，在body与/body输入“您好，欢迎来到蝴蝶E购网!”。6．运行JSP程序task1-2.jsp7．创建JSP程序we1come.jsp在Eclipse的【项目资源管理器】中，选择节点