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;
    }
}
相关推荐
秃头佛爷几秒前
Python学习大纲总结及注意事项
开发语言·python·学习
dayouziei2 小时前
java的类加载机制的学习
java·学习
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
aloha_7894 小时前
从零记录搭建一个干净的mybatis环境
java·笔记·spring·spring cloud·maven·mybatis·springboot
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由（更新中）
前端·vue.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
dsywws5 小时前
Linux学习笔记之vim入门
linux·笔记·学习
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
晨曦_子画6 小时前
3种最难学习和最容易学习的 3 种编程语言
学习
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play