[笔记]Web核心学习

最新推荐文章于 2024-09-14 18:46:05 发布

CN_016

最新推荐文章于 2024-09-14 18:46:05 发布

阅读量193

点赞数 2

文章标签： java maven 前端后端网络

本文链接：https://blog.csdn.net/CN_016/article/details/125354856

版权

HTTP

概念: HyperText Transfer Protocol，超文本传输协议，规定了浏览器和服务器之间数据传输的规则

HTTP协议特点

基于TCP协议：面向连接，安全
基于请求-响应模型的：一次请求对应一次响应
HTTP协议是无状态的协议：对于事务处理没有记忆能力

Tomcat

Tomcat是一个web服务器软件

解决了HTTP通信时大量代码的重复编写

Tomcat也被称为Web容器、Servlet容器。

官网：Apache Tomcat® - Welcome!

配置Tomcat

在官网下载相应压缩包后解压运行startup.bat即可

遇到问题：The JRE_HOME environment variable is not defined

解决方法手动设置setclasspath.bat中的JRE_HOME路径

参考the JRE_HOME environment variable is not defined correctly This environment variabl_过气蟹黄堡的博客-CSDN博客

启动成功访问网页

在IDEA中创建 Maven Web项目

在IDEA中使用Tomcat

本地部署和maven插件部署

Servlet

Servlet是Java提供的一门动态web资源开发技术

Servlet生命周期

Servlet运行在Servlet容器（web服务器）中，其生命周期由容器来管理，分为四个阶段

加载和实例化:默认情况下，当Servlet第一次被访问时，由容器创建servlet对象
初始化:在Servlet实例化之后，容器将调用Servlet的init()方法初始化这个对象，完成一些如加载配置文件、创建连接等初始化的工作。该方法只调用一次
请求处理:每次请求servlet时，Servlet容器都会调用Servlet的service()方法对请求进行处理。
服务终止:当需要释放内存或者容器关闭时，容器就会调用Servlet实例的destroy()方法完成
资源的释放。在destroy()方法调用之后，容器会释放这个Servlet实例，该实例随后会被Java的垃圾收集器所回收

Request

Request（请求）对象

保存着HTTP的请求信息

可以获取请求数据

继承体系

获取请求数据

使用上述技术实现的交互

package com.my016.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/demo114514")
public class ServletDemo5 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");

        resp.setHeader("content-type","text/html;charset=utf-8");
        resp.getWriter().write("<h1>"+name+"欢迎您！</h1>");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("post");
    }
}

哈哈哈，好多实用API

怪不得Java工程师也叫API调用工程师，原理就了解一点点（bushi）

使用Request实现表单发送接收

html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/demo1919810" method="get">
    <h1>114514</h1>
    <input type="text" name="username"><br>
    <input type="password" name="password"><br>
    <input type="checkbox" name="hobby" value="1">唱
    <input type="checkbox" name="hobby" value="2">跳
    <input type="checkbox" name="hobby" value="3">Rap
    <input type="checkbox" name="hobby" value="4">篮球

    <input type="submit">
</form>

</body>
</html>

java源码

package com.my016.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Map;

@WebServlet("/demo1919810")
public class ServletDemo6 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("===============get============");
        Map<String,String[]> map = req.getParameterMap();
        for (String key : map.keySet()) {
            //username ： 张山
            System.out.print(key + ':');

            //获取值
            String[] values = map.get(key);
            for (String value : values) {
                System.out.print(value+" ");
            }

            System.out.println();
        }
    }

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

    }
}

有意思

请求转发

Response

Request（响应）对象

可以设置响应信息

可以发送数据

Response完成重定向

package com.my016.web.response;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/resp1")
public class ResponseDemo1 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("resp1");

//        //重定向
//        resp.setStatus(302);
//        //设置响应头
//        resp.setHeader("Location","/resp2");

        //常用方法
        resp.sendRedirect("/resp2"); //重定向Redirect

    }

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




/

package com.my016.web.response;

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

@WebServlet("/resp2")
public class ResponseDemo2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("resp2");
    }

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

结果

访问

http://localhost:4514/resp1

自动跳转到

http://localhost:4514/resp2

控制台

Response对象可以获得字符输出流往网页输出字符信息，还可以设置输出流的类型，可以把类型改为text/html以便浏览器以HTML 的格式解析字符。

JSP

*已经严重过时的技术*

在maven导入jsp坐标

JSP本质上就是Servlet

技术发展历程

EL表达式

（全称Expression Language ）

用于简化 JSP 页面内的 Java 代码

EL 表达式的主要作用是获取数据。其实就是从域对象中获取数据，然后将数据展示在页面上。

而 EL 表达式的语法也比较简单，${expression} 。

例如：${brands} 就是获取域中存储的 key 为 brands 的数据。

域对象

JavaWeb中有四大域对象，分别是：

page：当前页面有效
request：当前请求有效
session：当前会话有效
application：当前应用有效

el 表达式获取数据，会依次从这4个域中寻找，直到找到为止。而这四个域对象的作用范围如下图所示

例如： ${brands}，el 表达式获取数据，会先从page域对象中获取数据，如果没有再到 requet 域对象中获取数据，如果再没有再到 session 域对象中获取，如果还没有才会到 application 中获取数据。

JSTL标签

JSP标准标签库(Jsp Standarded Tag Library) ，使用标签取代JSP页面上的Java代码。

MVC模式和三层架构

MVC模式

MVC 是一种分层开发的模式，其中：

M：Model，业务模型，处理业务

V：View，视图，界面展示

C：Controller，控制器，处理请求，调用模型和视图

控制器（serlvlet）用来接收浏览器发送过来的请求，控制器调用模型（JavaBean）来获取数据，比如从数据库查询数据；控制器获取到数据后再交由视图（JSP）进行数据展示。

MVC 好处：职责单一，互不影响。每个角色做它自己的事，各司其职。有利于分工协作。有利于组件重用

三层架构

三层架构是将我们的项目分成了三个层面，分别是表现层、业务逻辑层、数据访问层。

联系

如上图上半部分是 MVC 模式，上图下半部分是三层架构。 MVC 模式中的 C（控制器）和 V（视图）就是三层架构中的表现层，而 MVC 模式中的 M（模型）就是三层架构中的业务逻辑层和数据访问层。可以将 MVC 模式理解成是一个大的概念，而三层架构是对 MVC 模式实现架构的思想。那么我们以后按照要求将不同层的代码写在不同的包下，每一层里功能职责做到单一，将来如果将表现层的技术换掉，而业务逻辑层和数据访问层的代码不需要发生变化。

会话技术（Cookie、Session）

会话:用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应。从浏览器发出请求到服务端响应数据给前端之后，一次会话(在浏览器和服务器之间)就被建立了会话被建立后，如果浏览器或服务端都没有被关闭，则会话就会持续建立着浏览器和服务器就可以继续使用该会话进行请求发送和响应，上述的整个过程就被称之为会话。

会话跟踪:一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，以便在同一次会话的多次请求间共享数据。服务器会收到多个请求，这多个请求可能来自多个浏览器，如上图中的6个请求来自3个浏览器服务器需要用来识别请求是否来自同一个浏览器服务器用来识别浏览器的过程，这个过程就是会话跟踪服务器识别浏览器后就可以在同一个会话中多次请求之间来共享数据

浏览器和服务器之间使用的是HTTP请求来进行数据传输

HTTP协议是无状态的，每次浏览器向服务器请求时，服务器都会将该请求视为新的请求

HTTP协议设计成无状态的目的是让每次请求之间相互独立，互不影响

请求与请求之间独立后，就无法实现多次请求之间的数据共享

Cookie

客户端会话技术，将数据保存到客户端，以后每次请求都携带Cookie数据进行访问。

package com.my016.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/AServlet")
public class AServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Cookie cookie = new Cookie("username" , "zs");
        resp.addCookie(cookie);//发送cookie
        
        Cookie[] cookies = req.getCookies();//接收cookie
        for (Cookie cookie1 : cookies) {
            String name = cookie1.getName();
            String value = cookie1.getValue();
            System.out.println(name+":"+value);
        }
    }


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

对于Cookie的实现原理是基于HTTP协议的,其中设计到HTTP协议中的两个请求头信息:

响应头:set-cookie
请求头: cookie

默认情况下，Cookie存储在浏览器内存中，当浏览器关闭，内存释放，则Cookie被销毁

Session

Cookie和Session小结

Cookie 和 Session 都是来完成一次会话内多次请求间数据共享的。

Filter（过滤器）

Filter 表示过滤器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。

过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。

拦截器拦截到后可以做什么功能呢？

过滤器一般完成一些通用的操作。比如每个资源都要写一些代码完成某个功能，我们总不能在每个资源中写这样的代码吧，而此时我们可以将这些代码写在过滤器中，因为请求每一个资源都要经过过滤器。

Listener（监听器）

Listener 表示监听器，是 JavaWeb 三大组件(Servlet、Filter、Listener)之一。

Ajax、Vue、ElementUI

AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML

JSON

概念：JavaScript Object Notation。JavaScript 对象表示法

Vue

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

v-bind & v-model 指令

生命周期

Element

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等~

如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。

Element - The world's most popular Vue UI framework

element官网提供的按钮样式代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <el-row>
     	<el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">删除</el-button>
    </el-row>
    <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })
</script>

</body>
</html>