JavaWeb项目式开发教程电子教案 项目1 创建Java Web项目

项目1创建JavaWeb项目教学单元任务1.1认识Web技术授课时数1授课类型理论一体授课地点多媒体教室/机房授课对象计算机类专业二年级学生一、教学分析教学目标了解Web与JSP技术发展历程；理解Web服务器与客户端角色；区分C/S与B/S架构；理解静态网页与动态网页差异；了解JSP技术生态系统。学情分析学生已掌握Java基本语法和面向对象思想，常用浏览器和Web应用，但对Web底层原理、HTTP协议和服务器的工作机制几乎为零基础。部分学生能区分网页和桌面软件，但无法解释技术层面的差异。教学重点C/S与B/S架构的对比；静态网页与动态网页的区别。教学难点理解B/S架构中请求/响应的完整流程；建立"服务器端处理"的思维模型。二、教学方法与手段教学方法和手段讲授法、案例对比法、启发式提问，利用电商网站和架构图辅助理解。三、教学实施教学环节教学内容新知导入展示淘宝、京东首页，提问：“网页为什么能显示不同用户信息？”“不同用户看到的为什么不一样？”知识讲解JavaWeb是基于Java技术解决Web领域问题的技术栈，开发一个完整的JavaWeb项目首先要了解基于Java技术的Web领域的相关知识，包括Web和JSP技术的发展历程、Web服务器和Web客户端、C/S架构和B/S架构、静态网页与动态网页、JSP技术生态系统等。

1.1.1Web和JSP技术的发展历程Web发展初阶段主要以静态网页为主，使用HTML撰写网站。随着Web的发展，进入Web2.0时代，动态网页逐渐成为主流。Servlet和JSP（JavaServerPages）是Web2.0时代的一个重要技术组合，二者结合使用，为动态网页的开发提供了强大的服务端支持。Servlet和JSP结合的技术方案主要特点：•跨平台：可以在任何支持Java的服务器上运行，开发人员不需要关注不同服务器在技术细节上的差异。•页面开发效率高：使用JSP标签可以将页面逻辑与业务逻辑分离，并可以访问和操作数据库，使页面开发更加高效。•安全稳定：开发环境成熟，经过大量项目验证，具有很高的稳定性和安全性。•可扩展：使用Java技术栈开发的Web项目可以很容易地扩展功能，并可以移植到其他平台。1.1.2Web服务器和Web客户端Web客户端（WebClient）是指向Web服务器发送请求并接收响应的软件，通常指Web浏览器（如Chrome、Edge、Firefox等）。用户在浏览器地址栏输入URL或点击链接时，浏览器会向服务器发送HTTP请求，服务器处理后返回HTML等资源，浏览器解析并渲染显示。Web服务器（WebServer）是指接收客户端请求、处理请求并返回响应的软件。常见的Web服务器有Apache、Nginx、IIS等。在JavaWeb开发中，通常使用ApacheTomcat作为Web服务器。Tomcat不仅是一个Servlet容器，也是一个Web应用服务器，可以运行Servlet和JSP。Web服务器和Web客户端之间的通信遵循HTTP协议。浏览器发送请求，服务器接收并处理请求，然后返回响应。整个过程遵循"请求-响应"模式。HTTP协议的几个核心特征：•无状态：每次请求都是独立的，服务器不会记住之前的请求信息。•基于TCP/IP：HTTP协议运行于TCP/IP协议之上。•支持B/S架构：客户端是通用浏览器，服务器是Web服务器。1.1.3C/S架构和B/S架构C/S架构（Client/Server，客户端/服务器架构）：客户端需要安装专用软件，通过该软件与服务器进行通信。早期管理系统多采用此架构。B/S架构（Browser/Server，浏览器/服务器架构）：客户端使用通用浏览器访问Web服务器，不需要安装任何专用客户端软件。随着互联网技术的快速发展，B/S架构已成为主流的应用架构。B/S架构与C/S架构的主要区别：•C/S架构需要安装专用客户端，更新维护麻烦；B/S架构只需要浏览器，维护简单。•C/S架构通常只能在特定操作系统运行；B/S架构跨平台，有浏览器即可。•C/S架构安全性相对较高，适合局域网内部系统；B/S架构适合Internet应用。•C/S架构的客户端负担较重；B/S架构的大部分处理逻辑都在服务器端。1.1.4静态网页与动态网页静态网页（StaticWebPage）：•网页内容在服务器上以HTML文件形式存储，浏览器请求时直接返回该文件。•不管何时何人访问，显示的内容都是一样的。•与数据库没有交互，更新网页需要手动修改HTML文件。•运行速度快，对服务器压力小。动态网页（DynamicWebPage）：•网页内容不是固定的，而是根据不同的请求参数动态生成。•可以根据不同用户显示不同内容，与数据库交互。•如淘宝首页每个人看到的推荐商品不同，就是动态网页技术的体现。在JavaWeb中，使用JSP/Servlet技术实现动态网页。1.1.5JSP技术生态系统JSP技术生态系统包含一系列相关的技术、组件和框架，用于开发和管理基于Java的动态Web应用程序。主要包括以下几个方面：•Servlet容器：Web服务器的重要组件，提供JSP和Servlet的运行容器。•Servlet和JSP：Servlet是用于处理客户端请求并生成动态内容的服务器端程序，而JSP是用于创建动态Web页面的技术。•EL表达式：一种在JSP页面中使用的简洁、易读的表达式语言，使得在JSP页面中编写和使用变量更加方便。•数据库访问技术：Java提供的多种数据库访问技术，在JSP页面和Servlet中都可以使用。•MVC框架：MVC框架可以更好地组织和管理代码，提供更高级的功能和规范来处理请求、控制流程和渲染页面。教学总结总结本任务所学内容，强调Web服务器与客户端的角色、B/S架构的优势以及JSP在JavaWeb生态系统中的地位。四、课后巩固与拓展1.简述Web技术的主要发展历程。

2.阐述Web应用开发中C/S体系架构和B/S体系架构有什么区别。3.简述静态网页与动态网页的区别。4.简述Web应用开发技术有哪些。5.简述什么是JSP，它和Servlet有什么关系。教学单元任务1.2搭建JavaWeb开发环境授课时数1授课类型理论一体授课地点多媒体教室/机房授课对象计算机类专业二年级学生一、教学分析教学目标掌握JDK17、Tomcat9、IntelliJIDEA2021的安装与配置方法；能正确配置JDK环境变量；能启动Tomcat并验证运行；能正确安装IDEA。学情分析学生已掌握Java程序设计基础，但对开发环境的安装配置经验不足。JDK环境变量配置、Tomcat端口冲突、IDEA版本差异是学生常见困惑点。教学重点JDK17安装与环境变量配置；Tomcat9下载、安装、目录结构与启动验证。教学难点JAVA_HOME和Path环境变量的作用与配置；二、教学方法与手段教学方法和手段演示法、任务驱动法、同伴互助法。学生跟随教师同步操作。三、教学实施教学环节教学内容新知导入回顾上节课所学的B/S架构，引出Web服务器Tomcat在架构中的核心作用；展示本任务最终目标——在浏览器中访问Tomcat默认首页。知识讲解开发JavaWeb项目必须搭建JavaWeb开发环境，主要包括JDK、Tomcat服务器以及IntelliJIDEA开发工具。1.2.1JDKJDK（JavaDevelopmentKit，Java开发工具包）是Oracle公司提供的Java程序开发工具包，包含JRE（Java运行环境）、Java编译器（javac）、Java文档生成工具（javadoc）、Java打包工具（JAR）等。1.安装JDK（1）从Oracle官网下载JDK17的安装包（选择Windowsx64Installer版本）。（2）双击安装文件，按照安装向导的提示完成JDK的安装。（3）默认安装路径为C:\ProgramFiles\Java\jdk-17。JDK17安装目录中各文件夹和文件的具体内容：bin：提供JDK开发工具，包括开发、执行、调试Java程序所使用的工具和实用程序，以及开发工具所需要的类和支持文件。conf：包含用户可编辑的配置文件，如.properties和.policy文件。include：头文件，支持使用Java本地接口和Java虚拟机调试接口的本地代码。jmods：提供jmod格式的平台模块。legal：提供JDK的法律声明。lib：包含JDK工具的JAR包及其他文件。

2.配置与测试JDK为了能在命令行中使用JDK工具，需要配置以下环境变量，配置JAVA_HOME：在“控制面板”中选择“系统|高级系统设置”，打开“系统属性”对话框，选择“高级”选项卡。单击“环境变量”按钮，打开“环境变量”对话框。在该对话框中，可以配置用户变量和系统变量。在"系统变量"中点击"新建"：变量名为JAVA_HOME，变量值为JDK安装路径（如C:\ProgramFiles\Java\jdk-17）。在系统变量中查看是否存在PATH变量，若不存在，则需要创建，若存在，则选中Path变量，单击“编辑”按钮，打开“编辑系统变量”对话框。在该对话框的左侧区域中输入路径。单击“确定”后，PATH环境变量配置完成。打开命令提示符（cmd），输入java-version，如果显示版本号信息，则配置成功。1.2.2TomcatTomcat是Apache软件基金会开发的一个免费开源Web应用服务器，属于轻量级服务器。它可以运行Servlet和JSP，是JavaWeb开发中常用的中间件（容器）。下载并安装Tomcat（1）在浏览器中访问Tomcat官网，在左侧菜单“Download”下单击“Tomcat9”，进入Tomcat9下载页面。（2）在“BinaryDistriubutions”的“Core”列表处，根据计算机操作系统的类型选择对应版本进行下载。这里需要下载的是Windows环境下64位的程序安装包，单击超链接“64-bitWindowszip”。下载得到的安装包文件为“apache-tomcat-9.0.80-windows-x64.zip”。（3）将安装包文件解压，解压完成后，则Tomcat9安装完成。配置环境变量JAVA_HOME和PATH。（4）启动Tomcat。双击Tomcat安装目录下“bin”文件夹中的“startup.bat”，启动Tomcat。（5）启动Tomcat后，打开浏览器，在浏览器地址栏中输入“http://localhost:8080”并按Enter键，打开Tomcat9的默认主页，若主页正常加载，则表示Tomcat9启动成功。2.Tomcat目录结构•bin：存放启动和关闭Tomcat的脚本文件•conf：包含Tomcat的各种配置文件。其中，server.xml和web.xml是主要的两个配置文件。•temp：包含Web应用运行过程中生成的临时文件。•logs：包含Tomcat每次运行后产生的日志文件。•lib：包含Tomcat运行时所需要的各种JAR文件。•work：包含由Tomcat自动生成的Servlet源文件和字节码文件。•webapps：存放Web应用程序的目录。发布Web项目时，默认将要发布的Web应用程序存放在此文件夹中。

3.配置Tomcat端口号如果8080端口被占用，可以修改conf/server.xml中的端口号：找到<Connectorport="8080"...>，将8080改为其他端口如8090。1.2.3IDEA（1）在浏览器中访问IDEA官网，单击首页中的“DOWNLOAD”按钮，进入IDEA的下载页面。（2）下载执行文件是“ideaIU-2021.1.2.exe”。双击该执行文件，按提示完成IDEA的安装。教学总结总结JDK、Tomcat、IDEA三者的关系；强调环境变量配置的重要性；梳理常见安装问题及解决方案。四、课后巩固与拓展独立完成JDK、Tomcat、IDEA的安装；尝试修改Tomcat默认端口为8090并重新启动。教学单元任务1.3创建JavaWeb项目授课时数2授课类型理实一体授课地点多媒体教室/机房授课对象计算机类专业二年级学生一、教学分析教学目标理解JSP的概念、运行原理与处理过程；能使用IDEA创建JavaWeb项目；能编写简单JSP页面并在Tomcat下运行；能解读JSP转译后的Servlet源码。学情分析学生已完成开发环境搭建，对Tomcat和IDEA有初步认识。但对JSP如何被Tomcat处理并返回HTML缺乏理解，对项目的创建步骤和目录结构较为陌生。教学重点JSP的概念与运行原理；使用IDEA创建JavaWeb项目的完整流程；在IDEA中配置Tomcat并部署运行项目。教学难点JSP转译为Servlet的机制；Tomcat项目目录结构与访问路径的对应关系；IDEA中Tomcat的配置。二、教学方法与手段教学方法和手段讲授法、演示法、探究法。教师分步演示，学生同步实践，引导学生查看Tomcatwork目录下的文件。三、教学实施教学环节教学内容新知导入提问：“什么是JSP？为什么JSP页面能在浏览器中显示？”引出动态网页技术；展示任务目标：创建firstweb项目，输出"Thisismyfirstjavawebproject!"。知识讲解完成开发环境的搭建后，本章将介绍在IDEA中创建JavaWeb项目的两种方式：使用IDEA创建和运行JavaWeb项目，以及手动创建并部署WAR包到Tomcat。通过本任务的学习，你将能独立创建、运行和部署JavaWeb项目。1.3.1什么是JSPJSP（JavaServerPages）是一种动态网页技术标准。JSP页面由HTML代码和嵌入其中的Java代码组成。服务器在接收到客户端对JSP页面的请求后，会先执行JSP页面中嵌入的Java代码，然后将执行结果以HTML页面的形式返回给客户端。JSP页面使用符号“<%”和“%>”包含Java程序片段，文件扩展名为“.jsp”。文件的命名必须符合操作系统标识符规定，即由字母、下划线、$和数字组成，且第一个字符不能是数字。JSP页面本身是一个文本文件，因此可以使用文本编辑器来创建和编辑。在保存JSP页面时，为避免出现中文字符乱码，建议选择utf-8作为编码格式。【例1-1】创建一个简单的JSP页面。1.3.2在Tomcat下运行JSP页面编写好的JSP页面必须发布到Tomcat下才能运行。也就是说，需要将JSP页面复制到Tomcat安装目录的特定文件夹下。•Tomcat根目录：在Tomcat中，每个Web项目都对应一个目录，该目录位于Tomcat安装目录的webapps目录中。在webapps目录下，还有一个特殊的目录ROOT，这是Tomcat的默认访问目录。访问ROOT目录下的网页文件时，地址栏中不需要提供项目路径，直接访问Tomcat的根地址即可。•Tomcat项目目录：webapps目录下的每一个子目录都对应一个Web项目。开发人员可以通过在webapps目录下新建子目录来创建自己的JavaWeb项目，该项目所需的所有文件和文件夹都存放在该子目录下。1.3.3JSP运行原理和处理过程分析当一个JSP页面第一次被请求执行时，Tomcat首先将JSP页面文件转换成一个Java文件，即Servlet。然后将转换的Java文件编译成字节码文件，再执行这个字节码文件来响应请求。当这个JSP页面再次被请求时，Tomcat将直接执行生成的字节码文件来响应请求，从而加快页面的执行速度。Tomcat处理JSP页面第一次请求的具体步骤如下：（1）服务器将JSP文件转换成Servlet源程序（即Java文件）。（2）转换成功后，将Servlet源程序编译成字节码文件（即Class文件）。（3）Servlet容器加载字节码文件，创建一个Servlet实例。（4）执行Servlet实例的_jspService()方法，处理客户端请求。处理完成后，生成HTML格式的响应信息发送回客户端。1.3.4使用IDEA创建JavaWeb项目1.创建项目（1）在IDEA顶部菜单栏中，选择“File|New|Project”菜单，打开“NewProject”对话框，在左侧选择“Java”选项。（2）单击两次“Next”按钮后，进入“NewProject”对话框的项目命名界面，输入项目名称“firstweb”和项目保存路径“D:\\firstweb”。（3）单击“Finish”按钮，完成名为“firstweb”的项目的创建。2.为IDEA配置Tomcat（1）在IDEA顶部菜单栏中，选择“File|Settings”，打开“Settings”对话框，在左侧选择“Build,Execution,Deployment|ApplicationServers”选项。（2）单击中间区域的“+”按钮添加一个新的应用服务器，在弹出的对话框中选择“TomcatServer”。（3）在“TomcatServer”对话框中配置Tomcat的相关信息。在“TomcatHome”框中设置Tomcat的主目录，即Tomcat的安装目录。（4）单击“OK”按钮后，“Settings”对话框中增加一个新的应用服务器Tomcat9.0.80。3.为项目添加Web应用支持（1）在“Project”窗口中右击“firstweb”并选择“AddFrameworkSupport…”命令，打开“AddFrameworksSupport”对话框，勾选“WebApplication”复选框。（2）单击“OK”按钮，完成Web应用支持的添加，项目文件夹下新增web目录。4.为项目添加Tomcat（1）在IDEA菜单中选择“Run|EditConfigurations…”命令或者在IDEA窗口右上方单击“AddConfiguration…”按钮，打开“Run/DebugConfigurations”对话框。（2）单击左侧的“+”按钮或者“Addnew…”打开“AddNewConfiguration”界面，找到“TomcatServer|Local”并单击。（3）此时，“Run/DebugConfigurations”对话框中会增加一个新的配置。选择新配置“Tomcat9.0.80”后，选择“Deployment”进行配置部署。（4）单击“+”按钮，选择“Artifact”，将项目部署在Tomcat中。（5）单击“OK”按钮，项目部署成功，回到IDEA主界面。在主界面的右上方和左下方Services窗口中都出现了新配置的部署选项“Tomcat9.0.80”。5.在项目中创建JSP文件（1）在“Project”界面中，右击“web”并选择“new|JSP/JSPX”，或者在IDEA主菜单中选择“File|New|JSP/JSPX”，打开“CreateJSP/JSPXpage”界面，输入JSP文件名“hello”。（2）确定后，进入hello.jsp文件的编辑界面，在body标签之间添加Java代码，输出“WelcometoIDEA！”。（3）保存编写好的hello.jsp文件。6.运行JSP页面（1）单击IDEA主界面右上方的绿色“运行”按钮，启动项目。（2）项目启动后，“运行”按钮会变成“重新运行”按钮，下方的“Server”区域会输出Tomcat的运行日志，开发人员可以通过查看日志了解服务器的运行情况。同时，IDEA会自动打开默认浏览器，展示当前项目的主页。（3）修改浏览器地址栏中的地址，访问hell