后端工程师快速使用axios

文章目录

    • 01.AJAX 概念和 axios 使用
      • 模板
      • 目标
      • 讲解
      • 代码解析
      • 案例
        • 前端
        • 后端
        • 结果截图
    • 02.URL 查询参数
      • 模板
      • 目标
      • 讲解
      • 案例
        • 前端
        • 后端
        • 结果截图
    • 03.常用请求方法和数据提交
      • 模板
      • 目标
      • 讲解
      • 案例
        • 前端
        • 后端
        • 结果截图
    • 04.axios 错误处理
      • 模板
      • 目标
      • 讲解
      • 案例
        • 前端
        • 后端
        • 结果截图

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 如何携带查询参数?

    • 使用 params 选项即可

      查询城市列表的 url地址：http://hmajax.itheima.net/api/city

      参数名：pname （值要携带省份名字）

  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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/467604.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之一 哈哈镜效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之一 哈哈镜效果

Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之一 哈哈镜效果 目录 Python 基于 OpenCV 视觉图像处理实战 之 OpenCV 简单实战案例 之一 哈哈镜效果 一、简单介绍 二、简单哈哈镜实现的原理 1、图像拉伸放大 2、图像缩小 三、哈哈镜 拉伸放大 代码实现 …
阅读更多...
uniapp可视范围高度 - 用户屏幕可操作的屏幕高度 - 适用于APP、H5@公众号、纯H5@Chrome

uniapp可视范围高度 - 用户屏幕可操作的屏幕高度 - 适用于APP、H5@公众号、纯H5@Chrome

可视范围高度 let heightPx uni.getWindowInfo().windowHeight uni.getWindowInfo().windowTop 官方手册 uni.getWindowInfo() | uni-app官网uni-app,uniCloud,serverless,uni.getWindowInfo()https://uniapp.dcloud.net.cn/api/system/getWindowInfo.html 实测数据 uni.ge…
阅读更多...
【目标检测】2. RCNN

【目标检测】2. RCNN

接上篇 【目标检测】1. 目标检测概述_目标检测包括预测目标的位置吗?-CSDN博客 一、前言 CVPR201 4经典paper:《 Rich feature hierarchies for accurate object detection and semantic segmentation》&#xff0c;https://arxiv.org/abs/1311.2524, 这篇论文的算法思想被称…
阅读更多...
信息检索（十三）：On Complementarity Objectives for Hybrid Retrieval

信息检索（十三）：On Complementarity Objectives for Hybrid Retrieval

On Complementarity Objectives for Hybrid Retrieval 摘要1. 引言2. 相关工作2.1 稀疏和密集检索2.2 互补性 3. 提出方法3.1 Ratio of Complementarity (RoC)3.2 词汇表示&#xff08;S&#xff09;3.3 语义表示&#xff08;D&#xff09;3.4 互补目标 4. 实验4.1 实验设置4.2…
阅读更多...
服务器病毒木马通用排查处理应急响应流程

服务器病毒木马通用排查处理应急响应流程

目录 一、勒索病毒发作的特征 二、勒索病毒的应急响应 三、勒索病毒预防与事后加固 一、勒索病毒发作的特征 如果发现大量统一后缀的文件&#xff1b;发现勒索信在Linux/home、/usr等目录&#xff0c;在Windows 桌面或者是被加密文件的文件夹下。如果存在以上特…
阅读更多...
Flutter-仿腾讯视频Banner效果

Flutter-仿腾讯视频Banner效果

闲聊 人一旦运气差&#xff0c;喝水都能噎着。我又被发”毕业证“了&#xff0c;&#x1f62d;&#xff0c;对&#xff01;&#xff01;&#xff01;没有听错&#xff0c;发毕业证的当天上午刚讨论完需求&#xff0c;中午吃完饭&#xff0c;正常去公司前面的小公园溜达&#x…
阅读更多...
供应链投毒预警 | 开源供应链投毒202402月报发布啦

供应链投毒预警 | 开源供应链投毒202402月报发布啦

概述 悬镜供应链安全情报中心通过持续监测全网主流开源软件仓库&#xff0c;结合程序动静态分析方式对潜在风险的开源组件包进行动态跟踪和捕获&#xff0c;发现大量的开源组件恶意包投毒攻击事件。在2024年2月份&#xff0c;悬镜供应链安全情报中心在NPM官方仓库&#xff08;…
阅读更多...
openEuler-22.03-LTS-SP2更改阿里云yum安装源

openEuler-22.03-LTS-SP2更改阿里云yum安装源

备份文件/etc/yum.repos.d/openEuler.repo&#xff0c;并将文件替换为以下内容&#xff1a; [OS] nameOS baseurlhttps://mirrors.aliyun.com/openeuler/openEuler-22.03-LTS-SP2/OS/$basearch/ enabled1 gpgcheck1 gpgkeyhttps://mirrors.aliyun.com/openeuler/openEuler-22.…
阅读更多...
Tomcat（二）

Tomcat（二）

一、搭建个人博客 二、状态页 默认的管理页面被禁用&#xff0c;启用方法如下 修改conf/conf/tomcat-users.xml 2.1 开启状态页&#xff08;本地访问&#xff09; 2.2 开启允许远程登录状态页 2.3 host manager
阅读更多...
前端vue实现甘特图

前端vue实现甘特图

1 什么是甘特图 甘特图(Gantt chart)又称为横道图、条状图(Bar chart)。以提出者亨利L甘特先生的名字命名&#xff0c;是项目管理、生产排程、节点管理中非常常见的一个功能。 甘特图内在思想简单&#xff0c;即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的…
阅读更多...
24 OpenCV直方图反向投影

24 OpenCV直方图反向投影

文章目录 参考反向投影作用calceackProject 反向投影mixchannels 通道图像分割示例 参考 直方图反向投影 反向投影 反向投影是反映直方图模型在目标图像中的分布情况简单点说就是用直方图模型去目标图像中寻找是否有相似的对象。通常用HSV色彩空间的HS两个通道直方图模型 作用…
阅读更多...
【机器学习】BP神经网络Matlab实现

【机器学习】BP神经网络Matlab实现

目录 1.背景2.原理3.代码实现 1.背景 BP神经网络&#xff08;Backpropagation Neural Network&#xff09;是一种机器学习算法&#xff0c;其通过反向传播算法来训练网络&#xff0c;使其能够学习输入数据的模式并进行预测或分类任务。BP神经网络通常包括输入层、隐藏层和输出…
阅读更多...
Apache Doris 如何基于自增列满足高效字典编码等典型场景需求

Apache Doris 如何基于自增列满足高效字典编码等典型场景需求

自增列&#xff08;auto_increment&#xff09;是数据库中常见的一项功能&#xff0c;它提供一种方便高效的方式为行分配唯一标识符&#xff0c;极大简化数据管理的复杂性。当新行插入到表中时&#xff0c;数据库系统会自动选取自增序列中的下一个可用值&#xff0c;并将其分配…
阅读更多...
Nginx 的安装、启动和关闭

Nginx 的安装、启动和关闭

文章目录 一、背景说明二、Nginx 的安装2.1、依赖的安装2.2、Nginx 安装2.3、验证安装 三、启动 Nginx3.1、普通启动3.2、如何判断nginx已启动3.3、通过配置启动3.4、设置开机启动 四、关闭 Nginx4.1、优雅地关闭4.2、快速关闭4.3、只关闭主进程4.4、使用nginx关闭服务 五、重启…
阅读更多...
SpringBoot+Redis实现分布式WebSocket

SpringBoot+Redis实现分布式WebSocket

什么是分布式WebSocket&#xff1f; 是指在分布式系统架构中实现WebSocket的通信机制&#xff0c;它允许在不同的服务器节点之间共享和同步WebSocket会话状态&#xff0c;从而实现跨多个服务器的实时消息传递。 在分布式环境中实现WebSocket的挑战主要包括以下几点&#xff1a…
阅读更多...
基于支持向量机（svm）的人脸识别

基于支持向量机（svm）的人脸识别

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 数据集加载与可视化 from sklearn.datasets import fetch_lfw_people faces fetch_lfw_people(min_faces_per_person60) # Check out sample…
阅读更多...
Memcached-分布式内存对象缓存系统

Memcached-分布式内存对象缓存系统

目录 一、NoSQL 介绍 二、Memcached 1、Memcached 介绍 1.1 Memcached 概念 1.2 Memcached 特性 1.3 Memcached 和 Redis 区别 1.4 Memcached 工作机制 1.4.1 内存分配机制 1.4.2 懒惰期 Lazy Expiration 1.4.3 LRU&#xff08;最近最少使用算法&#xff09; 1.4.4…
阅读更多...
【数据结构】树，二叉树，满二叉树，完全二叉树的定义和二叉树的基本操作

【数据结构】树，二叉树，满二叉树，完全二叉树的定义和二叉树的基本操作

&#x1f38a;专栏【数据结构】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【勋章】 大一同学小吉&#xff0c;欢迎并且感谢大家指出我的问题&#x1f970; 目录 ⭐树 &#x1f3f3;️‍&#x1f308;定义 &#x1f3f3;️‍…
阅读更多...
【Maven篇】解锁 Maven 的智慧：依赖冲突纷争下的版本调停者

【Maven篇】解锁 Maven 的智慧：依赖冲突纷争下的版本调停者

缘起 软件开发世界是一个充满无限可能的领域&#xff0c;但同时也伴随着诸多挑战。其中之一&#xff0c;就是依赖冲突的问题。在这篇文章中&#xff0c;我们将揭开 Maven 这位“版本调停者”的神秘面纱&#xff0c;深入探讨如何在版本纠纷的盛宴中解决依赖问题。 Maven&#…
阅读更多...
如何选择合适的数据可视化工具？

如何选择合适的数据可视化工具？

如果是入门级的数据可视化工具&#xff0c;使用Excel插件就足够了&#xff01; Excel插件&#xff0c;tusimpleBI 是一款 Excel 图表插件&#xff0c;提供超过120项图表功能&#xff0c;帮助用户制作各种 Excel 所没有的高级图表&#xff0c;轻轻松松一键出图。 它能够制作10…
阅读更多...
最新文章

Copyright @ 2022~2023