前言

需要了解的技术：
  1. 了解web的概念，前后端交互工程；
  2. 数据库：前后端交互，后端在处理完数据后会把数据存辉到数据库；
  3. SQL语句
  4. java语言的数据库规范的jdbc；如何连接数据库，如何获取数据
  5. 浏览器端和服务端交互的规范的servlet：围绕着亲求和响应来制定规范；
  6. 在浏览器端渲染的数据的模块引擎jsp；
  7. 前端的一些基础：Html（网页的组成、css（网页的样式、）
  8. 前端的一门编程语言javascript（js）
  9. 封装了js的框架 jquery

一、服务器概述

1.1 web资源分类
  1. web资源的实现的技术和呈现的效果不同，又分为静态资源和动态资源两种。
  2. 静态资源：html ,css ,js ,txt ,mp4 ,jpg。
  3. 动态资源：jsp页面，servelt程序。
    1.2 认识服务器
    服务器本质的作用是部署项目；
    ①tomcat（Apache 免费开源、轻量级的javaWeb容器（服务器），效率不高应用广泛，在高并发的大数据处理中可以搭建服务器集群）
    ②jboss免费，遵从javaEE，花钱买服务维护
    ③glassfish收费，达到产品级质量（快、好用）

1. 3 学习中适用到的服务器
  1.   本次学习中我们把web项目部署在浏览器端应用，而每种服务器的性能不同。我们在这里使用的服务器是tomcat

二、tomcat的安装以及相关操作

2.1 安装tomcat
  1. 解压到文件夹就可以使用；
  2. 配置环境变量：JAVA_HOME +绝对路径；

2.2 启动tomcat
  1. 点击/bin/statup.bat文件，启动tomcat；或者在cmd内输入catalina.run
  2. 文件映射到webapps中，新建html文件就可以使用；
  3. 查询网站：默认访问root工程。

访问格式：http://ip:port/工程名/ 没有资源名默认访问index.html
页面。

2.3 在idea中整合tomcat
  • 再idea中新建tomcat工程

image.png

  • tomcat与idea集成：新建工程、右击工程名，添加web项目；
  • 部署：点击右上的选项，点击修改sever：命名、路径、取消默认浏览器、端口；
  • 点击部署deployed，添加一个，再改一下网址。

image.png
image.png

三、javaweb

3.1 servelet
  1. 定义：一个处理和响应对象的规范；是一个表现层的规范，（jdbc是一个持久层的规范）。常用的版本7版本或者8版本。 jdbc、 servlet是规范而不是技术。
  2. JavaEE规范之一；
  3. 是运行在服务器上的一个java小程序。他可以接受客户端发来的请求并响应数据给客户端。

image.png
两个搭配起来使用，通过servlet来指定后端资源唯一标识，通过servlet-mappoing来指定资源路径。注意必须带/的位置，不带会报错。
或者使用标签的形式来替代上面的方法。@WebServlet(“/标签名”)

3.2 在工程内的写法

① 继承HttpServlet类，重写srevice方法
protected void service(HttpServletRequest Request, HttpServletResponse Response){
②request请求对象 请求客户端传过来的数据；response响应对象，处理完后端逻辑之后可以根据需求。
将web工程打包成一个war包，部署在tomcat上，如果想访问这个工程我们需要提供工程路径；
工程、很多资源；
如果想访问一个该工程下面具体的资源，一定要针对这些资源做一个资源设置一个资源路径；
http：//loaclhost:软件所对应的端口号。

5.3 servlet生命周期
  • 执行构造器（重写service方法）创建servlet实例
  • 执行初始化方法；
  • 执行service方法；
  1. 客户端发起发起访问，tomcat服务器会解析地址中的资源路径，然后在web . xm1中映射具体的后端资源；
  2. 映射到后端资源之后，tomcat服务器会创建对应资源的实例；
  3. 实例创建出来之后，就会去调用初始化init方法(可以去获取上下文的数据、全局对象等)；
  4. 执行service方法(后面在子类实现中，会通过提交的方式，来做一个请求的分发处理)；
  5. 当tomcat 容器关闭的时候，会执行销毁的方法。 ```java package com.eaglslab.servlet;

import javax.servlet.*; import java.io.IOException;

public class HelloServlet02 implements Servlet {

  1. public HelloServlet02() {
  3.     System.out.println("1、执行构造器，创建servlet实例");
  5. }
  7. @Override
  8. public void init(ServletConfig servletConfig) throws ServletException {
  10.     System.out.println("2、执行了初始化方法");
  12. }
  14. @Override
  15. public ServletConfig getServletConfig() {
  16.     return null;
  17. }
  19. @Override
  20. public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
  22.     System.out.println("3、执行service方法");
  24. }
  26. @Override
  27. public String getServletInfo() {
  28.     return null;
  29. }
  31. @Override
  32. public void destroy() {
  34.     System.out.println("4、执行销毁的方法");
  35. }

}

  4. <a name="dMZRv"></a>
  5. ##### 5.4 servlet提交方式
  7. 1. 关于post捉交为式和get提交方式的区别
  8. - post提交方式相对来说比较较安全，因为通过post方式往后端抉交数据，是将数据封牧在一起请求体中-get抉交方式不是很安全，提交的数据直越拼拉在地址:上面
  9. - get的提交的数据大小没有post多
  10. - 我们目前在学习web阶段能够接触到的post和get提交方式
  11. - get:浏览器直接发起访问、在html的form表单中将method提交方式设置为get-post:在htm1的form表单中将method提交方式设置为post
  14. 2. **注解**： servlet基于注解方式来注朋资源路径(不若使用，为我们还没有学习注解)
  16.       @WebServlet（"/s1"）servlet容器会根据检测到的注解来创建对应的资源路径；浏览器也会更具注解来创建对应资源的实例。
  18. 3. ServletContext 域对象
  19. -  可以像map集合一样存取数据，‘域’的概念是取值范围的大小。
  20. -  ServletContext 是一个全局域对象，只要在该对象中设置了数据，我们可以在整个工程范围内获取到该对象中的值
  21. - request也是一个域对象，取值范围是一次请求范围内；
  22. - session也是一个域对象，取值范围是浏览器的开启到关闭。
  24. - 无论创建多少servletContext对象，他们的内存地址都是相同的，-->
  26. wevletContext在整个web工程中是单例的。（单例工程，无论创建多少个对象，都是指向同一个内存地址。）<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/26800293/1650246266261-5b7d36da-97a3-43df-8fe3-02fdb046b02a.png#clientId=uf9b6b56f-f5c0-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=191&id=u6264406f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=210&originWidth=503&originalType=binary&ratio=1&rotation=0&showTitle=false&size=56527&status=done&style=none&taskId=u29d60a6e-567d-4a15-a4a4-1ee97982c9c&title=&width=457.27271736160804)<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/26800293/1650246491062-1699055a-988f-4033-88d3-745d6ef2e50d.png#clientId=uf9b6b56f-f5c0-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=143&id=u3b3faa2a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=157&originWidth=484&originalType=binary&ratio=1&rotation=0&showTitle=false&size=43152&status=done&style=none&taskId=u13000a2b-eac3-4671-abaa-5104f5ddba4&title=&width=439.99999046325706)<br />将数据封装到域对象内在提交给前端。
  30. <a name="P0xQL"></a>
  31. ### 六、HTTP协议
  33. <a name="cHf59"></a>
  34. ##### 6.1 GET请求
  36. 1. 请求行
  37. - 请求的方式GET
  38. - 请求的资源路径[+?+请求参数](3)请求的协议的版本号HTTP/1.12、请求头
  39. 2. key : value 组成不同的键值对，表示不同的含义
  40. 2. 安全性：不安全，数据拼接在请求后；
  42. <a name="qLqLp"></a>
  43. ##### 6.2 POST请求
  45. 1. 请求行
  46. - 请求的方式POST
  47. - 请求的资源路径[+?+请求参数]
  48. - 请求的协议的版本号HTTP/1.1
  49. 2. 请求头key : value 不同的请求头，有不同的含义- 3、请求体===>>>就是发送给服务器的数据
  50. 2. 安全性：安全，请求数据封装在请求体内部。
  52. 4. 常用请求头的说明
  53. - Acccpt:表示客户端可以接收的数据类型
  54. - Accpet-Languege:表示客户端可以接收的语言类型- User-Agent:表示客户端浏览器的信息
  55. - Host :表示请求时的服务器ip和端口号
  57. <a name="QW9SE"></a>
  58. ##### 6.3 响应的HTTP协议格式
  59. z<br />- 1、响应行<br />·(1)响应的协议和版本号·(2)响应状态码<br />(3)响应状态描述符<br />-2、响应头key : value 不同的请求头，有不同的含义- 3、响应体===>>>就是回传给客户端的数据
  61. <a name="YtARD"></a>
  62. ##### 6.4 常用的响应码说明
  64. - 200表示请求成功
  65. - 302表示请求重定向
  66. - 404表示请求服务器已经收到了，但是你要的数据不存在（请求地址错误)
  67. - 500表示服务器已经收到请求,但是服务器内部错误（代码错误)
  70. <a name="a2zPu"></a>
  71. ##### 6.5 HttpServletRequest类
  73. - 将每次只要有请求进入Tomcat服务器，Tomcat服务器就会把请求过来的HTTP协议信息解析好封装到Request对象中。然后传递到service方法(doGet 和doPost）中给我们使用。
  74. - 我们可以通过HttpScrvletRcquest对象,获取到所有请求的信息。
  77. <a name="REjns"></a>
  78. ##### 6.6 HttpServletRequest 类的常用方法
  80. 1. getRequcstURI(获取请求的资源路径）
  81. 1. getRequestURL()获取请求的统一资源定位符（绝对路径
  82. 1. getRemoteHostO 获取客户端的 ip地址iv.getHeader(获取请求头. 
  83. 1. getParameter()获取请求的参数
  84. 1. getParameterValues()获取请求的参数（多个值的时候使用) vii. 
  85. 1. getMethod(获取请求的方式GET 或POST）
  87.      返回客户端的提交方式。String类型。
  89. 7. setAltribule(key,value);设置域数据
  90. 7. getAttribute(key);获取域数据
  91. 7. getRequestDispatcher(获取请求转发对象
  94. <a name="rZ8qS"></a>
  95. ##### 6.7 请求转发
  96. 转发其实就是资源的跳转，但是跳转之后的地址在浏览器上不会发生变化
  98. ```java
  99. @WebServlet("/s6")
  100. public class Servlet06 extends HttpServlet {
  101.     /**
  102.      * 转发其实就是资源的跳转，但是跳转之后的地址在浏览器上不会发生变化
  103.      * @param request
  104.      * @param response
  105.      * @throws ServletException
  106.      * @throws IOException
  107.      */
  108.     @Override
  109.     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  110.         //往request域中添加数据
  111.         request.setAttribute("message","request也是一个域对象");
  112.         //获取转发对象
  113.         RequestDispatcher requestDispatcher = request.getRequestDispatcher("/s7");
  114.         //请求具体的资源
  115.         requestDispatcher.forward(request,response);
  1. @WebServlet("/s7")
  2. public class Servlet07 extends HttpServlet {
  3.     @Override
  4.     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  5.         Object message = request.getAttribute("message");
  6.         System.out.println(message);
  7.         response.getWriter().print("s6 ==> s7 success!!!!");
  9.     }
  10. }

6.8 HttpServletResponse类

HttpServletResponse类和HttpServletRequest类一样。每次请求进来，Tomcat服务器都会创建一个esponse对象传递给Servlet程序去使用。HttpServletRequest表示请求过来的信息，
HttpServletResponse表示所有响应的信息,我们如果需要设置返回给客户端的信息,都可以通过HttpServletResponse对象来进行设置

6.9 往客户端回传数据

流对象由tomcat服务器提供。

  1. 字节流getOutputStream()

    1. 常用于下载（传递二进制数据) 传输文本；

  2. 字符流getWriter()

常用于回传字符串（常用）
字符流和字节流一次只可以使用一种，同时向tomcat服务器请求会报错。

  1. 响应的乱码解决

setContentType(“text/html; charset=UTF-8”)

  1. resp.setContentType("text/html; charset=UTF-8");
  2. PrintWriter writer = resp.getWriter();
  3. writer.print("hello");
  4. writer.print("<br/>");
  5. writer.print("你好");

6.10 请求重定向
  1. 作用：完成资源的跳转；
  2. 与请求转发的区别：请求转发地址不变化，请求重定向地址会发生变化。

  3. 请求重定向，是指客户端给服务器发请求，然后服务器告诉客户端去新地址访问。叫请求重定向(因为之前的地址可能已经被废弃)

  4. 相对于请求转发，重定向需要的是资源的绝对路径。

  5. 想要把数值传递通过request域，注意地址发生变化后，在访问域中数据就是两次请求，域的取值范围就是一次请求。

image.png

七、web前后端交互案例

  1. html简单应用。







  2. 案例

    通过jdbc工具类在数据库中读取用户数据，将所有用户数据封装成java对象，添加到集合中，然后将集合对象存放到request域中，然后利用转发从s11跳转到s12，然后在s12中将集合对象响应到浏览器端

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用户登录界面</title>
  6.     <style>
  7.         body{
  8.          background-color: #0040ff;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.    <form method="post" action = "http://localhost:8080/web/login">
  14.        <table align = "center">
  15.            <tr>
  16.                <td> 登陆用户名：</td>
  17.                <td><input type="text" na me="username"></td>
  18.            </tr>
  19.            <tr>
  20.                <td> 登陆密码：</td>
  21.                <td><input type="password" name="password"></td>
  22.            </tr>
  23.            <tr>
  24.                <td colspan="2" align="center"><input type="submit" value="login"></td>
  25.            </tr>
  26.        </table>
  27.    </form>
  29. </body>
  30. </html>
  2. import java.sql.*;
  4. //jdbc的封装操作；
  5. public class JDBCUtils {
  6.     private JDBCUtils(){}
  8.     static {
  9.         try {
  10.             Class.forName("com.mysql.cj.jdbc.Driver");
  13.         } catch (ClassNotFoundException e) {
  14.             e.printStackTrace();
  15.         }
  16.     }
  17.     public static Connection getconnection() throws SQLException {
  18.         return DriverManager.getConnection("jdbc:mysql://localhost:3306/test1?characterEncoding=utf8&serverTimezone=GMT%2B8","root","root");
  19.     }
  20.     public static void close(Connection connection , Statement statement , ResultSet resultSet ){
  21.         if(resultSet != null){
  23.             try {
  24.                 resultSet.close();
  26.             } catch (SQLException throwables) {
  28.                 throwables.printStackTrace();
  29.             }
  30.         }
  32.         if (statement != null){
  34.             try {
  35.                 statement.close();
  37.             } catch (SQLException throwables) {
  39.                 throwables.printStackTrace();
  40.             }
  41.         }
  43.         if (connection != null){
  45.             try {
  46.                 connection.close();
  48.             } catch (SQLException throwables) {
  50.                 throwables.printStackTrace();
  51.             }
  52.         }
  54.     }
  56. }
  2. import javax.servlet.ServletException;
  3. import javax.servlet.http.HttpServlet;
  4. import javax.servlet.http.HttpServletRequest;
  5. import javax.servlet.http.HttpServletResponse;
  6. import java.io.IOException;
  7. import java.sql.Connection;
  8. import java.sql.PreparedStatement;
  9. import java.sql.ResultSet;
  10. import java.sql.SQLException;
  12. public class LoginServlet extends HttpServlet {
  14.     @Override
  15.     protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.         request.setCharacterEncoding("utf-8");
  18.         response.setContentType("text/html;charset=utf-8");
  20.         String username = request.getParameter("username");
  21.         String password = request.getParameter("password");
  23.         Connection connection = null;
  24.         PreparedStatement preparedStatement = null;
  25.         ResultSet resultSet = null;
  27.         try {
  28.             connection = JDBCUtils.getconnection();
  30.             System.out.println(connection);
  32.             preparedStatement = connection.prepareStatement("select * from user where username = ? and password = ?");
  34.             preparedStatement.setString(1,username);
  35.             preparedStatement.setString(2,password);
  37.             resultSet = preparedStatement.executeQuery();
  39.             if (resultSet.next()){
  41.                 response.getWriter().print("登录成功");
  43.             }else {
  45.                 response.getWriter().print("登录失败");
  46.             }
  47.         } catch (SQLException throwables) {
  49.             throwables.printStackTrace();
  50.         }finally {
  51.             //关闭资源
  52.             JDBCUtils.close(connection,preparedStatement,resultSet);
  53.         }
  54.     }
  55. }