vue中的异步请求Axios（个人学习笔记五）

悲且狂2023-07-27 17:04

目录

友情提醒

先看文章目录，大致了解知识点结构，直接点击文章目录可以跳转到文章指定位置。

第一章、传统的jQuery方式获取数据

1.1）后端controller层代码

java 复制代码 
@Controller
@RequestMapping("/admin")
public class AdminController {
    @RequestMapping("/getAdmin.action")
    @ResponseBody
    public List<Admin> getAdmin(){
        System.out.println("接收到异步请求");
        List<Admin> adminList = new ArrayList<>();
        Admin admin = new Admin(1001, "大朗1");
        Admin admin1 = new Admin(1002, "西门1");
        Admin admin2 = new Admin(1003, "金莲1);
        adminList.add(admin);
        adminList.add(admin1);
        adminList.add(admin2);
        return adminList;
    }
}

1.2）传统的jQuery获取数据

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jQuery3.7.js"></script>
    <script>
        $(function(){
            $.get("admin/getAdmin.action",function(adminList){
                //alert(adminList)
                var $tableDemo = $("#tableDemo");
                $.each(adminList,function(i,admin){
                    $tableDemo.append("<tr>\n" +
                        "<td>"+admin.adminId+"</td>\n" +
                        "<td>"+admin.adminName+"</td>\n" +
                        "</tr>")
                })
            },"json")
        })
    </script>
</head>
<body>
    <center>
        <table width="800px" border="1" cellspacing="0" id="tableDemo">
            <tr>
                <td>编号</td>
                <td>用户名</td>
              
            </tr>

        </table>
    </center>
</body>
</html>

1.3）使用vue对象和jQuery获取异步数据

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/jQuery3.7.js"></script>

</head>
<body>
    <div id="root">
        <center>
            <table width="800px" border="1" cellspacing="0" id="tableDemo">
                <tr>
                    <td>编号</td>
                    <td>用户名</td>
                </tr>
                <tr v-for="admin in adminList">
                    <td>{{admin.adminId}}</td>
                    <td>{{admin.adminName}}</td>
                    
                </tr>

            </table>
            <button @click="getAdmin();">加载数据</button>
        </center>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            adminList:[]
        },
        methods:{
            getAdmin(){
                console.log("发起异步请求前的this：",this)
                let that = this;//that就一直指向vue对象
                alert("发起异步请求")
                //发起异步请求
                $.get("admin/getAdmin.action",function(admins){
                    console.log("得到的结果：",admins)
                    //异步回执  浏览器要接收响应值  此时this指向window对象
                    //window不能读取vue中的adminList属性
                    console.log("异步成功时的回执this:",this)
                    that.adminList=admins;
                },"json")
            }
        }
    })
</script>
</html>

第二章、使用Axios获取数据

2.1）axios简介

①传统的Ajax请求是基于XMLHttpRequest（XHR）对象。可以直接使用。但是使用起来配置较为麻烦，实际开发中使用非常少，在MVC时代通常使用的是JQuery-Ajax。相对于传统的Ajax现在使用更多的是Fetch请求。

②Vue2.0时代开始，官方推荐使用axios作为新一代的Ajax库。axios其优点：在浏览器中发送XMLHttpRequest请求、在node中发送http请求、支持Promise API、拦截请求和相应、转换请求和响应数据等

2.2）axios两种使用方式

第一种：使用 cdn，导入js文件

java 复制代码 
 <script src="js/axios.min.js"></script>


第二种：脚手架安装后import导入

java 复制代码 
命令：npm install axios -S -D 
npm install -S axios@0.19.0

①加上@0.19.0 是指定版本号；不指定npm默认安装最新的版本；

在需要使用的地方引入axios对象import axios from axios

②Npm命令中的-S和-D

java 复制代码 
--save 等同于-S（是前者的缩写）：安装包信息将放入
到dependencies（生产阶段的依赖,是项目运行时的依赖，程序上线后仍然需要依赖）
java 复制代码 
--dev等价于-D（也是前者的缩写）：安装包信息将放入到
devDependencies（开发阶段的依赖，是我们在开发过程中需要的依赖）

③运行时环境和开发时环境

2.3）axios的config属性

比较重要的配置信息：

java 复制代码 
method:请求方式   默认是get   get/post
url:请求路径  admin/getAdmin.action
baseUrl:基础请求路径  http://ip:port/工程名
params:请求时携带的URL参数  只能携带key-value方式的参数,params是用来携带请求参数的
data:请求时携带参数要包裹在对象格式即只能携带浏览器可以识别的对象
类型参数(Bolb  jsonStr  formData), data是用来携带请求数据的

timeOut:请求超时时间  毫秒值  
proxy:代理服务器
headers:请求头信息
responseType: "json", // 默认的  表示服务器响应的数据类型

2.4）使用axios发起异步请求获得数据

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/jQuery3.7.js"></script>
    <script src="js/axios.min.js"></script>

</head>
<body>
    <div id="root">
        <center>
            <table width="800px" border="1" cellspacing="0" id="tableDemo">
                <tr>
                    <td>编号</td>
                    <td>用户名</td>
                </tr>
                <tr v-for="admin in adminList">
                    <td>{{admin.adminId}}</td>
                    <td>{{admin.adminName}}</td>
                </tr>
            </table>
        </center>
    </div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            adminList:[]
        },
        methods:{
        },
        //初始化阶段 发起异步请求  获取adminList的数据
        created(){
            let that = this;
            axios({
                url:"admin/getAdmin.action"
            }).then(function(result){
                console.log(result)
                console.log(result.data)
                console.log("axios异步请求回执：",this)
                that.adminList=result.data;
            })
        }
    })
</script>
</html>

第三章、在springMVC中使用axios获取数据

3.1）发起带参数的axios请求

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="root">
        <button @click="sendAxiosMethod1()">发起axios异步请求</button>
        <form>
            卡号：<input type="text" name="userName" v-model="userName"><br/>
            密码：<input type="password" name="userPwd" v-model="userPwd"><br/>
            <input type="button" value="提交" @click="loginUser1()">
        </form>
    </div>
</body>
    <script>
        new Vue({
            el:"#root",
            data:{
                userName:"",
                userPwd:""
            },
            methods:{
                sendAxiosMethod1(){
                    axios({
                        method:"get",
                        url:"demo1/axiosMethod1.action",
                        params:{
                            userName:"大朗",
                            userPwd:123
                        },
                        //responseType:"json"
                    }).then(function(result){
                        //alert(result)
                        console.log(result)
                        console.log("响应的配置信息：",result.config)
                        console.log("响应的服务器回执信息：",result.data)
                        console.log("响应头信息：",result.headers)
                        console.log("响应的状态码：",result.status)
                    })
                },
                loginUser(){
                    let loginParam={"loginName":this.userName,"loginPwd":this.userPwd}
                    let  jsonStr="{loginName:this.userName,loginPwd:this.userPwd}"//"abc"
                    console.log("请求参数：",loginParam)
                    console.log("这次的参数是params方式传递")
                    // console.log("这次的参数是data方式传递")
                    //登录
                    axios({
                        method:"post",
                        url:"demo1/loginUser.action",
                        /*params:{
                            loginName:this.userName,
                            loginPwd:this.userPwd
                        }*/
                        params:loginParam
                        //data:loginParam

                    }).then(function(result){
                        console.log(result.data)
                    });
                },
                loginUser1(){
                    //使用data方式传递参数
                    let loginParam={"loginName":this.userName,"loginPwd":this.userPwd}//js对象  json
                    console.log("loginParam:",loginParam)
                    //alert("loginParam的格式："+typeof(loginParam))
                    //把loginParam转换成json串
                    let jsonStr = JSON.stringify(loginParam)//"{"loginName":this.userName,"loginPwd":"123"}"
                    console.log("json串后的结果jsonStr:",jsonStr)
                    //alert("jsonStr的格式："+typeof(jsonStr))
                    //只能放在请求体  只能使用post请求
                    axios({
                        method:"post",
                        url:"demo1/getDataDemo1.action",
                        data:jsonStr,
                        headers:{
                            "Content-type":"application/json"
                        }
                    }).then(function(result){
                        console.log(result.data)
                    });

                }
            }

        });
    </script>
</html>

3.2）后端controller层

java 复制代码 
package com.powernode.controller;

import com.powernode.bean.LoginUser;
import com.powernode.util.ResultObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/demo1")
public class AxiosControllerDemo1 {
    //接收异步请求
    @RequestMapping("/axiosMethod1.action")
    @ResponseBody
    public ResultObject axiosMethod1(String userName,String userPwd,ResultObject resultObject){
        System.out.println("userName = " + userName);
        System.out.println("userPwd = " + userPwd);
        resultObject.setResultCode(10086);
        resultObject.setResultMessage("请求成功");
        return resultObject;
    }
    //登录处理
    @PostMapping("/loginUser.action")
    @ResponseBody
    public ResultObject loginUser(String loginName,String loginPwd,ResultObject resultObject){
        System.out.println("loginName = " + loginName);
        if(loginName.equals("888123")&& loginPwd.equals("123")){
            resultObject.setResultCode(0);
            resultObject.setResultMessage("登录成功");
        }else{
            resultObject.setResultCode(1);
            resultObject.setResultMessage("登录失败！！！");
        }
        return resultObject;
    }
    @RequestMapping("/getDataDemo1.action")
    @ResponseBody//把java对象转换成json串
    //@RequestBody  把请求中的json串解析成 json
    public ResultObject getDataDemo1(@RequestBody LoginUser loginUser){
        System.out.println("loginUser = " + loginUser);
        System.out.println("loginName = " + loginUser.getLoginName());

        ResultObject resultObject = new ResultObject();
        resultObject.setResultCode(10011);
        resultObject.setResultMessage("你好 jsonStr");
        return resultObject;
    }
}

第四章、使用axios实现异步文件上传

4.1）前端代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
    <div id="root">
        文件上传:<input type="file" @change="getFile($event)">
        <input type="button" value="上传" @click="fileUploadDemo()">
        <hr/>
         <!-- 根据文件路径展示在到浏览器-->
        <img :src="imgSrc"/>
    </div>
</body>
    <script>
        new Vue({
            el:"#root",
            data:{
                upFile:"",
                imgSrc:"",
                addUser:{
                    id:"",
                    name:"",
                    sex:""
                },
                updateUser:{}
            },
            methods:{
                getFile(event){
                //通过event获得需要上传的文件
                    console.log(event)
                    let upFile = event.target.files[0];
                    console.log(upFile)
                    //把得到的文件赋给了data中的upFile
                    this.upFile = upFile;
                },
                fileUploadDemo(){
                    //文件上传三要素？1 导包
                    //2 post请求  multipart/from-data  用于同步请求
                    //异步文件上传  是设置请求头headers:multipart/from-data
                    //3、配置文件上传解析器 服务器识别multipart
                    //js中有一个formData对象  是一个key-value的容器对象
                    let myF = new FormData();
                    let that = this;
                    myF.append("userName","大朗");
                    myF.append("upFile",this.upFile)
                    axios({
                        method:"post",
                        url:"demo2/upFileDemo1.action",
                        headers:{
                            "Content-type":"multipart/form-data"
                        },
                        //要上传的文件是 this.upFile，包裹在myF中通过data方式传给后端
                        data:myF
                    }).then(function(result){
                        console.log(result.data)
                        //获取文件路径回显到浏览器
                        that.imgSrc = "images/"+result.data.resultData.fileName

                    });
                }
            }


        });
    </script>
</html>

4.2）后端controller层代码

java 复制代码 
package com.powernode.controller;

import com.powernode.bean.LoginUser;
import com.powernode.util.ResultObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@Controller
@RequestMapping("/demo2")
public class AxiosControllerDemo2 {
    @RequestMapping("/upFileDemo1.action")
    @ResponseBody
    public ResultObject upFileDemo1(String userName, MultipartFile upFile, HttpServletRequest request,ResultObject resultObject) throws IOException {
        System.out.println("userName = " + userName);
        System.out.println("upFile = " + upFile);
        String oldFileName = upFile.getOriginalFilename();
        String fileTypeName = oldFileName.substring(oldFileName.lastIndexOf("."));
        String uuid = UUID.randomUUID().toString();
        String fileName = uuid+fileTypeName;
        File file = new File(request.getServletContext().getRealPath("/images")+"/"+fileName);
        upFile.transferTo(file);
        resultObject.setResultCode(10000);
        resultObject.setResultMessage("上传成功");
        resultObject.setDataToMap("fileName", fileName);
        return resultObject;
    }
}
相关推荐
eybk1 小时前
Pytorch+Mumu模拟器+萤石摄像头实现对小孩学习的监控
学习
6.941 小时前
Scala学习记录 递归调用 练习
开发语言·学习·scala
Aileen_0v01 小时前
【AI驱动的数据结构：包装类的艺术与科学】
linux·数据结构·人工智能·笔记·网络协议·tcp/ip·whisper
web130933203982 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
守护者1703 小时前
JAVA学习-练习试用Java实现“使用Arrays.toString方法将数组转换为字符串并打印出来”
java·学习
学会沉淀。3 小时前
Docker学习
java·开发语言·学习
Rinai_R3 小时前
计算机组成原理的学习笔记(7)-- 存储器·其二 容量扩展/多模块存储系统/外存/Cache/虚拟存储器
笔记·物联网·学习
吃着火锅x唱着歌3 小时前
PHP7内核剖析 学习笔记 第四章 内存管理（1）
android·笔记·学习
ragnwang3 小时前
C++ Eigen常见的高级用法 [学习笔记]
c++·笔记·学习
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
热门推荐
0119个Web前端交互式3D JavaScript框架和库02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07【一文读懂】NTN（非地面网络）技术介绍08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10ZZ038 物联网应用与服务赛题第J套