《Java企业级应用开发教程-IDEA环境下的Vue3+Spring Boot项目开发》全套教学课件_第1页
《Java企业级应用开发教程-IDEA环境下的Vue3+Spring Boot项目开发》全套教学课件_第2页
《Java企业级应用开发教程-IDEA环境下的Vue3+Spring Boot项目开发》全套教学课件_第3页
《Java企业级应用开发教程-IDEA环境下的Vue3+Spring Boot项目开发》全套教学课件_第4页
《Java企业级应用开发教程-IDEA环境下的Vue3+Spring Boot项目开发》全套教学课件_第5页
已阅读5页,还剩534页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

理论学时:48上机学时:16,大量的课后上机练习学分:3.5课程性质:专业/必修(就业岗位课程)前导课程:JavaWeb,Web前端、软件设计与体系结构后续课程:微服务架构、毕业设计JavaEE架构与程序设计(软件23级)全套可编辑PPT课件考核方式课程考核包括过程性考核和期末考核过程性考核包括平时考核和实验考核。其中,平时考核含考勤、课堂表现、期中考试。总评=平时30%+实验20%+期末50%2026/9/613:53:18成绩组成考核/评价环节权重考核/评价细则平时成绩考勤课前表现期中考试30%考勤、课堂表现和期中考试各占总评成绩的10%。其中,旷课一次扣5分;课堂表现各分5次进行考核。实验成绩实验报告20%共需要按时提交6次实验报告期末成绩学校在线平台考试50%在线闭卷考试课程内容学时分配理论教学内容(单元)理论学时实验学时第1-4讲Web开发基础84第5-8讲基于Servlet的MVC项目分层架构82第9-12讲

对象关系映射ORM框架82第13-16讲SSM整合项目开发84第17-21讲SpringBoot项目开发82第22-24讲Web项目前后端分离开发82合计4816Unit1Web应用开发基础2026/9/613:53:18Web前端基础

Web前端技术及发展

IDEA2023

HTML5+CSS3

JavaScript+jQuery(浏览器存储)jQueryAjax(脚本调试)Web前端框架Node+Vue3+ElementPlus

Node.js与Vue.js概述

Node示例

项目创建、结构分析、原理及运行

Vue3基础语法【vue-router

数据绑定与插值

axios.get

组件间调用】

使用ElementPlus

ElemetPlus+Vuex项目

JavaWeb后端基础

JavaEE规范

IDEA内置Maven

ApacheTomcat9

在IDEA2023里使用Maven项目模板创建Web项目并运行

JavaWeb项目会话标识JSESSIONID与Cookie

项目设置*

本单元案例项目2026/9/613:53:18使用HTML标签组织页面内容:使用CSS样式修饰页面元素或布局使用原生的脚本语言JavaScript或库,实现页面交互或动态效果使用jQuery库实现异步请求(非阻塞;局部更新页面而不是整页刷新)前端原生技术本单元案例项目2026/9/613:53:18Node是JavaScript运行时环境,具有创建Web服务器和访问数据库的能力;安装Node是创建Vue项目的前提无交互功能的简单项目,据此了解Vue项目结构及运行方法在Vue3项目里使用axios发起异步请求(取代jQueryAjax);路由插件是使用全局路由组件(路由导航组件和路由视图组件)的前提ElementPlus提供了丰富的视图组件;状态管理插件Vuex能实现状态与业务逻辑的分离实际开发中,通常在ElementPlus菜单里联合使用路由本单元案例项目2026/9/613:53:18使用Maven骨架创建的Web入门项目;要求掌握JSESSIONID并在浏览器窗口里查看要求掌握JSESSIONID与Cooike的关系,并在浏览器窗口里验证Java后端项目,使用Tomcat作为Web服务器,需要部署Web前端技术及其发展2026/9/613:53:18网络应用体系结构从C/S到B/S。其中S表示服务端,C表示客户端,B表示浏览器。HTML+CSS+JavaScript是原生的网页设计技术。浏览器程序通过解释.html文档代码呈现页面,按功能键F12后进入开发者模式。为方便Web项目调试,建议使用Google浏览器。HTML是超文本标记语言的英文缩写,提供了设计页面元素(如按钮、图像等)的标签,用以设计页面元素。CSS是层叠样式表的英文缩写,用于修饰页面元素的外观或进行页面元素布局。JavaScript是一种脚本语言,用于实现页面的交互效果或动态效果。jQuery是一种JavaScript库,用于简化JavaScript的使用。基于Node的Vue3+ElementPlus是最新的Web前端框架技术,能有效地提高代码的复用,界面更加美观。JavaEE开发环境IDEA20232026/9/613:53:18IDEA全称IntelliJIDEA,它是JetBrains公司的产品,公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。IDEA可作为Java项目、JavaEE项目和SpringBoot项目开发的集成环境,也可作为Web前端项目的集成环境。访问/idea/,可以找到IDEA下载链接。IDEA有多个版本。社区版(Community)免费,但是功能有限制。社区版可以做Java开发,但不能做JavaEE开发。终极版(Ultimate)收费,功能⽆限制。终极版也有免费试用版(EAP),可免费使用一个月。若有edu邮箱,申请帐号后,可免费使用一年。相对于免费的eclise-jee,IDEA使用上更加方便,效率更加。菜单项目窗口文档窗口运行窗口JavaEE开发环境>IDEA工作界面2026/9/613:53:18工具栏侧边栏侧边栏通用操作:双击选词、Ctrl+C、Ctrl+V、Ctrl+XCtrl+D:复制当前行至下一行,等同复制和粘贴两个操作。Ctrl+Y:删除光标所在的当前行(不必先拖拽选取=>快速)。代码注释及取消:Ctrl+Shift+/(单行使用Ctrl+/)重写(实现)接口方法或抽象方法:使用联机提示或Ctrl+OAlt+回车:自动修正错误、自动导包、实例提示等Ctrl+H:查看类(或)接口的继承关系。参数提示:Ctrl+P接口方法体产生:模糊输入方法名后选择。显示类或程序结构:单击左侧工具Structure按钮当前代码查找:Ctrl+F;全局查找:Ctrl+Shift+FJavaEE开发环境>常用快捷操作Web前端基础>HTML5、CSS3、客户端脚本2026/9/613:53:18Web前端>HTMLAndCSS项目2026/9/613:53:18资源文件夹主页被调用页Web前端>HTMLAndCSS项目主页效果2026/9/613:53:18一组超链接未实时显示时间Web前端>HTMLAndCSS项目主页文档分析2026/9/613:53:18关键词:标签div、iframe、ul、li等、属性id、src、name等Web前端>HTMLAndCSS项目主页文档分析2026/9/613:53:18关键词:选择器、度量单位、CSS+Div布局、弹性布局Web前端>JavaScriptAndjQuery项目2026/9/613:53:18jQuery是原生JavaScript脚本库客户端脚本能被浏览器程序解释执行,用于实现交互效果或动态效果,有原生JavaScript和jQuery库两种使用方式。在页面里,使用成对标签<script>…</script>定义客户端脚本。在客户端脚本里,可以使用浏览器对象或JavaScript内置对象。引入jQuery库后,可以使用$(选择器)可将页面元素对象转换成jQuery对象。Web前端>JavaScriptAndjQuery项目主页效果2026/9/613:53:18时间实时显示Web前端>JavaScriptAndjQuery项目主页代码2026/9/613:53:18Web前端>浏览器Web存储2026/9/613:53:18HTML5对window对象增加了属性localStorage和sessionStorage、方法openDatabase(),是客户端存储数据的一种新方式,它们统称为Web存储。客户端浏览器中来自同一域名(站点)的所有页面,都可访问localStorage永久存储的数据。sessionStorage对象存储的数据仅在当前会话期间有效,在浏览器会话结束时将会被自动清除。后面使用sessionStorage存储的项目(1)element-plus-vuex里Vuex组件(2)的JWT(JSONWebToken)技术,需要使用sessionStorage对象。使用localStorage或sessionStorage进行浏览器会话存储时的常用方法如下:Web前端>浏览器会话存储2026/9/613:53:18使用右键菜单,还可以编辑信息Web前端>客户端脚本动态调试*2026/9/613:53:18在脚本里使用debugger语句,使用浏览器访问之前按F12,将自动进行Web项目的客户端脚本动态调试。JavaScript语言属于弱类型。代码有误时,错误信息仅在Console里输出。可以观察到对象dt已经成功创建Web前端>jQueryAjax项目2026/9/613:53:18jQueryAjax技术要点jQueryAjax示例主页包含jQuery脚本库Web前端>jQueryAjax项目2026/9/613:53:18区划编码就是身份证的前6位前2位:省级行政区代码(如11=北京市、31=上海市、44=广东省)中间2位:地级行政区代码(如4401=广州市、4403=深圳市)后2位:县级行政区代码(如440106=天河区、440305=南山区)使用Chrome浏览器,访问高德开发平台提供的API(参数分别区划编码city和应用的key):/v3/weather/weatherInfo?city=440100&key=c12196292a984eafa325c0d9a59b7892获得该地区的天气信息数据为JSON格式。Web前端>使用Postwoman测试高德天气后台接口2026/9/613:53:18请求参数Web前端>jQueryAjax项目2026/9/613:53:18Web前端>页面useWeatherJson.html2026/9/613:53:18Web前端框架>Node.js与Vue.js概述2026/9/613:53:18Node.js和Vue.js是两个广泛应用于Web开发的JavaScript框架,它们分别用于服务器端和客户端开发,提供了不同的功能和用途。Node.js是一个基于ChromeV8JavaScript引擎构建的运行时环境,它允许使用JavaScript语言在服务器端构建高性能的网络应用程序。访问官网下载最新的Node版本:/Node.js拥有一个强大的包管理器npm,使得开发者可以轻松地使用各种第三方模块和库来构建复杂的服务器应用。为提高npm的下载速度,可使用淘宝npm镜像。在命令行方式下,执行如下永久切换镜像源命令:npmconfigsetregistryVue.js是一个轻量级的JavaScript框架,用于构建交互式的用户界面,采用组件化的开发方式,具有响应式的数据绑定机制、路由管理和状态管理等。使用Vue.js进行前端开发时,通常需要在本地环境中设置一个开发服务器来运行Vue.js应用。Node.js提供了适用于开发环境的服务器,并可使用Node.js的包管理器npm来管理Vue.js项目的依赖项和构建过程。Web前端框架>关于Node2026/9/613:53:18Node.js默认的安装路径及其2个重要的命令。已经自动将Node.js的安装路径添加到Windows系统环境变量path里,方便在命令行、任何路径下使用命令node和npm。在命令行方式下,测试是否安装了Node.js。测试是否安装淘宝镜像Web前端框架>Node.js使用示例*2026/9/613:53:18Web前端框架>Node.js使用示例2026/9/613:53:18进入终端方式运行.js程序:按住Ctrl并单击第1个超链接:命令行输入时,可使用Tab键自动补全使用IDEA2023创建Vue3项目>Vite插件2026/9/613:53:18确保已经安装Node.jsVer20.10.0。否则,可从超星课程资料里下载并安装。Vite(快速之意)是一个轻量级、运行速度快的前端构建工具,它支持模块热替换。Vite默认安装的插件比较少,因而占用磁盘空间比较小。IDEA2023自带了Vite,在市场里搜索到后启用即可。在IDEA2023里,以图形界面方式,创建项目、安装依赖、运行项目。在新建项目前,需要确保Windows用户目录里存在AppData\Roaming\npm子目录。如果没有npm目录,则需要手工创建。使用IDEA2023创建和运行ViteVue3项目2026/9/613:53:18项目名不能包含大写字母需要约三分钟在命令行通过Vue脚手架创建和运行ViteVue3项目2026/9/613:53:18在命令行执行命令vue-V或vue--version,检查是否已经安装VueCLI(Vue脚手架)。若未安装,则需要在命令行执行安装命令npminstall-g@vue/cli在命令行执行命令vuecreatevue3hello,出现项目创建向导。认识Vite+Vue3项目结构2026/9/613:53:18配置Vite构建工具的特定选项,打包上线时可能需要修改。项目配置、生产依赖与开发依赖配置和项目描述等。根组件名称固定,提供整体布局和结构,通常使用路由视图组件<router-view/>来容纳其他Vue组件,实现页面间的切换。存放Vue组件存放应用所需要的静态资源文件启动文件main.js名称固定,使用Vue.js框架创建一个Vue应用,并将根组件渲染到指定的HTML元素。项目打包生成的目标文件夹,通常部署到Nginx服务器运行。项目入口文件,名称固定,定义了一个空Div:<divid="app"></div>存放第三方模块。使用npm安装的模块存放至本文件夹。项目结构分析>项目配置文件package.json2026/9/613:53:18项目配置:项目名称、版本、脚本生产依赖配置,安装依赖时自动添加开发依赖配置2026/9/613:53:18项目结构分析>构建应用的启动文件main.js导入CSS样式具名导入,名称固定非具名导入,名称可修改构造参数DOM元素Vue3项目工作原理2026/9/613:53:18根组件App.vue是应用程序必不可少的核心组件,提供整体布局和结构,通常使用路由视图组件<router-view/>来容纳路由组件,实现页面间的切换。每个Vue组件一般由模板、CSS样式和脚本三部分组成,实现自己特定的业务逻辑功能。main.js是开发环境中构建应用程序的入口文件,包含创建Vue实例、配置路由、注册组件和挂载根组件等功能。通过构建工具(如Vite等),打包并生成应用程序最终使用的JavaScript文件,该文件包含了应用程序的逻辑和组件,它将应用程序的内容渲染到index.html对应的页面上。打包完成后的前端项目,其源代码已经被构建、打包和优化,用于生产环境中,准备用于项目部署和运行。打包后的index.html是前端项目的入口文件,是浏览器加载和解析的起点,包含了定义页面结构和内容的HTML代码,并且可以通过引入外部资源(如.css和.js)来显示页面。在命令行方式下运行Vite+Vue3项目2026/9/613:53:18执行命令npminit,初始化npm项目,包括项目名称、版本、描述、入口文件、作者等。如果直接修改package.json里的相关信息,此步可省略。执行命令npminstall,安装项目依赖项。npm会读取项目中的package.json文件,并根据其中的依赖项列表来下载并安装所需的软件包。执行命令npmrundev,启动开发服务器,并在本地运行Vite+Vue3项目。不同于先前的使用方式:(1)使用VueCLI(Vue命令行工具)来创建和管理Vue项目,使用webpack

作为构建工具。(2)在命令行,通过运行vuecreateprojectname命令来创建项目(3)在开发过程中,在命令行使用npmrunserve命令来启动开发服务器。按字母h出现快捷键Web前端框架>Vue3基础语法示例项目2026/9/613:53:18Web前端框架>Vue3基础语法示例项目>路由2026/9/613:53:18路由表Web前端框架>Vue3基础语法示例项目>路由2026/9/613:53:18路由链接浏览效果:可以选择不同的菜单项空调:路由遥控器:路由链接空调通风口:路由视图路由链接和路由视图是Vue内置组件Web前端框架>Vue3基础语法示例项目>main.js2026/9/613:53:18定义对象名,与Hello项目(使用匿名对象)不同!Vue3项目都相同!Web前端框架>Vue3基础语法>MVVM模型2026/9/613:53:18Web前端框架>Vue3基础语法>模板代码2026/9/613:53:18Web前端框架>Vue3基础语法>脚本代码2026/9/613:53:18Vue组件需要默认导出自动执行Web前端框架>Vue3表格与表单2026/9/613:53:18Web前端框架>Vue3表格与表单2026/9/613:53:18Web前端框架>异步请求库axios2026/9/613:53:18Web前端框架>Vue3百度地图2026/9/613:53:18即时搜索Web前端框架>ElemetPlus概述2026/9/613:53:18ElementPlus是一种UI框架,提供了众多与HTML相应的组件,用于美化页面元素且方便布局。为了在Vue项目中使用ElementPlus框架,需要使用如下命令安装其依赖:npmelement-plus为方便不同的组件使用ElementPlus框架,需要在main.js里配置。Web前端框架>ElemetPlus组件(标签)2026/9/613:53:18为了区别于传统的HTML标签,ElementUI组件标签名均以el-打头,常用标签如下:Web前端框架>ElemetPlus+Vuex项目2026/9/613:53:18对于游客用户,登录按钮才显示,退出登录链接被禁用。对于管理员用户,不显示登录按钮,退出登录链接可用。通过Vuex组件,集中管理应用的状态信息,与业务逻辑代码分离。本项目还包含消息、确认框、对话框、表格和分页等UI组件的使用。通过项目代码,详细讲解和演示。ElemetPlus+Vuex项目>UI组件2026/9/613:53:18ElemetPlus+Vuex项目>UI组件2026/9/613:53:18JavaWeb开发环境>JavaEE规范2026/9/613:53:18JavaEE是一套使用Java进行企业级应用开发的工业标准,它提供了一个基于组件的方法来加快设计、开发、装配及部署企业应用程序。JavaEE已经成为企业级开发的首选平台之一。JavaEE是一系列的技术规范,并非是一个产品,更不是一种编程语言。Servlet是一种运行于Web服务器端的Java应用程序,能够动态响应客户端请求,用以动态生成Web页面。JSP(JavaServerPage)技术是JavaEE的一个组成部分,它提供了处理用户请求的JSP内置对象,相关技术还有JSTL标签和EL表达式等。JavaBean是一些可移植、可重用的Java实体类,它们可以组装到应用程序中。JavaEE规范还有JPA标准、应用服务器(如Tomcat、JBoss)、应用程序框架(Spring、SpringMVC、MyBatis或Hibernate等)……JavaWeb开发环境>JavaEE规范2026/9/613:53:18JBoss作为JavaEE应用服务器,它不但是Servlet容器,而且是EJB(EnterpriseJavaBeans)容器。JBoss在Tomcat的基础上,对其进行本地化,将Tomcat以内嵌的方式集成到JBoss中。IDEA内置Maven>Maven概述2026/9/613:53:18开发Java项目时,可能需要使用第三方的jar包。传统的做法是手工查找jar包并复制到某个路径,然后配置系统环境变量ClassPath对该路径下.jar包的引用。当更新版本时,需要修改环境变量。如果创建Maven项目,就不会这么麻烦。Maven意为知识的积累,由Maven团队维护的远程仓库存储了所有开源的jar包,地址为,供用户搜索和使用。根据依赖坐标,可下载到Windows用户的.m2文件夹依赖3要素Scope可去IDEA内置Maven>Maven概述2026/9/613:53:18Maven能实现基于Java平台的项目的构建和依赖管理,主要包括项目清理、编译测试和生成报告,以及打包和部署等工作。Maven的优点就是可以统一管理这些jar包,并使多个工程共享这些jar包。一个jar包所依赖的其他jar包都会被自动下载并BuildPath(作为项目构建路径)。Maven项目都有一个pom.xml文件,添加新的依赖,会自动从Maven仓库下载相应的jar包并BuildPath。项目开发完成后,可通过Maven打包项目,生成可执行的jar文件。2026/9/613:53:18IDEA>Maven使用阿里云镜像与Maven设置IDEA内置了Maven,使用Settings可以查看。为获得较快的下载速度,可使用国内的阿里云镜像站点。从超星课程【资料】里,下载Maven配置文件settings.xml,复制到Windows用户的.m2文件夹。为方便在他人电脑上打开项目,使用IDEA内置的Maven时不勾选2个Override复选框。Web服务器>ApacheTomcat92026/9/613:53:18从超星课程【资料】->【软件】,下载免安装的Tomcat9并解压。需要记住其解压路径。设置Windows环境变量Java_Home的值为安装JDK时的根路径。进入Tomcat9的bin文件夹,在地址栏选中路径后输入cmd进入命令行方式。Web服务器>Tomcat92026/9/613:53:18为了避免启动信息中文乱码,需要修改Tomcat9配置文件夹conf里的日志文件perties,重设控制台日志输出的字符编码。java.util.logging.ConsoleHandler.encoding=GBK在bin路径进入命令行,执行命令:startup,启动Tomcat9。Web服务器>Tomcat92026/9/613:53:18访问http://localhost:8080(或:8080),可访问Tomcat9内置站点webapps/ROOT主页。访问位于webapps的其他站点WebsiteName的方法是:http://localhost:8080/WebsiteName。Web服务器>基于JSESSIONID和Cookie的会话2026/9/613:53:18http://localhost:8080/JSESSIONIDAndCookieWeb服务器>基于JSESSIONID和Cookie的会话2026/9/613:53:18IDEA2023>使用Maven骨架创建Web项目2026/9/613:53:18【1】arche:起源、开始【2:输入项目名称并选择存放路径】【3:从下拉列表选择Web骨架】注意:在IDEA2023里新建项目的方式,与IDEA2020有区别!IDEA2023>MavenWeb项目结构分析2026/9/613:53:18以后需要新建文件夹src/main/java

,用于存放Java源程序文件。文件夹src/main/resources存放项目的资源文件,如图片文件和Web项目引入的框架配置文件等(后面要使用)。项目根下的文件pom.xml称为项目依赖配置文件。IDEA2023>MavenWeb项目结构分析2026/9/613:53:18下一单元的学习,需要添加JavaEE库依赖刷新后才能为项目使用IDEA2023>MavenWeb项目结构分析2026/9/613:53:18注释默认的主页代码并重写webapp存放站点页面页面指令指定页面编码,避免浏览时出现中文乱码。只能在服务器端运行=>动态网页IDEA2023>配置MavenWeb项目服务器并运行2026/9/613:53:18【1:单击配置下拉列表里编辑配置】【2:单击+】【3:选择本地Tomcat】【4:输入服务器名称】【5:配置本地服务器路径】【6:单击Fix按钮】【7:选择下面的war包,实现快速开发】【8:单击运行按钮,将自动打开站点主页】服务器配置的URL在项目名后缀_war_explodedIDEA2023>项目的两种部署方式2026/9/613:53:18选择下面的war包,实现快速开发。在运行项目后,自动生成文件夹target里只生成站点文件夹,作为Tomcat9的站点来运行。若选择上面的HelloWeb:war,还需要进行部署操作IDEA2023>项目的两种部署方式2026/9/613:53:18在运行项目后,在项目自动生成的文件夹target里,同时包含HelloWeb.war文件和站点文件夹HelloWeb

。服务器配置的URL在项目名后缀_war将HelloWeb.war文件复制到Tomcat9的webapps文件夹。在命令行方式启动服务器后,可以验证自动解压为站点文件夹HelloWeb。这比复制target里文件夹HelloWeb到服务器的webapps文件夹更加方便。浏览器地址栏输入:http://localhost:8080/HelloWebIDEA2023>配置MavenWeb项目>热部署2026/9/613:53:18运行Web项目打开浏览器后,可能还需要修改.jsp页面代码。设置热部署功能后,不需要重启Web服务器,就能在浏览器里刷新JSP页面。重新进入IDEA的编辑界面并做如下设置:JavaWeb项目>会话标识JSESSIONID与Cookie2026/9/613:53:18Cookie系饼干。在计算机技术里,它用于描述在Web应用程序中跟踪和存储的用户信息。用户首次访问站点时,Web服务器创建包含用户标识JSESSIONID的Cookie并在响应头以Set-Cookie字段发送到用户Web浏览器。浏览器收到Cookie后,在客户端以文本文件保存该Cookie信息。存于两端的Cookie信息,在用户关闭浏览器时自动过期。客户端在后续的请求中,将该会话标识作为Cookie的一部分发送给Web服务器,以实现个性化的服务。例如,不同的用户登录。JavaWeb项目>会话标识JSESSIONID与Cookie2026/9/613:53:18IDEA>设置Maven项目及模块*2026/9/613:53:18为了使用JDK8的一些高级特性,通常需要设置项目及模块。使用IDEA的File菜单,进入设置程序(Settings)。对项目设置目标字节码版本。IDEA>设置Maven项目及模块*2026/9/613:53:18File->ProjectStructure,设置项目的SDK版本和语言级别。IDEA>设置Maven项目及模块2026/9/613:53:18项目(Project)由模块(Modules)组成。因此,需要设置进一步设置项目模块的语言级别。Unit2基于Servlet的MVC项目分层架构2026/9/613:53:18Servlet基础

Servlet概述

创建及运行

API及生命周期Servlet/JSP核心对象及其使用关系

JSP概述

请求对象

响应对象

会话对象

其他对象中文乱码EL表达式与JSTL标签库

EL表达式

JSTL标签库MVC模式

JavaBean规范

Lombok插件

ServletMVC架构访问MySQL数据库项目及其分层架构

MySQL8

JDBC原生访问

封装类

以DAO为基础的程序分层架构Servlet监听器与过滤器

概述

监听器

过滤器综合项目MemMana

Web项目测试与调试

学生问题解答Unit2配套的案例项目2026/9/613:53:18综合项目Servlet基础>预备知识:注解2026/9/613:53:18在Java开发中,所有注解使用@打头,可以附加在类/方法/字段上。如@Override注解。在IDEA里跟踪注解源码可知,注解通过关键字@interface定义。注解本质上接口,隐式继承Java标准库中定义注解体系的核心接口java.lang.annotation.Annotation。注解信息的保留阶段分为SOURCE、CLASS和RUNTIME三种。对于RUNTIME保留策略的注解,JVM通过动态代理生成注解实例。注解接口用于提供元数据(描述代码的附加信息),普通接口定义行为契约。注解接口属于声明式编程,通过元数据触发编译器、容器或框架行为;普通接口属于命令式编程,需要显式定义实现逻辑。Servlet基础>概述2026/9/613:53:18Servlet是一种运行于Web服务器端的Java应用程序,需要在项目配置文件web.xml中注册或使用Servlet注解(两者方式等效,后者更方便)。Servlet能动地态响应客户端请求,生成动态的Web页面,从而扩展Web服务器的功能。Servlet通常使用继承抽象类javax.servlet.http.HttpServlet的方式创建,并由Servlet容器管理(Servlet的运行环境)。Servlet容器必须把客户端请求与响应封装成Servlet请求对象和Servlet响应对象并传给Servlet。Servlet使用Servlet请求对象获取客户端的信息,并执行特定业务逻辑;使用Servlet响应对象向客户端发送业务执行的结果。Servlet基础>创建及运行2026/9/613:53:18在项目的pom.xml文件里,添加Maven依赖javaee-api(版本8.0)。javax.servlet.http.HttpServlet是一个不包含任何抽象方法的抽象类。用户开发Servlet时,通常只需要重写基类的doPost()和doGet()方法。通常使用@WebServlet()注解一个Servlet组件。如果不配置,则访问时出现404错误。修改了Servlet程序或配置,需要重启Web服务器才能生效。Servlet基础2026/9/613:53:18必须注释或删除!组件注解时,需要指定请求路径。请求响应的业务逻辑Servlet基础2026/9/613:53:18请求Servlet组件HelloServlet后的页面效果如下:请求Servlet组件HelloServlet后的IDEA控制台效果如下:Servlet基础>控制台输出中文乱码解决方案2026/9/613:53:18在IDEA2023开发的Servlet组件程序里,使控制台输出语句System.out.println()时,默认会出现中文乱码。为避免中文乱码,需要设置VMoptions参数。Servlet基础>ServletAPI2026/9/613:53:18接口javax.servlet.Servlet定义了一组方法:init(ServletConfig)、getServletConfig()、service(ServletRequest,ServletResponse)、getServletInfo()和destroy()。接口ServletConfig、ServletContext、通用请求接口ServletRequest和通用响应接口ServletResponse均为Servlet接口的相关接口。抽象类GenericServlet同时实现了接口Servlet和ServletConfig,提供获取全局对象ServletContext的方法getServletContext()。HttpServlet继承抽象类javax.servlet.http.GenericServlet。因此,可以使用GenericServlet开发Servlet,但必须重写其抽象方法service(ServletRequest,ServletResponse)HTTP请求专用接口HttpServletRequest继承ServletRequest,并在其基础上添加了与HTTP协议相关的方法,用于获取HTTP请求的详细信息。例如请求方法、请求头、请求参数等。HttpServletResponse~ServletResponseServlet基础>ServletAPI2026/9/613:53:18Servlet基础>生命周期方法测试2026/9/613:53:18抽象类GenericServlet定义的实例方法init()、service(ServletRequest,ServletResponse)和destroy()是Servlet的3个重要生命周期方法。方法init()用于初始化,仅执行一次。方法service()可以被多次请求调用。请求Servlet时,按刷新按钮将再次调用服务方法。方法destroy()在销毁Servlet时自动调用。停止Tomcat服务器,将销毁所有Servlet。Servlet基础>生命周期方法测试代码2026/9/613:53:18Servlet/JSP核心对象>ServletvsJSP2026/9/613:53:18JSP(JavaServerPage,Java服务器页)是一种将Java代码嵌入到HTML页面中的技术。JSP页面在服务器端被编译成Servlet,然后被Web服务器执行。JSP页面可以包含静态内容(如HTML标记)和动态内容(如Java代码片段、表达式语法等)。JSP页面通过JSP容器(通常是Web服务器)在客户端发起请求时动态生成。JSP容器是Servlet容器的一部分,它负责编译和执行JSP页面。当JSP页面第一次被请求时,JSP容器将其编译成对应的Servlet,并将其加载到Servlet容器中执行。Servlet容器与JSP容器通常是相同的。例如,ApacheTomcat。JSP页面里,可以直接使用JSP内置对象,如请求对象request等。JSP(JavaServerPage)概述2026/9/613:53:18JSP页面混合多种元素。必须包含一条JSP页面声明指令:

<%@pagepageEncoding="UTF-8">页面元素还可以有HTML标签、CSS样式、JS、JSP标签指令和Java程序段等。JSP的内置对象主要有out、response、request、session、application和pageContext等,它们都只能出现在JSP页面标记Java代码段的<%...%>内。页面间的跳转,有多种实现方式。如链接、表单请求、重定向和转发等。EL表达式简化了对JSP内置对象的访问。用户请求JSP页面时,Web服务器Tomcat将JSP文件转译为一个对应的Servlet程序(在Web服务器工作目录里可以验证)。JSP(JavaServerPage)概述2026/9/613:53:18在IDEA2023里开发JSP页面里时,为了能有代码的自动提示功能,需要在IDEA2023里启用JSP。JSP概述>表达式语法与内置对象out2026/9/613:53:18JSP内置对象out是抽象类javax.servlet.jsp.JspWriter的实例,主要提供了向JSP页面输入信息的print()方法。向JSP页面输入的信息,会显示在浏览器窗口,其内容可以是文本(包括含有HTML代码或JavaScript脚本的超文本)和数值表达式。当<%...%>只有一行输出的代码out.print(exp)时,不必使用<%...%>,而是在JSP页面里使用表达式语法<%=exp%>。JSP概述>简单的pageContext与page对象2026/9/613:53:18对象pageContext表示JSP页面的上下文,它是类javax.servlet.jsp.PageContext

的实例对象pageContext。调用类PageContext的相关方法,可以创建JSP的其它内置对象。即PageContext起到桥梁作用。page表示当前JSP页面。Servlet/JSP核心对象>请求对象2026/9/613:53:18JSP内置对象request表示客户端对Web服务器的请求对象,它是接口javax.servlet.http.HttpServletRequest的实例,封装了客户端请求的相关信息。方法getParameter("name")获取指定参数name的值。其中,name为超链接参数名或表单元素名,方法返回值为String类型。方法setCharacterEncoding("utf-8")设置请求信息的字符编码。如表单提交的信息含有中文时,在表单处理程序开始处必须使用本指令。方法request.setAttribute("kn",obj)用于设置属性。方法request.getAttribute("kn")用于获取属性。Servlet/JSP核心对象>请求对象2026/9/613:53:18方法getSession()用于获取会话对象。虽然在JSP页面里可以直接使用内置的会话对话session,但在Servlet开发时,要重写的方法参数只包含请求与响应两个基本对象,而没有会话对象。因此,需要掌握本方法。方法getRequestDispatcher()用于获取请求转发对象,常用于MVC项目开发(下一讲介绍)。请求转发时,浏览器地址栏不会变化(即没有产生新的请求),这不同于重定向操作。方法getContextPath()用于获取当前Web应用的上下文路径,是相对于服务器根路径的相对路径(通常以/开头),不包含协议、域名和端口号。上下文路径与请求的页面无关。请求级别的方法getRequestURL()与getRequestURI(),分别用于获取请求的绝对路径(包含协议、服务器名称、端口号)和相对路径。Servlet/JSP核心对象>响应对象2026/9/613:53:18JSP内置对象response表示服务器对客户端请求进行响应的对象,它是接口javax.servlet.http.HttpServletResponse的实例。方法sendRedirect(url)重定向请求、产生页面跳转,地址栏发生变化,产生新的请求。方法setContentType("text/html;charset=utf-8")用于设置响应信息的内容类型及字符编码,常用于Servlet程序里。

等效于setContentType("text/html")+setCharacterEncoding("utf-8")或setHeader("ContentType","text/html")+setCharacterEncoding("utf-8")方法getWriter()获取java.io.PrinterWriter类型的打印字符流对象。方法setHeader("refresh","3;url=跳转页面.jsp")设置页面自动刷新和跳转(3秒后)。Servlet/JSP核心对象>会话原理2026/9/613:53:18一次会话是指用户打开站点(Web服务器)、直到关闭浏览器的过程。Cookie系饼干。在计算机技术里,它用于描述在Web应用程序中跟踪和存储的用户信息。当用户打开浏览器开始访问JSP站点时(先前未打开),Web服务器就会为该用户创建一个新的会话、生成唯一的会话标识JSESSIONID并通过Set-Cookie字段添加到响应头中,发送到用户的浏览器。浏览器接收到响应后,会将这个Cookie保存起来。用户在后续请求中,将该用户会话标识作为请求头里Cookie字段的一部分发送给Web服务器,以便服务器识别不同的会话用户。Servlet/JSP核心对象>会话对象2026/9/613:53:18JSP内置对象session是接口javax.servlet.http.HttpSession的实例,通过使用请求对象的getSession()方法获得其实例。方法setAttribute("属性名",值)设置指定名称的属性值。如在用户登录成功时保存用户名信息。又如,存放用户访问页面时的结果数据。基于Cookie的会话信息不会因为客户端页面跳转而消失。方法getAttribute("属性名")获取指定名称的属性值。方法invalidate()使会话信息不可用。如在用户登出时注销用户名信息。方法isNew()判断是否为新的会话对象,常用于网站在线人数统计。2026/9/613:53:18单击主页里的【模拟登录】时,在请求头携带包含用户标识的Cookie,以便Web服务器识别当前当前用户。在登录页里,单击【返回主页】链接,主页将显示已经登录的用户名。JSESSIONIDAndCookieAndSession项目wzx2026/9/613:53:18JSESSIONIDAndCookieAndSession项目JSESSIONIDAndCookieAndSession项目2026/9/613:53:18查看响应头里Set-Cookie字段包含的用户会话标识JSESSIONID。选择Application,查看当前请求域http://localhost:8080的Cookie字段包含的用户会话标识JSESSIONID。在页面里单击【模拟登录】链接,在调试窗口单击请求名称后,请求头Cookie字段包含用户会话标识,而响应头不包含Set-Cookie字段。JSESSIONIDAndCookieAndSession项目2026/9/613:53:18依次选择Application->Storage->Cookies后,单击站点域名,也可以看到JSESSIONID(用户会话标识)。示例项目:JSP基础2026/9/613:53:18Web项目JSPBasics仅使用JSP技术Web站点根目录表单及其处理程序、重定向表单自处理请求转发、EL表达式网站页面在线人数统计用于测试JSP与Servlet关系,详见实验1指导JSP不足、MVC架构引例主页Servlet/JSP其他对象>页面上下文2026/9/613:53:18JSP内置对象pageContext是javax.servlet.jsp.PageContext接口的实例对象,提供了对JSP页面中所有其他内置对象的访问,同时还提供了页面范围的属性管理功能。重要方法:getServletContext()和getServletConfig()在Tomcat服务器将JSP文件转译为Servlet程序时,先创建PageContext的实例对象。接口PageContext定义:Servlet/JSP其他对象>上下文对象2026/9/613:53:18JSP内置对象application是applicationjavax.servlet.ServletContext接口的实例对象,application对象代表整个Web应用程序的上下文环境,它的生命周期从Web应用启动开始,直到应用关闭或服务器停止。application对象在整个Web应用程序中是唯一的(即所有用户共享同一个实例),它负责提供应用程序在服务器中运行时的一些全局信息,为网站所有用户共享。在Servlet程序里,对请求对象使用getServletContext()方法获得上下文对象。Web服务器一旦启动,就会自动创建application对象。网站在线人数统计是Web开发的常用功能,需要联合使用session和application对象。如果不将访问人数写入数据库,则在服务器重启后将重新统计。JSP网站在线人数的统计,也通过监听器实现,参见Servlet监听器。示例项目:Servlet基础2026/9/613:53:18主页效果示例项目:Servlet基础>创建2026/9/613:53:18示例项目:Servlet基础>Servlet生命周期2026/9/613:53:18Servlet容器在运行项目时,会创建一个全局上下文环境对象ServletContext。Servlet定义了获取全局对象ServletContext的方法getServletContext(),并设置属性onlineCount表示上线人数。在Servlet生命周期方法init(),初始化网站上线人数为1。在Servlet的服务方法doPost()或service()里,利用会话对象的isNew()方法判定是否为新用户在请求(上线)。在同一电脑上,使用不同的浏览器访问同一站点,模拟新用户上线。示例项目:Servlet基础>网站上线人数统计2026/9/613:53:18综合示例:请求-响应-会话2026/9/613:53:18示例项目:网站页面在线人数统计2026/9/613:53:18EL表达式2026/9/613:53:18表达式语言(ExpressionLanguage,EL)是一种简单易用的语言,可以简化对JSP内置对象(pageContext、session和request等)和JavaBean组件的访问。Servlet项目引入的javaee-api-8.0.jar提供了对EL表达式的支持。因此,使用EL表达式时,无需引入额外的.jar包。EL表达式(续)2026/9/613:53:18EL表达式提供了一种简洁的方式来访问JSP中的域对象以及它们的属性,其用法格式是:${域对象别名.关键字}域对象别名是EL中预定义的变量,用于访问JSP中的不同作用域;关键字是存储在域对象中的属性名称。EL域对象均为Map<String,Object>类型,它与JSP内置对象相对应,如下表所示。EL表达式(续)2026/9/613:53:18EL表达式里域对象别名在不引起二义性时可以省略。当省略时,将根据关键字在四个域里(从最小范围pageScope到最大范围applicationScope)依次查找数据,找到后就不再继续查找。示例${sessionScope.username}${username}<%=session.getAttribute("username")%>如果JSP页面的EL表达式不能被正确解析,则需要在<@page…%>指令里添加属性isELIgnored="false"JSTL标签库2026/9/613:53:18JSTL(JSPStandardedTagLibrary,即JSP标准标签类库)是由JCP(JavacommunityProcess)所制定的标准规范,它主要提供给JavaWeb开发人员一个标准、通用的标签类库,并由Apache的Jakarta小组来维护。使用JSTL标签后,就不必在页面里嵌入Java代码段,避免了Java代码与HTML代码的混合编写。使用JSTL标签前,需要对项目引入JSTLjar包依赖,其pom坐标如下:在JSP页面里使用JSTL标签时,必须在JSP页面开头添加如下引入标签库的指令代码:

<%@taglibprefix="c"uri="/jstl/core_rt"%>JSTL标签常用于MVC项目的视图页面设计。JSTL标签库>简单标签<c:set>和<c:out>2026/9/613:53:18标签<c:set>用于设置变量值和对象属性,基本使用格式如下:<c:setvar="变量名"value="表达式"/>标签<c:out>用来显示一个表达式的结果,基本使用格式如下:<c:outvalue="表达式"/>JSTL标签库>条件标签<c:if>2026/9/613:53:18标签<c:if>用来显示一个表达式的结果,基本使用格式如下:<c:iftest="测试条件">

标签体</c:if>测试条件一般使用EL表达式。JSTL标签库>循环标签<c:forEach>2026/9/613:53:18循环标签<c:forEach>常用于访问Java集合对象(如List类型)里的各个元素,常用格式如下:<c:forEachitems="${集合名}"var="变量名"

使用集合元素的代码</c:forEach>其中,items和var是保留字。请求转发-EL-JSTL>综合示例2026/9/613:53:18设置转发数据请求转发-EL-JSTL>综合示例>目标视图2026/9/613:53:18MVC模式>问题的提出2026/9/613:53:18MVC模式>纯JSP技术的不足2026/9/613:53:18业务逻辑代码与界面展示代码耦合度高。业务逻辑(判断用户输入是否正确)与展示逻辑(显示结果和图像)混在一起,需要使用较多的定界符<%和%>。可维护性差。随着业务逻辑的复杂化,JSP文件会变得越来越臃肿,难以维护。不利于团队分工协作。前端开发人员和后端开发人员共同维护一个JSP页面。其他场景:以表格方式动态显示访问数据库的结果数据。MVC模式预备>JavaBean规范2026/9/613:53:18按照Sun公司的定义,JavaBean是一个可复用、特殊的Java类,封装了某些属性和方法,用于创建具有某种功能或者处理某个业务的对象。JavaBean规范:(1)类声明为public类型,属性声明为private类型。

(2)提供public类型的无参构造方法。(3)这个类的属性使用getter和setter来访问,其他方法遵从标准命名规范。(4)实现Serializable接口,以便对象在网络中传输。如果JavaBean封装了其他业务逻辑方法,由称其为增强版的JavaBean。MVC模式预备>实体类POJO2026/9/613:53:18POJO(PlainOrdinaryJavaObject),即简单、普通的Java实体类,可认为Java实体类是若干类型的数据的集合体。在业务方法方面里,使用实体类类型参数将更加方便(相当离散变量类型)。与JavaBean相比,POJO不包含任何业务逻辑,仅有构造方法和getter/setter方法。集成开发环境都提供了根据属性自动生成构造方法和getter/setter方法的功能,使用Lombok插件更加方便。通常会对POJO重写toString()方法。例如,输出MVC项目里转发的结果数据,或者ORM框架处理的数据对象。MVC模式预备>Lombok插件、依赖及注解2026/9/613:53:18实际开发中,经常需要编写Java实体类,花较多时间添加一些无技术含量的getter/setter/toString()等方法代码,维护起来也很繁琐。Lombok是一个Java库,用于简化Java开发。通过添加注解的方式,不需要为实体类编写getter等方法,实现了在源码中没有getter/setter/toString()和(有参与无参)构造方法等方法,而编译后的字节码文件里自动生成。IDEA2023内置了Lombok插件。使用Lombok前,需要确认已经启用,这可以使用菜单File→Settings→Plugins,在已安装插件里搜索。Lombok依赖:在IDEA2023里,如果没有启用本插件、只是项目添加了pom依赖,则使用setter/getter等方法时,不会出现联机支持(尽管不影响运行)。MVC模式预备>Lombok注解2026/9/613:53:18@Data:生成所有成员属性的getter、setter、toString()方法、equals()和hashCode()方法。@NoArgsConstructor:生成无参的构造方法。@AllArgsConstructor:生成包含所有成员属性的构造方法。@Builder:生成包含多个任选属性的对象,称为建造者注解。使用本注解,要求与@NoArgsConstructor和@AllArgsConstructor连用。UserobjectUser=User.builder().username("lisi").password("222").build();静态方法实例方法字符串数据输出格式不同基于Servlet的MVC项目架构2026/9/613:53:18MVC是一种流行的Web项目架构模式,MVC模式将项目划分为模型(Model)、视图(View)和控制器(Controller)三个部分,分别对应于内部数据(使用JavaBean)、数据表示(使用JSP作为视图)和输入输出控制(使用Servlet)。MVC模式=JSP+JavaBean+Servlet。MVC模式是一种组织代码的规范,也是一种将业务逻辑与数据显示相分离的方法,其工作流程如下:(1)来自客户端的请求信息,首先提交给Servlet;(2)控制器选择相应的Model对象(即某个JavaBean)处理获取的数据;(3)JSP获取JavaBean处理的数据;(4)控制器选择相应的View组件,通常表现为做请求转发处理;(5)JSP接收已经组织好的数据以响应的方式返回给客户端浏览器。基于Servlet的MVC项目架构>示例2026/9/613:53:18MVCMySQL数据库项目>MySQL8服务器2026/9/613:53:18MySQL是一种关系型数据库服务器软件。MySQL服务,可以通过右键我的电脑→管理→……的方式查看。通过MySQL命令行客户端程序,进入MySQL命令行方式。进入时,需要输入root用户的密码。在MySQL命令行,输入、执行SQL命令,效率较低且容易出错。MySQL数据库项目>MySQL8>Workbench2026/9/613:53:18Workbench提供了图形化的用户界面(GUI),用户在SQL命令输入窗口及执行SQL查询的按钮等。可以直接执行外部的SQL脚本,用以快速地创建MySQL数据库。可以导出MySQL数据库的SQL脚本,以方便移植。MySQL数据库项目>JDBC技术规范2026/9/613:53:18JDBC原生使用示例>查询2026/9/613:53:18JDBC原生使用示例>增、删、改2026/9/613:53:18根据条件,删除记录MySQL数据库项目>MySQL封装类2026/9/613:53:18对连接对象使用方法createStatement()得到的对象类型是接口Statement的实例,执行SQL命令时,不能使用占位符“?”。即不支持参数式查询。JDBC提供了Statement的子接口PreparedStatement,它支持参数式查询,即SQL命令里可以使用占位符“?”。超星课程分别提供了支持参数式查询的MySQL工具类MyDb2。MySQL数据库项目>MySQL封装类

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论