0基础学习Java开发之Java Wed编程----《第一章初动态网页》--B/S架构，URL，HTTP,动态网页，部署Wed应用程序，使用Tomct部署Wed应用，Jsp,Idea 快发Wed项目

——问题：为什么需要动态网页？

答：就如下图1.1假如淘宝是个静态网页，他就无法对静态网页的内容进行实时更新，无法实现搜索，购买，登录等交互功能能。例子：l1.1

——问题：动态网页是什么？

答：就如下图1.2面对百度而言，动态网页就是，根据用户输入不同的输入或操作，结合实际的数组返回不同的网页。

例子：1.2

我相信通过上面的讲解大家知道了什么是动态网页，为什么要使用动态网页，动态网页和静态网页的区别，那么下面我们来了解什么是B/S架构，什么是URL.....

那么在学习B/S框架之前我们先来了解一下C/S模式，那么C/S模式这个C指的就是客户端，S指的是服务器端。

—— 问题：那么客户端是用来干什么的呢 那么服务器端用来干什么呢？

答：客户端主要是给客户有一个完美的展示一个界面，如果为了速度快，还会加载一个缓存。

答：服务器端会保存一些核心的数据，比如说你的用户信息啊，你的好友啊..

总之说对于C/S模式，客户端C端就是负责显示的，S端服务器端就是储存一些关键代码，当你需要什么样的数据时，就通过客户端请求你的服务器端，把你的关键数据拿到你的本地，这个就是C/S模式交互。

——C/S模式的缺点有哪些？

答：如下图1.3所示：我们每年腾讯QQ有了新的版本就比如,QQ2015,QQ2016,那么如果你想把你的QQ2015升级到QQ2016,那么首先你要下载QQ2016的安装包，然后把他安装到本地，替换掉，你本身保存的2015的安装包，这样才能升级，那么这样就对于我们QQ而来是比较繁琐的，那么对于我们C/S模式来说我们有时候需要多个客户端，那么你就要下载多个安装包，就消耗了系统资源。

例子1.3

那么大家就会想有没有一个东西，可以把C/S这种不足把他弥补呢，同时我们还能完成我们的功能呢？

  那么这个就是我们所说的B/S模式，那么B/S模式的实现思路是啥呢？既然你客户端资源比较繁琐的话，看一下繁琐的问题出现在哪，我们最后发现我们繁琐的问题出现在，需要下载新的安装包，而把旧的安装包替换掉，换一句话说就是，我们把这个安装包放到了本地，所以说每回比较麻烦，那么我们能不能把一下素材包括其他的文件我们全部都安装到服务器端呢？当我需要的时候再去服务器请求，就是我并不在我的客户端本地，保存东西，把他们全部保存到服务器，想要的时候我们再去服务端去要，这样的话我们就不存在客户端升级的事情了，因为所有的数据都在服务器端。

什么是B/S模式？

答：B/S和C/S最大的不同就是B/S完全部署在服务器上的，对于C/S模式我们有一部分程序是保存在C端的，对于我们B/S模式来说完全部署在服务器上，如下图：1.4 假如你现在要访问百度，你就通过浏览器然后去请求服务器，再把百度的数据拿回去，最后在通过浏览器渲染出来，这个就是我们B/C模式。

例子：1.4

 B/S带来的全新体验

答：B/S模式给我们程序界，带来了非常便利的资源，假如你是个作家，想要写网络小说，找一个网站发布一篇文章，如下图：1.5 其他人就可以通过浏览器来访问，他也有一个最大的好处，你再也不用安装软件，假如你要访问百度，就可以直接输入百度的网址....

例子：1.5

 B/S与C/S的比较

答：通过下图大家可以看见B/S与C/S的区别对于第一个软件安装，B/S架构直接就可以访问，而C/S架构就需要下载安装包，对于第二个对于B/S架构没有客户端，所以它不需要维护，但对于C/S架构他有客户端，所以需要单独的维护和升级，如果需要升级你还需要从新下载安装包。对于第三个平台相关，使用B/S架构假如你要访问百度的页面，可以直接进入百度页面，但对于C/S架构对用户有一些限制。对于第四个性能安全，对于B/S架构来说速度比C/S架构慢，但对于安全来说返回给B/S架构来说如果不是html代码他是不能识别的假如你要输入支付密码还需要花更多的成本，但对于C/S架构来说C/S本来就是开发商发明的，所以对于安全，它可以定义任何的加密模式，所以说C/S架构会更加安全一些。

例子：1.6

B/S模式的工作原理

答：假如我们要访问我们的百度，根据例子：1.7 根据用户的输入进行到浏览器，浏览器发送请求，到百度的服务器，服务器检查没有什么问题，就访问数据库，数据库看你访问的东西在返回给服务器，服务器进行组装，组转成莫一种格式，返回给浏览器给大家进行展示。

  那对于B/S架构和C/S架构的区别就是C/S架构会返回一些关键代码，而我们B/S架构返回的就是HTML文件。

#B/S架构采用请求/响应模式进行交互

#B/S架构具有灵活更新，节省系统等优点

 例子：1.7

 相信通过上面的了解大家已经能知道，动态网页是啥，B/S框架和C/S框架 那么下面我们来学习URL和Tomcat.

URL叫啥,他的组成是啥？

URL全名叫做：Uniform Resource Locator

在中文里叫：统一资源定位符.

UEL他是用来定位的，定位什么呢可能是html,也可能是素材css以及我们的js。

  URL的组成分为3部分，分别是如下图：1.8，协议部分，主机地址端口号，项目资源地址，首先我们来

——协议部分

看协议部分，对于我们URL有两个协议，第一个是http协议，第二个是https协议，https s指的是：safle翻译过来就是安全的，http翻译过来就是：超文本传输协议，大家看到《超文本》是不是有带点熟悉，我们的HTMLL翻译过来叫：超文本标记语言，那我们http传输的是啥呢，就是超文本，那超文本不就是html吗，这个就是我们的协议部分，那么在一般在我们协议部分结束的时候我们会在http后面加：// 表示结束的意思。 

——主机 地址 端口号

那么这个时候有人说了，我在访问百度的时候也没有ip地址啊，那你一定输入了域名，在这里输入端口号也好，输入域名也好都行。

——项目资源路径

在一般我们的主机和端口号后面会有一个项目名在后来可能跟一个文件的名称或目录，代表的就是在我们的项目下，我的文件位于什么位置

 例子：1.8

Tomcat是什么呢？

我可以看到下图1.9右边的猫就是我们Tomcat的标志，那么Tomcat是个什么呢，那么我们还是要回到我们的B/S模式的运行原理，如果我们想要请求一个网页，我们的浏览器请求服务器，服务器根据我们要的返回给浏览器，那么我们学会了URL请求服务器，通过html给浏览器，那么我们还缺少最关键的的一个那就是搭建服务器Tomcat主要干什么呢，1.接收URL请求， 2.返回数据。大家可以看见下图 1.9 Tomcat 的开发者Apache 就是一个App基金会，他的作用就是应用于软件的服务器，最新版本现在已经更新到Tomcat9.0,说了折磨多下面我们开始是实战，那么在实战之前我们要先下载Tomcat.

 例子：1.9

下载Tomcat

1.我们先打开浏览器在搜索栏搜索 Tomcat ，也可以直接进入上面 1.9图里面的官网，进入之后，

点击下图2.0。

 例子：2.0

2.点击进入以后我们可以看见我们Tomcat的标签小黄猫，那么在我们左侧如下图 2.1有一个画横线的，他的下面有Tomcat的版本，Tomcat8，Tomcat9，Tomcat10等等，那么我下载的就是Tomcat8的比较稳定,希望大家跟我一起下，那我们要下载那个就点击那个，那我就点击Tomcat8。

 例子：2.1

3.那我们点击Tomcat8就如图2.1所示，我们要下载Tomcat的核心包就是我们Core下面的大家可以看到下面有32，64，等如果你的电脑是64GBj就下载64G的是别的就下载别的，一般都是64的，我们点击下载。

 例子：2.1

4.那么我已经下载好了并且把它搁到了目录下，大家可以看见下图的下载完毕之后的。

例子：2.2 

5.那么大家下好了可能还不知道Tomcat里面的目录用来干嘛的，那么下面我来给大家介绍一下，大家可以看到下面2.4是安装过后的目录，2.3是来解释这些目录用来干什么的，那么我来给为大家讲解一下，那么首先排名第一的就是我们的/bin目录，那麽就会有人想这个/目录是用来干什么的呢，对于我们Java来说，我们会把一些项目文件的脚本放在/bin目录下，那么第二个/conf,就是用来存放我们Tomcat的各种配置文件的，接下来就是我们的/lib目录，他存放的就是我们Tomcat运行时需要的java文件，那么下面是/logs存放的是Tomcat的日志文件，在下面/temp存放的就是Tomcat运行时存放的临时文件，如果Tomcat运行一段时间后，如果你设置缓存了，他里面就有缓存了就可以删掉了，那么下面就是我么的核心目录了/webapps它是用来如果我们要发布wed,我们就好把我们的wed存放到/webapps,下面的/work是我们生成的一下些文件保存到我们的/work目录下面

例子;2.3

例子：2.4 

Tomcat服务器应用

那下面我们来配置Tomcat根据下面 2.5进行一一配置。11

 例子：2.5

1.解压完毕那么下面我们来配置环境变量，图2.6右键此电脑属性，图 2.7点击高级系统设置，单机环境变量,图2.8新建，变量名为：CATALINA_HOME，变量值：就是自己的文件地址，比如我的就是：D:\apache-tomcat-10.0.20，在那个盘就像我这样，然后点击确认，我们就已经完成，那下面我们来测试一下，我们配置成功了吗，

 例子：2.6

 例子：2.7

例子;2.8 

2.启动Tomcat和停止Tomcat

图：2.9 首先我们找到我们安装的Tomcat文件里面的bin文件里，startup.bat双击进去，如果大家带点击进去如图;3.0一样 那么我们就成功了，如果我们闪退那就是环境变量配置错了，好好看看上面的配置，如果不是那就是Java环境变量配置错误，我们进入百度，搜索Tomcat环境变量按照教程把环境变量配置好，我们在继续接下来的学习。那么我们启动成功了我们到，Tomcat官网看看我们能不能进去，首先我们打开浏览器，如图3.1 localhost 意识是本机,我们可以输入本机8080,如果显示如图：3.2 就表示我们测试成功，那我们如何关闭Tomcat呢，就如图 3.0 点击X 就关闭了，我们在按照刚刚的方式去验证我们还能进去Tomcat的官网吗，大家可以发现我们已经进去了，

 例子：2.9

 例子：3.0

 例子：3.1

例子;3.2 

那我们配置完Tomcat，那如果Tomcat比如8080被俩个占用了咋办那下面我们就来学习一下Tomcat的端口配置。

Tomcat的端口配置

我们修改Tomcat端口使用的是我们Tomcat安装包下面的conf目录找到server.xtml然后根据下图3.3里面的port修改成你想要搞得端口号，然后保存，我们在启动一下Tomcat在他的官网输入端口号，大家可以发现，以前的端口号不可以了，输入我们刚刚改的就可以了，这就是我们的Tomcat修改端口号。

例子：3.3

我相信通过上面的了解，我们已经知道了Tomcat干嘛的，端口号啊，URL的组成啊，下面如图 3.4我给大家总结了一些知识大家多理解，下面我们要开始敲代码了。

例子：3.4

创建，部署和发布项目

我们先来了解一下我wed的运行原理，首先如图; 3.5 我们主要分为三部，首先我们把wed的代码打包发给webapps目录，这里webapps就是我们Tomcat下面的目录如图3.6 大家可以看见他和我们的conf和我们的work目录 属于同一级别，最后一个访问，当然我们访问我们要遵顼我么之前讲的URL所讲的标准。 

 例子：3.5

例子;3.6 

wed应用的目录结构

那么我们来了解wed目录的结构如图 3.7第一个/是根目录的意思，我们一般存放一些用户访问客户端用到的东西，第二个/web-lnf子目录存放的是一些使用的资源，安全效率高，那么最后两个一个是存放我们以后java生成的class文件，另一个是存放wed使用的jar文件，简单来说就是我们第三方使用的java包。

 例子：3.7

那么下面我们来写完一个wed项目，下图：3.8 新建一个文件，然后点进去，下图： 3.9 再创建一个文件夹我们起名为：name，这就是我们的name项目，那么name就属于我们的根目录了，如图： 4.0  我们在根目录name下面创建 WEB-INF文件,在根据下图：4.1创建两个文件夹，一个是classes是用来存放我们编译好的java文件，另一个是lib是用来存放我们项目依赖的java包，这样我们项目最基本的项目结构就创建好了，那么如图：4.2 我们在name项目下创建一个html文件后缀名改为html就可以了， 如图：4.3下面我们来编写html文件，编写完成我们复制我们的name项目，如图：4.4 把他发布到服务器，怎么发送呢，把他粘贴到我们Tomcat webapps 下面来，那么发布成功后我们来访问这个项目，我们打开Tomcat服务，打开以后，我们打开我们的浏览器，先检测我们Tomcat启动成功没有，localhost:6060,如果进去了说名我们启动成功，那么我们怎么找到我们写的那个hellowd代码呢我们在localhost:6060/name我们已经访问到我们的项目了，那么我们来寻找我们项目下localhost:6060/name/helloWorld.html 如图：5.5，大家看以看到我们这样非常麻烦，在平时我们做项目会有一级目录，二级目录等难道我们还要一个一个输，有同学就会想那我直接localhost:6060/name让系统给我们展示我们试一试可以看到 图6.6 是不行的，难道就没有用办法吗不是的，那我们就要借助我们外部的配置文件web.xml。

 例子：3.8

例子：3.9 

例子：4.0 

例子;4.1 

例子：4.2 

例子：4.3 

例子：4.4 

 例子：5.5

 例子：6.6

配置访问页面

下面我们来认识一下web.xml，首先第一行它是一个xml文件所以他会有一个xml的头，接下来第二行，他就是我们xml最大的标签app这样的一个标签，在我们，app里面有好多属性，关于属性大家没有必要了解太多，因为我们以后使用Idea开发他会帮我们自动生成，所以大家只需要知道这么写就行，下面我们来看如何配置我们这个欢迎页面 ,下面我们根据图 6.8 在Web-inf下面创建一个web.html页面，根据图 6.9 来编写，<welocome-flie-list>这样的父标签，在他的下面有一个字标签<welcome-flie>里面写生我们要展示的页面，然后保存，Ctel+s，我们要从新启动Tomcat，这回我们在打开浏览器输入我们的localhost:6060/name，大家可以看见如图 7.0 他会显示我们配置的页面，那么到这里我们就已经学会配置web.xml等...那么我给大家总结了一些知识大家看图 7.1，大家多多练习，我们继续向下学习。

 例子;6.7

例子;6.8 

 例子：6.9

例子：7.0 

例子：7.1 

什么是JSP？

比如我要显示当前是几年几月几日，那在我们以前的html的代码是无法实现的,我们来演示一遍，

如图 7.2 我们先在name下面创建一个index.jsp的文件,我们进行编写，如图 7.3 我们先不关注，上面的代码，我们关注我们的输出结果如图 7.4 这里大家一定要注意字符基 uft-8 ，大家可以看见如图 7.5 是我们浏览器接收的代码，可想而知那些其他的代码哪里去了，我们的java代码一定生成了莫种html代码最后给我们浏览器进行返回，最后浏览器把这些代码进行渲染，渲染出来就是我们现在所看到的执行结果，这个就是我们jsp的概念

例子:7.2 

例子;7.3 

 例子;7.4

 例子：7.5

那么刚刚讲解了什么是jsp那么下面我们开始讲解jsp语法，在了解之前哦我们先说一下什么是jsp指令，jsp指令就是jsp为我们内置好的标签这些标签都是以<%@开始以%>结束，今天我们先来学习page指令，第一个language他是用来取值，但他现在目前只能取java的，import 是用来导包的，contentType设置字符集，我们再来练习，大家可以看看 图 7.7的jsp小脚本的表达式，如图 7.8我们在创建一个index1.jsp，我们输出的结果就是3，1.page指令中import如果要导入多个包 中间用逗号分隔 2.page指令中建议大家把contentType="text/html;charset=utf-8"  3.jsp脚本<%%> 中间的java代码必须符合我们java代码的规范  4.jsp脚本输出内容到浏览器 out.print

 例子：7.6

例子：7.7 

例子：7.8

jsp的注释

jsp注释有单行注释，多行注释等...看一看例子7.9，给大家总结一下，看如图：8.0

 例子：7.9

例子：8.0 

jsp工作原理

首先客户端发送请求到服务器，不管到最后都换翻译成html代码返回给我的客户端。大家可以看看运行原理。

例子：8.1

 使用IDEA开发wed应用

1.根据图 8.2首先打开idea创建项目，根据图 8.3选择wed项目单击Next再单击Finish，根据图8.4创建一个indes.jsp文件，那么在启动之前我们要先配置Tomcat，根据图 8.5 单击加号，选择Tomcat-local，根据图 8.6完成配置，根据图 8.7 我们启动配置，可以看出我们显示出来了

 例子：8.2

例子：8.3 

 例子：8.4

 例子：8.5

例子：8.6 

 例子：8.7

感谢大家的观看我们第一章第一章《初动态网页》就讲完了，希望大家课下多多练习，那么下一章我们学习《JSP核心内置对象》,大家多多练习，那么这一章就到此结束了，拜拜喽。