【JavaWeb】Vue上篇

傷城~ 2024-04-26 03:00 2阅读 0赞

> 🔥 本文由 [程序喵正在路上][Link 1] 原创，CSDN首发！  
> 💖 系列专栏：[JavaWeb开发][JavaWeb]  
> 🌠 首发时间：2024年2月2日  
> 🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

#### 目录 ####

*  Vue
 *   *  Vue介绍
     *  Vue快速入门
     *  Vue常用指令
     *  Vue生命周期
 *  Ajax
 *   *  原生Ajax
     *  Axios
 *  前后端分离开发
 *  前端工程化
 *   *  环境准备
     *  Vue项目简介
     *  Vue项目开发流程

## Vue ##

### Vue介绍 ###

**什么是Vue？**

*  Vue 是一套前端框架，免除原生 JavaScript 中的 DOM 操作，简化书写
 *  框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效
 *  基于 MVVM (Model-View-ViewModel) 思想，实现数据的双向绑定，将编程的关注点放在数据上
 *  官网： [https://v2.cn.vuejs.org/][https_v2.cn.vuejs.org]

![在这里插入图片描述][4037c4baec674cda8cebad43520c235d.png]

### Vue快速入门 ###

*  下载 vue.js 文件，[点击此处进入，再点击开发版本下载][Link 2]
    
    ![在这里插入图片描述][52f49879e0b548a0a1a9bce2bdf798d6.png]
 *  新建HTML页面，引入 vue.js 文件  
    在 Vscode 当前文件夹下，再创建一个名为 JS 的文件夹，将刚刚下载的 vue.js 文件放入文件夹中，后面我们将使用命令 `<script src="js/vue.js"></script>` 引入
 *  在JS代码区域，创建Vue核心对象，定义数据模型
    
        <script>
            new Vue({
                
                el: "#app",
                data: {
                
                    message: "Hello Vue!"
                }
            })
        </script>
 *  编写视图
    
        <div id="app">
            <input type="text" v-model="message">
            {
             { message }}
        </div>

**插值表达式**

*  形式：`{ { 表达式 }}`
 *  表达式的内容可以是：
    
     *  变量
     *  三元运算符
     *  函数调用
     *  算术运算

**入门代码演示**

**15. Vue-快速入门.html**

效果图：

![在这里插入图片描述][015d1314524245b0887e0b1f798af0f0.png]

由于 Vue 实现了数据的双向绑定，所以我们修改了文本框中 message 的内容，另一个 message 的内容也会改变：

![在这里插入图片描述][67750b80ad894289b604e22bf2af2345.png]

### Vue常用指令 ###

*  指令：HTML标签上带有v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
 *  常用指令如下  
    ![在这里插入图片描述][23796a5e8652499a8fdd5651bd0e61df.png]

**v-bind**

*  完整写法：`<a v-bind:href="url">百度</a>`
 *  简化写法：`<a :href="url">百度</a>`

**v-model**

*  写法：`<input type="text" v-model="url">`

注意：通过 `v-bind` 或者 `v-model` 绑定的变量，必须在数据模型中声明

**v-bind 和 v-model 运用示例**

**16. Vue-指令-v-bind和v-model.html**

执行结果：

![在这里插入图片描述][156fd7c1c65447118c585e1f379faafb.png]

因为文本框实现了双向数据绑定，所以当我们修改文本框中的内容时，其他标签绑定的内容也会改变：

![在这里插入图片描述][c4f165ed4faa4379b3ed23cf9f30a7d4.png]

**v-on**

*  完整写法：`<input type="button" value="按钮" v-on:click="handle()">`
 *  简化写法：`<input type="button" value="按钮" @click="handle()">`

**v-on 运用示例**

**17. Vue-指令-v-on.html**

执行结果如下：

![在这里插入图片描述][c83e102b458a48df84516366c2dbbccb.png]

![在这里插入图片描述][539f2aabdd4c43bc83c2af79b002fa10.png]

**v-if 和 v-show 运用示例**

**18. Vue-指令-v-if和v-show.html**

执行结果如下：

![在这里插入图片描述][6c97acc6c43b48a3a169d83cbef6382b.png]

将 age 改为 50 后：

![在这里插入图片描述][b3271716bf464bb39a4202720cd25b0f.png]

**v-for**

*  写法一，不需要用到索引：`<div v-for="addr in addrs">{ {addr}}</div>`
 *  写法二，有索引：`<div v-for="(addr,index) in addrs">{ {index + 1}} : { {addr}}</div>`
 *  其中，addr 和 index 可以改变名称

**v-if 运用示例**

**19. Vue-指令-v-for.html**

执行结果如下：

![在这里插入图片描述][b5ec7a652e3343988a8a45333683fa59.png]

**Vue案例**

通过 Vue 完成表格数据的渲染展示，如下图所示

![在这里插入图片描述][c457de0a46d749fd85a1659d777a344c.png]

**20. Vue-指令-案例.html**

<!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>Vue-指令-案例</title>
        <script src="js/vue.js"></script>
    </head>
    
    <body>
    
        <div id="app">
    
            <table border="1" cellspacing="0" width="60%">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>成绩</th>
                    <th>等级</th>
                </tr>
    
                <tr align="center" v-for="(user,index) in users">
                    <td>{
       {index + 1}}</td>
                    <td>{
       {user.name}}</td>
                    <td>{
       {user.age}}</td>
                    <td>
                        <span v-if="user.gender == 1">男</span>
                        <span v-if="user.gender == 2">女</span>
                    </td>
                    <td>{
       {user.score}}</td>
                    <td>
                        <span v-if="user.score >= 85">优秀</span>
                        <span v-else-if="user.score >= 60">及格</span>
                        <span style="color: red;" v-else>不及格</span>
                    </td>
                </tr>
            </table>
    
        </div>
    
    </body>
    
    <script>
        new Vue({
          
            el: "#app",
            data: {
          
                users: [{
          
                    name: "Tom",
                    age: 20,
                    gender: 1,
                    score: 78
                }, {
          
                    name: "Rose",
                    age: 18,
                    gender: 2,
                    score: 86
                }, {
          
                    name: "Jerry",
                    age: 26,
                    gender: 1,
                    score: 90
                }, {
          
                    name: "Tony",
                    age: 30,
                    gender: 1,
                    score: 52
                }]
            },
            methods: {
          
    
            },
        })
    </script>
    
    </html>

执行结果如下：

![在这里插入图片描述][a67521f964cd4e3b9435f25188a52d63.png]

### Vue生命周期 ###

*  生命周期：指一个对象从创建到销毁的整个过程
 *  生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)
 *  每个阶段在 Vue 中都有自己的方法
    
    ![在这里插入图片描述][1e29489167c942128d741cab2a902ad5.png]

![在这里插入图片描述][b77305cdca494485afee4a3cd816c4eb.png]

对于 Java 开发人员来说，我们主要学习 mounted 这个阶段，后面我们会通过这个方法发送请求到服务端，加载数据

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功

注意：mounted() 会自动调用，不需要我们手动调用

**21. Vue-生命周期.html**

执行结果如下：

![在这里插入图片描述][5c088e377e13421ba9a964a296d27b27.png]

## Ajax ##

### 原生Ajax ###

**什么是Ajax**

*  概念：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML
 *  作用：
    
     *  数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
     *  异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等

**同步与异步**

![在这里插入图片描述][1212a54c46ba46c2b574e8677b62942d.png]

**原生Ajax（了解）**

步骤：

1.  准备数据地址
2.  创建 XMLHttpRequest 对象：用于和服务器交换数据
3.  向服务器发送请求
4.  获取服务器响应数据

示例代码：

<body>
        <input type="button" value="获取数据" onclick="getData()">
        <div id="div1"></div></body>
    
    <script>
        function getData(){
          
            //1. 创建XMLHttpRequest 
            var xmlHttpRequest  = new XMLHttpRequest();
            //2. 发送异步请求
            xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
            xmlHttpRequest.send();//发送请求
            //3. 获取服务响应数据
            xmlHttpRequest.onreadystatechange = function(){
          
                if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
          
                    document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
                }
            }
        }
    </script>

### Axios ###

**什么是Axios**

*  介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发
 *  官网：[https://www.axios-http.cn/][https_www.axios-http.cn]，内有使用方法

**Axios入门**

1.  [点击此处免费下载 axios-0.18.0.js 文件，并将其放入项目的js文件夹下][axios-0.18.0.js _js]
2.  引入 Axios 的 js 文件
    
        <script src="js/axios-0.18.0.js"></script>
3.  使用 Axios 发送请求，并获取响应结果  
    ![在这里插入图片描述][0902642e538847818830310904716980.png]

**Axios请求方式别名**

*  axios.get(url \[, config\])
 *  axios.delete(url \[, config\])
 *  axios.post(url \[, data\[, config\]\])
 *  axios.put(url \[, data\[, config\]\])
 *  发送GET请求
    
        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
              
            console.log(result.data);
        });
 *  发送POST请求
    
        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
              
            console.log(result.data);
        });

注意：上述网址皆为演示所用，具体应用时应填入要请求数据的地址

运用示例：

**Axios应用案例**

基于Vue及Axios完成数据的动态加载展示

*  数据准备的url： [https://jsonplaceholder.typicode.com/users][https_jsonplaceholder.typicode.com_users]
    
    ![在这里插入图片描述][7b36af1787db4e778c33e670bd372abd.png]
 *  在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面，大概如下，你也可以将页面的所有信息都展示出来
    
    ![在这里插入图片描述][0bc2e24455684ec3aae13d24314a9cf4.png]
 *  代码
    
        <!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>
            <script src="js/axios-0.18.0.js"></script>
            <script src="js/vue.js"></script>
        </head>
        
        <body>
            <div id="app">
                <table border="1" cellspacing="0" width="60%">
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>用户名</th>
                        <th>电子邮件</th>
                        <th>地址</th>
                    </tr>
        
                    <tr align="center" v-for="user in users">
                        <td>{
             {user.id}}</td>
                        <td>{
             {user.name}}</td>
                        <td>{
             {user.username}}</td>
                        <td>{
             {user.email}}</td>
                        <td>{
             {user.address.city}}</td>
                    </tr>
                </table>
            </div>
        </body>
        <script>
            new Vue({
                
                el: "#app",
                data: {
                
                    users: []
                },
                mounted() {
                
                    //发送异步请求,加载数据
                    axios.get("https://jsonplaceholder.typicode.com/users").then(result => {
                
                        this.users = result.data;
                    })
                }
            });
        </script>
        
        </html>
 *  执行结果
    
    ![在这里插入图片描述][147b2d1ee0134a069373bbd77dadd4ce.png]

## 前后端分离开发 ##

当前最为主流的开发模式：前后端分离

![在这里插入图片描述][a82adea456404b9a9ebd9bfc35ccc410.png]

开发流程：

![在这里插入图片描述][6a36e32ef35c407eb9bcb1ff48e8054c.png]

## 前端工程化 ##

![在这里插入图片描述][d04fef4b9b514aa29513ccc5d52a5dc5.png]

前端工程化：是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

### 环境准备 ###

**Vue-cli**

*  介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。
 *  Vue-cli提供了如下功能：
    
     *  统一的目录结构
     *  本地调试
     *  热部署
     *  单元测试
     *  集成打包上线
 *  依赖环境：NodeJS

**安装Node.js**

访问 [http://www.nodejs.com.cn/][http_www.nodejs.com.cn]，下载最新稳定版本的 node.js

![在这里插入图片描述][685cd5cff9e249978de07199d5208c25.png]

下载完是这样一个文件：

![在这里插入图片描述][4e6b407cf88f4750aec7b6545d603d42.png]

双击进行安装，安装过程如果需要修改安装路径可以自行修改，安装路径建议不要有中文字符，其它没有什么需要注意的，一直点击 “Next” 即可

![在这里插入图片描述][fc79f33f960943d8987ebcbe0699b367.png]

**验证NodeJS环境变量**

win \+ R 打开控制台，输入指令 `node -v` 查看，如果显示刚刚安装的版本，说明安装成功了

![在这里插入图片描述][bdc51f6171334efdbb123a50d9131fc0.png]

**配置npm的全局安装路径**

在电脑搜索 “命令提示符”，以管理员身份运行

![在这里插入图片描述][fab61b8be5eb49ff9537c3bc42042a93.png]

输入下面的指令，注意 D:\\soft\\NodeJS 这个目录要修改为你刚刚安装 node.js 的目录

npm config set prefix "D:\soft\NodeJS"

配置完，再输入下面的指令查看是否配置成功：

npm config get prefix

![在这里插入图片描述][529314141a4e4807abbef3a88cb38250.png]

**切换npm的淘宝镜像**

切换国内的镜像，后面我们要下载东西的时候更快

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npmmirror.com/

然后再输入下面的指令，查看是否切换成功：

npm config get registry

![在这里插入图片描述][516a7be8f788426fa25968fba51da9bd.png]

**安装Vue-cli**

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

然后耐心等待系统联网下载：

![在这里插入图片描述][12aa29d37f2e4be286b7acc45e4d4baf.png]

安装成功（我这里是第二次安装）：

![在这里插入图片描述][6a67421509904fc7b263ba063166d333.png]

然后输入下面的指令查看是否安装成功，在结果中有 vue-cli 即为成功：

npm list -global

![在这里插入图片描述][14bb2c942af84099ae58888cef68213f.png]

### Vue项目简介 ###

**Vue项目创建方式**

1.  命令行方式：`vue create vue-project01`
2.  图形化界面：`vue ui`
    
    ![在这里插入图片描述][976e9d6e7f14476e8464b5fdea0ee5ea.png]

这里，我们来讲解一下图形化界面如何创建 Vue 项目

首先，新建一个文件夹 vue，进入 vue 文件夹，在目录的位置输入 cmd，然后回车：

![在这里插入图片描述][b1f33b315aba443a87671d2f4cde4240.png]

来到这个界面，请注意，在下列过程中，请不要关闭控制台窗口：

![在这里插入图片描述][867e14dc374a48db81188dc92ed42c7c.png]

点击创建：

![在这里插入图片描述][922b486643b24d08a39491fcdc0c1524.png]

下面按照图片上的操作进行：

![在这里插入图片描述][cc9f39750ad8445893283f977d15665a.png]

![在这里插入图片描述][3e7dbbf3d7064c7d8f3f32aef24abf71.png]

![在这里插入图片描述][890f34936e434f279df05ec4a6fe43a5.png]

![在这里插入图片描述][88717de47759424cb87949274d048076.png]

![在这里插入图片描述][cbeeb887ac4c419e917cbfa5fc24b6f2.png]

耐心等待：

![在这里插入图片描述][36805cf6159c4bc3af588629a45a852b.png]

点击完创建项目后，我们来到控制台界面，可以看到进度条，稍等一会项目即可创建成功，我们可以看到在 vue 文件夹下多了一个 vue-project 文件夹，而刚刚的界面也变成下面这样：

![在这里插入图片描述][3c29d258239b4b8c873caa727ebb225f.png]

![在这里插入图片描述][ea5207c7faa74ac5926ed1d2b252c1ea.png]

**Vue项目-目录结构**

我们来介绍一下刚刚用脚手架创建出来的这个文件夹

基于Vue脚手架创建出来的工程，有标准的目录结构，如下：

![在这里插入图片描述][be48e5200b39426e9266d7d41aaa3b88.png]

![在这里插入图片描述][c513f08e81f844a59912d3033b4f526f.png]

**Vue项目-启动方式**

启动工程的方式有以下两种：  
![在这里插入图片描述][b62815bf10ef4d4eb5be56d1ebf9a0b6.png]

下面我们详细说一下方式一如何启动

首先，在 Vscode 中打开 Vue 脚手架创建的工程，然后按照下图进行操作：

![在这里插入图片描述][4d7000f5a1da4b969eea355aa6d48638.png]

操作完成后，我们会发现在左下角多了一个 NPM 脚本，点击 serve 处的启动按钮即可启动工程：

![在这里插入图片描述][1a2d3c9763674ad4bffbf6c207d9fcc9.png]

启动完成，按住 Ctrl 键并点击图中的网址即可来到界面：

![在这里插入图片描述][a1e2bd3a0fd04762889df4df32980e55.png]

其实，这个界面就是 src 文件夹下的 App.vue 对应的界面

![在这里插入图片描述][24fa1a075bd946a98ffce61ca8c5f22d.png]

我们尝试一下修改 App.vue 中的内容：

![在这里插入图片描述][a7a575202f714381a0e54b42a5b2e5c1.png]

然后保存，回到浏览器页面，发现界面已经改变，但是我们并没有刷新浏览器

![在这里插入图片描述][963012cdd34646caa91e1033c62286e3.png]

其实，这个就是 vue-cli 的热部署功能

**Vue项目-自行配置端口**

刚刚的项目占用的默认端口是 8080，如果我们想修改端口，非常简单，只要在 vue.config.js 文件中添加几行代码即可：  
![在这里插入图片描述][f7229338501a487799991bc7cea17fb4.png]

const {
         defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
        
      transpileDependencies: true,
      devServer: {
        
        port: 7000
      }
    })

注意上一行代码后面需要添加逗号，再次启动，可以发现已经修改成功：

![在这里插入图片描述][06ecca2b21fa4fe29c20c564298cd750.png]

### Vue项目开发流程 ###

![在这里插入图片描述][9a56bb65c7c7428198e05a7e9a8e3fbb.png]

上面这个页面是 Vue 项目的默认首页 index.html，其位置是在 public 文件夹下，index.html 是默认引入 src 文件夹下的 main.js 文件的

在 main.js 文件中，其导入了很多模块

![在这里插入图片描述][9f9ea99a25794d93af83488c6a57abbd.png]

new Vue({
        
      router,
      render: h => h(App)
    }).$mount('#app')

new Vue({
        
      el: "#app",
      router: router,
      render: h => h(App)
    })

上面这两种新建对象的方式的作用是一样的，前者里面的 router 的 ES6 的写法，当冒号前后内容一致时，冒号及其后面的内容可以省略

**Vue的组件文件**

以 .vue 结尾的文件都是 Vue 的组件文件，每个组件由三个部分组成：`<template>` 、`<script>`、`<style>`

![在这里插入图片描述][f8a55d285304430c8010153e96544cb6.png]

在 Vscode 中安装一个插件 vuter：

![在这里插入图片描述][8d735bf8a14847cc88485a1ef0966f4f.png]

接下来，我们自己来写 App.vue 里面的东西，首先，将 App.vue 原有的大部分东西删去，只留下框架：

![在这里插入图片描述][d2b4683542f04b6887a5e97a3af494f9.png]

写入 script 标签，记住选择 javascript.vue 选项：

![在这里插入图片描述][a03afe0646a74fa2b3f37279082365d7.png]

选择后是这样的：

![在这里插入图片描述][3984c7e4c47f42bc9aef038ab427de9a.png]

这部分代码是保证我们后面可以将 App.vue 导入其他文件

之前我们是直接声明了一个对象，然后在里面有一个 data 来存放数据，但是我们现在是要指定一个函数，然后在函数内声明一个对象并返回：

简写形式：

其实这一部分代码是可以自动生成的，我们只需要安装一个插件 `Vue 2 Snippets`，然后输入 data，选择有一个方框标记的选项即可：

![在这里插入图片描述][14f00a77935141c59422800eae3266a3.png]

同样地，我们还可以在后面写一些方法：

当我们定义好数据后，我们就可以在 `template` 部分，也就是视图部分，通过插值表达式来展示数据模型中的数据：

<template>
      <div>
        <h1>{
       { message }}</h1>
      </div>
    </template>

![在这里插入图片描述][8a4b5ef9fd234085807f16460beffc9b.png]

注意：在 Vue 工程中，我们主要操作的都是一些组件文件

[Link 1]: https://blog.csdn.net/weixin_62511863?spm=1011.2421.3001.5343
[JavaWeb]: https://blog.csdn.net/weixin_62511863/category_12511257.html?spm=1001.2014.3001.5482
[https_v2.cn.vuejs.org]: https://v2.cn.vuejs.org/
[4037c4baec674cda8cebad43520c235d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9588e645488145b2a30641ffae3f29df.png
[Link 2]: https://v2.cn.vuejs.org/v2/guide/installation.html
[52f49879e0b548a0a1a9bce2bdf798d6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b225e3e3e8b54bf1a29a5fea98cbf0a8.png
[015d1314524245b0887e0b1f798af0f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9e82517be0b64100827c9b4611447f1e.png
[67750b80ad894289b604e22bf2af2345.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/efd255a49526464db46d27f8b67bd7ee.png
[23796a5e8652499a8fdd5651bd0e61df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/eae6e82efc68474182f0943dd6744804.png
[156fd7c1c65447118c585e1f379faafb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/99bdd926244f403a92abbb342b70df28.png
[c4f165ed4faa4379b3ed23cf9f30a7d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e1f4ee7610e24a74be4fa253d8a7b725.png
[c83e102b458a48df84516366c2dbbccb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/160f9a44deef4884906b497b5518ba94.png
[539f2aabdd4c43bc83c2af79b002fa10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1b55f1fdd20f4d42b77ce8fe663f837f.png
[6c97acc6c43b48a3a169d83cbef6382b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/937ff545828846ff9ed4ddd42a187ff2.png
[b3271716bf464bb39a4202720cd25b0f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/983a1cc8859d4aceba6e85dfdcedd14d.png
[b5ec7a652e3343988a8a45333683fa59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f91bd8bccc144643b817cf19fadd4c66.png
[c457de0a46d749fd85a1659d777a344c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/af0a08670beb487ba358e73ff5089a1f.png
[a67521f964cd4e3b9435f25188a52d63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5f899ce2669b4002a4a1b528c6efa652.png
[1e29489167c942128d741cab2a902ad5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a09e1488445e4ae7bcbfe977c2f41fcf.png
[b77305cdca494485afee4a3cd816c4eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/075f94397aac406a81cede077063de70.png
[5c088e377e13421ba9a964a296d27b27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/2f1b649b89c944e397e4207cd8262426.png
[1212a54c46ba46c2b574e8677b62942d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/fc92059f2bcd4e899177b369cf4b64e6.png
[https_www.axios-http.cn]: https://www.axios-http.cn/
[axios-0.18.0.js _js]: https://pan.baidu.com/s/18bI9xQzLh_0yByty5u8rbQ?pwd=zrqf
[0902642e538847818830310904716980.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7c8c54f6ddfe44708d4db1a2a176518e.png
[https_jsonplaceholder.typicode.com_users]: https://jsonplaceholder.typicode.com/users
[7b36af1787db4e778c33e670bd372abd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5e8c98aa689846288776539af265a1e2.png
[0bc2e24455684ec3aae13d24314a9cf4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/daa31bc7626a4f93b4ad4573c30121d0.png
[147b2d1ee0134a069373bbd77dadd4ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8b6f51b40e8e42ff9e0f9d03b65f419a.png
[a82adea456404b9a9ebd9bfc35ccc410.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a67ac6cc95634ae995a7b97387d60ee1.png
[6a36e32ef35c407eb9bcb1ff48e8054c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/62e4e799b19b45f1a0d19492e5728f80.png
[d04fef4b9b514aa29513ccc5d52a5dc5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9470a182415c4c80a1fa8c5c98537730.png
[http_www.nodejs.com.cn]: http://www.nodejs.com.cn/
[685cd5cff9e249978de07199d5208c25.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/60d3250d11b547d592b9e310d38043ab.png
[4e6b407cf88f4750aec7b6545d603d42.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/257b46a1eef544c0b1096e65016075c1.png
[fc79f33f960943d8987ebcbe0699b367.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9937d225dd8f4213aa2f1ce042c09dd5.png
[bdc51f6171334efdbb123a50d9131fc0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f3679873f3be4069b8450f3f882dc9cc.png
[fab61b8be5eb49ff9537c3bc42042a93.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/42da7fd64a444b22a3564c1875e6d7c4.png
[529314141a4e4807abbef3a88cb38250.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/02b00ea043b74e579cafd47864889052.png
[516a7be8f788426fa25968fba51da9bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9c2cffb44370407588046449e951792d.png
[12aa29d37f2e4be286b7acc45e4d4baf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/11e9d24b15f84ce283204032d581795d.png
[6a67421509904fc7b263ba063166d333.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8713cc82c21240868efc276b641e06a7.png
[14bb2c942af84099ae58888cef68213f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b5fd70e83ce34ebc8112581d9a0c19ec.png
[976e9d6e7f14476e8464b5fdea0ee5ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d9a34fada67c44049956d7051156f87e.png
[b1f33b315aba443a87671d2f4cde4240.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e55b482cdb024cd3874b42443868a121.png
[867e14dc374a48db81188dc92ed42c7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/39e308ab3d13443a9c4b76982b769646.png
[922b486643b24d08a39491fcdc0c1524.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/248b5f4b1e2d41c5a9798d3ba696082d.png
[cc9f39750ad8445893283f977d15665a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/3f33db1f67354bb0b3aa172ee4185493.png
[3e7dbbf3d7064c7d8f3f32aef24abf71.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/0796686ed6dc43f2870e7928114c8086.png
[890f34936e434f279df05ec4a6fe43a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/928cd86b9218421c98361f3b946a2870.png
[88717de47759424cb87949274d048076.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9f0a15d655334d17a2e4a4d75df6e34e.png
[cbeeb887ac4c419e917cbfa5fc24b6f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/540e5bc92c104dea990321cb0cd4b561.png
[36805cf6159c4bc3af588629a45a852b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/6836dfdf69564e61bb93e64fe0d7748d.png
[3c29d258239b4b8c873caa727ebb225f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/eed012427a5249c8a2ab6a33606e13aa.png
[ea5207c7faa74ac5926ed1d2b252c1ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a3498b89706e42f6937d4d454cd2753e.png
[be48e5200b39426e9266d7d41aaa3b88.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1bcc9afa3d944facb7ffcf3d9798dda8.png
[c513f08e81f844a59912d3033b4f526f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d34fd337c0614c01b6941ace3f7db792.png
[b62815bf10ef4d4eb5be56d1ebf9a0b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b926d0d7413f481997a0f3608319529e.png
[4d7000f5a1da4b969eea355aa6d48638.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d88c1a7fa223482d9923cbed8cd2751f.png
[1a2d3c9763674ad4bffbf6c207d9fcc9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/69362e8584074d5ba5f91f55a8db5d69.png
[a1e2bd3a0fd04762889df4df32980e55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c1cfc4b1b8344ce8b0c78fa5ffc50bf0.png
[24fa1a075bd946a98ffce61ca8c5f22d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e55cd2a927a6445fa2e32ee2109b147a.png
[a7a575202f714381a0e54b42a5b2e5c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8fb730add12547c0a40e59b0fefaac25.png
[963012cdd34646caa91e1033c62286e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c2ff0ff3cf8444c2bf61711c60f35819.png
[f7229338501a487799991bc7cea17fb4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/88260d60346047fb85f1f67892003798.png
[06ecca2b21fa4fe29c20c564298cd750.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/50fe182fd2f443a2a0c210888be5b58e.png
[9a56bb65c7c7428198e05a7e9a8e3fbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/b23e402278114c638a9ddfe8376f51cf.png
[9f9ea99a25794d93af83488c6a57abbd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f947dd26899041b4afaea7478112ed62.png
[f8a55d285304430c8010153e96544cb6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/31824b222c0a403081bc3962fb533102.png
[8d735bf8a14847cc88485a1ef0966f4f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/01f7d014d9994ec8b4baf188edf10610.png
[d2b4683542f04b6887a5e97a3af494f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/fa94f9bb05a84ae4ad2a36f310bb0012.png
[a03afe0646a74fa2b3f37279082365d7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7fe20a7dd352429797e718fd714fe609.png
[3984c7e4c47f42bc9aef038ab427de9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/5876515310c74ce8a7698c48755c34c4.png
[14f00a77935141c59422800eae3266a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/294625027d954a4a871544d9c8959186.png
[8a4b5ef9fd234085807f16460beffc9b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f6297b600e224b2a87a7f5bf1b580c92.png