CGB2105-Day07-Day08

最新推荐文章于 2021-08-25 21:07:48 发布
最新推荐文章于 2021-08-25 21:07:48 发布
阅读量7k 收藏 24
点赞数 8
分类专栏： 2105 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16804847/article/details/119210269
版权

1. 后端项目搭建

1.1 创建项目

项目名称: springboot_demo5_axios
要求: mapper/service/pojo/controller 5分钟开始创建
在这里插入图片描述

1.2 SpringMVC 参数传递方式

1.2.1 简单的参数传递

url地址: http://localhost:8090/getUserById?id=100
编辑后台Controller代码:
在这里插入图片描述

1.2.2 对象的方式传递

URL: http://localhost:8090/getUser?id=100&name=“tomcat”&age=18
后台代码说明:
在这里插入图片描述

1.2.3 RestFul风格

特点:
1. 参数需要使用/ 进行分割
2. 参数的位置是固定的.
3. restFul请求方法路径不能出现动词

作用:
用户可以通过一个URL请求的地址,可以实现不同的业务操作
知识回顾:
查询: http://localhost:8090/getUserById?id=100 类型:get
新增: http://localhost:8090/insertUser 类型:post
更新: http://localhost:8090/updateUser 类型:post
删除: http://localhost:8090/deleteUserById?id=200 类型:get
意图明显: 常规的请求的方式其中包含了动词,导致操作的意图非常明显.

RestFul风格实现CURD操作:
1.查询: http://localhost:8090/user/100 type:GET
2.新增: http://localhost:8090/user/tomcat/18/男 type:POST
3.删除: http://localhost:8090/user/100 type:DELETE
4.更新: http://localhost:8090/user/mysql/100 type:PUT

1.2.3 RestFul风格-简单参数接收

入门案例:

	/**
     * 1.restFul实现用户查询
     * URL: http://localhost:8090/user/100
     * type: GET
     * RequestMapping 默认的可以接收所有的请求类型
     * RestFul语法:
     *      1.参数的位置固定.
     *      2.参数必须使用{}包裹
     *      3.必须使用@PathVariable 动态的接收参数
     *      注意事项: {参数名称}必须与方法中的名称一致.
     */
    //@RequestMapping(value = "/user", method = RequestMethod.GET)
    @GetMapping("/user/{id}")
    public String restFulGet(@PathVariable Integer id){

        return "restFul动态的获取参数:"+id;
    }

1.2.4 RestFul风格-对象参数接收

 /**
     * 需求: 查询name=tomcat age=18 sex=女的用户
     * 要求使用:restFul
     * URL: http://localhost:8090/user/tomcat/18/女
     * restFul的优化:
     *  如果{参数名称}与对象中的属性名称一致,
     *      则SpringMVC动态的为对象赋值,
     *      @PathVariable 可以省略
     * 注意事项:
     *      前后端的参数的传递必须保持一致!!!!
     */
    @GetMapping("/user/{name}/{age}/{sex}")
    public User restGetUser(User user){
        //执行后续的业务操作 userService
        return user;
    }

2. Axios学习

2.1 Axios介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特点:
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF

结构说明:
	1. JS中原生提供了Ajax操作.  弊端: 操作特别的复杂 易用性较差.
	2. jQuery中的Ajax    封装了原生的JS Ajax    提高了开发的效率  
	3. Axios是VUE中默认支持的Ajax的请求的方式.

** 特点: 调用简洁 解决了 “回调地狱问题”!!!**

2.2 回调地狱问题(了解)

说明: 前端中如果需要发起大量的Ajax请求,并且Ajax 请求有嵌套的关系.则可能引发回调地狱问题.
例子: 请求 参数A --1–结果B/参数B—2–结果C/参数C—3--- 结果D
课下了解: 什么是回调地狱!!!
在这里插入图片描述

2.3 Axios 入门案例

2.3.1 编辑后台代码

编辑后台代码完成业务获取
在这里插入图片描述

2.3.2 Axios调用步骤

  1. 导入Axios的JS文件
  2. 发起Ajax请求
  3. 解析返回值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
			/**
			 * 注意事项:
			 * 		1.Axios将原来的嵌套的结构,改为链式加载方式
			 *    2.回调函数中的data,不是服务器的返回值,是promise对象
			 * 
			 * 发起Ajax请求:
			 * 	1. GET请求获取数据
			 */
			axios.get("http://localhost:8090/axios/getUser")
					 .then(function(result){//promise对象
						//获取服务器返回值  promise.data
						 console.log(result.data)
					 })
			
		</script>
	</body>
</html>

promise对象说明: 其中data表示服务器的返回值.
在这里插入图片描述

2.4 Axios-Get-简单参数

2.4.1 前端Ajax请求

/**
			 *  GET请求-简单参数的写法
			 * 需求: 根据ID查询数据
			 * URL: http://localhost:8090/axios/getUserById?id=100
			 * then(): 回调函数通过then返回 结构
			 */
			axios.get("http://localhost:8090/axios/getUserById?id=100")
					 .then(function(result){
						 console.log(result.data)
					 })

2.4.2 后端Controller

在这里插入图片描述

2.5 Axios-Get-resultFul结构

2.5.1 前端Ajax请求

在这里插入图片描述

	/**
			 * restFul风格实现业务传参 
			 * 需求: 根据name/age查询数据
			 * URL: http://localhost:8090/axios/user/tomcat/18
			 * 注意: 模版字符串优化参数  ``
			 */
			let name = "mysql"
			let age = 20
			axios.get(`http://localhost:8090/axios/user/${name}/${age}`)
					 .then(function(result){
						 console.log(result.data)
					 })

2.5.2 编辑后端Controller

在这里插入图片描述

2.6 Axios-Get-对象传参(重要!!!)

2.6.0 F12的说明

一般用来检查网络的请求 使用network 其中不要添加缓存, 检查所有的请求的路径
在这里插入图片描述

2.6.1 需求说明

说明: 如果用户查询数据 其中包含了多个参数,可以使用restFul风格(少量参数)/可以使用对象封装(多个参数)
如果参数较多则建议使用对象的方式封装.
案例: 查询name=“mysql” age=18 sex="女"的用户 要求使用对象的方式封装参数

2.6.2 编辑前端Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
				
				/**
				 * 需求: 实现对象方式的数据传递
				 * url:  http://localhost:8090/axios/user/getUserObj
				 * 语法: axios.get("url","参数").then(回调函数)
				 * 业务需求:  查询name="mysql" age=18   sex="女"的用户
				 */
				
				//封装对象
				let user = {
					name: "mysql",
					age: 18,
					sex: "女"
				}
			
				axios.get(
					"http://localhost:8090/axios/user/getUserObj",{params: user})
					.then(function(result){
						console.log(result.data)
					})
			
			/* 	axios.get("http://localhost:8090/axios/user/getUserObj",
				{
					//key: value  key固定写法 params 参数对象
					params: {
						//再写用户的参数
						name: "mysql",
						age: 18,
						sex: "女"
					}
				}).then(function(result){
					console.log(result.data)
				}) */
				
				
				
		</script>
	</body>
</html>

2.6.3 编辑后端Controller

在这里插入图片描述

2.7 Axios-Delete请求

2.7.1 Delete请求说明

一般用户通过Delete请求做删除操作. 删除的语法与Get请求的语法一致的.

2.7.2 Delete请求方式说明 了解delete代码结构

1.不带参数的删除
axios.delete(“url地址”).then(function(result){ … })

2.携带个别参数 ?id=100
axios.delete(“url地址?id=100”).then(function(result){ … })

3.restFul结构
可以使用模版字符串的方式简化代码结构
axios.delete( "url地址/xxx/xxx/xxx").then(function(result){ … })

4.采用对象的方式进行参数传递
let 对象 = {xxxx:xxxx,xxxx:xxxx}
axios.delete( "url地址/xxx/xxx/xxx", {params: 封装后的对象}).then(function(result){ … })

2.8 Axios-post请求

2.8.1 编辑页面Ajax

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios-POST请求</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
					
					/* 
						1.什么时候使用post请求????
						  答:一般采用form表单提交时,采用post请求类型
								 主要用于数据的新增操作
								 
						2.get请求/post请求主要的区别
							get: 参数动态的拼接到URL地址中 ?id=xx&name=xxx 数据是可见的
							post: 一般采用post请求数据是涉密的 
					 */
					
					
					/**
					 * post业务:
					 * 		实现用户的新增 传递User对象
					 * 
					 * URL地址:
					 * 		http://localhost:8090/axios/insertUser
					 * 总结: 如果需要对象传参  
					 * 				1.get请求采用 axios.get(url,{params: 对象})
					 * 				2.post请求 axios.post(url,对象)
					 */
					let user = {
						name: "post请求的语法",
						age: 20,
						sex: '女'
					}
					let url1 = "http://localhost:8090/axios/insertUser"
					axios.post(url1, user)
							 .then(function(result){
								 console.log(result.data)
							 })
					
					
					
					
		</script>
	</body>
</html>

2.8.2 参数的数据结构

说明: 如果采用post的方式传递对象,则数据结构是一个JSON
在这里插入图片描述

2.8.3 编辑后端Controller

在这里插入图片描述

2.9关于前后端调用细节说明

2.9.1 请求类型

在这里插入图片描述
请求的类型是由程序员手动控制

  1. 分类A
    1.get 请求类型 查询
    2.delete 请求类型 删除
  2. 分类B
    1.post 请求类型 form表单提交 新增操作
    2.put 请求类型 更新操作

2.9.2 关于POST请求说明

浏览器解析数据结构:
在这里插入图片描述
说明: 数据在进行参数传递时 数据需要转化
在这里插入图片描述

2.9.3 jQuery中的post请求/Axios中的post请求对比/restFul格式

  1. Axios中的Post请求格式
    在这里插入图片描述
    如果传递的数据是JSON串 ,则在后端采用@RequestBody注解 实现JSON串转化为对象
  2. jQuery中的post请求格式

如果采用form表单的方式提交,则可以直接采用对象的方式接收
name=xxx&age=xx&sex=xx
在这里插入图片描述
3. restFul的格式是将参数拼接到URL中 采用特殊的方式获取数据
在这里插入图片描述

2.10 Axios-post-restFul结构

2.10.1 编辑前端JS

	/**
					 * post请求 restFul的写法
					 * 实现用户新增入库
					 * url: http://localhost:8090/axios/user/name/age/sex
					 */
					let url2 = "http://localhost:8090/axios/user/redis/18/男"
					axios.post(url2)
							 .then(function(result){
								 console.log(result.data)
							 })

2.10.2 编辑后端Controller

在这里插入图片描述

2.11 async-await用法-箭头函数(变态!!!)

2.11.1 概念解释

1.async/await 是ES7引入的新语法 可以更加方便的进行异步操作
2.async 关键字用在函数上. 返回值是一个promise对象
3.await 关键字用在async 函数中

2.11.2 箭头函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>async-await语法</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
					
					/**
					 * axios的get请求语法
					 * 知识点:
					 * 		1.箭头函数 主要简化回调函数的写法
					 * 		思路: 重复的 固定的可以简化
					 * 		规则: 如果参数只有一个则括号可以省略
					 */
					let url = "http://localhost:8090/axios/getUserById?id=100"
					axios.get(url)
							 .then( result => {
								 alert(result.data)
							 })
					
		</script>
	</body>
</html>

2.11.3 async-await 操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>async-await语法</title>
	</head>
	<body>
		<h1>Axios练习</h1>
		<!-- 引入JS文件 -->
		<script src="../js/axios.js"></script>
		<script>
					
					/**
					 * axios的get请求语法
					 * 知识点:
					 * 		1.箭头函数 主要简化回调函数的写法
					 * 		思路: 重复的 固定的可以简化
					 * 		规则: 如果参数只有一个则括号可以省略
					 *  	
					 * 		2.async-await简化  解构赋值
					 * 		2.1 async 需要标识函数
					 * 		2.2 await 需要标识ajax请求
					 *    上述的操作可以将多行js 封装为一行执行 简化代码操作
					 */
					
					//1.定义一个方法
					async function getUserById(){
							let url = "http://localhost:8090/axios/getUserById?id=100"
							//2.发起ajax请求  获取promise对象
							//let promise = await axios.get(url)
							//console.log(promise)
							//console.log(promise.data)
							
							//解构赋值 提取对象中有价值的数据
							let {data: resultData,status: code} = await axios.get(url)
							console.log(resultData)
							console.log(code)
					}
					
					//2.调用方法
					getUserById()
					
					
							 
					
		</script>
	</body>
</html>

2.11.4 Axios配置信息

说明: 可以通过下列的配置简化 Ajax请求的路径

	//配置基本请求路径
	axios.defaults.baseURL = "http://localhost:8080/"

在这里插入图片描述

3. 关于Axios练习(要求至少写2遍)

3.1 VUE+Axios 需求分析

说明:
1. 利用VUE.js构建页面
2. 利用Axios实现userList数据的获取, 利用VUE.js展现列表信息
3. 完成页面数据的删除操作
4. 完成页面数据的修改操作

3.2 绘制前端页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE-Axios练习</title>
	</head>
	<body>
		<!-- 定义VUE根标签 -->
		<div id="app">
				<div align="center">
						<h1 align="center">用户新增</h1>
						名称: <input type="text" v-model.trim="addUser.name"/>
						年龄: <input type="text" v-model.number="addUser.age"/>
						性别: <input type="text" v-model.trim="addUser.sex"/>
						<button @click="addUserMe">新增</button>
				</div>
				<hr />
				<table id="tab1" border="1px" align="center" width="80%">
					<tr>
						<td colspan="5" align="center"><h1>用户列表</h1></td>
					</tr>
					<tr align="center">
						<td>编号</td>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>操作</td>
					</tr>
					<!-- 指令: 可以循环数据+标签  v-for -->
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
						<td v-text="user.sex"></td>
						<td>
							<button>修改</button>
							<button>删除</button>
						</td>
					</tr>
				</table>
		</div>
			
		<!-- 1.引入VUE.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.引入Axios.js -->
		<script src="../js/axios.js"></script>
		
		<!-- 
				需求分析1:
					1.当用户打开页面时就应该发起Ajax请求获取userList数据.
					2.将userList数据 在页面中展现  
							2.1页面中的数据必须在data中定义
							2.2 ajax请求的结果赋值给data属性
					3.利用v-for指令实现数据遍历
					
				需求分析2:  用户数据入库操作
					1.在页面中准备用户新增文本框/按钮
					2.准备双向数据绑定的规则
					3.为按钮添加事件,实现数据新增入库.
							
		 -->
		<script>
				//设定axios请求前缀
				axios.defaults.baseURL = "http://localhost:8090"
				const app = new Vue({
					el: "#app",
					data: {
						//1.定义集合数据 null
						userList: [],
						//2.定义addUser对象  新增的用户数据
						addUser: {
							name: '',
							age: 0,
							sex: ''
						}
					},
					methods: {
						//1.定义getuserList方法 获取后台服务器数据
						async getUserList(){
							let{data: result} = await axios.get("/vue/getUserList")
							//ajax调用之后,将数据给属性.
							this.userList = result
						},
						//新增操作 请求类型: post  接收时需要使用json方式处理
						async addUserMe(){
								//不需要返回值
								await axios.post("/vue/insertUser",this.addUser)
								//将列表页面重新刷新
								this.getUserList()
						}
					},
					//调用生命周期函数
					mounted(){
						//console.log("vue对象实例化成功!!!!")
						//初始化时调用getUserList()
						this.getUserList()
					}
				})
		</script>
	</body>
</html>

3.3 实现UserList查询

3.3.1 编辑UserController

@RestController
@CrossOrigin
@RequestMapping("/vue") //包含全部类型
public class VueController {

    @Autowired
    private UserService userService;

    /**
     *  需求: 查询用户表的所有数据
     *  url: /vue/getUserList
     *  参数: 不要参数
     *  返回值: List集合
     */
    @GetMapping("/getUserList")
    private List<User> getUserList(){

        return userService.getUserList();
    }

}

3.3.2 编辑UserService

@Service
public class UserServiceImpl  implements UserService{

    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> getUserList() {

        //利用MP获取数据库记录
        return userMapper.selectList(null);
    }
}

3.4 实现用户入库操作

3.4.1 编辑UserController

在这里插入图片描述

3.4.2 编辑UserService

在这里插入图片描述

闪耀太阳
关注
  • 8
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前后端分离_Vue_axios本地跨域（前端localhost:8080到后端localhost:8090）
k17041114的博客
08-13 3277
找到vue.config.js module.exports = { productionSourceMap: false, configureWebpack: { devServer: { proxy: { '/api': { target: 'http://localhost:8090', //设置调用的接口域名和端...
cgb2106-day08
cgblpx的博客
08-04 4663
标题
解决localhost:8080被占用
CXJ_9280的博客
05-21 1万+
在用vue开发仿去哪儿网项目时，发现数据渲染全不见了，只剩下一些dom结构，找了很久发现原来因为在本地开发，用webpack转发时target写的端口是8080： 而因为错误的关闭了服务，导致8080端口被占用，此时自然就获取不到数据了，我们只要把 占用端口的进程关掉就可以了 解决方法如下： 1.在cmd里输入netstat -ano|findstr 8080，查看是哪个进程占用了808...
Tomcat测试“http://localhost:8080”失败解决方法
张拭心的博客 shixinzhang
01-21 7383
昨天安装后测试还是好的，今天测试却怎么也不行，重启tomcat、更改端口号都试过了，都没能解决。 后来一个高手指点我： 比如tomcat6.0和jdk1.8配合的时候，可能就会出现问题。解决这个问题的方法：copy jdk1.8的lib/tools.jar到tomcat的lib/tools.jar，覆盖掉原有文件就可以 试了一下果然成功！！ 还没有弄明白为什么，搞懂后再更。
我的2017-搭建个人网站，搭建PHP环境（2）
麦田里
02-06 1770
从php的学习开始，搭建环境是第一步，步步为营....
Day05
yzy980611的博客
08-25 2895
1.Spring MVC参数传递 1.1简单参数接受 1.1.1 需求分析 根据id查询用户信息 http://localhost:8090/findUserById?id=1 使用@GetMapper（“”）代替@RequestMapping(“”) controller层 @GetMapping("findUserById") //只允许接受get类型 public User findUserById(Integer id){ return userSe...
CGB2011-DAY02.html
03-12
CGB2011-DAY02.html
CGB2011-DAY13-14.html
03-30
CGB2011-DAY13-14.html
H3CGB0-713华三.docx 文档
最新发布
11-06
【H3CGB0-713华三云计算解决方案】文档涵盖了多个IT领域的知识点，主要集中在云计算、网络、存储和服务器技术方面。 1. **H3Cloud云计算解决方案**：包括了CAS云计算管理平台，UIS（统一基础设施系统）的服务器、...
H3CGB0-732.docx
03-14
"H3CGB0-732.docx"知识点总结 一、VLAN 和 Trunk * VLAN 的概念和作用 * Trunk 的概念和作用 * Trunk VLAN 的配置命令：[Switch-Ethernet0/1]port trunk pvid 10 * Trunk VLAN ID 的设置 二、路由器和交换机 * ...
h3cGB0-640.zip
02-13
h3cGB0-640.
关于liferay启动界面(在浏览器里录入http://localhost:8080后打开的界面)的定制
fycghy0803的专栏
05-12 4183
      搞了有8天的liferay研究,今天终于有了一点进展,在网上搜索的关于界面定制的全部均是要修改portal-impl.jar里的portal.porterties的对应节点的值或新建一个portal-ext.porterties,在里面写对应的节点及节点值然后放在web-inf/classes目录(portal-ext.porterties里的节点会覆盖portal.portertie
输入http://localhost:8080/没有正确显示
weixin_47015731的博客
08-15 1551
如果启动浏览器，在地址栏输入http://localhost:8080/没有正确显示，此时我们应该在Tomcat文件夹进入bin文件夹,双击Tomcat(版本号)w.exe,点击start，然后确定即可。
前后端分离端口跨域访问 本地vue-cli http://localhost:8080访问 springboot http://localhost:8090
屋顶地猫的博客
01-18 6086
端口跨域访问 在本地同时调试前端后后端，在调后端接口时会遇到跨域请求的问题 No 'Access-Control-Allow-Origin' header is present on the requested resource. 解决方法： 这里只需要修改springboot配置即可解决端口跨域问题   ...
三阶段day04
m0_57915079的博客
06-30 588
1. 构建SpringMVC项目 1.1 代码结构 1.2 编辑UserController 用户通过:http://localhost:8090/findAll查询数据 1.3 编辑UserService 用户通过:http://localhost:8090/findAll查询数据 1.3 编辑UserService
解决访问http://localhost:8080/需要用户和密码的问题
热门推荐
qq_42795915的博客
11-19 4万+
解决访问tomcat网页需要用户和密码的问题 有时候我们访问http://localhost:8080/，会弹出如下框框，需要用户名和密码 这个时候大多数是端口号冲突了，打开安装目录—conf—server.xml，修改如下图的端口，把原本的8080修改成自己喜欢的（不与其他服务的端口冲突即可），题主改的是8888 然后重新运行startup.bat，再访问http://localhost:8...
如何打开Tomcat管理平台
❂
04-20 903
1.在tomcat/conf/tomcat-users.xml文件配置 <role rolename="manager-gui"/> <user username="chen" password="123" roles="manager-gui"/> 2.在浏览器的地址栏中输入http://localhost:8090/. 3. 4.输入chen 密码123即可进入
vs 2013 asp.net发布网站的详细步骤
tzweilai的专栏
03-20 1848
1、用VS2013打开解决方案。 2、选中解决方案，点击鼠标“右键”—>从弹出对话框中，选择“清理解决方案”。 3、待第2步“清理解决方案”结束后，选中“解决方案”—>点击鼠标“右键”—>在弹出对话框中，选择“重新生成解决方案”。 4、待第3步“重新生成解决方案”结束后，选择web运用程序，如下图中“testDemo”—>点击鼠标“右键”—&gt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

闪耀太阳

感觉文章不错的记得打赏呀

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

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

打赏作者

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

抵扣说明：

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

余额充值