手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用

JSP+Servlet+Tomcat实现一个简单的Web应用

  • 需要使用到的技术
    • ①JSP
    • ② Servlet
    • ③Tomcat
      • Web开发中的常见概念
  • Demo

*本文针对编程务实实验内容,简单演示一下搭建一个最简单Java web项目的过程,供刚入门的同学快速上手。*   

需要使用到的技术

①JSP

JSP(JavaServer Pages)是html的一种拓展,其特点是能够在页面中嵌入Java代码,在浏览器加载页面的时候执行这些java代码,以此实现与服务器端的业务交互,进而生成动态的网页。

(这里指的动态指的是页面数据不是硬编码在页面代码中,而是将请求服务器端得到的数据“贴”到网页中)

这里还会使用到EL表达式和JSTL表达式,我之后会讲到,不用担心,非常简单。

② Servlet

Servlet运行在服务端的Java小程序,是sun公司提供的一套规范(接口),用来处理客户端请求、响应给浏览器的动态资源

Servlet的实质就是java代码,通过java的API动态地向客户端输出内容。

Servlet规范:包含三个技术点(三大组件)
1)servlet技术——核心技术
2)filter技术——过滤器
3)listener技术——监听器

编程务实课程的项目结构较简单,主要需要使用到servlet,过滤器和监听器同学们有兴趣可以自行了解学习。

③Tomcat

Web开发中的常见概念

  • B/S系统和C/S系统

Brower/Server:浏览器 服务器 系统 ----- 网站
Client/Server:客户端 服务器 系统 ----- QQ、大型游戏

  • web应用服务器

供向外部发布web资源的服务器软件

  • web资源

存在于web应用服务器可供外界访问的资源就是web资源
例如:存在于web应用服务器内部的Html、Css、js、图片、视频等

1)静态资源:指web页面中供人们浏览的数据始终是不变。比如:HTML、CSS、 JS、图片、多媒体。
2)动态资源:指web页面中供人们浏览的数据是由程序产生的,不同时间点访问 web页面看到的内容各不相同。比如:JSP/Servlet、ASP、PHP
javaWEB领域:动态资源即通过java代码去动态地生成html

Demo

开发环境:Eclipse for JAVAEE + JDK1.8 + tomcat9.0
Demo源码:
https://github.com/Boyy-Next-Door/-
考虑到可能有的同学访问不了github,我这儿也打了个压缩包发到百度网盘上:
https://pan.baidu.com/s/1YCG6UuwwlG9F-Ko6t3-Gfw
提取码:z6v8

首先确保安装Eclipse IDE for Enterprise Java Developers

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第1张图片

新建Dynamic Web Project
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第2张图片
项目设置如下:
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第3张图片
注意:这里使用的module version版本为2.5,最新的已经到4.0了(新版本加入自动加入servlet注解等特性),可以用,但没必要。

一路Next或直接Finish,项目结构如下:

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第4张图片
分包如上图,具体地可以自行了解javaWeb的三层架构。
web:存放servlet、filter、listener类
service:存放service层对象
dao:存放数据连接层的对象
beans:存放实体类,例如实验中的User、Person类
utils:工具类,包括实验1自己封装的DataSourceUtils

创建第一个Servlet:
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第5张图片
设置如下:
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第6张图片
主要将Servlet存放在.web包下,再取个好听的名字。(我随便说的,一般根据Servlet的功能命名)
点击Next,我们设置一下web.xml中关于该Servlet的部分属性。
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第7张图片
一般习惯性地把URL Pattern去掉类中的Servlet并把首字母改成小写。
点击Next可以选择生成Servlet子类中的初始内容,也可以用默认的直接Finish。

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第8张图片
doPost()和doGet()是处理两种不同请求方式的入口,至于http的请求方式自行百度。
(可能我之后会写篇博客单独介绍^^)

点击Finish,查看生成的java代码:
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第9张图片
看起来挺复杂的,咱先把没用的全删了:

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第10张图片
可以看到doPost方法中直接调用了doGet方法,意思就是说默认用同一种逻辑处理这两种形式的请求。
doGet方法如下:

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

好了,现在我们已经成功创建了第一个Servlet了,这玩意儿怎么用呢?

首先把这个web应用发布到tomcat上,这个事儿Eclipse可以帮你做。

左侧的Project Explorer ——> 右键该项目——> Run As ——> Run on Server
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第11张图片
选择合适的tomcat版本,选择自己本地解压的文件夹。 (好像eclipse会自动识别路径)

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第12张图片
这里选择Apache,在里面选择某个版本的tomcat

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第13张图片
直接点击Finish创建并运行这个web服务器。

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第14张图片

如果你看到这一片红彤彤的东西,那么恭喜你,tomcat已经成功开启,项目已经部署好了!
这时候你的eclipse应该会自动开启内嵌的自带浏览器并且给你显示一个令人绝望的404页面:
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第15张图片
不过——

我们遇到什么困难,也不要怕!
微笑着面对它!
消除恐惧的最好办法,就是微笑着面对!
坚持,才是胜利!
加油!
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第16张图片
我们先看看浏览器访问的资源:
在这里插入图片描述
localhost:8080是tomcat在你本地的端口号。
后面紧跟的是我们发布的web项目名称。
最后一个斜杠后是空的,那么tomcat会访问该应用下的默认资源。
那么这个默认资源在哪里看呢?我们回到刚刚的项目结构。
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第17张图片
找到这个web.xml文件

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第18张图片

之前提到的servlet、filter、listener资源都会在这里进行配置,它是我们整个web项目的核心配置文件。

现在我们随便创建一个静态网页,存放在WebContent文件夹内:
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第19张图片

现在可以在浏览器中访问这个资源:
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第20张图片
你还可以直接访问这张图片:
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第21张图片
至此,你已经学会了如何访问web项目中的静态资源,接下来说说刚刚创建的servlet。

访问servlet实际上就相当于,在浏览器中,远程执行web项目中的Servlet中的某个方法,以进行某些业务操作(例如数据库的增删改查、获取某些参数)。

还记得刚刚创建Servlet时修改的url-pattern吗,我们直接在url中访问它:

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第22张图片

页面显示了这样一堆东西,具体地还要看刚刚重写的doGet方法:
会通过response对象将"served at: "加上该项目的地址, 也就是上面显示的一大串。
(由于项目名我用的是中文,这里存在编码问题,暂且先不处理)
在这里插入图片描述
我们修改一下代码,现在试图把一个字符串返回给浏览器,让它以超链接的形式显示出来。

经典老办法是用response.getWriter().appdend()直接将一个HTML代码的文本返回:

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第23张图片
这样我们能够动态地返回html页面了
(说出来你可能不信,很多年前的网页就是通过这样在servlet中拼字符串构成Html代码实现的,那时候程序员真的不容易,不过工资也确实高)
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第24张图片

我赌五毛,这样的返回方式大家都不太喜欢,忒麻烦了,我们想要的效果是,通过servlet返回一些数据,再由浏览器将这些数据插入到已有的html代码中。

于是我们就引出了JSP以及相关的EL表达式、JSTL表达式技术。
(具体的可以找我本人要javaweb保姆式整理学习笔记^^ 兴许我一高兴就给你了呢)

首先需要两个jar包——standard.jar 和 jstl.jar 把它们放到WebContent/WEB-INF-lib中
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第25张图片
在这里按住ctrl键选中两个jar包,右键->Build Path->Add to Build Path 添加到构建路径
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第26张图片
现在新建一个JSP页面,导入一个库标签,并且写入以下内容:

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第27张图片
EL表达式和JSTL结合之后就可以实现绝大多数嵌入JSP页面的java代码的功能
(之所以用这两个表达式,就是为了淘汰掉页面嵌入java代码这种技术,让它更规范得体)

接下来我们访问这个jsp页面:

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第28张图片
接下来我们引入request、session的概念,来体会一下实际开发中的页面/servlet之间的参数传递。
直接上代码,至于原理细节,同样在我的保姆学习笔记里有 : )

我们回到刚刚写的AuLeeGayServlet,试图把巨魔の正能量演讲贴到2.jsp页面中:

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第29张图片
2.jsp内容如下:

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第30张图片
注意到forEach的内容和刚刚演示的循环不太一样
这里简单解释一下:
${pageContext.request.contextPath} 这一句话,可以在JSP的任意位置代替当前访问web项目的根目录路径,这一句用的非常非常频繁。
${requestScope.imgURL} 指的是从request域中,试图获取一个叫做imgURL的属性
在这里插入图片描述
这和刚刚向request中setAttribute相呼应
由此 ${pageContext.request.contextPath} ${requestScope.imgURL} 拼接而成的,就是巨魔の照片在我们项目中的url地址。(一般来说页面中的图片,都是服务器返回URL地址,再由浏览器异步加载渲染贴入到页面中的)

 //遍历request中获取到的messages集合 
	

${message }


//var="message"就相当于 for(int i=0;;)里的i
//${message}就相当于messages[i]的内容

现在我们如果直接访问2.jsp,是没有任何数据的:
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第31张图片

servlet+JSP模式的执行关系是:
1.浏览器访问servlet
2.servlet在某个域中存储数据
3.servlet以某种方式告诉浏览器进行页面跳转
4.浏览器跳转到新页面,根据EL和JSTL表达式获取某个域中的数据并动态展示到JSP页面中
5.浏览器加载完毕
6.用户看到浏览器的内容

于是我们知道,对于需要准备数据的页面,我们都不应该直接访问,而是访问某个servlet,准备数据之后再跳转过去。现在我们访问AuLeeGayServlet

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第32张图片

实际上,通过浏览器实现与服务器端的数据交互,还差一个环节,就是浏览器页面的数据提交。
现在我们做一个简单的表单页面3.jsp
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第33张图片
之后修改AuLeeGayServlet的内容,把这个输入存到数据集中

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第34张图片
现在我们预想的效果——
访问3.jsp,有一个表单,输入用户名,点击提交,之后会跳转到2.jsp
显示巨魔の照片+刚刚输入的用户名+巨魔の正义演讲

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第35张图片
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第36张图片
完美!!!

至此,你已经学会了构建一个简单javaweb项目的前后端简单交互的全部技术,可以开始做实验辣!!!

剩下的实验内容就要靠同学们结合实验一所学,通过servlet结合自己封装的dao层进行数据库的增删改查啦~

最后的最后展示一下我做的实验二
再来!
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第37张图片
手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第38张图片

手把手教你用JSP+Servlet+Tomcat实现一个最简单的Web应用_第39张图片
完事儿!

欢迎与我私下学习交流哈

你可能感兴趣的:(JavaWeb,JSP,Servlet,简单JAVAWEB应用,编程务实训练)