JavaWeb学习笔记4

最新推荐文章于 2024-08-16 11:05:09 发布
最新推荐文章于 2024-08-16 11:05:09 发布
阅读量1.3k 收藏 41
点赞数 30
文章标签： 学习 json 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47175003/article/details/138481840
版权

文章目录

一、Filter

1-1、概念

  • 概念:Filter 表示过滤器，是JavaWeb 三大组件(Servlet、Filter、Listener)之一
  • 过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。
  • 过滤器一般完成一些通用的操作，比如:权限控制、统一编码处理、敏感字符处理等等。
    在这里插入图片描述

1-2、Filter 快速入门

@WebFilter("/*" )   //配置的是需要拦截的地址
public class FilterDemo implements Filter    //实现的是javax下的Filter接口
{
    @Override
    public void init(FilterConfig filterConfig) throws ServletException
    {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException
    {
        //1.放行前，对servletRequest的请求数据进行处理
        //.......

        //
        System.out.println("执行doFilter.........");//服务器启动的时候，doFilter会默认执行一次。我记得有个什么属性可以改的在注解那。

        //2.放行操作
        filterChain.doFilter(servletRequest,servletResponse);

        //3.放行后，对servletResponse的响应数据进行处理
        //。。。
        System.out.println("3");
    }

    @Override
    public void destroy()
    {

    }
}

1-3、Filter 执行流程

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

1-4、Filter 使用细节

  • Filter 拦截路径配置
    拦截具体的资源:/index.jsp:只有访问index,jsp时才会被拦截。
    目录拦截:/user/*:访问/user下的所有资源，都会被拦截
    后缀名拦截:jsp:访问后缀名为jsp的资源，都会被拦截
    拦截所有:/    :访问所有资源，都会被拦截

  • 过滤器链
    一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器链
    在这里插入图片描述
    注解配置的Filter，优先级按照**过滤器类名(字符串)**的自然排序

二、Listener

在这里插入图片描述

三、AJAX

3-1、概念:

  • AJAX(Asynchronous JavaScript And XML):异步的JavaScript 和 XML
3-1-1、AJAX作用:

  • 与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据使用了AJAX和服务器进行通信，就可以使用 HTML+AJAX来替换JSP页面了
    在这里插入图片描述

  • 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用校验，等等…

3-1-2、同步和异步

简而言之就是异步，它不需要等待服务端的处理，可以直接连续进行客户端操作。
在这里插入图片描述

3-2、AJAX 快速入门

<script>
    //1.创建核心对象
    // 创建 XMLHttpRequest 对象
    const xhttp = new XMLHttpRequest();


    //2.发送请求
    xhttp.open("GET", "http://localhost:8080/JavaWeb_new_war_exploded/AjaxServlet");//一般使用ajax之后，前后端分离(代码在不同项目里)，所以需要写绝对路径。
    xhttp.send();

    //3.获取响应对象
    xhttp.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200)
        {
            alert(this.responseText);
        }
    };

</script>

3-3、Axios 异步框架

  • 下载axios-0.18.0.js文件
  • 代码演示
<script src="../js/axios-0.18.0.js"></script>
<script>

    axios({
        method:"GET",
        url:"http://localhost:8080/JavaWeb_new_war_exploded/AjaxServlet?userName=lee"
    }).then(function (resp)
    {
        alert(resp.data);
    })

    /*axios({
        method:"post",
        url:"http://localhost:8080/JavaWeb_new_war_exploded/AjaxServlet",
        data: "userName=lee"
    }).then(function (resp)
    {
        alert(resp.data);
    })*/

//     post与get不同之处就是请求数据的书写格式不同
    /*上述代码还没有成功实现，好像是axios-0.18.0.js的问题，不知道*/


</script>

四、JSON

4-1、概念

  • JavaScript Object Notation。JavaScript 对象表示法
    +由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
    在这里插入图片描述

4-2、JSON 基础语法

  • JSON的数据类型为:
    数字(整数或浮点数)
    字符串(在双引号中)
    逻辑值(true 或 false)
    数组(在方括号中)
    对象(在花括号中)
    null
    var JSON=
            {
              "name":"lee",
              age:18,
              istrue:true,
              "addr":["gui","yang","guang"]
            }
    alert(JSON.addr)

4-3、JSON 数据和Java对象转换

  • 使用阿里的fastjson工具类

    		<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>2.0.0</version>
        </dependency>

    		User user=new User("lee","685470");
		
		//请求数据:JSON字符串转为Java对象
        String jsonString = JSON.toJSONString(user);
        
        //响应数据:Java对象转为JSON字符串
        User user1 = JSON.parseObject(jsonString, User.class);
        
        System.out.println(jsonString);
        System.out.println(user1);

五、Vue

5-1、概念

  • Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
  • 官网:https://cn.vuejs.org
    在这里插入图片描述

5-2、Vue 快速入门

<body>

<div id="app">

    <input v-model="username">
    <!-- 插值表达式 -->
    {{username}}
</div>


<script src="../js/vue.js"></script>

<script>

    //1.创建Vue核心对象
    new Vue(
        {
            el: "#app",
            data() {
                return {
                    username: ""
                }
            }
        }
    )
</script>
</body>

5-3、Vue 常用指令

  • Vue核心对象
    //1.创建Vue核心对象
    new Vue(
        {
            el: "#app",
            data() {
                return {
                    username: "",
                    url:"",
                    arrs:["lee","min","jie","dei","mei"],
                    count:5
                }
            },
            methods:
                {
                    show()
                    {
                        alert("Vue按钮被点了！");
                    }
                }
        }
    )

(下述都所以标签都在id为app的div标签里)

  • v-model

    <input v-model="username">
    <!-- 插值表达式 -->
    {{username}}

  • v-for

    <div v-for="(arr,i) in arrs"> <!--//v-for 是针对他所在的标签进行遍历，所以每遍历一次都会生成一个新的div-->
        {{i+1}}:{{arr}} <br>
    </div>

  • v-if v-show

    <div v-if="count==6">我是666</div>
    <div v-else-if="count==5">我是555</div>
    <div v-else-if="count==4">我是444</div>
    <div v-else-if="count==3">我是333</div> <!--这里只能用两个等于 == 进行判断，用===判断时，v-else-if不起效果 -->
    <div v-else>都不对！</div>
    <hr>
    <div v-show="count==5">lee在v-show的div里</div>
    <label>
        <input v-model="count">
        {{count}}
    </label>

  • v-bind

     <a v-bind:href="url">输入框内的地址</a>
    <br>
    <a :href="url">输入框内的地址</a> <!--与上述方式相同-->

    <input v-model="url">

  • v-on

    <input type="submit" value="Vue按钮" v-on:click="show()"><!-- v-on:与事件绑定 -->
<input type="submit" value="Vue按钮" @click="show()">     <!-- @ 同上-->

5-4、Vue 生命周期

  • 生命周期的八个阶段:每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)
    在这里插入图片描述
  • mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。

六、Element

  • Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页组件:组成网页的部件，例如 超链接、按钮、图片、表格等等~
  • Element官网

6-1、Element 快速入门

在这里插入图片描述

6-2、Element 布局

Element 中有两种布局方式:

  • Layout 布局:通过基础的 24 分栏，迅速简便地创建布局
    在这里插入图片描述

  • Container 布局容器:用于布局的容器组件，方便快速搭建页面的基本结构（一般就是左边具有一个导航栏的布局方式）

  • Element官网<官网可查询相应代码>

点名啦
关注
  • 30
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javaweb 学习笔记
07-13
### JavaWeb 学习笔记知识点总结 #### 一、JavaWeb 概念及组成 - **定义**: JavaWeb 是一种基于 Java 技术构建 Web 应用的方式，它利用 Java 的强大功能来处理 HTTP 请求并生成动态网页内容。 - **组成部分**: - ...
尚硅谷2022Javaweb学习笔记（个人总结）
03-24
尚硅谷2022Javaweb学习笔记（个人总结）
JavaWeb学习笔记
yjnlovepy的博客
06-25 993
学习笔记
JavaWeb学习笔记——详细
qq_43842093的博客
06-19 1430
HTTP是Hyper Text Transfer Protocol的缩写，即超文本传输协议。它是一种请求/响应式的协议，客户端在与服务器端建立连接后就可以向服务器端发送请求，这种请求被称作HTTP请求，HTTP请求方法有8种：GET,POST,PUT,OPTIONS,HEAD,DELETE,TRACE,CONNECT，其中GET,POST是最为常用的两种；服务器端接收到请求后会做出相应的响应，这种响应被称为HTTP响应。 默认端口号：80。HTTP协议是一种纯文本的无状态协议！HTTP协议工作于客户端-服
【JavaWeb】javaweb学习笔记
qq_45882726的博客
03-27 313
java web学习笔记 springboot框架 Maven
JavaWeb学习笔记——尚硅谷
这里有一只小马吖
12-15 749
JavaWeb学习笔记——尚硅谷
JavaWeb学习笔记总结(一）
长安也有星星的博客
10-27 789
Javaweb学习笔记，tomcat,servlet
黑马程序员Javaweb学习笔记01
weixin_61263533的博客
12-28 1901
根据黑马程序员Javaweb总结的笔记
JavaWeb学习笔记4_MVC学习01
qq_35837370的博客
02-15 155
我的理解是: View对应jsp 功能:1)呈现数据:从request中获取servlet放入的属性          2)接收用户的输入 Controller对应Servlet   功能: 1)获取请求信息:获取请求参数 2)验证请求参数的合法性 3)把请求参数封装为一个JavaBean 4)调用DAO的方法,获取返回结果 5)吧返回的结果处理后放入request中 6)相应...
javaweb学习笔记——预备
m0_58889791的博客
03-19 148
java最重要的框架。
JavaWeb学习笔记4——带进度条的文件上传
inying的博客
05-15 1013
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
JAVAWEB学习笔记
01-19
JAVAWEB学习笔记
javaweb学习笔记
08-06
### JavaWeb 学习笔记之 MySQL 配置与管理 #### MySQL 安装与配置注意事项 在进行 JavaWeb 开发时，MySQL 数据库是不可或缺的一部分。对于初学者来说，掌握正确的 MySQL 安装与配置方法至关重要。以下是关于 MySQL...
VTK-vtkStructuredGrid学习
weixin_69505365的博客
08-14 405
可以理解为单元格顺序沿着坐标轴排列，但是每个单元格可以不一样。维度理解为X/Y/Z方向的点数，如草图所示分别是4，3，1。此时只提供了12个点，只能构造一层，5.点图、线图、面图如下，对应行的代码改一下出现不同效果图。7.增加Z方向维度，点也要增加，点序保持一致。6.点可以不在同一个平面，随机改变点Z数值。2.获取这些点信息，点顺序要严格按照图示。直接赋值第一层的12个点，改一下Z值。所以Z方向维度是1，不能是其他数据。1.使用CAD随意绘制个网格草图。4.将上面的网格显示出来。
fme处理空间数据入门v0
weixin_43229258的博客
08-13 772
本教程是最最最基本的fme处理空间数据内容，给新同事介绍我以前是怎么干活用的，基本啥有用的东西。本教程主要说如何在 FME Workbench中创建模板文件（一般我们把fme写的工作空间就叫模板），教程里面主要是利用GIS数据。按照分步说明操作，1.了解如何从读取数据；2.添加转换器以在空间上过滤数据；3.将过滤后的数据写入 Esri Shapefile;4.如何运行模板文件。
【OCR 学习笔记】二值化——全局阈值方法
TeamLee的博客
08-14 877
该文介绍了图像二值化操作中的全局阈值方法，包括固定阈值方法和Otsu算法（最大类间方差法）。
CVPR2024 | PromptAD: 仅使用正常样本进行小样本异常检测的学习提示
最新发布
08-16 992
本文提出的PromptAD模型结构如图2所示。PromptAD建立在VV-CLIP之上，其视觉编码器用于提取全局和局部的特征。本文提出的语义串联（SC）用来设计提示。具体来说，将N个可学习的普通前缀与目标名称串联起来获得普通提示（NPs），然后将这N个普通提示分别与M个手动设置的异常后缀和L个可学习的异常后缀串联，以获得N×M个异常提示（MAPs）和N×L个可学习的异常提示（LAPs）。视觉特征和提示特征用于通过对比损失和本文提出的显式异常边界（EMA）损失来完成提示学习。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值