SpringBoot+Vue 博客系统（四）：博客后端开发

已于 2023-12-01 11:10:28 修改
阅读量581 收藏 3
点赞数 1
分类专栏： YangCunle`s Blog 文章标签： spring boot vue.js java
于 2023-05-30 11:22:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangcunle/article/details/130944123
版权

签名：但行好事，莫问前程。

SpringBoot+Vue 博客系统（连载系列）

在这里插入图片描述

YangCunle`s Blog 博客网址：http://www.yangcunle.com

SpringBoot+Vue 博客系统（一）：个人网站的由来

SpringBoot+Vue 博客系统（二）：个人博客的搭建

SpringBoot+Vue 博客系统（三）：个人博客的设计

SpringBoot+Vue 博客系统（四）：博客后端开发

SpringBoot+Vue 博客系统（五）：整合阿里云OSS

SpringBoot+Vue 博客系统（六）：整合Redis

SpringBoot+Vue 博客系统（七）：Blog前端Vue项目的搭建

SpringBoot+Vue 博客系统（八）：前端项目引入Element-UI

SpringBoot+Vue 博客系统（九）：安装Axios处理跨域

SpringBoot+Vue 博客系统（十）：VUE路由 vue-route

SpringBoot+Vue 博客系统（十一）：博客后台管理

SpringBoot+Vue 博客系统（十二）：博客前台展示

SpringBoot+Vue 博客系统（十三）：项目打包部署到服务器

文章目录

在这里插入图片描述

一、创建后端项目

pom文件所需要的依赖

<dependencies>
        <!-- SpringBoot-Web依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- MySQL依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <!-- MybatisPlus和SpringBoot整合-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!-- 适用版本：mybatis-plus-generator代码生成器-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!-- Freemarker模板引擎依赖-->
        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.31</version>
        </dependency>
        <!-- Swagger相关依赖-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
        <!-- Lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!-- 加入log4j2的日志框架 -->
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>
        <!-- Redis依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-redis</artifactId>
        </dependency>
        <!-- 测试依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

二、上传项目到码云

在这里插入图片描述
项目地址：https://gitee.com/yangcunle/YangCunle-Blog

三、整合MyBatisPlus

1、配置乐观锁和分页插件

@Configuration
public class MyBatisPlusConfig {
    /**
     * 注册乐观锁插件和分页插件
     * 不同版本的配置插件不一样（本次是用的是最新的版本3.5.1）
     * 详情见MyBatisPlus官方文档：https://baomidou.com
     * @return
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
        //添加乐观锁
        mybatisPlusInterceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());
        //添加分页
        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return mybatisPlusInterceptor;
    }
}

2、插入修改的填充策略

@Component
public class MyMetaObjectHandler implements MetaObjectHandler {

    /**
     * 插入时的填充策略
     * @param metaObject
     */
    @Override
    public void insertFill(MetaObject metaObject) {
        //setFieldValByName(String fieldName, Object fieldVal, MetaObject metaObject)
        this.setFieldValByName("createTime", new Date(), metaObject);
        this.setFieldValByName("updateTime", new Date(), metaObject);
    }

    /**
     * 修改时的填充策略
     * @param metaObject
     */
    @Override
    public void updateFill(MetaObject metaObject) {
        this.setFieldValByName("updateTime", new Date(), metaObject);

    }
}

3、MyBatisPlus代码生成器

public class MyBatisPlusGenerator {
    public static void main(String[] args) {
        //数据库相关配置
        String url = "jdbc:mysql://localhost:3306/ycl_blog?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC";
        String username = "root";
        String password = "root";
        String projectPath = System.getProperty("user.dir");
        //表名集合
        List<String> tables = new ArrayList<>();
        tables.add("t_user");
        FastAutoGenerator.create(url, username, password)
                //全局配置
                .globalConfig(builder -> {
                    builder.author("YangCunle") // 设置作者
                            .enableSwagger() // 开启 swagger 模式
                            .fileOverride() // 覆盖已生成文件
                            .dateType(DateType.ONLY_DATE)
                            .outputDir(projectPath + "/src/main/java"); // 指定输出目录
                })
                //包配置
                .packageConfig(builder -> {
                    builder.parent("com.yangcunle.blog") // 设置父包名
                            //设置包的命名
                            .entity("entity")
                            .service("service")
                            .serviceImpl("service.impl")
                            .controller("controller")
                            .mapper("mapper")
                            .xml("mapper")
                            .pathInfo(Collections.singletonMap(OutputFile.mapperXml, projectPath + "/src/main/resources/mapper/")); // 设置mapperXml生成路径
                })
                //策略配置
                .strategyConfig(builder -> {
                    builder.addInclude(tables) // 设置需要生成的表名
                            .addTablePrefix("t_")// 设置过滤表前缀
                            // 控制器配置：controllerBuilder
                            .controllerBuilder()
                            .enableHyphenStyle()//开启驼峰命名转字符
                            .enableRestStyle()//设置@RestController注解
                            // 逻辑层配置：serviceBuilder
                            .serviceBuilder()
                            .formatServiceFileName("%sService")//格式化 service 接口文件名称
                            .formatServiceImplFileName("%sServiceImpl")//格式化 serviceImpl 接口文件名称
                            // 实体类配置：entityBuilder
                            .entityBuilder()
                            .enableLombok()//设置Lombok
                            .enableTableFieldAnnotation()//开启生成实体时生成字段注解
                            .idType(IdType.AUTO)//设置主键类型：自增
                            .versionColumnName("version")//乐观锁
                            .logicDeleteColumnName("deleted")//逻辑删除
                            .addTableFills(new Column("create_time", FieldFill.INSERT), new Column("update_time", FieldFill.INSERT_UPDATE))//添加、修改时间自动填充
                            // Mapper配置：mapperBuilder
                            .mapperBuilder()
                            .enableBaseResultMap()//mapper自动生成通用查询映射结果
                            .enableBaseColumnList();//mapper自动生成通用列
                })
                .templateEngine(new FreemarkerTemplateEngine()) // 使用Freemarker引擎模板，默认的是Velocity引擎模板
                .execute();
    }
}

4、一键生成代码

在这里插入图片描述

四、统一异常处理

统一异常处理包括：全局异常处理、特殊异常处理、自定义异常处理

1、全局异常处理

@RestControllerAdvice
public class GlobalExceptionHandler {

    //获取日志记录器对象
    private final Logger logger = Logger.getLogger(GlobalExceptionHandler.class);


       /**
     * 处理运行时异常
     * @param e
     * @return
     */
    @ResponseBody
    @ExceptionHandler(value = RuntimeException.class)
    public CommonResult handler(RuntimeException e) {
        logger.error("运行时异常：{}" + e.getMessage());
        return CommonResult.failed("博客系统貌似出现了问题o(╥﹏╥)o，请联系管理员处理。微信：YCL357486967");
    }
}

2、特殊异常处理

我们知道的一些异常可以列举出来，进行捕获，这里以除数不能为0举例
在这里插入图片描述

如果不处理，就会报以下错误：

在这里插入图片描述

    /**
     * 特殊异常处理 ：ArithmeticException
     * @param e
     * @return
     */
    @ResponseBody
    @ExceptionHandler(value = ArithmeticException.class)
    public CommonResult handler(ArithmeticException e) {
        logger.error("除数不能为0异常：{}" + e.getMessage());
        return CommonResult.failed(e.getMessage());
    }

成功捕获：
在这里插入图片描述

3、自定义异常处理

自己创建一个自定义异常类：BlogException 继承运行时异常 RuntimeException

@Data
public class BlogException extends RuntimeException {

    private Integer code;
    private String message;

    public BlogException(Integer code, String message) {
        super(message);
        this.code = code;
        this.message = message;
    }

    public BlogException(ResultCode ResultCode) {
        super(ResultCode.getMessage());
        this.code = ResultCode.getCode();
        this.message = ResultCode.getMessage();
    }
}

在全局异常处理中加入捕获自定义异常

    /**
     * 自定义异常处理
     * @param e
     * @return
     */
    @ResponseBody
    @ExceptionHandler(value = BlogException.class)
    public CommonResult handler(BlogException e) {
        logger.error("自定义异常：{}" + e.getMessage());
        return CommonResult.failed(e.getMessage());
    }

测试一波：

在这里插入图片描述
自定义异常捕获成功：
在这里插入图片描述

五、封装统一返回结果工具类

public class ResultUtil<T>  {

    // 状态码
    private Integer code;
    // 消息
    private String msg;
    // 数据
    private T data;

    public ResultUtil(T data) {
        this.data = data;
    }


    /**
     * 成功（无返回数据）
     * @return
     */
    public static ResultUtil success() {
        ResultUtil result = new ResultUtil<>();
        result.setCode(ResponseCode.SUCCEED);
        result.setMsg(ResponseMsg.SUCCEED);
        return result;
    }

    /**
     * 成功（有返回数据）
     * @param data
     * @param <T>
     * @return
     */
    public static <T> ResultUtil<T> success(T data) {
        ResultUtil<T> result = new ResultUtil<>(data);
        result.setCode(ResponseCode.SUCCEED);
        result.setMsg(ResponseMsg.SUCCEED);
        return result;
    }

    /**
     * 错误
     * @param code
     * @param msg
     * @return
     */
    public static ResultUtil error(Integer code, String msg) {
        ResultUtil result = new ResultUtil();
        result.setCode(code);
        result.setMsg(msg);
        return result;
    }

}

六、用户模块的接口开发

public class UserController {

    //获取日志记录器对象
    private final Logger logger = Logger.getLogger(UserController.class);

    @Autowired
    private UserService userService;

    /**
     * 分页查询用户列表
     * @param username
     * @param pageNum
     * @param pageSize
     * @return
     */
    @GetMapping("/list")
    public ResultUtil<Page<User>> list(String username,
                                       @RequestParam(required = false, defaultValue = "1") Integer pageNum,
                                       @RequestParam(required = false, defaultValue = "10") Integer pageSize) {
        logger.info("查询用户列表开始：入参{username}:" + username);
        LambdaQueryWrapper<User> query = Wrappers.<User>lambdaQuery().orderByDesc(User::getId);
        if (!StringUtils.isEmpty(username)) {
            query.like(User::getUsername, username);
        }
        Page<User> userPage = userService.page(new Page<>(pageNum, pageSize), query);
        return ResultUtil.success(userPage);
    }

    /**
     * 保存用户
     * @param user
     * @return
     */
    @PostMapping("/save")
    public ResultUtil<Boolean> save(@RequestBody User user) {
        logger.info("添加用户：入参{user}:" + user.toString());
        boolean result = userService.save(user);
        return ResultUtil.success(result);
    }

    /**
     * 修改用户信息
     * @param user
     * @return
     */
    @PostMapping("/update")
    public ResultUtil<Boolean> update(@RequestBody User user) {
        logger.info("修改用户：入参{user}:" + user.toString());
        boolean result = userService.updateById(user);
        return ResultUtil.success(result);
    }

    /**
     * 查看用户信息
     * @param id
     * @return
     */
    @GetMapping("/read")
    public ResultUtil<User> read(Integer id) {
        logger.info("查看用户信息：入参{id}:" + id);
        User user = userService.getById(id);
        return ResultUtil.success(user);
    }

    /**
     * 删除用户
     * @param id
     * @return
     */
    @GetMapping("/delete")
    public ResultUtil<Boolean> delete(Integer id) {
        logger.info("删除用户信息：入参{id}:" + id);
        boolean result = userService.removeById(id);
        return ResultUtil.success(result);
    }

}

七、ApiPost测试接口

在这里插入图片描述

https://console-docs.apipost.cn/preview/e66f1e46125af959/222ee42959f879ef

文档支持在线查看：

在这里插入图片描述

用户列表支持分页查询

http://localhost:8081/user/list

返回结果：

{
	"code": 0,
	"msg": "成功",
	"data": {
		"records": [
			{
				"id": 3,
				"username": "ycl",
				"password": "123",
				"role": 2,
				"email": "123@qq.com",
				"phone": "123",
				"age": null,
				"headImg": null,
				"createTime": "2021-08-02T08:11:47.000+00:00",
				"updateTime": "2021-08-02T08:11:47.000+00:00",
				"deleted": 0
			},
			{
				"id": 2,
				"username": "乐多多",
				"password": "123456",
				"role": 2,
				"email": "123456@qq.com",
				"phone": "123456",
				"age": null,
				"headImg": null,
				"createTime": "2021-08-02T08:06:14.000+00:00",
				"updateTime": "2021-08-02T08:06:14.000+00:00",
				"deleted": 0
			},
			{
				"id": 1,
				"username": "admin",
				"password": "admin",
				"role": 1,
				"email": "357487967@qq.com",
				"phone": "15971397103",
				"age": 25,
				"headImg": null,
				"createTime": "2021-08-02T10:33:11.000+00:00",
				"updateTime": "2021-08-02T10:33:15.000+00:00",
				"deleted": 0
			}
		],
		"total": 3,
		"size": 10,
		"current": 1,
		"orders": [],
		"optimizeCountSql": true,
		"searchCount": true,
		"countId": null,
		"maxLimit": null,
		"pages": 1
	}
}

总结

以上便是从0创建项目、上传项目到码云、整合MybatisPlus生成代码、统一异常处理、封装统一返回结果工具类、以及用户模块的开发和接口测试的整套后台开发流程。如果对你有所帮助，请一键三连。

杨存乐
关注
专栏目录
SpringBoot+vue练手项目---博客系统
du_ai_me的博客
01-08 955
SpringBoot+vue练手项目之博客系统，适合新手拿来练项目
基于SpringBoot+VUE实现博客系统
weixin_60386968的博客
10-03 2983
《基于SpringBoot+VUE实现博客系统》 技术实现 1. 后台使用Springboot+Mybatis，前台页面使用 Vue + ElementUI + Jquery Ajax，前后端分离； 2. 导入项目，新建数据库，执行数据库sql，修改application.yml配置文件里面的数据库配置，启动项目，登录页面地址：http://localhost:9999/page/end/login.html 3. 管理员账号：admin 密码：admin 用户账号：tom 密码：123456
Vue基于SpringBoot的个人博客系统设计和实现
最新发布
QQ860660016的博客
10-04 824
本文的重点是对该系统的开发环境、要实现的基本功能和开发步骤进行了说明，并重点阐述了系统设计方案的关键点、设计思想该系统基于浏览器B/S的方式进行访问，采用springboot集成快速开发框架，前端使用vue方式，开发工具IntelliJ IDEA x64，因为该开发工具，内嵌了Tomcat服务运行机制，可不用单独下载Tomcat server服务器。由于考虑到数据库结构的灵活性，本系统想要使用 MySQL来设计数据库 ，而 java技术 B/S架构则确保了较高的平台适应性。
SpringBoot+Vue项目校园博客系统
分享技术热点，看天下大事
05-27 2685
文末获取源码 开发语言：Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 使用框架:springboot+vue JDK版本：jdk1.8 前言介绍 随着现在网络的快速发展，网上管理系统也逐渐快速发展起来，网上管理模式很快融入到了许多网站的之中，随之就产生了“校园博客系统”，这样就让校园博客系统更加方便简单。 对于本校园博客系统的设计来说，系统开发主要是采用java语言技术，在整个系统的设计中应用MySQL数据库来完成数据存储，具体根据校园博客系统的现状来进行开..
SpringBoot+Vue博客系统(源码+论文)
计算机毕业设计
10-25 339
注册登录管理功能是新用户在使用系统前，需要通过注册步骤，登记详细的信息资料，而后再通过输入正确的账号和密码，成功登录系统后，即可通过一系列的操作来满足自己的相关需求。用户信息管理功能是管理相关的用户信息资料，管理人员根据现实情况的需要，选择性的对用户信息记录进行更新处理。论坛信息管理是管理相关的论坛信息记录，方便相关人员及时查看论坛信息，如果遇到异常的论坛信息，可以及时对其进行处理，在较短的时间内解决问题，提高用户的使用体验。后端：Java+SpringBoot。🍅文末获取源码联系🍅。
基于Spring Boot+Vue博客系统的设计与实现（附源码）
XiaoLin
03-06 4351
摘要 中文博客第一次映入眼帘是在2002年，那时候的个人终端还是人们眼中的香饽饽，随着科技的不断进步和制造业的蓬勃发展，个人计算机终端开始逐渐变得普及，实现了人手一台电脑，在这种趋势中，博客系统走入了寻常百姓家，也成为了很多技术大牛互相交流的地方，很多的年轻的白帽子的黑客就是通过技术博客得以迅速成长，成为了中国网络的中坚力量。 这个系统我使用了比较新潮的技术-Spring Boot框架，同时摒弃了传统的Eclipse编译器，采用了Idea进行开发，采用MVC的设计模式，实现了访客查看博客、对博客进行留言，管
基于SpringBoot+Vue的学生选课管理系统的毕业设计，Vue+SpringBoot+MybatisPlus+MySQL
03-24
该系统实现了学生选课、退课、课程管理、学生管理等功能,采用前后端分离的模式,前端使用Vue框架,后端使用SpringBoot框架。 后端使用SpringBoot+MybatisPlus+MySQL实现,主要包括CourseController、StudentController...
springboot+vue编写的在线论坛博客系统
01-10
综上所述，这个项目涵盖了Spring Boot后端开发、Vue.js前端构建、前后端分离的架构设计，以及论坛博客的业务需求。开发者需要对这些技术有深入理解，并具备良好的数据库设计和API接口设计能力，才能成功地构建出这样...
java开发基于springboot+vue+mybatis的学生成绩管理系统源码.zip
06-02
java开发基于springboot的管理系统源码。这是一个基于springboot+vue+mybatis的学生成绩管理系统。java开发基于springboot的管理系统源码。这是一个基于springboot+vue+mybatis的学生成绩管理系统。java开发基于...
基于Springboot+Vue+Element-ui的精美个人博客系统
11-24
标题 "基于Springboot+Vue+Element-ui的精美个人博客系统" 涉及到的是一个现代Web应用的开发框架组合，主要包括三个核心技术：Spring Boot、Vue.js和Element UI。 Spring Boot是Spring框架的一个扩展，旨在简化Java...
SpringBoot+Mybaits+vue3+elementplus通用管理系统实例（前端+后端）
12-30
SpringBoot+Mybaits+vue3+elementplus通用管理系统实例（前端+后端）,搭建通用管理系统后台，实现管理系统常用的功能，比如日志管理、登录、找回密码、权限管理、用户管理、角色管理、系统配置、数据字典、系统消息...
VBlog:springBoot + vue个人博客系统
03-11
V部落是一个多用户博客管理平台，采用Vue + SpringBoot开发。 英雄帖 项目还有许多待改进的地方，欢迎小伙伴提交pr，我可以大家完成的工作展示在README中！ 项目效果图 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 初步技术栈 初步主要采用了： 1，SpringBoot 2，SpringSecurity 3，MyBatis 4.部分接口预设Restful风格5，MySQL 前端技术栈 前端主要采用了： 1.Vue 2.axios 3.元素UI 4，vue-echarts 5，编辑6.vue路由器 还有其他一些琐碎的技术我就不在这里一一双人床了。 快速运行 1.克隆本项目到本地 git@github.com:topyzc/VBlog.git 2.找到blogserver项目中资源目录下的vueblog.sql文件，在MySQL数据库中执行3.根据自己
基于springbootvue的个人博客系统前端部分
08-09
基于spring boot vue的个人博客系统（前端部分）
基于SpringBoot和Vue的个人博客系统
qq_45934521的博客
03-22 2538
炫酷博客系统，基于SpringBoot和Vue开发的前端分离项目。博客系统分为博客前台和博客后台两部分，游客可以访问博客前台页面，可以流量博客文章，但是如果要评论博客就需要登陆。而管理员身份可以登陆博客后台（也就是博客管理后台），在后台可以发布文章、修改文章、添加博客分类、添加博客标签、管理博客留言等功能。整个项目几乎包含了博客常见的所有功能。
精品！阿里P8爆款《SpringBoot+vue全栈开发实战项目》笔记太香了
DMZDAMS的博客
10-26 971
Spring 作为一个轻量级的容器，在JavaEE开发中得到了广泛的应用，但是Spring 的配置繁琐臃肿，在和各种第三方框架进行整合时代码量都非常大，并且整合的代码大多是重复的，为了使开发者能够快速上手Spring，利用Spring框架快速搭建JavaEE项目，Spring Boot应运而生。 Spring Boot 中对一些常用的第三方库提供了默认的自动化配置方案，使得开发者只需要很少的Spring 配置就能运行一个完整的Java EE应用。Spring Boot项目可以采用传统的方案打成war包,然
SpringBoot+Vue 博客系统（二）：个人博客的搭建
YangCunle的博客
05-30 863
创作不易，如果对你有所帮助，请一键三连。
springboot+Vue博客系统
wuqiwan的博客
03-18 584
全项目分为前台后台，前台展示，后台增删改差，纯属自己呕心沥血之作 项目描述 我大学时候就想自己写一个属于自己的博客，这个博客，从前台到后台都是自己操刀，后台逻辑处理可能没有特别好，但是尽我当时的能力，写出了1.0版本，后期还会更新版本，添加其余功能。 这个项目还是我之前从学校毕业后，进入第一家公司时候，看了淘淘之后，依照淘淘的环境整了一个，前台前端bootstrap+Vue的，后台layui自己费劲千难万血整出来的。 全项目分为前台后台，前台展示，后台增删改查。 maven的ssm+layui+bo
Springboot+Vue快速搭建个人博客系统
__不想写代码__的博客
06-23 4694
文章目录前言一、SpringBoot实现后端二、Vue.js实现前端1.Header和Footer实现：2.Vue其他配置总结 前言 本篇博客讲解如何使用SpringBoot和Vue如何快速搭建自己个人博客系统，功能比较少，但是作为一个期末小作业应该够了。本篇博客默认你已经有了SpringBoot和Vue的基础啦！后端还是用了MyBatis-Plus 完成数据库增删改查，我会分别从前后端介绍如何实现。同时呢，代码也会上传到GitHub上。 内容 地址 GitHub 链接 项目演示地址
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值