L_B__
文章 标签 分类
L_B__

目录

https://img-blog.csdnimg.cn/img_convert/8db816efd6abe83538c4d47108d9c840.png#pic_center

一文进入JavaWeb后端

 出版于 JavaWeb笔记
   约 3159 字   预计阅读 7 分钟 

前端基础

整个前端基础详细介绍看下面这个链接，这里直接讲里面的实践。

前端基础

css实践编写一个漂亮的登录界面

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lbwnb</title>
    <link rel="icon" href="icon.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>登录系统</h1>
    <form>
        <hr>
        <div id="username">
            <label>
                <input type="text" placeholder="用户名" oninput="">
            </label>
        </div>
        <div id="password">
            <label>
                <input type="password" placeholder="密码">
            </label>
        </div>
        <div>
            <button>登录</button>
        </div>
    </form>
</body>
</html>

css文件

body{
    margin: 0;
    text-align: center;
}
h1:hover {
    color: rgb(45, 150, 189);
}

input{
    border: none;
    background: #e0e0e0;
    line-height: 48px;
    border-radius: 20px;
    padding: 0 20px 0 20px;
    width: 250px;
    font-size: 15px;
    margin-top: 20px;
    outline: 0;
}

input:focus{
    box-shadow: 0 2px 10px gray;
}

button {
    margin-top: 60px;
    background: #4174e3;
    border: 0;
    border-radius: 20px;
    height: 50px;
    width: 200px;
    color: white;
    font-size: 18px;
    box-shadow: 0 2px 10px #63b9f6;
}

button:focus{
    outline: 0;
    background: #3b4f72;
}

前端数据交互和动态的关键

JavaScript事件

事件就是各种动作会触发的信号，这个信号可以添加一个回调给他来调用，在每次触发的时候会调用对应的回调。

事件有很多种类。

常用的有：

  • onclick：点击事件
  • oninput：内容输入事件
  • onsubmit：内容提交事件

如何为事件添加一个回调呢？

  1. 直接在属性值里面添加js代码，如下：（注意代码里不要用双引号

    <input type="password" oninput="console.log('正在输入文本')"

  2. 引入js文件，然后直接能调用js里的函数。如下：

    <script type="text/javascript" src="test.js"></script>

    然后如下进行使用：

      <input type="password" placeholder="密码" oninput="f()">

    js文件如下：

    function f(){
    console.log('正在输入文本')
}

Document Object Model(DOM)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），它将整个页面的所有元素全部映射为JS对象，这样我们就可以在JS中操纵页面中的元素。

这个对象的名字就叫做document。

https://www.w3school.com.cn/i/ct_htmltree.gif

比如我现在想要读取页面中某个输入框中的内容，那么我们就需要从DOM中获取此输入框元素的对象：

document.getElementById("pwd").value //通过控件的id获取
DOM实践

我们通过DOM实现这样一个功能：我们结合事件，来进行密码长度的校验，密码长度小于6则不合法，不合法的密码，会让密码框边框变红。

输入框变红的css样式：

.illegal-pwd{
    border: red 1px solid !important;
    box-shadow: 0 0 5px red;
}

对应的js代码，此函数接受一个参数（元素本身的对象）检测输入的长度是否大于6，否则就将当前元素的class属性设定为css指定的class：

function checkIllegal(e) {
    if(e.value.length < 6) {
        e.setAttribute("class", "illegal-pwd")   
    }else {
        e.removeAttribute("class")
    }
}

html最终使用：注意参数传this表示这个组件

<input type="password" placeholder="密码" oninput="checkIllegal(this)">

完成以上修改后，会自动检查密码是否合法了。

既然oninput本身也是一个属性，那么实际上我们可以动态进行修改：

document.getElementById("pwd").oninput = () => console.info("???")

那么，我们前面提及的window对象又是什么东西呢？

实际上Window对象范围更加广阔，它甚至直接代表了整个窗口，当然也包含我们的Document对象，我们一般通过Window对象来弹出提示框之类的东西。

window.document可以得到当前的DOM。

js发送XHR请求

通过使用XMLHttpRequest对象，来向服务器发送一个HTTP请求，下面是一个最简单的请求格式：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.baidu.com');
xhr.send();

上面的例子中，我们向服务器发起了一次网络请求，但是我们请求的是百度的服务器，并且此请求的方法为GET请求。

我们现在将其绑定到一个按钮上作为事件触发：

function http() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.baidu.com');
    xhr.send();    
}

<input id="button" type="button" onclick="http()">

我们可以在网络中查看我们发起的HTTP请求并且查看请求的响应结果，比如上面的请求，会返回百度这个页面的全部HTML代码。

实际上，我们的浏览器在我们输入网址后，也会向对应网站的服务器发起一次HTTP的GET请求。

在浏览器得到页面响应后，会加载当前页面，如果当前页面还引用了其他资源文件，那么会继续向服务器发起请求，直到页面中所有的资源文件全部加载完成后，才会停止。

JavaWeb后端

HTTP协议简介

Web通信使用的上层协议都是HTTP协议，更准确一点应该是HTTPS，但是HTTPS仅仅只是对HTTP协议的通信过程进行加密，而报文的内容是完全一致的。

需要注意两点：

  1. http不是长连接，请求完得到结果后，会立马断开连接。若要保持长连接，应该使用websocket。
  2. http是应用层协议，流量的传输过程和他是无关的，他只负责规定双方如何建立聊天，他采取的底层传输协层协议是TCP协议。

如果对底层的TCP/IP协议发送流量的过程感兴趣，可以看下我之前的博客：TCP协议详解

http请求的报文

请求头报文

https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f2e95d7fd9340e8bdd61f0dada3ae3c~tplv-k3u1fbpfcp-watermark.image?

响应头报文

https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/085569782ff245219a82d5deaafdec9b~tplv-k3u1fbpfcp-watermark.image?

搭建Tomcat服务器

  • bin目录：Tomcat服务器的可执行二进制文件等。

  • conf目录：配置文件。

  • lib目录：Tomcat服务端运行的一些依赖，不用关心。

  • logs目录：所有的日志信息都在这里。

  • temp目录：存放运行时产生的一些临时文件，不用关心。

  • work目录：工作目录，Tomcat会将jsp文件转换为java文件（我们后面会讲到，这里暂时不提及）

  • webapp目录：所有的Web项目都在这里，每个文件夹都是一个Web应用程序：

启动服务器：进入bin目录运行startup.bat即可。

结束服务器：运行shutdown.bat

登录后台GUI管理

  1. 打开conf目录下的tomcat-users.xml文件，添加以下代码用来创建管理GUI的用户名和密码（添加到最后</tomcat-users>之前。

     <role rolename="manager-gui"/>
<user username="root" password="123" roles="manager-gui"/>

  2. 开启服务器，然后用浏览器输入URL：http://localhost:8080/manager，输入上述的用户名和密码便可进入后台。

后台如下：

https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc5ea7baf31348f6acc30f55f9239e6b~tplv-k3u1fbpfcp-watermark.image?

将之前的前端页面部署到tomcat服务器

  1. 到webapps目录下创建一个文件夹，我这里创建了一个名为test的文件夹。
  2. 进入test文件夹，把需要加载的前端页面的文件copy到里面。

经过以上步骤，打开本地浏览器，输入http://localhost:8080/test便可完成访问。

注意整个主页面的html的命名格式，应该名为index.html。

使用Maven创建Web项目

虽然我们已经可以在Tomcat上部署我们的前端页面了，但是依然只是一个静态页面（每次访问都是同样的样子），那么如何向服务器请求一个动态的页面呢（比如显示我们访问当前页面的时间）这时就需要我们编写一个Web应用程序来实现了，我们需要在用户向服务器发起页面请求时，进行一些处理，再将结果发送给用户的浏览器。

**注意：**这里需要使用终极版IDEA，如果你的还是社区版，就很难受了。

我们打开IDEA，新建一个项目，选择Java Enterprise（社区版没有此选项！）项目名称随便，项目模板选择Web应用程序，然后我们需要配置Web应用程序服务器，将我们的Tomcat服务器集成到IDEA中。配置很简单，首先点击新建，然后设置Tomcat主目录即可，配置完成后，点击下一步即可，依赖项使用默认即可，然后点击完成，之后IDEA会自动帮助我们创建Maven项目。

创建完成后，直接点击右上角即可运行此项目了，但是我们发现，有一个Servlet页面不生效。

需要注意的是，Tomcat10以上的版本比较新，Servlet API包名发生了一些变化，因此我们需要修改一下依赖：

<dependency>
    <groupId>jakarta.servlet</groupId>
    <artifactId>jakarta.servlet-api</artifactId>
    <version>5.0.0</version>
    <scope>provided</scope>
</dependency>

注意包名全部从javax改为jakarta，我们需要手动修改一下。

现在我们手动点击运行，可以发现网页已经可以跑起来了。

为什么整个项目能够通过tomcat跑起来？

实际上因为tomcat支持Servlet的标准，然后可以调用Servlet实现动态页面加载。

当然也可以静态加载网站。我们可以通过maven把项目打包成war包，然后把target里面的war后缀的文件复制到tomcat的webApps目录下，然后重启启动tomcat服务器，你会发现他会被解压为一个文件夹，然后这就是一个可以被服务的新项目了。

Servlet类介绍

一文进入JavaWeb后端
更新于 2022-05-13