六、前端技术框架(缓存、AJax、axios、JSON、Vue)

一、浏览器缓存问题

1、什么是浏览器缓存

浏览器读取网页内容时,会将图片、CSS、JS文件保存到电脑本地磁盘,下次读取时能够直接从本地加载,以提升浏览速度。

2、优点

  1. 减少服务器负担,提高网站性能
  2. 加快客户端网页的加载速度,提升用户体验
  3. 减少多余网络数据传输

3、为什么清除缓存

  1. 释放存储空间:缓存文件可能会占用大量存储空间
  2. 更新数据:某些应用程序可能会定期更新缓存中的数据,以确保显示最新的信息。
  3. 保护隐私安全

二、Ajax

1、定义

Asynchronous JavaScript And XML:异步的JavaScript和XML。
是不跳转页面、异步载入并改写页面内容的技术,简单理解为通过js向服务器发送请求。

2、Ajax作用

2.1 数据交换

通过AJax可以携带数据向服务器发送请求,获取服务器的响应得数据

2.2 异步交互

在服务器处理逻辑的时候可以在页面进行其他操作,免去等待web服务器响应的时间,给予更连续的用户体验,不加载整个页面的同时与服务器交换数据,

2.2.1 同步与异步的区别
  1. 数据传输方式不同
    同步:数据存在域中(request、session、application),要加载整个页面,浪费网络带宽
    异步:数据直接在客户端与服务器之间独立传输(json)。不加载整个页面,响应的内容变少,速度更快
  2. 是否需要等待页面刷新
    同步请求要等待服务器响应,期间不能在页面操作其他组件;异步不需要等待,可以在请求响应期间操作页面

3、常用属性

在这里插入图片描述
responseXML:要在servlet中通过response设置响应格式为"text/xml"。

4、使用步骤

  1. 创建XMLHttpRequest对象
  2. 定义回调函数
  3. 规定请求(打开XMLHttpRequest对象)
  4. 发送请求
    AJax使用步骤
    AJax得到响应

get请求

参数跟在open方法的参数url的后面

post请求

post请求参数携带方式
post请求也可以不写第二行,直接将参数跟在url后面

5、AJax清除缓存问题

  1. 在请求地址中增加无意义的参数使地址每次不一样,例如当前得时间毫秒值:new Data().getTime();
  2. 在服务器端添加响应头,指明不使用缓存

三、Axios

1、功能

对原生的Ajax进行了封装,简化了原生Ajax的书写

2、使用

2.1 引入Axios的js文件

2.2 使用axios发送请求、获取响应

then内是回调函数,参数res是请求成功后返回的响应对象的变量,后端返回的是json格式。
res的data属性就是解析后的 JavaScript 对象或数组,可以直接访问其属性或元素

axios({
    method:"get",
    url:""
}).then(res=>{
    console.log(res.data);
});
axios({
    method:"post",
    url:"",
    data:"key=value"
}).then(res=>{
    console.log(res.data);
})
2.2.1 简化书写axios请求

put和post的第二个参数是请求体,携带数据,也可以省略不写

axios.get("url").then(res=>{
	console.log(res.data);
});
axios.post("url","key=value").then(res=>{});
axios.put("url", "key=value").then(res=>{});
axios.delete("url").then(res=>{});

四、JSON

1、概念

JavaScript Object Notation:JavaScript对象表示符。客户端和服务端进行数据交互的轻量级的数据格式(特殊的字符串)

2、作用

  1. 语法简单(仅仅是字符串),层次结构鲜明
  2. 轻量级的数据格式作为数据载体,在网络中数据传输,节省网络带宽

3、JSON字符串语法

  1. { "key1": value1, "key2" : value2, ... "keyn" : valuen }
  2. 在页面和服务器之间传递的是字符串:
    它可以作为字符串拼接在get后面,Java中是通过getParameter()获取json字符串。
    responseText属性也是页面访问servlet返回的字符串。
  3. 用对象转换成JSON字符串,不要自己去写JSON字符串

4、格式转换

格式转换无非在两种环境中:

4.1 在Servlet中:

json对象/java对象<——>json字符串

  1. 将Java对象转为对应的JSON字符串去传输
    User user = new User(101, "zhangsan","123");
    String jStr = JSON.toJSONString(user);
  2. 将传来的JSON字符串转为对应的Java对象去访问
    转换为对应的bean类对象
    User user = JSON.parseObject(jStr, User.class);
    转换为JSON对象
    JSONObject jObj = JSON.parseObject(jStr); System.out.println(jObj.get("id"));

4.2 在JavaScript中:

js对象<——>json字符串

  1. 将js对象转为JSON字符串去传输
    var user = {id:101, username:"zhangsan", password:"23"};
    var jStr = JSON.stringify(user);
  2. 将响应来的JSON字符串转为js对象去获取展示数据
    var jObj = JSON.parse(xhttp.responseText);

5、例题

5.1 由页面到服务器

<script>
    var user = {id:101, username:"zhangsan", password:"23"};
    //以字符串格式传输
    var jStr = JSON.stringify(user);
    const xhttp = new XMLHttpRequest();
    xhttp.open("GET", "http://localhost:8080/AJax/JSONServlet2?jStr="+encodeURIComponent(jStr));
    xhttp.send();
</script>
@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String jStr = request.getParameter("jStr");
        System.out.println(jStr);   //{"id":101,"username":"zhangsan","password":"23"}
        //将json字符串转为java对象
        User user = JSON.parseObject(jStr, User.class);
        //将json字符串转换为JSON对象,访问属性
        JSONObject jObj = JSON.parseObject(jStr);
        System.out.println(jObj.get("id"));
    }

5.2 由服务器到页面

<script>
        const xhttp = new XMLHttpRequest();
        xhttp.onload=function (){
            var jObj = JSON.parse(xhttp.responseText);
            alert(jObj.username);
        }
        xhttp.open("GET", "http://localhost:8080/AJax/JSONServlet");
        xhttp.send();
</script>
@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置编码
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        User user = new User(101, "zhangsan","123");
        String jStr = JSON.toJSONString(user);
        System.out.println(jStr);
        out.print(jStr);
        out.flush();
        out.close();
    }

JSON由服务器到页面


五、Vue

1、概念

Vue是构建界面的渐进式框架,自底向上逐层解析应用,核心是一个双向数据绑定系统,可以免除原生JS的DOM操作。
bootstrop是响应式框架,看见的才渲染,还没看到的就不渲染,提升系统性能

2、Vue的创建

  1. el:代表这个Vue对象要控制哪个区域,值是css选择器
  2. data:数据模型
  3. methods:Vue接管的区域内的事件方法
//创建vue对象
var mainVue = new Vue({
    el:'#maindiv', //绑定的模板层maindiv
    data:{
       //定义的属性,与界面元素绑定

    },
    create:function (){
        //初始化方法
    },
    methods:{
        //Vue的事件方法
    }
});

3、Vue的data展示

在页面中获取data数据模型内的数据

  1. 非vue标签内,使用{{}}取值(文本格式)
  2. 在vue标签内,直接写data内的键就可以取值

4、Vue的指令

4.1 v-html:以html的格式来解析data的值

4.2 v-text:直接以普通文本格式获取

获取Vue的Data数据

//创建vue对象
var mainVue = new Vue({
    el:'#maindiv', //绑定的模板层maindiv
    data:{
       //定义的属性,与界面元素绑定
        msg:"hello vue",
        url:'<a href="http://www.baidu.com">百度百科</a>'
    }
});

4.3 v-bind:为HTML标签绑定设置属性

语法:<标签 v-bind:属性="vue中声明的属性名称"/>
比如href、src、css等
<a v-bind:href="url">百度百科</a>

//创建vue对象
var mainVue = new Vue({
    el:'#maindiv', //绑定的模板层maindiv
    data:{
       //定义的属性,与界面元素绑定
        url:"http://www.baidu.com"
    }
});

4.4 v-model:绑定数据模型变量

作用:将该标签的value与数据模型中的变量进行绑定
如下,通过修改文本框的值,修改data中的msg变量;达到修改了div中值的效果
双向绑定

//创建vue对象
var mainVue = new Vue({
    el:'#maindiv', //绑定的模板层maindiv
    data:{
       //定义的属性,与界面元素绑定
        msg:"hello vue",
    }
});

注意:如果被v-bind或v-model绑定了,那么这个变量必须在数据模型中声明。

4.4.1 原理

使用v-model的标签必须可以被修改值,因为要通过修改它来改变数据模型中变量,如果是只读的将无意义。
任何地方展示数据,都是同一个数据模型,外部数据改变就会影响数据模型,进而影响其他地方展示的数据。底层就是重写onchange事件

5.5 v-on:为html元素绑定事件

<body>
    <div id="maindiv">
        <input type="button" value="单击我" v-on:click="handle()"/>
    </div>
</body>
<script>
    new Vue({
        el:'#maindiv',
        // methods:Vue接管的区域内的事件方法
        methods:{
            handle:function (){
                console.log("单击事件!!");
            }
        }
    })
</script>

5.6 v-if、v-else-if、v-else

用于条件性地渲染一块内容,只在指令的表达式返回true的时候渲染
一个成立,就不会去执行剩下两个

<body>
<div id="maindiv">
    年龄:<input type="text" v-model="age" />
    <br>
    <span v-if="age<=35">年轻人</span>
    <span v-else-if="age>35&&age<60">中年人</span>
    <span v-else>老年人</span>
</div>
</body>
<script>
    new Vue({
        el:'#maindiv',
        data:{
            age:20
        }
    })
</script>
5.6.1 细节:成立才渲染

注意:v-if系列的标签,它是哪个条件成立,才会去渲染哪个标签,如图年龄输入20,剩下两个span标签没有被渲染
v-if效果

5.7 v-show:条件成立显示

与v-if的效果是一致的,实现细节不一样。v-if是条件成立的才渲染,v-show是全都渲染上去,条件成立的显示出来,条件不成立的通过设置display属性为none隐藏起来

<div id="maindiv">
    年龄:<input type="text" v-model="age" />
    <br>
    <span v-show="age<=35">年轻人</span>
    <span v-show="age>35&&age<60">中年人</span>
    <span v-show>老年人</span>
</div>
</body>
<script>
    new Vue({
        el:'#maindiv',
        data:{
            age:20
        }
    })
</script>

如图所示,下面两个span都渲染了,只是更改了display属性,设置隐藏
v-show效果

5.8 v-for:遍历容器的元素或对象属性

语法:<标签 v-for="变量 in 数组变量">{{变量}}</标签>
<标签 v-for="(变量, 索引) in 数组变量">{{索引}}:{{变量}}</标签>
input标签不能直接使用v-for标签,一般是将其写在input的父标签内,可以使用span、div、li等

<body>
<div id="maindiv">
    顾客:<div>
            <span v-for="(user, index) in users">
                {{index+1}}:{{user.uname}}-{{user.age}}<br>
            </span>
        </div>
    <hr/>
    <!-- 绑定复选框 -->
    爱好:<span v-for="hb in hobby">
            <input type="checkbox" v-bind:value="hb" name="hobby" id="hobby">{{hb}}
        </span>
    <hr/>
    <!-- 绑定下拉列表 -->
    所在城市:
    <select>
        <option v-for="c in city" v-bind:value="c">{{c}}</option>
    </select>
</div>
</body>
<script>
    new Vue({
        el:'#maindiv',
        data:{
            users:[
                {uname:'张三', age:23},
                {uname:'李四', age:24},
                {uname:'王五', age:25}
            ],
            hobby:['swim','pingpang','shop'],
            city:['北京','上海','广州','深圳']
        }
    })
</script>

v-for

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值