六、前端技术框架（缓存、AJax、axios、JSON、Vue）

望不见云和月

于 2024-08-31 19:02:12 发布

阅读量647

点赞数 8

文章标签：前端缓存 ajax json vue

本文链接：https://blog.csdn.net/sjdnnd/article/details/140129966

版权

一、浏览器缓存问题

1、什么是浏览器缓存

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

2、优点

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

3、为什么清除缓存

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

二、Ajax

1、定义

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

2、Ajax作用

2.1 数据交换

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

2.2 异步交互

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

2.2.1 同步与异步的区别

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

3、常用属性

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

4、使用步骤

创建XMLHttpRequest对象
定义回调函数
规定请求（打开XMLHttpRequest对象）
发送请求

get请求

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

post请求

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

5、AJax清除缓存问题

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

三、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、作用

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

3、JSON字符串语法

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

4、格式转换

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

4.1 在Servlet中：

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

将Java对象转为对应的JSON字符串去传输
User user = new User(101, "zhangsan","123");
String jStr = JSON.toJSONString(user);
将传来的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字符串

将js对象转为JSON字符串去传输
var user = {id:101, username:"zhangsan", password:"23"};
var jStr = JSON.stringify(user);
将响应来的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的创建

el：代表这个Vue对象要控制哪个区域，值是css选择器
data：数据模型
methods：Vue接管的区域内的事件方法

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

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

3、Vue的data展示

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

非vue标签内，使用{{}}取值(文本格式)
在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