Java学习笔记之前端与后台交互

程序员文章站 2022-03-30 22:58:40

...

思维导图大纲

Java学习笔记之前端与后台交互

Web开发简述

JavaWeb开发概述

通过Java语言对web进行的开发

一个web项目开发的完整流程图

Java学习笔记之前端与后台交互

软件架构

CS架构 Client/Server
- 优点
  - 可以减轻服务器压力, 将一些图片等资源存储到客户端本地
  - 界面美观
- 缺点
  - 灵活性不强, 服务器进行升级客户端需要同步更新
  - 分布式开发较弱
BS架构 Brower/Server
- 优点
  - 灵活性较强, 服务器的更新不影响浏览器
  - 分布式能力较强
- 缺点
  - 服务器压力较大, 所有的资源都需要通过网络传输给浏览器
  - 界面不如CS美观

常见Web服务器

Tomcat: 由Apache组织提供, 开源的免费的web服务器。满足EE的Servlet和JSP的规范
WebSphere: 由IBM公司提供, 收费的大型web服务器。满足了EE开发的所有规范
WebLogic: 由BEA公司开提供已被Oracle收购, 收费的大型web服务器。满足了EE开发的所有规范
IIS: 应用在.NET平台上
Apache: 应用在PHP平台上

Web资源

静态web资源
- HTML
- CSS
- JS
动态web资源
- Servlet、JSP
- PHP
- ASP

URL请求路径

全称: Uniform Resource Locator, 即统一资源定位符.

是对互联网资源的位置的表示, 互联网中的每个文件都对应一个唯一URL.

格式:

协议://域名(或IP地址):端口号(http默认80)/资源位置?参数=值

例如:

https://fanyi.baidu.com/?aldtype=16047#en/zh/

https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=%E4%BA%AC%E4%B8%9C

Tomcat服务器

概述

Tomcat是一个web的服务器，用来发布web项目的
可以部署web项目, 被用户通过浏览器/客户端进行访问
官网地址：http://tomcat.apache.org
版本及兼容信息

Tomcat版本	Servlet版本	JavaEE版本	JDK版本
9.0.x	4.0	8.0	8
8.5.x	3.1	8.0	7
8.0.x	3.1	7.0	7
7.0.x	3.0	6.0	6 (1.6)
6.0.x	2.5	5.0	5 (1.5)

版本向下兼容, 向上不兼容

下载与安装

下载:

https://tomcat.apache.org/

安装:

直接将zip压缩包解压, 即可立即使用

目录结构

Tomcat目录结构

bin:					//封装了一些tomcat的常用指令
	startup.bat		//开启tomcat服务
	shutdown.bat	//关闭tomcat服务
config:				//记录的是tomcat的配置信息
	server.xml		//可以用来修改tomcat服务端口号
lib:					//tomcat依赖的资源库
logs:				//存储日志的目录
temp:				//存储临时文件的目录
webapps:			//用来部署web项目的 (即: 将开发好的web项目打成war包放到此目录, 用户就可以访问了)
work:				//给JSP使用的

web项目目录结构

项目名称  （webapps/项目名）
            |-----静态资源.HTML，CSS，JS
            |-----WEB-INF   （不能直接通过浏览器进行访问）
                       |----web.xml  当前WEB项目的核心配置，Servlet2.5必须有，3.0可省略
                       |----lib		 当前WEB项目所需要的第三方的jar的存放位置
                       |----classes  Java源码编译后生成class文件存放的位置

启动和关闭

启动:

找到tomcat安装目录, bin/startup.bat, 双击即可启动

判断启动是否成功:

打开浏览器中访问 http://localhost:8080, 能够成功加载则表示启动成功

关闭:

方式一:

找到tomcat安装路径, bin/shutdown.bat, 双击即可关闭

方式二:

找到tomcat的终端, ctrl+c 或者直接关闭窗口即可关闭

常见问题:

1. 启动后立即闪退

产生原因: JAVA_HOME环境变量没有配置

解决方案: 重新配置JAVA_HOME即可

2. 端口号冲突(BindException)

解决方案1:

修改端口号: 修改tomcat安装路径下/config/server.xml文件中的端口号

解决方案2:

找到占用端口的那个服务, 把它关掉即可.

查看本机所有端口使用情况的命令: netstat -ano

3. 同时启用多个tomcat

将客户端拷贝一份, 在备份的客户端中修改配置文件中的端口号, 再开启服务即可

通过tomcat部署web服务

方式一: 直接放到到webapps文件夹下

方式二: 通过配置config/server.xml文件

格式:
<Context path="/虚拟路径名" docBase="具体的web项目的路径">
    注意: 1. 在配置文件中的位置: 要被Host标签包裹
    	 2. 盘符之后是两个斜线
例如:
<Context path="/abc" docBase="D://abc/myProject"/>
访问方式:
    localhost:8080/虚拟路径名/1.html
    虚拟路径名: path指定的路径

方式三: 在conf/Catalina/localhost/ 新建一个xml文件, 进行配置(常用)

格式:
<Context docBase="具体的web项目的路径">
例如:
<?xml version="1.0"?>
<Context docBase="D://abc/myProject"/>
访问方式:
	localhost:8080/虚拟路径名/1.html
    虚拟路径名: 当前xml文件的名字, 就是web项目的虚拟路径名

IDEA中集成Tomcat

idea中配置Tomcat

步骤1：打开idea，点击Run菜单，选择Edit Configurations...，打开Run/Debug Configurations
步骤2：添加服务器，点击对话框左上角的加号，选择Tomcat Server，再选择Local

找到右上角Configure… 关联到Tomcat安装目录再按图操作

VM options填写内容：-Xms128m -Xmx256m -XX:PermSize=128m -XX:MaxPermSize=256m

idea中发布web项目

创建web项目

创建Module，选择Java Enterprise --> Web Application，选择版本为JavaEE 7
Java学习笔记之前端与后台交互

发布web项目

步骤1：配置应用访问路径

Run --> Edit Configurations...
步骤2 启动Tomcat
步骤3：访问web项目

http://localhost:8080/test/资源

HTTP协议

概述

超文本传输协议（HTTP，HyperText Transfer Protocol). 用于定义WEB浏览器与WEB服务器之间数据交互的规范.

特点

HTTP协议的特点

基于请求/响应模型的协议
- 一次请求(request), 一次相应(response), 必须成对出现
- 客户端先发送请求, 服务器再进行响应
简单快捷
- 因为发送请求的时候只需要发送请求方式(get/post)和请求路径即可
HTTP协议默认的端口:80, 可以省略不写
- 例如：http://www.itheima.com:80

Http协议的版本

HTTP/1.0，发送请求，创建一次连接，获得一个web资源，连接断开

一次连接, 一个请求 (短连接)
HTTP/1.1，发送请求，创建一次连接，获得多个web资源，连接断开

一次连接, 多个请求(长连接)

Http协议的组成

HTTP请求协议、HTTP响应协议

HTTP请求包括：请求行、请求头、请求体
- get请求
  - 请求行, 请求头
  - 没有请求体(因为请求的数据是直接封装到请求行的URL地址栏中)
- post请求
  - 请求行, 请求头, 请求体
HTTP响应包括：响应行、响应头、响应体
- get请求的响应
  - 响应行, 响应头, 响应体
- post请求的响应
  - post请求的响应与get请求的响应几乎一致

Servlet

概述

Servlet其实就是一个运行在web服务器上的小的Java程序，用于处理从web客户端发送的请求，并且对请求作出响应

简单案例

在模块的src文件夹下新建一个包: demo01_servlet
在该包下创建一个类MyServlet,实现 Servlet接口

重写接口中的5个方法
在 service()方法中, 完成和服务器端的交互

服务器可通过http协议与浏览器交互, 从而间接实现 Java代码和浏览器的交互

两个参数: request, response

request: 封装的是浏览器提交的数据

response: 封装的是响应给浏览器的数据

在项目下的 web/web-info的 web.xml文件中配置 Servlet的信息

<servlet>
    <servlet-name>myServlet</servlet-name>
    <servlet-class>demo01_servlet.MyServlet</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>myServlet</servlet-name>
    <url-pattern>/test</url-pattern>
</servlet-mapping>

访问servlet

http://localhost:8080/tt/test

生命周期

init()方法

Servlet是在第一次被访问的时候会被实例化, 只要Servlet一被实例化那么Servlet中的init方法就会执行(init只会执行一次)

service()方法

只要收到从客户端发送来的请求, 那么Servlet中的service方法就会执行 (在service方法的内部根据请求的方式不同调用不同doXXX方法)

destroy()方法

当Servlet从服务器中移除或者服务器关闭的时候Servlet对象被销毁, 里面的destroy方法就会执行, 然后垃圾回收就会将其回收掉

启动时加载

概述

Servlet默认是在第一次访问的时候被实例化. 通过配置将Servlet的实例化的过程提前到服务器启动的时候(让服务器启动的时候创建Servlet的对象). 这样实例化花费的时间就转移到在服务器启动的时候, 对于用户而言就不需等待实例化这个过程

配置完成启动时加载

<servlet>
    <servlet-name>ServletDemo2</servlet-name>
    <servlet-class>demo02_servlet.ServletDemo2</servlet-class>
	<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>ServletDemo2</servlet-name>
    <url-pattern>/ServletDemo2</url-pattern>
</servlet-mapping>

配置访问路径

在配置文件中通过url-pattern标签进行配置

方式一: 完全路径匹配(精确匹配) ：

以 / 开始

例如: /ServletDemo4 , /aaa/ServletDemo5 , /aaa/bbb/ServletDemo6

<servlet>
    <servlet-name>ServletDemo4</servlet-name>
    <servlet-class>demo04_servlet.ServletDemo4</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>ServletDemo4</servlet-name>
    <!-- 完全路径匹配 -->
    <url-pattern>/ServletDemo4</url-pattern>
</servlet-mapping>

方式二: 目录匹配

以 / 开始, 以 * 结束

例如: /* (表示匹配所有) ,/aaa/* (表示匹配aaa目录下的所有)

<servlet>
    <servlet-name>ServletDemo4</servlet-name>
    <servlet-class>demo04_servlet.ServletDemo4</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>ServletDemo4</servlet-name>
    <!-- 目录匹配 -->
    <url-pattern>/aaa/*</url-pattern>
</servlet-mapping>

方式三: 扩展名匹配

以 * 开始, 以后缀名结束

例如: *.do , *.action 、*.jsp

<servlet>
    <servlet-name>ServletDemo4</servlet-name>
    <servlet-class>demo04_servlet.ServletDemo4</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>ServletDemo4</servlet-name>
    <!-- 扩展名匹配 -->
    <url-pattern>*.abc</url-pattern>
</servlet-mapping>

三种方式的优先级

完全路径匹配 > 目录匹配 > 扩展名匹配

适用于HTTP协议的Servlet子类

继承关系

Servlet接口
	|----- GenericServlet类			通用的Servlet, 是一个与协议无关的Servlet实现类
		|----- HttpServlet类		HTTP使用的Servlet

Java学习笔记之前端与后台交互

代码示例

自定义测试类, 继承HttpServlet, 复写doGet 与 doPost方法

package test;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class TestHttpServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().println("you are getting me");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);	//post响应与get响应基本一致, 直接调用doGet
    }
}

编写配置文件

 <!--配置servlet-->
    <servlet>
        <!--配置servlet名称-->
        <servlet-name>testHTTPServlet</servlet-name>
        <!--配置servlet类的全路径-->
        <servlet-class>test.TestHttpServlet</servlet-class>
    </servlet>
    <!--配置servlet映射关系-->
    <servlet-mapping>
        <!--配置关联的servlet名称-->
        <servlet-name>testHTTPServlet</servlet-name>
        <!--配置 访问路径-->
        <url-pattern>/hp</url-pattern>
    </servlet-mapping>
<servlet>

浏览器中访问

http://localhost:8080/tt/tp

request接收请求参数

方法名	描述
String getParameter(String name)	获得指定参数名对应的值。如果没有返回null，如果只有多个获得第一个。例如：username=jack

简单案例

编写form.html表单，提供表单字段：username、password 以post方式提交

<form action="./rep" method="post">
	用户名: <input type="text" name="username" value="zs"/> <br/>
	密码: <input type="password" name="password" value="12"/><br/>
	<input type="submit" value="get提交"/>
</form>

编写HttpServlet子类，使用对应方法获得请求参数

public class TestResponse extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println(username + "..." + password);
        resp.getWriter().println(username + "..." + password);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

编写Servlet配置文件

<servlet>
    <servlet-name>testResponse</servlet-name>
    <servlet-class>test.TestResponse</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>testResponse</servlet-name>
    <url-pattern>/rep</url-pattern>
</servlet-mapping>

模拟登陆流程图

Java学习笔记之前端与后台交互

具体代码此处不再赘述

相关标签：学习笔记 # Java学习笔记

上一篇： Java学习笔记（二）

下一篇： 02Java学习笔记3.8

Java学习笔记之前端与后台交互

思维导图大纲

Web开发简述

JavaWeb开发概述

一个web项目开发的完整流程图

软件架构

CS架构 Client/Server

BS架构 Brower/Server

常见Web服务器

Web资源

URL请求路径

Tomcat服务器

概述

下载与安装

下载:

安装:

目录结构

Tomcat目录结构

web项目目录结构

启动和关闭

启动:

判断启动是否成功:

关闭:

常见问题:

1. 启动后立即闪退

2. 端口号冲突(BindException)

3. 同时启用多个tomcat

通过tomcat部署web服务

IDEA中集成Tomcat

idea中配置Tomcat

idea中发布web项目

创建web项目

发布web项目

HTTP协议

概述

特点

Http协议的版本

Http协议的组成

Servlet

概述

简单案例

生命周期

启动时加载

概述

配置完成启动时加载

配置访问路径

方式一: 完全路径匹配(精确匹配) ：

方式二: 目录匹配

方式三: 扩展名匹配

三种方式的优先级

适用于HTTP协议的Servlet子类

继承关系

代码示例

request接收请求参数

简单案例

模拟登陆流程图

微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解

现在作为一名自学前端开发的学生，对网站的前端与后台数据交互不懂，想学习ajax，很迷茫，不知从何学起？

Java学习笔记之前端与后台交互

Web前端学习笔记——HTML5与CSS3之H5-DOM扩展、H5新增API