腾讯广告联盟seo推广优化培训
BCSP-玄子Java开发之Java Web编程CH01_初识动态网页
1.1 B/S架构
B/S架构：浏览器/服务器
- 程序完全部署在服务器上
- 使用浏览器访问服务器
- 无需单独安装客户端软件
为什么要使用B/S架构
| B/S与C/S比较 | B/S架构 | C/S架构 |
|---|---|---|
| 软件安装 | 浏览器 | 需要专门的客户端应用 |
| 升级维护 | 客户端零维护 | 客户端需要单独维护和升级 |
| 平台相关 | 与操作系统平台的关系最小化 | 对客户端操作系统一般有限制 |
| 性能安全 | 在响应速度和安全性上需要花费更多设计成本 | 能充分发挥客户端处理能力，响应速度快 |
B/S架构工作原理
B/S架构采用请求/响应模式进行交互
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SNkgh7aE-1687705182909)(./assets/image-20230601113226595.png)]
URL
Uniform Resource Locator：统一资源定位符，用于完整地描述互联网资源的地址
URL组成
http://localhost:8080/news/index.html
- http：协议部分
- localhost:8080：主机IP地址：端口号
- news/index.html：项目资源地址
HTTP协议
基于TCP协议之上的请求-响应协议
请求方式：
- GET
/test/index.jsp?name1=value1&name2=value2
- POST
POST /test/index.jsp HTTP/1.1
Host: bdqn.cn
name1=value1&name2=value2
| 对比项 | GET | POST |
|---|---|---|
| 对数据长度的限制 | 传送数据量较小 | 传送数据量无限制 |
| 数据可见性 | 传输数据在URL可见 | 传输数据在URL不可见 |
| 安全性 | 安全性低 | 安全性高 |
| 缓存 | 能被缓存 | 不能被缓存 |
HTTP状态码
浏览器向服务器发出请求后，服务器会返回响应信息，服务器使用请求状态码和请求消息表示响应状态
常见状态码
| 状态码 | 消息 | 描述 |
|---|---|---|
| 200 | OK | 请求成功 |
| 302 | Found | 所请求的页面已经转移至新的url |
| 400 | Bad Request | 服务器未能理解请求 |
| 404 | Not Found | 服务器无法找到被请求的页面 |
| 500 | Internet Server Error | 服务器错误 |
动态网页
动态网页是根据不同的输入或操作，返回不同的网页内容
动态网页的优势
- 交互性：网页会根据用户的要求动态改变和显示内容
- 自动更新：无须改变页面代码，便会自动生成新的页面内容
- 随机性：不同的时间、不同的人访问同一网址时会产生不同的页面效果
创建动态网页
实现动态网页需要使用服务器脚本语言
- ASP（Active Server Pages）
- PHP（Hypertext Preprocessor）
- JSP（Java Server Pages）JSP代码
JSP代码
JSP脚本语言开发的动态网页，需要在Web服务器中运行
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>Welcome</title></head><body><%String sayHi = "Hello! JSP!";out.print(sayHi);%></body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uHQuA0EV-1687705182911)(./assets/image-20230601113853160.png)]
Web服务器
一种服务程序， 也称为Web容器，用于运行特定应用程序，可以操作HTTP请求，包括接受请求及进行响应
常见的Web服务器
- Tomcat
- Nginx
- Apache
- IIS
- WebLogic
Tomcat
Tomcat 9 安装配置教程
下载链接
官网 https://tomcat.apache.org/
下载步骤
进入 Tomcat 官网，点击左侧导航栏，选择需要的版本下载。这里按照课程要求选择tomcat 9的版本
Mirrors：选择安装的镜像源，如果下载失败可尝试切换镜像
下方选择安装类型，现在的 Windows 电脑基本都是 64 位的，直接点击下载即可
解压安装
下载完成后我们会得到一个压缩包，将压缩包解压到你想要安装的位置即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cLZm0qFR-1687705182911)(./assets/image-20230504161502571.png)]
这里我将文件解压到C:\Program Files\apache-tomcat-9.0.74目录
配置环境变量
右击此电脑--->属性--->高级系统设置
点击下方环境变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkHaX5Vj-1687705182912)(./assets/image-20230504162810487.png)]
在系统环境变量中新建
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eXRuDQoi-1687705182912)(./assets/image-20230504163346762.png)]
分别设置变量名与变量值
变量名：
CATALINA_HOME变量值：Tomcat 解压后的路径
例如我的：
C:\Program Files\apache-tomcat-9.0.74
下滑找到系统变量Path
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cKWvHicD-1687705182912)(./assets/image-20230504163923181.png)]
添加环境变量%CATALINA_HOME%\bin
即为 Tomcat 安装路径下的 bin 目录
最后点击确定退出配置界面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lJiT80NE-1687705182913)(./assets/image-20230504164042103.png)]
校验 Tomcat
键盘按下win + R键输入cmd打开命令提示符界面
再次输入startup.bat启动 Tomcat 服务
出现 Tomcat 启动窗口即表示安装成功，乱码问题不用管
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yrwAxzio-1687705182913)(./assets/image-20230504165043153.png)]
打开浏览器输入http://localhost:8080/ 到此 Tomcat 安装配置完毕
命令提示符界面一定不能关，关了就等于关闭 Tomcat 服务肯定打不开这个页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1XRWCq8Y-1687705182913)(./assets/image-20230504165312958.png)]
拓展
Tomcat 内置了许多案例，包含源码，可帮助学习
在网址栏后面加上examples即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQ4nLCHs-1687705182913)(./assets/image-20230504165542793.png)]
Tomcat目录结构
| 目录 | 说明 |
|---|---|
| /bin | 存放各种平台下用于启动和停止Tomcat的脚本文件 |
| /conf | 存放Tomcat服务器的各种配置文件 |
| /lib | 存放Tomcat服务器所需的各种JAR文件 |
| /logs | 存放Tomcat的日志文件 |
| /temp | Tomcat运行时用于存放临时文件 |
| /webapps | 当发布Web应用时，默认情况下会将Web应用的文件存放于此目录中 |
| /work | Tomcat把由JSP生成的Servlet放于此目录下 |
修改Tomcat服务器端口
- Tomcat默认端口8080
- 修改conf目录下的server.xml文件
- 找到
<Connector>节点，修改port属性值
<Connector port="8081" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443" />
http://localhost:8081/…
使用Tomcat 服务器部署Web应用
Web应用目录结构，不同资源文件按规则存储于不同目录下
| 目录 | 说明 |
|---|---|
| / | Web应用的根目录，该目录下所有文件在客户端都可以访问(JSP、HTML等) |
| /WEB-INF | 存放应用使用的各种资源，该目录及其子目录对客户端都是不可以访问 |
| /WEB-INF/classes | 存放Web项目的所有的class文件 |
| /WEB-INF/lib | 存放Web应用使用的JAR文件 |
创建、运行Web应用
-
创建Web应用，按目录规则创建Web应用，命名为MyFirstWeb
-
编写代码，在MyFirstWeb目录创建index.html文件
-
部署Web应用代码，将创建好的Web应用拷贝到Tomcat服务器的webapps目录中
-
启动Tomcat服务器
-
访问Web应用程序：http://localhost:8080/MyFirstWeb/index.html
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>MyFirstWeb</title>
</head>
<body><h1>我的第一个Web应用！</h1>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IoR1q3hN-1687705182914)(./assets/image-20230623214536488.png)]
设置默认欢迎页面
通过配置文件，设置Web应用的欢迎页修改应用程序，WEB-INF目录下的web.xml文件
<welcome-file-list><welcome-file>home.html</welcome-file><!--可以设置多个欢迎页面-->
</welcome-file-list>
访问项目根目录，自动进入默认页面：http://localhost:8080/MyFirstWeb
当运行Web应用时，Tomcat会首先加载项目中的web.xml文件
JSP
JSP (Java Server Pages)
- 一种用于开发动态Web页面的服务器端技术
- 在HTML中嵌入Java脚本代码：Html + Java片段
- 由Web服务器编译和运行
- 将生成的页面信息返回客户端
JSP页面主要包含静态内容、指令、小脚本、表达式、声明、注释等内容
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><title>欢迎进入JSP世界</title><head><body><!--欢迎语 （这是HTML注释）--><h1>Hello! JSP !</h1><%--显示当前日期 （这是JSP注释）--%><%! String currTime; %><%//使用预定格式将日期转换为字符串SimpleDateFormat formater = new SimpleDateFormat("yyyy年MM月dd日");currTime = formater.format(new Date());%><%= currTime %></body></head>
<html>
JSP页面元素
-
静态内容：HTML代码等静态内容
-
JSP指令：（Directives）声明页面属性、用于控制页面处理
-
JSP声明;（Declarations）声明Java变量、定义Java方法
-
JSP脚本；（Scriptlets）Java代码片段
-
JSP表达式;（Expressions）用于展示服务器端的响应结果
-
JSP注释
JSP指令和小脚本
JSP指令（Directives），用于声明页面属性、用于控制页面处理
<%@ 指令名称 属性1="属性值" 属性2="属性值2,属性值3" %>
常用指令：
-
page
-
include
-
taglib
-
Page：指令用于设置页面属性
<%@ page 属性1="属性值" 属性2="属性值1,属性值2" %>
常用属性
| 属性 | 描述 | 默认值 |
|---|---|---|
| language | 指定JSP页面使用的脚本语言 | java |
| import | 引用脚本语言中使用到的类文件 | 无 |
| contentType | 指定MIME类型和JSP页面响应时所采用的字符编码方式 | text/html;charset= ISO-8859-1 |
JSP小脚本
<%@ page language="java" import="java.util.*,java.text.*" contentType="text/html; charset=utf-8"%>
JSP页面中的Java代码片段，以<%开头，以%>结束
<%Java代码%>
<%for(String blog : blogs){out.print(++i + " : ");out.print(blog);
%>
<br />
<%}
%>
JSP表达式
表达式，用于展示服务器端的响应结果
<%=Java变量或表达式%>
<%for(String blog : blogs){
%><%=++i %>:<%= blog %> <br />
<%}
%>
JSP声明
声明Java变量、定义Java方法
<%! Declaration;[ Declaration;] …… %>
使用JSP声明定义方法，计算不同直径圆的面积
<%!double area(double r){ //计算圆形面积return Math.PI*r*r;}
%>
<%double r1 = 5; double r2 = 10;DecimalFormat df = new DecimalFormat( "0.00 ");
%>半径为<%= r1%>的圆面积为<%= df.format(area(r1))%> <br />半径为<%= r2%>的圆面积为<%= df.format(area(r2))%>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dyRQrNwi-1687705182914)(./assets/image-20230623221654890.png)]
JSP注释
- HTML注释方法
<!-- HTML注释-->
浏览器查看源码时可以看到注释内容，不安全，加重网络传输负担
- JSP注释标记
<%-- JSP注释--%>
浏览器查看源码时无法看到注释内容，安全性较高
- JSP脚本中使用注释
<% //单行注释 %>
<% /*多行注释*/ %>
同Java注释
JSP 工作原理
Web容器处理JSP文件请求需要经过3个阶段
- 翻译阶段
- 编译阶段
- 执行阶段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4k4rFMB8-1687705182914)(./assets/image-20230623222212211.png)]
第一次请求之后，Web容器可以重用已经编译好的字节码文件
如果对JSP文件进行了修改，Web容器会重新对JSP文件进行翻译和编译
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CD4YsXUk-1687705182914)(./assets/image-20230623222530751.png)]
IDEA 创建 Web 项目
创建项目
IDEA 2023 创建Jakarta EE项目
模板：选择使用 Web 应用程序
应用程序服务器：选择安装的 Tomcat
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYbBb4Nq-1687705182915)(./assets/image-20230508151829171.png)]
第一次创建项目可能识别不到 Tomcat 需要手动添加 Tomcat 服务器
设置 Tomcat 主目录为 Tomcat 的安装路径
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RV9ycPNe-1687705182915)(./assets/image-20230508154653311.png)]
然后下一步，创建
我们课程中使用的 java 版本为 1.8 需要在左上角选择 Java EE 8
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FFHja3OZ-1687705182915)(./assets/image-20230508154836330.png)]
然后点击 IDEA 右上角配置 Tomcat
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fhxApdKY-1687705182915)(./assets/image-20230508155257957.png)]
部署Web应用
点击上面的部署，把下面的路径都删掉只留下一个/，或者项目名称
这个就是 Tomcat 的虚拟映射地址
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YspWV2sS-1687705182916)(./assets/image-20230508161208112.png)]
然后直接运行项目，显示连接成功即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A1HR3XK9-1687705182916)(./assets/image-20230508161324931.png)]
Web项目的目录结构
src目录
- 存放Java源代码
web目录
-
WEB-INF目录
- web.xml
-
自动生成首页：index.jsp
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBGdI1eo-1687705182916)(./assets/image-20230623222752706.png)]
把JSP、HTML文件组织成文件夹，分类放入web目录中可以方便Web项目的维护和管理
修改 Maven 参数
IDEA 中内置了 Maven 就导致，每次新建项目 IDEA 都会使用自带的 Maven 我们需要修改为我们本地的 Maven
- 点击 文件 新建项目设置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hvYARq8D-1687705182916)(./assets/image-20230508161525979.png)]
- 设置 Maven 参数，勾选相关设置
Maven 主路径（H): Maven 安装根目录
用户设置文件（S)：Maven
conf目录里的settings.xml配置文件本地仓库（R）：Maven 目录下新建的
mavne-repo文件夹
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LK3qOK4A-1687705182916)(./assets/image-20230508161711179.png)]
运行Web应用常见错误
未启动Tomcat未正确部署Web应用URL输入错误目录不能被引用
常见错误：未启动Tomcat
错误现象：无法访问此网站
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9e3H4tdL-1687705182917)(./assets/image-20230623223343839.png)]
排错方法：访问localhost:8080路径，检查Tomcat服务能否正确运行
常见错误：未部署Web应用
错误现象：404错误
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eDrONLMA-1687705182917)(./assets/image-20230623223829844.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y07Jdl1I-1687705182917)(./assets/image-20230623223832721.png)]
排错方法：检查Web应用是否正确部署
常见错误：URL输入错误
错误现象：404
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXv8Y0EC-1687705182917)(./assets/image-20230623223930253.png)]
错误排错方法：
检查URL协议、IP地址、端口号是否拼写正确
检查上下文路径是否拼写正确
检查文件名称是否拼写正确
常见错误：目录不能被引用
错误现象：404
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y7803K8P-1687705182917)(./assets/image-20230623223954188.png)]
错误排错方法：
- 由于WEB-INF文件夹下的内容无法对外发布，所以 /WEB-INF/下的文件是不允许被引用的
- 查看被引用文件是否在/WEB-INF/下，将其移出