后端工程师快速使用axios

最新推荐文章于 2024-11-12 23:26:42 发布
最新推荐文章于 2024-11-12 23:26:42 发布
阅读量1.9k 收藏 44
点赞数 29
分类专栏： 前端 文章标签： ajax axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74212228/article/details/136822836
版权

文章目录

01.AJAX 概念和 axios 使用

模板

axios({
  url: '目标资源地址'
}).then((result) => {
  // 对服务器返回的数据做后续处理
})

注：url中的地址可以直接使用相对路径，不必写完整的IP或域名

例如：

url: ‘localhost:8080/test3’ 可以写成 url: ‘/test3’

目标

了解 AJAX 概念并掌握 axios 库基本使用

讲解

  1. 什么是 AJAX ? mdn

    • 使用浏览器的 XMLHttpRequest 对象 与服务器通信

    • 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页

      image-20230403173156484

  2. 什么是服务器？

    • 可以暂时理解为提供数据的一台电脑

  3. 为何学 AJAX ?

    • 以前我们的数据都是写在代码里固定的, 无法随时变化
    • 现在我们的数据可以从服务器上进行获取，让数据变活

  4. 怎么学 AJAX ?

    • 这里使用一个第三方库叫 axios, 后续在学习 XMLHttpRequest 对象了解 AJAX 底层原理
    • 因为 axios 库语法简单，让我们有更多精力关注在与服务器通信上，而且后续 Vue，React 学习中，也使用 axios 库与服务器通信

  5. 需求：从服务器获取省份列表数据，展示到页面上（体验 axios 语法的使用）

    获取省份列表数据 - 目标资源地址：http://hmajax.itheima.net/api/province

    • 完成效果：

      image-20230220113157010

  6. 接下来讲解 axios 语法，步骤：

  7. 引入 axios.js 文件到自己的网页中

    axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

  8. 明确axios函数的使用语法

    注意：请求的 url 地址, 就是标记资源的网址

    注意：then 方法这里先体验使用，由来后续会讲到

  9. 对应代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX概念和axios使用</title>
</head>

<body>
  <!--
    axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
    省份数据地址：http://hmajax.itheima.net/api/province

    目标: 使用axios库, 获取省份列表数据, 展示到页面上
    1. 引入axios库
  -->
  <p class="my-p"></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 2. 使用axios函数
    axios({
      url: 'http://hmajax.itheima.net/api/province'
    }).then(result => {
      console.log(result)
      // 好习惯：多打印，确认属性名
      console.log(result.data.list)
      console.log(result.data.list.join('<br>'))
      // 把准备好省份列表，插入到页面
      document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') 
    })
  </script>
</body>

</html>

代码解析

  1. document.querySelector('.my-p'): 这一部分使用了 querySelector 方法来获取文档中具有 class 为 my-p 的第一个元素。querySelector 方法返回匹配到的第一个元素，如果没有找到匹配的元素，则返回 null。
  2. .innerHTML: 这是一个 DOM 元素的属性，用于获取或设置元素的 HTML 内容。在这里，它被用于设置元素的 HTML 内容。
  3. result.data.list.join('<br>'): 这部分使用了 join 方法，将 result.data.list 数组中的每个元素用 <br> 连接起来成为一个字符串。join 方法会将数组的元素以指定的分隔符连接起来。在这里，分隔符是 <br>，表示换行。

案例

前端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    axios({
        url: 'http://localhost:8080/test'
    }).then(result => {
        console.log(result)
        console.log(result.data.data)
        console.log(result.data.data.join('<br>'))
        // document.querySelector('.my-p').innerHTML=result.data.list.join('<br>')
        var divs = document.getElementsByClassName('my-p');
        var div1=divs[0];

        div1.innerHTML=result.data.data.join('<br>')
    });
</script>
<p class="my-p"></p>
</body>
</html>
后端
package nuage.controller;

import nuage.common.R;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping
public class TestController {

    @GetMapping("/test")
    public R<List<String>> test() {
        List<String> list = new ArrayList<>();
        list.add("a");
        list.add("b");
        list.add("c");
        return R.success(list);
    }
}
结果截图

image-20240315111242951

02.URL 查询参数

模板

axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

目标

掌握-通过URL传递查询参数，获取匹配的数据

讲解

  1. 什么是查询参数 ?

    • 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据

    • 举例：查询河北省下属的城市列表，需要先把河北省传递给服务器

      image-20230404101257205

  2. 查询参数的语法 ？

    • 在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
    • 参数名一般是后端规定的，值前端看情况传递即可

  3. axios 如何携带查询参数?

  4. 需求：获取“河北省”下属的城市列表，展示到页面，对应代码：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查询参数</title>
</head>
<body>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <p></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      // 查询参数
      params: {
        pname: '辽宁省'
      }
    }).then(result => {
      console.log(result.data.list)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>
</html>

案例

前端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

    axios({
        url: 'http://localhost:8080/test2',
        params: {
            name: '河北省'
        }
    }).then(result => {
        console.log(result);
        var list = document.getElementsByClassName("my-p");
        var list1 = list[0];
        list1.innerHTML=result.data.data.join('<br>')
    });

</script>
<p class="my-p"></p>
</body>
</html>
后端
package nuage.controller;

import nuage.common.R;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping
public class TestController {

    @GetMapping("/test2")
    public R<List<String>> test2(String name) {
        List<String> list = new ArrayList<>();
        list.add(name);
        list.add("a");
        list.add("b");
        list.add("c");
        return R.success(list);
    }
}
结果截图

image-20240315111750353

03.常用请求方法和数据提交

模板

axios({
  url: '目标资源地址',
  method: '请求方法',
  data: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

目标

掌握如何向服务器提交数据，而不单单是获取数据

讲解

  1. 想要提交数据，先来了解什么是请求方法

    • 请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作

    • 前面我们获取数据其实用的就是GET请求方法，但是axios内部设置了默认请求方法就是GET，我们就没有写

    • 但是提交数据需要使用POST请求方法

      请求方法操作
      GET获取数据
      POST数据提交
      PUT修改数据（全部）
      DELETE删除数据
      PATCH修改数据（部分）

  2. 什么时候进行数据提交呢？

    • 例如：多端要查看同一份订单数据，或者使用同一个账号进行登录，那订单/用户名+密码，就需要保存在服务器上，随时随地进行访问

      image-20230404104328384

      image-20230404104333584

    3.需求：注册账号，提交用户名和密码到服务器保存

    注册用户 URL 网址：http://hmajax.itheima.net/api/register

    请求方法：POST

    参数名：

    username：用户名（要求中英文和数字组成，最少8位）

    password：密码（最少6位）

    image-20230404104350387

    4.正确代码如下：

    /*
  注册用户：http://hmajax.itheima.net/api/register
  请求方法：POST
  参数名：
    username：用户名（中英文和数字组成，最少8位）
    password：密码  （最少6位）

  目标：点击按钮，通过axios提交用户和密码，完成注册
*/
document.querySelector('.btn').addEventListener('click', () => {
  axios({
    url: 'http://hmajax.itheima.net/api/register',
    method: 'POST',
    data: {
      username: 'itheima007',
      password: '7654321'
    }
  })
})

    注：PUT和DELETE与POST类似，只需要将method改为PUT或DELETE即可

    实现路径参数，只需要在url后面拼接字符串即可,如：url: '/user/delet/' + row.id,row.id根据上下文查询

案例

前端
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用请求方法和数据提交</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>

    function dianji() {
      // console.log(123)
      var username = document.getElementsByClassName("username")[0].value;
      var password = document.getElementsByClassName("password")[0].value;
      console.log(username);
      axios({
        url: 'http://localhost:8080/test3',
        method: 'POST',
        data: {
          username: username,
          password: password
        }
      }).then(result=>{
        console.log(result.data);
        alert(result.data.data)
      })
    }


  </script>
用户名：<input class="username" type="text" >
  <br>
密码：<input class="password" type="password">
  <br>
<button class="bt" onclick="dianji()">注册</button>
</body>

</html>
后端
package nuage.controller;

import nuage.common.R;
import nuage.entity.User;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping
public class TestController {

    @PostMapping("/test3")
    public R<String> test3(@RequestBody User user) {
        System.out.println(user);
        return R.success("注册成功");
    }
}


package nuage.entity;

public class User {
    private String username;
    private String password;
	//get和set方法自己补充
}
结果截图

image-20240315164558128

04.axios 错误处理

模板

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

目标

掌握接收 axios 响应错误信息的处理语法

讲解

  1. 如果注册相同的用户名，则会遇到注册失败的请求，也就是 axios 请求响应失败了，你会在控制台看到如图的错误：

    image-20230220131753051

  2. 在 axios 语法中要如何处理呢？

    • 因为，普通用户不会去控制台里看错误信息，我们要编写代码拿到错误并展示给用户在页面上

  3. 需求：再次重复注册相同用户名，提示用户注册失败的原因

    image-20230404104440224

    image-20230404104447501

  4. 对应代码

    document.querySelector('.btn').addEventListener('click', () => {
    axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'itheima007',
        password: '7654321'
      }
    }).then(result => {
      // 成功
      console.log(result)
    }).catch(error => {
      // 失败
      // 处理错误信息
      console.log(error)
      console.log(error.response.data.message)
      alert(error.response.data.message)
    })
})

案例

因为项目中我们的错误信息也是返回正确的状态码，所以不能写在.catch中，我们可以根据后端传过来的code来进行判断

前端
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>常用请求方法和数据提交</title>
</head>

<body>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>

    function dianji() {
      // console.log(123)
      var username = document.getElementsByClassName("username")[0].value;
      var password = document.getElementsByClassName("password")[0].value;
      console.log(username);
      axios({
        url: 'http://localhost:8080/test3',
        method: 'POST',
        data: {
          username: username,
          password: password
        }
      }).then(result => {

        if (result.data.code === 1) {
          console.log(result);
          alert(result.data.data)
        }else if (result.data.code === 0) {
          console.log(result);
          alert(result.data.msg)
        }
      }).catch(error => {

      });
    }


  </script>
用户名：<input class="username" type="text" >
  <br>
密码：<input class="password" type="password">
  <br>
<button class="bt" onclick="dianji()">注册</button>
</body>

</html>
后端
package nuage.controller;

import nuage.common.R;
import nuage.entity.User;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController
@RequestMapping
public class TestController {

    @PostMapping("/test3")
    public R<String> test3(@RequestBody User user) {
        if (user.getUsername().equals("nuage")) {
            return R.error("注册失败");
        }
        System.out.println(user);
        return R.success("注册成功");
    }
}
结果截图

image-20240315173307346

ww0110.
关注
专栏目录
使用axios发送post请求上传文件(multipartform-data)到后端
m0_54850825的博客
07-31 3476
实现了一个文件上传服务接口，可以接收前端传递过来的MultipartFile文件，并存储到服务器本地中。获取type为file的标签中的文件，使用axioshttp请求库，发送post请求，将文件发送给后端。
axios的封装
web18224617243的博客
08-01 380
4.创建api文件夹，在api文件夹下创建接口文件colllect.js，文件中引入src中的request.js文件，创建接口函数，区分get方法和post方法所传入参数的不同。2.在request.js文件中引入axios,进行封装，baseURL代表后端即服务器的地址，timeout表示接口的响应时间，超时退出。1.一般情况，axios的封装我们一般会在src文件夹下创建utils文件夹下的的request.js文件中。axios的封装是我们在项目开发中比较常用的，今天根据我的学习做个简单的介绍。..
使用Axios前后端交互（超详细）建议点赞收藏
qq_45310795的博客
12-08 6362
使用Axios前后端交互（超详细）建议点赞收藏
axios交互及后端响应
路飞船长的博客
05-30 141
function jsonData(){ $axios({ url:"xxxxxx" type:'post' success:function(data){ alert(JSON.stringify(data)); },erro:function(error){ alert(error) } }) } @RequestMapping("xxxxx") public ResponseEntity<JsonResult> OutPatient(xxxxx){ JsonR
axios基础学习——通过 Vue + axios 获取接口数据的小demo_axios获取后端数据
2401_84617431的博客
05-15 363
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
在vue中使用axios上传文件给后台(这里用node.js做后台举例子)
业余前端的职业经历
03-21 2735
再上传文件之前我们还是先来复习下 aixos的get和post请求的传惨方式哈 1.get请求 axios({ url:'http://********', //请求地址 method:'get' // 请求方式 params:{name:''} // 请求参数 }).then(res=>{}) 当然你也可以这样写 axios.get('',{params:{name:''}}...
Axios前后端异步请求库 后端人员这一篇就够了 从0-0.5的知识掌握~
Alascanfu的博客
01-29 1736
本篇内容：Axios前后端异步请求库 后端人员这一篇就够了~ 文章专栏：前端知识（后端需掌握知识点） 最近更新：2022年1月29日 Axios前后端异步请求库 后端人员这一篇就够了~ 个人简介：一只二本院校在读的大三程序猿，本着注重基础，打卡算法，分享技术作为个人的经验总结性的博文博主，虽然可能有时会犯懒，但是还是会坚持下去的，如果你很喜欢博文的话，建议看下面一行~（疯狂暗示QwQ） 点赞 收藏 ⭐留言一键三连 关爱程序猿，从你我做起
鸿蒙5.0【OpenHarmony】网络组件axios使用
2401_82772199的博客
08-27 869
上古浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要刷新页面的部分数据，并不希望刷新整个页面。于是一种新的技术，异步网络请求Ajax(Asynchronous JavaScript and XML)随之产生，它能与后台服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。
Vue3通过axios发起get、post请求以及对应的springboot后端接收方式
sebeefe的博客
07-31 7675
这周在做一个小型的前后端分离的会议系统，前端使用的是Vue3，后端使用的是Springboot。原本以为前后端交互很简单，直接发送数据就可以了，没想到遇到了很多问题，具体说来就是1、get和post请求应该如何向后端传递参数；2、前端请求体中参数的存储有哪几种格式，对于不同的存储方式后端应该如何去接收；3、http报文头的到底有什么作用；4、字符集的编码应该如何指定；接下来就让我们逐个来解决这些问题吧！注意如果发送get请求，直接传入普通的js对象即可，axios会自动处理使得后端可以通过。...
精品--个人简历模板vue版本，本人为Java后端开发工程师、全栈工程师，欢迎HR来撩，也欢迎小伙伴start本项目.zip
02-06
这个压缩包文件“精品--个人简历模板vue版本，本人为Java后端开发工程师、全栈工程师，欢迎HR来撩，也欢迎小伙伴start本项目.zip”显然包含了一个Vue.js实现的个人简历模板，由一位自称是Java后端开发工程师和全栈...
使用 Redux 和 Axios 获取数据
分享身边生活经验blog
10-15 1143
Redux 是一个状态容器和很好的工具，它解决了 UI 框架的主要问题之一：状态管理。使用 Redux，应用程序状态可以通过称为actions.Redux 状态管理的可预测质量是，如果actions重放，我们每次都会到达正确的数据状态。有许多库可以扩展 Redux 在我们应用程序的状态管理方面的功能。但是我们如何判断哪些适合我们的项目呢？事实是，这些解决方案中的每一个都是根据不同的方法、用例和心智模型构建的，因此它们都有其优点和缺点。
Spark SQL大数据分析快速上手-伪分布模式安装
brucexia的专栏
11-12 607
前置环境安装参看此博文伪分布模式也是在一台主机上运行，我们直接使用2.2节配置好的CentOS7-201虚拟机。伪分布模式需要启动Spark的两个进程，分别是Master和Worker。启动后，可以通过8080端口查看Spark的运行状态。伪分布模式安装需要修改一个配置文件SPARK_HOME/conf/workers，添加一个worker节点，然后通过SPARK_HOME/sbin目录下的start-all.sh启动Spark集群。
RDD 算子全面解析：从基础到进阶与面试要点
天冬忘忧的博客
11-09 1089
在大数据处理领域，Spark 中的 RDD（弹性分布式数据集）是核心概念之一。RDD 算子则是对 RDD 进行操作的关键工具，它们决定了数据的处理方式和流程。深入理解 RDD 算子对于高效地使用 Spark 处理大规模数据至关重要。本文将详细介绍 RDD 的常用基础算子，包括算子的分类、功能、代码示例、常见问题以及面试相关要点。
php中ajax怎么使用【小白专用24.11.12】
zgscwxd的博客
11-12 609
php中ajax怎么使用方法
️️一篇快速上手 AJAX 异步前后端交互
最新发布
qq_53569667的博客
11-12 478
AJAX 异步前后端交互快速学习手册，使用原生、fetch、jQuery、Axios 发送 AJAX 请求。
MongoDB分片集群搭建教程：副本集创建与数据分片
11-12
内容概要：本文提供了详细的MongoDB分片集群的搭建指导，涵盖了从环境准备、配置文件编写、副本集的建立、主节点的选择、配置服务器和数据分片服务器的配置到最后的路由节点的搭建与操作整个流程，以及对数据库的哈希与范围两种分片策略的应用介绍和具体命令执行。 适合人群：熟悉NoSQL数据库概念并对MongoDB有一定了解的技术人员，尤其是在大型数据管理和分布式数据库架构设计中有需求的开发者。 使用场景及目标：帮助技术人员掌握构建高效能、高可用性的MongoDB分片集群的方法，适用于处理大规模、实时性强的数据存储与读取场景。 其他说明：文中通过实例演示了每个步骤的具体操作方法，便于跟随文档实操，同时也介绍了可能遇到的问题及其解决方案，如在没有正确配置的情况下试图写入数据时出现错误等情况的处理。
CPPC++_嵌入式硬件的物联网解决方案blinker库与Arduino ESP8266 ESP32一起工作.zip
11-12
CPPC++_嵌入式硬件的物联网解决方案blinker库与Arduino ESP8266 ESP32一起工作
CPPC++_逆向调用QQ Mojo IPC与WeChat XPlugin.zip
11-12
CPPC++_逆向调用QQ Mojo IPC与WeChat XPlugin
CPPC++_现代活动指标.zip
11-12
CPPC++_现代活动指标
vue3 vite axios
06-06
Vue3是Vue.js的最新版本，它支持使用“Composition API”编写组件和逻辑。这使得编写Vue.js应用程序更加简单和可维护。Vite是一个快速的构建工具，专门针对现代Web应用程序，其速度提高了开发工作的效率。Axios是一个用于发送HTTP请求的JavaScript库，它可以轻松地实现与后端服务器的通信。这些技术通过结合使用可以极大地优化开发过程和用户体验。 Vue3和Vite共同提供开发者更好的工具和环境，使Vue.js应用程序的构建和运行变得更加快速、安全和可靠。Vue3的Composition API使得组件代码更加简洁、易读和易于维护。Vite的快速构建功能可以显着提高开发效率，使得开发者可以更快地呈现并调试应用程序。Axios提供了一个简单而灵活的接口来实现前端和后端服务器之间的数据交互，使得前端工程师和后端工程师可以更加有效地协作。 结合使用这些技术可以非常方便地实现前端项目开发和构建，使得构建出的应用程序更加高效和优化。同时，开发者可以更加专注于业务逻辑和用户体验，而不需要过多地关注技术实现细节。Vue3、Vite和Axios的整合使用为前端开发提供了更好的选择，以使应用程序在现代浏览器中更加出色和高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ww0110.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值