第三阶段04-同步请求和异步请求,get/post,Josn,pojo,Session/Cookie,过滤器Filter

最新推荐文章于 2023-12-06 10:55:33 发布
最新推荐文章于 2023-12-06 10:55:33 发布
阅读量350 收藏
点赞数
文章标签： 前端 javascript json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aiheshuicxy/article/details/129248508
版权

文章目录

同步请求和异步请求

  • 同步: 指单线程依次做几件事

  • 异步: 指多线程同时做几件事

  • 同步请求: 指客户端只有一个主线程, 主线程需要负责页面的渲染操作以及监听操作,如果需要发出请求时,主线程会停止渲染(清空页面) 发出请求, 直到服务器响应了数据之后才会将服务器响应的数据再次渲染出来,这样把原内容清空掉显示新的内容称为页面的整体刷新, 同步请求只能实现整体刷新,无法实现页面的局部刷新

  • 异步请求: 指客户端主线程负责页面的渲染和监听,如果需要发出请求时,创建一个新的子线程,由子线程发出请求,请求到数据后把数据呈现在原页面的基础之上, 这种对原页面的部分内容进行改动称为页面的局部刷新, 只有通过异步请求才能实现页面的局部刷新.

客户端如何发出异步请求

  • 之前发出请求的方式都是同步请求
  • 通过Axios框架发出异步请求
    • html页面中引入axios.js框架文件
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

  • 相关代码:

    //发出异步get请求
axios.get("/helloAxios").then(function (response) {
    //response是响应对象,response.data得到服务器响应的数据
    alert(response.data);
    v.info=response.data;
});

自定义模板代码

请添加图片描述

请添加图片描述

Get和Post请求

  • Get: 请求参数在请求地址的后面, 由于参数在请求地址当中是可见的所以不能传递带有敏感信息的参数,Get请求参数只能传递几k的数据
    • 应用场景: 如果只传递一个参数并且非敏感信息时,一般使用get 因为方便,从字面意思理解get是获取的意思,如果这个请求是查询请求一般也都使用get
  • Post:请求参数在请求体里面,参数大小没有限制
    • 应用场景: 参数中有敏感信息时,上传文件时, 当传递的参数为多个参数,将多个参数封装到自定义的JS对象里面进行传递时使用Post会更方便
  • 应用场景总结: 除了必须使用post的两种情况(1.敏感信息 2.文件上传) 如果传递的参数是2个参数以内 则使用get请求, 如果大于2个参数一般使用post请求, 2个参数时使用两者都可以

异步版本的注册和登录

  • 准备工作:

    • 创建boot08工程, 勾选3个对勾

    • 创建完工程后把mysql的依赖换掉 然后刷新maven

      <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.15</version>
</dependency>

    • 修改application.properties里面连接数据库的信息 url username 和password
      请添加图片描述

    • [

    • 在工程中static里面添加index.html首页 首页中准备注册和登录两个超链接

  • 注册功能:

    • 创建reg.html页面, 在页面中通过vue对页面进行管理, 页面中准备三个文本框和一个自定义按钮, 三个文本框和data里面的user对象进行双向绑定, 给按钮添加点击事件, 事件触发时向/reg地址发出异步post请求,并且把v.user传递过去, 服务器返回的值是1代表注册成功显示到首页 否则代表用户名已存在.
    • 创建controller.UserController 在里面添加reg方法处理/reg请求, 创建entity.User实体类, 在reg方法的参数列表处声明User对象接收传递过来的参数(不要忘记使用@RequestBody注解修饰), 在方法中调用mapper的selectByUsername方法 通过用户名查询到数据库里面的用户信息, 如果查询到了直接给客户端响应2 代表用户名已存在, 如果没有查询到 调用mapper的insert方法 最后响应1 代表注册成功.
    • 创建mapper.UserMapper,里面实现两个方法分别是selectByUsername和insert方法

  • 登录步骤:

    • 创建login.html页面, 在页面中通过vue对页面进行管理, 页面中准备2个文本框和一个自定义按钮, 2个文本框和data里面的user对象进行双向绑定, 给按钮添加点击事件, 事件触发时向/login地址发出异步post请求,并且把v.user传递过去, 服务器返回的值是1代表登录成功显示到首页如果返回的值是2代表用户名不存在 否则代表密码错误
    • 在UserController中添加login方法处理/login请求,参数列表处声明User对象接收传递过来的参数(@RequestBody不要忘记) 在方法中调用mapper的selectByUsername方法, 通过判断分别给客户端响应1,2,3 三种情况

商品管理系统(异步版本)

  • 添加商品步骤:
    • 在首页里面添加超链接 请求地址 /insert.html
    • 创建insert.html页面 通过vue管理页面 ,准备三个文本框 和一个自定义按钮,文本框和变量进行双向绑定, 给按钮添加点击事件, 事件出发时向/insert地址发出异步的post请求,把双向绑定的数据提交给服务器, 响应后弹出添加完成 并返回首页
    • 创建ProductController,添加insert方法处理/insert请求, 创建Product实体类,在参数列表处声明 用来接收参数, 不要忘记使用@RequestBody注解, 在方法中调用Mapper的insert方法
    • 创建ProductMapper, 里面添加增删改查四个方法(写法和上一个版本的写法一样)

  • 商品列表步骤:

前后端分离

请添加图片描述
请添加图片描述

为什么需要前后端分离?

  • 如果不使用前后端分离设计的话 后端程序员需要准备两套Controller服务于不同的前端(浏览器和手机),这样的话后端的重复性工作量比较大,所以通过前后端分离的方式可以让后端一套Controller服务于任何前端, 这样能够提高后端程序员的开发效率

为什么以后不再使用同步请求?

  • 因为前后端分离后, 浏览器端获取页面需要单独发请求获取,请求到页面后再次发出请求获取数据,把得到的数据再展示到页面中, 这就是一个非常典型的页面局部刷新的需求,只有通过异步请求才能实现页面的局部刷新, 同步请求是无法实现的,所以以后工作中只要是前后端分离 就必须使用异步请求.

注册成功!

登录成功!

用户名不存在!

密码错误!

tom:18:男&jerry:20:女

JSON

  • JSON是一种轻量级的数据交换格式
  • 客户端和服务器之间进行复杂的数据传输时, 如果每次传输都自己定义传输格式的话太影响开发效率, JSON是一种通用的数据交换格式,使用JSON可以大大提高开发效率
[{"name":"tom","age":18,"gender":"男"},
{"name":"jerry","age":20,"gender":"女"}]

话太影响开发效率, JSON是一种通用的数据交换格式,使用JSON可以大大提高开发效率

[{"name":"tom","age":18,"gender":"男"},
{"name":"jerry","age":20,"gender":"女"}]

请添加图片描述

POJO

  • pojo是简单的Java对象, 是entity实体类、值对象VO和数据传输对象DTO的总称
  • entity实体类: 通常实体类的属性和表字段是一一对应的
  • VO ValueObject值对象: 从数据库里面查询出来的数据 通过值对象对其进行封装
  • DTO DataTransferObject数据传输对象: 客户端给服务器传输多个参数时,通过DTO进行封装

会话对象Session

  • 服务器会针对每一个客户端在内存中创建一个会话对象, 这个会话对象供同一个客户端的多次请求共享使用, 保存在里面的数据可以给同一个客户端的每一次请求使用.

  • 相关方法:

    • session.setAttribute(“key”,value); 往会话对象中保存数据
    • session.getAttribute(“key”); 从会话对象中获取数据
    • session.removeAttribute(“key”); 从会话对象中删除数据

如何记住登录状态

  1. 客户端登录成功时, 把当前登录的用户对象保存到会话对象里面
  2. 任何客户端显示首页时都发请求 从会话对象中获取登录成功时保存的用户对象, 如果登录过可以得到用户对象, 如果没有登录过则得到的是个null, 此时就可以通过判断是否拿到了用户对象 来决定当前客户端有没有登录过

后端的MVC

  • 将实现一个业务功能的所有代码划分为三部分(包含前端)
  • 前端MVC: 是将实现前端业务功能的代码划分为三部分(不包含后端)
  • M: Model 模型,指数据模式, 对应的是工程中Mapper相关代码
  • V: View 视图, 对应的是工程中前端页面相关代码
  • C: Controller控制器, 对应的是工程中Controller相关代码

会话管理Cookie

  • 客户端和服务器之间进行数据传输,遵循的是HTTP协议, 此协议是无状态协议(一次请求对应一次响应)响应完之后断开连接, 服务器是无法跟踪客户端的请求的, 通过Cookie技术可一个在客户端第一次请求服务器时服务器给客户端创建一个标识, 之后客户端每次发请求时都会带上这个标识 这样的话服务器就可以识别此客户端了(类似于打孔式的会员卡), 但是由于Cookie的形式数据是保存在客户端的, 存在被篡改的风险, 通过Session可以解决此问题, 因为Session的数据是保存在服务器的(类似于银行卡).

请添加图片描述
请添加图片描述

  • 通过会话管理技术可以保存服务器和客户端之间的数据(比如让客户端记住用户名和密码,让服务器记住当前客户端的登录状态), 数据库保存的是用户的数据

  • Cookie和Session对比

    • Cookie: 数据保存在客户端(类似打孔式的会员卡)
      • 保存时间: 默认保存在浏览器的内存中, 当前浏览器关闭时数据会清除,可以设置任意保存时间,设置时间后数据会保存到磁盘中, 时间到了之后自动清除
      • 数据类型: 只能保存字符串类型的数据
      • 数据量: 由于cookie的数据需要每次发请求时保存在请求头里面,所以数据量只能保存几k的数据
      • 应用场景: 需要长时间保存的客户端数据,比如:记住用户名和密码
    • Session: 数据保存在服务器(类似银行卡)
      • 保存时间: 数据保存在服务器内存中,默认保存半个小时,可以修改时间,但不推荐.(因为服务器只有一个所有客户端的数据都保存在这一个服务器里面这样服务器保存时间太久的话压力太大)
      • 数据类型: 可以保存任意对象类型
      • 数据量: 没有数据大小的限制,但是不建议保存太大的数据(因为服务器只有一个所有客户端的数据都保存在这一个服务器里面这样服务内存器压力太大)
      • 应用场景: 对安全性要求较高的,但是不需要保存时间太久的数据, 比如记住客户端的登录状态

通过Cookie实现记住用户名和密码功能

  1. 在login.html页面添加多选框记住用户名和密码
    请添加图片描述

  2. 在登录成功时创建Cookie对象把用户名和密码保存到Cookie里面 下发给客户端

请添加图片描述

请添加图片描述

  1. 在login.html页面中 从cookie里面把用户名和密码取出 并赋值给和页面进行绑定的变量

过滤器Filter

请添加图片描述

  • 使用过滤器可以让客户端请求到资源之前或之后 经过过滤器, 这样可以把请求多个资源时执行的相同的代码写在过滤器里面, 这样只需要写一次,起到了代码复用的作用

  • 如何使用过滤器:

    • 创建Filter.java类文件

    • 在XXXAplication.java 类文件中添加 组件扫描注解
      请添加图片描述

    • 在过滤器中书写以下代码:

      package cn.tedu.coolshark.filter;

import cn.tedu.coolshark.pojo.vo.UserVO;

import javax.servlet.*;
import javax.servlet.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebFilter(filterName = "MyFilter",
        urlPatterns = {"/insertProduct.html","/insertBanner.html","/admin.html","/product/delete"})
public class MyFilter implements Filter {
    //过滤器初始化方法
    public void init(FilterConfig config) throws ServletException {
    }
    //过滤器销毁时执行的方法
    public void destroy() {
    }
    //请求资源之前和之后执行的方法
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
        //因为要用到子类类型中的方法 所以进行类型强转
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;
        //从请求对象中获取当前客户端对应的会话对象
        HttpSession session = req.getSession();
        //从会话对象中获取登录成功时保存的用户对象
        UserVO user = (UserVO) session.getAttribute("user");
        if (user!=null){//登录过  放行允许客户端请求资源
            chain.doFilter(request, response); //请求资源
        }else{//未登录 禁止请求资源 并显示登录页面
            res.sendRedirect("/login.html");
        }
    }
}

  • urlPatterns的配置方式:

    • 精确匹配: /insertBanner.html /insertProduct.html /product/delete
    • 后缀匹配: *.jpg *.html *.xxxx
    • 路径匹配: /user/* /product/*
    • 全部匹配: /* 匹配网站中所有资源

timstamp时间类型

  • 如果数据库表中的某条数据发生改变时,不管改变的是哪一个字段 这个timestamp 类型的数据 会自动修改成当前的系统时间

  • 关闭timestamp类型的自动更新功能

    use cs;

    alter table product change created created timestamp not null default current_timestamp;

  • 打开timestamp类型的自动更新功能

    alter table product change created created timestamp not null default current_timestamp on update current_timestamp;

当表字段的名和VO中的属性名不一致时的解决方案:

  1. 查询数据时通过别名的方式解决(不能复用)

  2. 如果不一致仅仅是因为命名规范不一致的情况下, 在application.properties里面添加以下配置即可解决

    mybatis.configuration.map-underscore-to-camel-case=true

  3. 通过resultMap手动映射的方式解决(可以复用)

请添加图片描述

炸鸡&汉堡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSD-2204-同步和异步请求-Ajax-Day13
TheNewSystrm的博客
07-13 772
JSD-2204-同步和异步请求-Ajax-Day13
js中请求数据的$post和$ajax区别（同步和异步问题）
weixin_34378922的博客
02-26 506
$.post和$.Ajax都为页面上向后台发送请求，请求数据1.post 因为post默认为异步请求,可是有时候我们会发现,本来要求请求马上出现,可是异步会导致后面突然再执行,这样就出很多问题 2.Ajax 最原始的Ajax，可以控制同步或者异步,属性：async设置为false，代表同步；async设置为true，代表异步 语法如下： $.ajax(...
ajax请求方式为get/post时同步设置
奋斗的清风~的博客
12-18 1970
记录一下设置get/post 请求为同步 //设置同步 $.ajaxSettings.async = false; $.post/get("url", requestdata, function(result) { // 请求处理 },"json"); //设置异步 $.ajaxSettings.async = true; 借鉴地址： https://...
jquery Ajax异步请求之session
weixin_30740295的博客
01-29 719
写了一个脚本,如下: 1 $(function () { 2 $("#btnVcode").click(function () { 3 var receiveMobile = $("#Moblie").val();//手机号 4 var regMobile = /^1[3|4|5|7|...
ajax异步请求，session超时处理
weixin_34007020的博客
03-27 148
为什么80%的码农都做不了架构师？>>> ...
Json-to-Pojo:该项目旨在自动化为 Josn 数据编写 Java Beans 或 Models 的过程，它还具有发出 Http Get 和 Http Post 等请求的能力
07-08
描述中提到，Json-to-Pojo不仅能够生成Java Beans或Models，还具备发送HTTP请求的功能，比如支持HTTP GET和POST。这意味着开发者可以用这个工具不仅处理JSON到Pojo的转换，还可以直接与远程API进行交互，获取或发送...
C++通过HTTP请求Post方式请求Json数据示例程序
08-16
最近在工作中，由于合作商只提供uRL，我这边需要通过HTTP请求Get或Post方式请求Json数据，然后解析JSON格式，解析json我使用的第三方库rapidjson。开发环境是64位win7，VS2015。
listview和post请求josn解析都实现了！
03-29
listview和post请求josn解析都实现了
狼王-HttpPost请求和JSON解析
04-14
本篇文章将深入探讨两种常见的HTTP请求方法：HttpGet和HttpPost，以及JSON这种广泛用于数据交换的数据格式的解析。 首先，我们来理解HttpPost请求。HttpPost是HTTP协议中的一个方法，主要用于向服务器提交数据，...
postman测试post请求参数为json类型的实例讲解
10-18
**Postman测试POST请求参数为JSON类型实例详解** 在现代Web开发中，API（应用程序编程接口）已经成为构建分布式系统和微服务架构的核心部分。Postman作为一个强大的API测试工具，可以帮助开发者快速、便捷地测试和...
post请求同步异步的各种问题
最新发布
qq3892997的博客
12-06 394
post请求同步异步的各种问题
Python并发之异步aiohttp(8)
布鲁斯
02-23 2375
在我们写普通的爬虫程序时，经常会用到requests库用以请求网页并获得服务器响应。而在协程中，由于requests库提供的相关方法不是可等待对象(awaitable),使得无法放在await后面，因此无法使用requests库在协程程序中实现请求。官方专门提供了一个aiohttp库，用来实现异步网页请求等功能，就是异步版的requests库。 1,aiohttp基本用法 在官方文档中，推荐...
Java多线程编程核心技术阅读笔记(对象变量的并发访问)
qq_42913304的博客
10-16 100
2.1synchronized同步方法 非线程安全 会在多个线程对同一个对象中的实例变量进行并发访问时发生 产生的后果就是脏读也就是读到的数据其实是被改过的。 而线程安全就是以获得的实例变量的值是经过同步处理的 不会出现脏读现象 2.1.1 方法内的变量为线程安全 ...
JavaScript实现同步网络请求的方式
鲸落
09-11 7669
前言：想提出通用的ajax的请求，但是也需要拿到ajax回调。 默认情况下，Ajax请求是异步的，但是可以通过一些方式将ajax变成同步请求。 一、使用ES7的Async和Await 1 通用Ajax POST框架 async function commonAjaxPost(url, argument) { let datas = JSON.stringify(argument); const result = $.ajax({ url: url, method: "post",.
Ajax&Json - 异步请求遇到session失效
记录本身-即已是反抗
11-18 2802
项目为Java 项目， 有个filter，作用是检查是否登录或是否deng'lu
http post请求 josn
06-02
另外，我们也可以使用第三方库如Google的GSON库来将Java对象转换为JSON格式的字符串，然后发送HTTP POST请求。例如： ```java HttpPost httpPost = new HttpPost("http://www.example.com/submit"); User user = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值