JavaWeb开发-03-Ajax-Vue-Element

已于 2023-09-19 20:28:03 修改
阅读量344 收藏 1
点赞数 1
分类专栏： JavaWeb开发 文章标签： vue.js 前端 javascript
于 2023-05-27 19:55:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangjh11234/article/details/130854934
版权

目录

一.Ajax

1.Axios

2.案例

二.前后端分离开发

1.介绍

2.YAPI

三.前端工程化

1.环境准备

2.Vue项目简介

3.Vue项目开发流程

四.Vue组件库Element

1. 快速入门

2.常见组件

3.案例

五.Vue路由

六.打包部署

一.Ajax

 

 

 

<!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</title>
</head>
<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>
</html>

1.Axios

 

<!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="Axios/axios-0.18.0.js">
    </script>
</head>
<body>
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">
    
</body>
<script>
    function get() {
        //通过Axios发送异步请求-get
        axios({
            method: "get",
            url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        }).then(result => {
            console.log(result.data);
        })
        
    }

    function post() {
        //通过Axios发送异步请求-pst
        axios({
            method: "post",
            url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
            data: "id=1"
        }).then(result => {
            console.log(result.data);
        })

    }
    
</script>
</html>

function get() {
    //通过axios发送异步请求 - get
    // axios({
    //     method:"get",
    //     url:"http://localhost:10010/emp/list"
    // }).then(result => {
    //     console.log(result.data);
    // })

    //简写
    axios.get("http://localhost:10010/emp/list").then(result => {
        console.log(result.data);
    })

}

function post() {
    //通过axios发送异步请求 - post
    // axios({
    //     method:"post",
    //     url:"https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",
    //     data:"id = 1"
    // }).then(result => {
    //     console.log(result.data);
    // })

    //简写
    axios.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById","id=1").then(result => {
        console.log(result.data);
    })

    
}

 

 

<script>
    function get() {
        //通过Axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })



        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
        
    }

    function post() {
        //通过Axios发送异步请求-pst
        // axios({
        //     method: "post",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })

        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById", "id=1").then(result => {
            console.log(result.data);
        })

    }
    
</script>

2.案例

<!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="Axios/axios-0.18.0.js"></script>
    <script src="Vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%" align="center">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>
            <tr align="center" v-for="(dat, index) in emp">
                <td>{{dat.id}}</td>
                <td>{{dat.name}}</td>
                <td>
                    <img v-bind:src="dat.image" width="50px">   <!-- v-bind : 为html标签绑定属性值 如: src / href /CSS样式  -->
                </td>
                <td>
                    <span v-if="dat.gender == 1">男</span>
                    <span v-else="dat.gender == 2">女</span>
                </td>
                <td>{{dat.job}}</td>
                <td>{{dat.entrydate}}</td>
                <td>{{dat.updatetime}}</td>
            </tr>

        </table>
    </div>
    
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            emp: [] //定义一个空数组
        },
        method () {
            
        },
        mounted () {
            //发送异步请求,加载数据
            axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
               this.emp = result.data.data;
               //this.emp(这个emp)  result.data(固定格式)   .data(链接中的数组/集合名称);
            })
        }
    });
    
</script>
</html>

二.前后端分离开发

1.介绍

 

 

2.YAPI

 YAPI官网icon-default.png?t=N7T8http://yapi.smart-xwork.cn/

 

三.前端工程化

 

 

1.环境准备

 

2.Vue项目简介

 

 

 

devServer: {
    port: 7000
  }

3.Vue项目开发流程

 

 

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

<script>
export default{
  data: function (){
    return {
      message: "Hello Vue"
    }
  },
  methods: {

  }
}
</script>

<style>
  
</style>

四.Vue组件库Element

Element组件库icon-default.png?t=N7T8https://element.eleme.cn/#/zh-CN/component/table

1. 快速入门

 

 

 

2.常见组件

 

 

 

 

 

 

<template>
    <div>
        <!-- button按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>

        <br>

        <!-- Tab表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>

        <!-- 分页 (格式化快捷键:shift + alt + F)-->
        <el-pagination background layout=" sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total="1000"></el-pagination>

        <br><br>

        <!--Dialog 对话框组件 -->
        <el-button type="primary" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>

        <br><br>
        <!-- Dialog 对话框 -Form -->
        <el-button type="primary" @click="dialogFormVisible = true">form表单</el-button>

        <el-dialog title="form表单" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>


        </el-dialog>


    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
            },
            gridData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            dialogTableVisible: false,
            dialogFormVisible: false,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods: {
        onSubmit: function(){
            alert(JSON.stringify(this.form));   //将对象转换成字符串
        },
        handleSizeChange: function (val) {
            alert("每页记录数变化" + val)

        },
        handleCurrentChange: function (val) {
            alert("页码发生变化" + val)

        }
    }

}
</script>

<style></style>

 

3.案例

 

<!--  -->
<template>
    <div>
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tLias 智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <!-- Aside -->
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item index="1-1">部门管理</el-menu-item>
                            <el-menu-item index="1-2">员工管理</el-menu-item>
                        </el-submenu>

                    </el-menu>
                    <!-- Aside -->
                </el-aside>
                <el-container>

                    <el-main>
                        <!-- Main -->
                        <!-- 表单 -->
                        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                            <el-form-item label="姓名">
                                <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="性别">
                                <el-select v-model="searchForm.gender" placeholder="性别">
                                    <el-option label="男" value="1"></el-option>
                                    <el-option label="女" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入职日期">
                                <!-- 日期选择器 -->
                                <el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>
                        </el-form>


                        <!-- 表格 -->
                        <el-table :data="tableData" :cell-style="rowStyle" border>
                            <el-table-column prop="name" label="姓名" width="180" align="center">
                            </el-table-column>
                            <el-table-column  label="图像" width="180" align="center">
                                <template slot-scope="scope">
                                    <img :src="scope.row.image" width="70px">
                                </template>
                            </el-table-column>
                            <el-table-column label="性别" width="140" align="center">
                                <template slot-scope="scope">
                                    {{scope.row.gender == 1 ? '男' : '女'}}
                                </template>
                            </el-table-column>
                            <el-table-column prop="job" label="职位" width="140" align="center">
                            </el-table-column>
                            <el-table-column prop="entrydate" label="入职日期" width="180" align="center">
                            </el-table-column>
                            <el-table-column prop="updatetime" label="最后操作时间" width="230" align="center">
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <el-button type="primary" size="mini">编辑</el-button>
                                <el-button type="danger" size="mini">删除</el-button>
                            </el-table-column>
                        </el-table>
                        <br>
                        <!-- 分页条 -->
                        <!-- <hr style="border-color: #eee;"> -->
                        <el-pagination background layout="total, sizes,prev, pager, next, jumper"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="1000">
                        </el-pagination>

                        <!-- el-main -->
                    
                </el-main>
                </el-container>
            </el-container>
        </el-container>

    </div>
</template>


<!--  -->
<script>

import axios from 'axios';

export default {
    data() {
        return {
            tableData: [],
            searchForm: {
                name: '',
                gander: '',
                entrydate: []
            }
        }
    },

    methods: {
        handleSizeChange: function (val) {
            alert("每页记录数变化" + val)
        },
        handleCurrentChange: function (val) {
            alert("页码发生变化" + val)
        },
        onSubmit: function() {
            alert(JSON.stringify(this.searchForm))
        },
        rowStyle() { 
            return "text-align:center"
        }
    },
    mounted () {
        //发送异步请求
        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then((result) => { 
            this.tableData = result.data.data;
        });

    }
}
</script>


<!--  -->
<style>
.el-table{
    text-align: right;
}

</style>

五.Vue路由

<!--  -->
<template>
    <div>
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tLias 智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <!-- Aside -->
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item index="1-1">
                                <router-link to="/dept">部门管理</router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link to="/emp">员工管理</router-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                    <!-- Aside -->
                </el-aside>
                <el-container>

                    <el-main>
                        <!-- Main -->
                        <el-table :data="DeptName" style="width: 100%" border>
                            <el-table-column prop="name" label="姓名" width="180" align="center">
                            </el-table-column>
                            <el-table-column prop="date" label="最后操作时间" width="180" align="center">
                            </el-table-column>
                            <el-table-column label="操作" >
                                <el-button type="primary" size="mini">编辑</el-button>
                                <el-button type="danger" size="mini">删除</el-button>
                            </el-table-column>
                        </el-table>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>

    </div>
</template>

<!--  -->
<script>

export default {
    data() {
        return {
            DeptName: [{
                name: '学工部',
                date: '2016-05-02',
            }, {
                name: '教研部',
                date: '2016-05-04',
            }, {
                name: '就业部',
                date: '2016-05-01',
            }, {
                name: '人事部',
                date: '2016-05-03',
            }, {
                name: '行政部',
                date: '2016-05-03',
            }]

        }
    },

    methods: {

    },
    mounted() {

    }
}
</script>


<!--  -->
<style></style>

 

 

 

此时重新运行有个小bug,会出现空白页面,如下(默认是'' / ''找不到路径)

 

六.打包部署

 

 

 在D:\develop\nginx-1.22.0\conf\nginx.conf 中修改端口号

 

 

 完美进入

 

程序员希西子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaWeb03-Vue学习笔记
08-22
JavaWeb03-Vue学习笔记
JavaWeb开发 —— Ajax
hdakj22的博客
04-12 1479
Ajax介绍、原生Ajax、Axios以及综合案例分析练习
【JavaWeb】Vue-Element
qinjilll的博客
04-05 401
Vue的组件文件以 .vue结尾，每个组件由三个部分组成：、、。YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。vue-cli 是vue官方提供的一个脚手架，用于快速生成一个vue的项目模板。组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。的技术，如：搜素联想、用户名是否可 用的校验等等。
黑马JavaWeb开发跟学(三)Web前端开发Vue-Element
最新发布
心向阳光的天域的博客
03-02 922
黑马JavaWeb开发跟学(三)Web前端开发Vue-Element
Axios异步请求
weixin_46597615的博客
04-13 331
Axios异步请求
Javaweb之Axios的详细解析
qq_69748833的博客
11-22 1600
前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。但是Ajax请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。ajax请求的数据我们应该绑定给vue的data属性，之后才能进行数据绑定到视图；首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入。首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入。
JavaWeb2023_03_Vue-Element
qq_52922453的博客
05-25 281
前后台混合开发和前后台分离开发。前后台混合开发，顾名思义就是前台后台代码混在一起开发，如下图所示：这种开发模式有如下缺点：沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才不便管理：所有的代码都在一个工程中不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。
javaweb开发-学生成绩管理系统
11-24
基于java开发的网页学生管理系统，包含servlet，Ajax，jsp技术
JavaWeb-Vue
10-08
JavaWeb-Vue
JavaWeb-标签库应用方法初探.docx
12-16
JavaWeb-标签库应用方法初探.docx
javaweb部署到linux-tomca.doc
11-29
javaweb部署到linux-tomca.doc
vue中通过axios发送请求接收对象，并用变量接收对象中的数据
qq_60390518的博客
06-10 958
相当于json对象.data；然后要想在vue对象中接收这个数组，首先在vue的data中设置相应的变量，注意：变量类型要对应上否则没法接收。其中result.data接收到的是一个json对象，这里是想得到json对象中的名为data的数组，所以用的是。其接收的json对象如下。
JavaWeb学习笔记
Pengjixuan0524的博客
10-01 150
new Vue({data: {})
黑马JAVAWeb Day3
CaiZijian2002的博客
10-25 450
P34 Ajax介绍。
014-Axios Ajax-尚硅谷2022+黑马2023：Ajax概述 同步异步，(Axios 发送普通请求参数，发送请求体JSON，服务器端返回JSON数据)后端是servlet方式
aa35434的博客
03-15 1738
使用原生的JavaScript程序执行Ajax极其繁琐，所以一定要使用框架来完成。而Axios就是目前最流行的前端Ajax框架。Axios官网使用Axios和使用Vue一样，导入对应的*.js文件即可。官方提供的script标签引入方式为：
Javaweb之Vue组件库Element案例异步数据加载的详细解析
qq_69748833的博客
12-03 581
需要使用axios时，导入axios: import axios 'axios'我们最后要做的就是异步加载数据，所以我们需要使用axios发送ajax请求。但是很明显，性别和图片的内容显示不正确，所以我们需要修复。slot-scope: 通过属性的row获取当前行的数据。安装axios: npm install axios。此时打开浏览器，效果如下图所示：性别一列的值修复成功。此时回到浏览器，效果如下图所示：图片展示修复成功。 : 用于自定义列的内容。
Ajax详解
m0_63260018的博客
07-15 2192
Ajax 是 “Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）的缩写。它是一种在无需重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容的技术。简单来说，Ajax 可以让网页在不影响用户体验的前提下，实时更新数据。
【JavaWeb】前端框架（Vue+Ajax+工程）
qq_44544908的博客
04-05 857
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。官网：框架：是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷、更加高效。Vue项目-创建vue uiVue项目-目录结构基于Vue脚手架创建出来的工程，有标准的目录结构，如下：Vue项目-启动Vue项目-配置端口打开vue.config.js。
javaweb开发Day3（宝藏干货冲冲冲）
爱吃Java的羊的博客
08-17 98
1、准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list。模块化（js、css） 组件化（UI结构、样式、行为）规范化（目录结构、编码、接口）自动化（构建、部署、测试）2、创建XMLHttpRequest对象：用于和服务器交换数据。检查是否安装nodejs和npm镜像文件。原生Ajax（基本不用）4、获取服务器响应数据。3、想服务器发送请求。接口文档：YApi（
省市区三级联动 mysql_javaweb--json--ajax--mysql实现省市区三级联动（附三级联动数据库）...
05-15
实现省市区三级联动的关键...前端页面发送 Ajax 请求，后端通过 JDBC 连接数据库，查询对应的省份、城市、区县信息，并以 JSON 格式返回给前端页面。前端页面再解析 JSON 数据，更新页面的省份、城市、区县下拉框选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员希西子

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

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

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

打赏作者

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

抵扣说明：

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

余额充值