• servlet---前端代码发送

    json字符串在http请求和响应中，与java对象

    在这里插入图片描述
    在这里插入图片描述
    前端代码：login2.HTML
    作用：发送Ajax请求，以及处理Ajax响应数据

    <!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
    <h2>用户登录</h2>
    <div id="app">
        用户名：<input type="text" v-model="username">
        <br><br>
        密码：<input type="password" v-model="password">
        <br><br>
        <button v-on:click="login()">登录</button>
    </div>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                username: "",
                password: ""
            },
            methods: {
                login: function () {
                    //alert("用户名："+this.username+"\n密码："+this.password)
                    let vm = this;

                    //发送ajax请求
                    axios.post("login2", {
                        username: vm.username,
                        password: vm.password
                    }).then(function (resp) {
                        //console.log(resp)
                        let body=resp.data;
                        if(body.ok){
                            //业务操作成功，跳转到首页
                            window.location.href="home.html";
                        }else{
                            //业务操作失败，显示错误信息
                            alert("错误码"+body.code+"\n错误信息"+body.msg);

                        }
                    }).catch(function (err) {
                        console.error(JSON.stringify(err))
                    })
                }
            }
        });
    </script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    后台交互：

    package org.example.servlet.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import org.example.servlet.demo.User;

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

@WebServlet("/login2")
public class login2Servlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //ajax请求响应，比较固定的三行代码
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json");
        //1.解析请求数据
        //请求体数据都可以通过输入流获取，只不过表单数据使用getParameter更方便。
        InputStream in = req.getInputStream();
        //使用jackon框架，把json字符串反序列化为java对象
        ObjectMapper mapper = new ObjectMapper();
        User input = mapper.readValue(in, User.class);

        //准备输出流
        PrintWriter pw=resp.getWriter();

        //提供一个对象，序列化为json字符串作为响应体的内容
        Map<String,Object> map=new HashMap<>();

        //2.业务处理
        if("abc".equals(input.getUsername())
                &&"123".equals(input.getPassword())){
            //业务操作是否成功
            map.put("ok",true);
            //业务操作成功时，可能需要业务数据，
            // 前端会根据响应的数据字段，来渲染网页内存
        }else{
            map.put("ok",false);
            //业务操作失败，一般提供错误码（开发人员）
            // 或错误消息（用户用）
            map.put("code","LOG001");
            map.put("msg","用户名或密码错误");

        }
        //3.返回响应数据（json字符串）
        pw.println(mapper.writeValueAsString(map));
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    js发送Ajax请求，以及后台交互的过程
    在这里插入图片描述
    在这里插入图片描述

    Cookie:

    定义: Cookies 是存储在客户端计算机上的文本文件，并保留了用户的各种跟踪信息。

    形式：Cookies 通常设置在 HTTP 头信息中。设置 Cookie 的http请求，会向 Servlet 会发送如下的头信息:

    HTTP/1.1 200 OK
Date: Fri, 04 Feb 2000 21:03:38 GMT
Server: Apache/1.3.9
Set-Cookie: name=xyz; expires=Friday, 04-Feb-07 22:03:38 GMT;
        path=/; domain=bit.com
Connection: close
Content-Type: text/html

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    标准的请求头：Cookie：键=值
    标准的响应头：Set-Cookie:键=值

    作用:
    cookie是保存信息用的（客户端本地，和浏览器相关的文件夹），会话保持，如完成用户的登录与状态保持
    在这里插入图片描述

    Session:

    概念：会话。对于web系统来说，一个会话表示登录后，注销前，且最后一次操作离下一个操作没有超时（规定的会话时间）都是一个会话。
    作用：标识登录的有效用户。
    原理：服务端保存用户信息。（登录时校验账号密码通过，保存用户信息）

    首次登录：在这里插入图片描述
    再次登录：
    在这里插入图片描述

  • 相关阅读:
    MATLAB数据导出
    redis分布式锁
    Docker
    今日配音热点来袭|想给短视频加配音就赶紧看过来吧
    android studio新版本gradle Tasks找不到assemble
    Arduino驱动BMA220三轴加速度传感器（惯性测量传感器篇）
    Spring Framework 学习笔记2：注解开发
    springboot + solr
    驱动初级Day01_环境搭建
    windows上运行qemu仿真stm32板子a9板子实例
  • 原文地址：https://blog.csdn.net/m0_47916948/article/details/125993477