当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Tomcat学习笔记（2）--WebSocket（1）建立连接与登录处理

Tomcat学习笔记（2）--WebSocket（1）建立连接与登录处理

2020年07月17日  | 移动技术网IT编程  | 我要评论

//本节只是WebSocket的准备工作、前期学习，无WS具体代码

在之前学习flask里面就已经发现了，如果不使用html本地的javascript的，而要使用服务器上的代码时——比如说登录操作，要在服务器上对比数据库验证——

它实质上是新建立了一个地址请求并且附上登录信息，
这个地址在服务端绑定了一个函数（或者其他一些载体）来拿到登录信息并加以验证后返回信息。

所以基于这个流程的简单认识 和 b站相关视频：
https://www.bilibili.com/video/BV1dJ411N7Um?p=52
我记录一下如何在tomcat架构下建立一个WebSocket连接

本节没有写到通过WebSocket的具体与浏览器的交互，之后再说。

启动一个Tomcat项目

创建一个JAVA web应用
在这里插入图片描述

部署依赖包

这三个libs 直接复制或者拖进去都可以 fastjson没有的话百度下载
注意再.jar文件前面如果没有那个小三角的话，说明IDEA还不能识别他们为依赖包
选中后–右击–选择“Add as Libraries”

fastjson是为了将数据转化为json格式
后两个是websocket的api 在tomcat安装目录下面的libs文件夹中可以找到
在这里插入图片描述

然后整体还是tomcat架构的 所以依赖整个tomcat：
在projectStructure里面选中modules，点右上角的小加号 选择library
在这里插入图片描述
把tomcat放进去 并apply
在这里插入图片描述
在这里插入图片描述
发送数据用的是jQuery 直接搜名字 网上下一下 放在这里
在这里插入图片描述

在环境布置的时候 发现一个有点诡异的问题
如果下图没有这样的结构 要自己新建lib 把Libraries中自己打包的jar库放进去 那么就无法调用JSON的函数 真的真的很奇怪 debug了好久
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

写代码

src下new一个包，创建一个类，是一个专门用来处理登录请求的servlet 继承自tomcat的httpservlet
在这里插入图片描述
在这里插入图片描述
如果命名一致 那么直接复制下面的代码就可以了 其中的注释一一解释了各语句的意思

package cn.CakeCN.servlet;

import com.alibaba.fastjson.JSON;

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.HashMap;
import java.util.Map;

//这是声明下面的类是作为WebServlet的载体，这样写就可以不用在web.xml中配置了
//其中name说明这个servlet的名字（专门用来处理登录请求）
//urlPatterns说明，当我们的浏览器访问/login这个路径进行请求（并携带着请求的数据）
//那么使用这个类来处理数据

@WebServlet(name = "loginServlet",urlPatterns = "/login")
public class loginServlet extends HttpServlet {

    //这里没有链接数据库，直接用粗暴的方法对比密码
    private static final String PASSWORD = "123456";

    //相应POST请求 实际上 下面响应GET也是转而来用同一块代码
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //确定发回浏览器的数据是UTF-8编码，以防中文乱码
        resp.setCharacterEncoding("UTF-8");

        //获取接收页面传递的参数 , 用户名/密码，在之后的html构造请求数据的时候就理解了为什么这么写
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        //用来存储信息（python字典型、Map映射类型都是这样的键值对 转json简单清晰，最适合存信息）
        Map resultMap = new HashMap();

        //判定用户名密码是否正确
        if(PASSWORD.equals(password)){

            //如果正确, 响应登录成功的信息
            resultMap.put("success",true);
            resultMap.put("message","登录成功");

            //这一句话在本节中没有体现用处，但是是开启WebSocket的关键语句
            //有了它就可以建立双向持续连接--Session会话
            //关于cookie和Session 我看的是这一博客：
            //https://www.cnblogs.com/wangpei/p/4884840.html
            //这里就是尝试获取已有username为username的Session（没有则新建）
            req.getSession().setAttribute("username",username);
        }else{
            //如果不正确, 响应登录失败的信息
            resultMap.put("success",false);
            resultMap.put("message","用户名或密码错误");
        }

        //响应数据，用json的方式写入传回给浏览器的数据
        resp.getWriter().write(JSON.toJSONString(resultMap));

    }

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

下面是登录界面的html文件 其中js的代码注释也写入了我的理解

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to PIXIVRemSys</title>
    <link rel="stylesheet" href="static/css/initial.css">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>

    <div class="wrap">
        <div class="container">

		 <h1 style="color: white; margin: 0; text-align: center">Login</h1>
            <label for="username"></label><input type="text" id="username" name="username" placeholder="Your username">

            <label for="password"></label><input type="password" id="password" name="password" placeholder="Your password">

			<input type="button" class = "button" value="登录" onclick="check()">

        </div>
    </div>
</body>

<script type="text/javascript">

    function check() {
        const name = document.getElementById("username").value;
        const pswd = document.getElementById("password").value;

        if(name === "" || pswd === "") {
            alert("没有输入密码或用户名！");
            clear_text();
            return false;
        }
        else {
			//这里是发送请求的核心代码
			//发送了一个POST请求，请求地址为/login
			//类型为json 内容为记录用户名和密码的键值对
            $.ajax({
                type:"POST",
                url:"/login",
                dataType:"json",
                data:{
                    username: name,
                    password: pswd
                }, // 这里是对于返回的信息不同的处理方式，如果成功就进入Main.html
                success:function (data) {
                    if (data.success){
                        alert(data.message);
                        window.location.href="Main.html";
                    }else{
                        alert(data.message);
                    }
                }
            });
        }
    }
    function clear_text(){
        const username = document.getElementById("username").value = "";
        const password = document.getElementById("password").value = "";
    }
</script>
</html>

在这里插入图片描述
放在web目录就好，然后里面连接到css样式什么的 自己按照文件夹结构建文件夹就好
在这里插入图片描述
css文件内容：

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font: 16px/20px microsft yahei;
 }
 .wrap {
    width: 100%;
    height: 100%;
    padding: 10% 0;
    position: fixed;
    opacity: 0.8;
    background: linear-gradient(to bottom right,#000000, #656565);
    background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
}
.container {
    width: 60%;
    margin: 0 auto;
}
.container input {
    width: 320px;
    display: block;
    height: 36px;
    border: 0;
    outline: 0;
    padding: 6px 10px;
    line-height: 24px;
    margin: 32px auto;
    -webkit-transition: all 0s ease-in 0.1ms;
    -moz-transition: all 0s ease-in 0.1ms;
    transition: all 0s ease-in 0.1ms;
}
.container input[type="text"] , .container input[type="password"]  {
    background-color: #FFFFFF;
    font-size: 16px;
    color: #2677a5;
}
.container input[type='button'] {
    font-size: 16px;
    letter-spacing: 2px;
    color: #666666;
    background-color: #FFFFFF;
    cursor: pointer;
}
input[type='submit'] {
    font-size: 16px;
    letter-spacing: 2px;
    color: #666666;
    background-color: #FFFFFF;
    cursor: pointer;
    width: 120px;
    height: 36px;
}

.text{
    color: #e2dfe4;
}

这里登录成功会进入到一个叫Main.html文档里面 随意放个页面
因为只要知道成功建立连接验证就够了
在这里插入图片描述

最后修改web.xml配置文件，指定欢迎界面是login.html

在这里插入图片描述

部署本地Tomcat

在这里插入图片描述
在这里插入图片描述

注意下图圈起来的访问的地址，千万千万不能是/login 因为我们服务器把/login是绑定到一个处理登录验证的servlet上了，如果占用，那么无法启动servlet！！！
在这里插入图片描述
最后输入密码为123456时 运行能跳转页面就OK了

本文地址：https://blog.csdn.net/Cake_C/article/details/107365562

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网