Springboot+Vue实现邮箱验证功能（邮箱登录+忘记密码）

已于 2022-05-07 17:11:43 修改
阅读量1w 收藏 102
点赞数 30
分类专栏： Springboot+Vue 文章标签： spring boot vue.js java 邮箱登录 邮箱验证
于 2022-05-07 17:03:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xqnode/article/details/124634370
版权
本文详细介绍了使用SpringBoot集成邮件服务实现邮箱登录验证和忘记密码重置的过程，包括配置SMTP服务器、发送不同类型的验证码邮件、数据库验证及前端交互。涉及到的技术点包括SpringBoot的邮件发送、Vue前端页面以及数据库操作。
摘要由CSDN通过智能技术生成

B站直播讲解视频：https://www.bilibili.com/video/BV14Y4y1C7B1

三连再看，养成良好的习惯！

Springboot代码和配置

pom.xml

 <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-mail</artifactId>
 </dependency>

application.yml

spring:
  mail:
#    protocol: smtps
  protocol: smtp
  # 配置 SMTP 服务器地址
  host: smtp.qq.com
  # 发送者邮箱
#    username: xqnode@163.com
  username: 1938976892@qq.com
  # 配置密码，注意不是真正的密码，而是刚刚申请到的授权码
  password: xxx
  # 端口号465或587
#    port: 465
  port: 587
  # 默认的邮件编码为UTF-8
  default-encoding: UTF-8

UserController.java

// 邮箱登录
@AuthAccess
@PostMapping("/loginEmail")
public Result loginEmail(@RequestBody UserDTO userDTO) {
    String email = userDTO.getEmail();
    String code = userDTO.getCode();
    if (StrUtil.isBlank(email) || StrUtil.isBlank(code)) {
        return Result.error(Constants.CODE_400, "参数错误");
    }
    UserDTO dto = userService.loginEmail(userDTO);
    return Result.success(dto);
}

// 忘记密码 | 重置密码
@AuthAccess
@PutMapping("/reset")
public Result reset(@RequestBody UserPasswordDTO userPasswordDTO) {
    if (StrUtil.isBlank(userPasswordDTO.getEmail()) || StrUtil.isBlank(userPasswordDTO.getCode())) {
        throw new ServiceException("-1", "参数异常");
    }
    // 先查询 邮箱验证的表，看看之前有没有发送过  邮箱code，如果不存在，就重新获取
    QueryWrapper<Validation> validationQueryWrapper = new QueryWrapper<>();
    validationQueryWrapper.eq("email", userPasswordDTO.getEmail());
    validationQueryWrapper.eq("code", userPasswordDTO.getCode());
    validationQueryWrapper.ge("time", new Date());  // 查询数据库没过期的code, where time >= new Date()
    Validation one = validationService.getOne(validationQueryWrapper);
    if (one == null) {
        throw new ServiceException("-1", "验证码过期，请重新获取");
    }

    // 如果验证通过了，就查询要不过户的信息
    QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();
    userQueryWrapper.eq("email", userPasswordDTO.getEmail());  //存根据email查询用户信息
    User user = userService.getOne(userQueryWrapper);

    // 重置密码
    user.setPassword("123");
    userService.updateById(user);
    return Result.success();
}

// 发送邮箱验证码
@AuthAccess
@GetMapping("/email/{email}/{type}")
public Result sendEmailCode(@PathVariable String email, @PathVariable Integer type) throws MessagingException {
    if(StrUtil.isBlank(email)) {
        throw new ServiceException(Constants.CODE_400, "参数错误");
    }
    if(type == null) {
        throw new ServiceException(Constants.CODE_400, "参数错误");
    }
    userService.sendEmailCode(email, type);
    return Result.success();
}

UserDTO.java

@Data
public class UserDTO {
    private Integer id;
    private String username;
    private String email;
    private String code;
    private String password;
    private String nickname;
    private String avatarUrl;
    private String token;
    private String role;
    private List<Menu> menus;
}

UserPasswordDTO.java

@Data
public class UserPasswordDTO {
    private String username;
    private String phone;
    private String password;
    private String newPassword;
    private String email;
    private String code;
}

UserServiceImpl.java

// 不要忘记导入相关的依赖和配置
@Autowired
JavaMailSender javaMailSender;

@Value("${spring.mail.username}")
private String from;

// 邮箱验证
@Override
public UserDTO loginEmail(UserDTO userDTO) {
    String email = userDTO.getEmail();
    String code = userDTO.getCode();

    // 先查询 邮箱验证的表，看看之前有没有发送过  邮箱code，如果不存在，就重新获取
    QueryWrapper<Validation> validationQueryWrapper = new QueryWrapper<>();
    validationQueryWrapper.eq("email", email);
    validationQueryWrapper.eq("code", code);
    validationQueryWrapper.ge("time", new Date());  // 查询数据库没过期的code, where time >= new Date()
    Validation one = validationService.getOne(validationQueryWrapper);
    if (one == null) {
        throw new ServiceException("-1", "验证码过期，请重新获取");
    }

    // 如果验证通过了，就查询要不过户的信息
    QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();
    userQueryWrapper.eq("email", email);  //存根据email查询用户信息
    User user = getOne(userQueryWrapper);

    if (user == null) {
        throw new ServiceException("-1", "未找到用户");
    }

    BeanUtil.copyProperties(user, userDTO, true);
    // 设置token
    String token = TokenUtils.genToken(user.getId().toString(), user.getPassword());
    userDTO.setToken(token);

    String role = user.getRole();
    // 设置用户的菜单列表
    List<Menu> roleMenus = getRoleMenus(role);
    userDTO.setMenus(roleMenus);
    return userDTO;
}

// 发送邮箱验证码
@Override
public void sendEmailCode(String email, Integer type) throws MessagingException {
    Date now = new Date();
    // 先查询同类型code
    QueryWrapper<Validation> validationQueryWrapper = new QueryWrapper<>();
    validationQueryWrapper.eq("email", email);
    validationQueryWrapper.eq("type", type);
    validationQueryWrapper.ge("time", now);  // 查询数据库没过期的code
    Validation validation = validationService.getOne(validationQueryWrapper);
    if (validation != null) {
        throw new ServiceException("-1", "当前您的验证码仍然有效，请不要重复发送");
    }


    String code = RandomUtil.randomNumbers(4); // 随机一个 4位长度的验证码

    if (ValidationEnum.LOGIN.getCode().equals(type)) {
        SimpleMailMessage message=new SimpleMailMessage();
        message.setFrom(from);  // 发送人
        message.setTo(email);
        message.setSentDate(now);
        message.setSubject("【程序员青戈】登录邮箱验证");
        message.setText("您本次登录的验证码是：" + code + "，有效期5分钟。请妥善保管，切勿泄露");
        javaMailSender.send(message);
    } else if (ValidationEnum.FORGET_PASS.getCode().equals(type)){
        MimeMessage message = javaMailSender.createMimeMessage();
        MimeMessageHelper helper=new MimeMessageHelper(message);
        helper.setSubject("【程序员青戈】忘记密码验证");
        helper.setFrom(from);  // 发送人
        helper.setTo(email);
        helper.setSentDate(now);  // 富文本
        String context="<b>尊敬的用户：</b><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您好，您本次忘记密码的验证码是："+
                "<b color=\"'red'\">"  + code + "</b><br>"
                +"，有效期5分钟。请妥善保管，切勿泄露";
        helper.setText(context, true);
        javaMailSender.send(message);
    }

    // 发送成功之后，把验证码存到数据库
    validationService.saveCode(email, code, type, DateUtil.offsetMinute(now, 5));
}

ValidationServiceImpl.java

@Service
public class ValidationServiceImpl extends ServiceImpl<ValidationMapper, Validation> implements IValidationService {

    @Transactional
    @Override
    public void saveCode(String email, String code, Integer type, DateTime expireDate) {

        Validation validation = new Validation();
        validation.setEmail(email);
        validation.setCode(code);
        validation.setType(type);
        validation.setTime(expireDate);

        // 删除同类型的验证
        UpdateWrapper<Validation> validationUpdateWrapper = new UpdateWrapper<>();
        validationUpdateWrapper.eq("email", email);
        validationUpdateWrapper.eq("type", type);
        remove(validationUpdateWrapper);

        // 再插入新的code
        save(validation);
    }
}

数据库SQL

DROP TABLE IF EXISTS `validation`;
CREATE TABLE `validation`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL COMMENT '用户邮箱',
  `code` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL COMMENT '验证码',
  `type` int(1) NULL DEFAULT NULL COMMENT '验证类型',
  `time` timestamp(0) NULL DEFAULT NULL COMMENT '过期时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 12 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci ROW_FORMAT = Dynamic;

前端Vue

Login.vue

<template>
  <div class="wrapper">
    <div style="height: 60px; line-height: 60px; font-size: 20px; padding-left: 50px; color: white;
      background-color: rgba(0,0,0,0.2)">管理系统</div>

    <div style="margin: 100px auto; background: white; width: 500px; border-radius: 10px; overflow: hidden">
      <el-tabs type="card" v-model="activeName" >

        <el-tab-pane label="账号密码登录" name="first">
          <div style="margin: 20px auto; background-color: #fff; width: 350px; height: 220px; padding: 20px; border-radius: 10px">
            <el-form :model="user" :rules="rules" ref="userForm">
              <el-form-item prop="username">
                <el-input size="medium" prefix-icon="el-icon-user" v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input size="medium" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
              </el-form-item>
<!--                      <el-form-item>-->
<!--                        <div style="display: flex">-->
<!--                          <el-input size="mid" v-model="code" style="width: 200px"></el-input>-->
<!--                          <span @click="refreshCode" style="cursor: pointer; flex: 1;">-->
<!--                            <Identify :identifyCode="identifyCode"></Identify>-->
<!--                         </span>-->
<!--                        </div>-->
<!--                      </el-form-item>-->

              <el-form-item style="margin: 10px 0; text-align: right">
                <el-button type="warning" size="medium"  autocomplete="off" @click="$router.push('/register')">前往注册</el-button>
                <el-button type="primary" size="medium"  autocomplete="off" @click="loginAccount">登录</el-button>

              </el-form-item>
              <el-form-item style="margin: 10px 0; text-align: right">
                <el-button type="text" size="medium"  autocomplete="off" @click="handlePass">找回密码</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <el-tab-pane label="邮箱登录" name="second">
          <div style="margin: 20px auto; background-color: #fff; width: 350px; height: 220px; padding: 20px; border-radius: 10px">
            <el-form :model="user" :rules="rules" ref="userForm">
              <el-form-item prop="email">
                <el-input size="medium" prefix-icon="el-icon-message" v-model="user.email"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input size="medium" prefix-icon="el-icon-lock" style="width: 190px" v-model="user.code"></el-input>
                <el-button type="primary" size="medium" class="ml-5" @click="sendEmailCode(1)">获取验证码</el-button>
              </el-form-item>

              <el-form-item style="margin: 10px 0; text-align: right">
                <el-button type="warning" size="medium"  autocomplete="off" @click="$router.push('/register')">前往注册</el-button>
                <el-button type="primary" size="medium"  autocomplete="off" @click="loginEmail">登录</el-button>

              </el-form-item>
              <el-form-item style="margin: 10px 0; text-align: right">
                <el-button type="text" size="mid"  autocomplete="off" @click="handlePass">找回密码</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

      </el-tabs>
    </div>



    <el-dialog title="找回密码" :visible.sync="dialogFormVisible" width="30%" >
      <el-form label-width="100px" size="small">
        <el-form-item label="邮箱">
          <el-input size="medium" v-model="pass.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input size="medium"  style="width: 200px" v-model="pass.code"></el-input>
          <el-button type="primary" size="medium" class="ml-5" @click="sendEmailCode(2)">获取验证码</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="passwordBack">重置密码</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {resetRouter, setRoutes} from "@/router";
import Identify from "@/components/Identify";

export default {
  name: "Login",
  data() {
    return {
      activeName: 'first',
      user: {},
      pass: {},
      code: '',
      dialogFormVisible: false,
      // 图片验证码
      identifyCode: '',
      // 验证码规则
      identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur' }
        ]
      }
    }
  },
  components: {Identify},
  mounted() {
    // 重置路由
    resetRouter()
    this.refreshCode()
  },
  methods: {
    sendEmailCode(type) {
      let email;
      if (type === 1) {
        email = this.user.email
      } else if(type === 2) {
        email = this.pass.email
      }
      if(!email) {
        this.$message.warning("请输入邮箱账号")
        return
      }
      if(!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(email)) {
        this.$message.warning("请输入正确的邮箱账号")
        return
      }
      // 发送邮箱验证码
      this.request.get("/user/email/" + email + "/" + type).then(res => {
        if (res.code === '200') {
          this.$message.success("发送成功")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loginAccount() {
      // if (this.code !== this.identifyCode.toLowerCase()) {
      //   this.$message({
      //     type: "error",
      //     message: "验证码错误"
      //   })
      //   return;
      // }
      this.$refs['userForm'].validate((valid) => {
        if (valid) {  // 表单校验合法
          this.request.post("/user/loginAccount", this.user).then(res => {
            if(res.code === '200') {
              localStorage.setItem("user", JSON.stringify(res.data))  // 存储用户信息到浏览器
              localStorage.setItem("menus", JSON.stringify(res.data.menus))  // 存储用户信息到浏览器

              // 动态设置当前用户的路由
              setRoutes()
              this.$router.push("/")
              this.$message.success("登录成功")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      });
    },
    loginEmail() {
      if (!this.user.email) {
        this.$message.warning("请输入邮箱")
        return
      }
      if (!this.user.code) {
        this.$message.warning("请输入验证码")
        return
      }
      this.request.post("/user/loginEmail", this.user).then(res => {
        if(res.code === '200') {
          localStorage.setItem("user", JSON.stringify(res.data))  // 存储用户信息到浏览器
          localStorage.setItem("menus", JSON.stringify(res.data.menus))  // 存储用户信息到浏览器

          // 动态设置当前用户的路由
          setRoutes()
          this.$router.push("/")
          this.$message.success("登录成功")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[Math.floor(Math.random() * (this.identifyCodes.length))]
      }
    },
    handlePass() {
      this.dialogFormVisible = true
      this.pass = {}
    },
    passwordBack() {
      this.request.put("/user/reset", this.pass).then(res => {
        if (res.code === '200') {
          this.$message.success("重置密码成功，新密码为：123，请尽快修改密码")
          this.dialogFormVisible = false
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style>
.wrapper {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #4169E1 , 	#87CEFA);
  overflow: hidden;
}
</style>

到这里，我们就完成了本次邮箱登录的全部代码了，如果觉得有帮助，麻烦动动你可爱的小手，点赞，来个三连，我会继续分享更多实用的干或，可以关注我的B站：程序员青戈。

程序员青戈
关注
专栏目录
springboot+vue实现发送邮箱验证码实现注册功能
qq_53521351的博客
09-06 1494
前几天做一个小项目需要实现springboot集成redis实现邮箱注册功能，当时参考了某位大佬的博客。来实现邮箱发送验证码的功能。这样后台功能就实现完成了。接下来就是写注册接口。
SpringBoot+Vue实现邮箱登录注册功能
热门推荐
FGGIT的博客
11-22 1万+
SpringBoot+Vue实现邮箱登录注册功能
springboot实现邮箱验证码功能
08-25
主要为大家详细介绍了springboot实现邮箱验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Spring Boot + vue.js下实现向邮箱发送验证码功能
MrZhang835的博客
03-14 4366
这两天刚好要做这一块，在网上找了一些前辈们发表的文章，奈何哥哥们都留了一手，于是自己借鉴前辈们的文章，自己整理了一下完整的邮箱验证码功能（附加一个RestResponse工具类） 1.配置application.properties #邮件发送配置 spring.mail.default-encoding=UTF-8 spring.mail.host=smtp.qq.com spring.mail...
Springboot+Vue 邮件找回密码
lxjlxj2333的博客
05-18 1283
在这里附上我自己用的redis版本，用其他版本的可以自己去找资源，百度网盘链接：https://pan.baidu.com/s/1WPAksWV-Vi8vDZz_i2YI5w提取码：ovxd首先解压到一个文件，然后双击redies-server.exe即可运行redis。
基于SpringBoot实现邮箱找回密码
我这孩子从小记性就不好，什么东西都要写下来才放心
04-29 5121
基于邮箱发送验证码的方式 实现思路 用户点击忘记密码 用户输入用户名以及邮箱，点击获取验证码 后端校验用户名以及邮箱，正确后生成验证码 生成的验证码作为value，前缀加用户名为key，放入redis中并设置过期时间 用户输入验证码以及新的密码点击保存 后端通过前缀+用户名获取验证码，校验验证码的正确性 密码修改成功 前端UI页面 图为ProcessOn所画，可作为借鉴。也可设计为先验证用户名然后再进入改密码页面。 发件邮箱要求 作者使用的是163邮箱（其他邮箱也基本一致），需要设置POP3/SM.
Vue+Springboot+shiro+QQ邮箱验证码的登录案例.rar
09-28
这是一个Vue+Springboot+shiro的登录案例。前端采用Vue+Elementui，对于axios进行了封装，实现了前端的路由控制，登录状态检测等。后端采用Springboot，数据持久化工具采用Mybatis，对于返回的数据进行了封装，对于JSON进行了封装，实现了跨域请求等，目录结构清晰明了。安全框架采用shiro。后端实现了QQ邮箱发送验证码的功能，代码简洁，一看就明白。数据库采用MySQL。
基于vue+springboot+mybatis+邮箱注册验证+docker实现员工工资系统
06-19
该系统是基于现代Web开发技术栈构建的，主要利用Vue.js作为前端框架，SpringBoot作为后端服务框架，MyBatis作为数据访问层组件，并且整合了邮箱验证功能以及Docker容器化部署。以下是这些技术在系统中的应用及重要性...
vue+springboot+redis+kaptcha实现登录验证码
04-10
本教程将介绍如何结合Vue.js前端框架、Spring Boot后端框架、Redis缓存服务以及Kaptcha验证码技术，实现一个前后端分离的登录页面验证码功能。这个组合可以提供高效、安全且用户友好的验证机制。 首先，Vue.js是一...
springboot+vue登陆验证
KingEverything的博客
10-30 1168
1.跳转html就不写了，下面是html代码 <input type="text" class="input input-big" name="nu_name" placeholder="登录账号" data-validate="required:请填写账号" v-model="nu_name" /> <input type="password" class="input inp...
305-基于springboot+vue的相册智能管理系统（源码+数据库）
06-07
相册智能管理系统，基于springboot+vue开发的前后端项目，使用阿里云OSS存储进行照片的存储，使用阿里云图片标签智能识别进行归类，主要功能有 1.用户登录注册 2.邮箱验证码验证 3.个人资料设置 4.图片上传 5，相册...
SpringBoot+Vue实现发送邮箱验证码
Json_xun的博客
06-13 1309
通过springboot+vue实现邮箱验证码的发送。
vue实现使用邮箱登录获取验证码的功能
q1054007919的博客
06-05 1263
通过邮箱获取到验证码实现对密码的修改
Springboot和vue实现邮件校验码发送，修改密码
qq_46199553的博客
02-21 861
参考大神的 点击跳转 我自己也对邮件的功能进行了实践效果图
springBoot 判断用户名、手机号、邮箱注册关键代码
qq_40940622的博客
01-13 1769
/** * 用户登录-使用图灵验证码 * * @param captcha * @param captchaKey * @param user * @param request * @param response * @return */ @Transactional(rollbackFor = Exception.class, isolation = Isolation.READ_COMMITTED...
SpringBoot+Vue实现邮箱登录注册找回密码（附接口文档）
小袁同学的博客
05-26 1万+
花了几个小时做了一个SpringBoot+Vue实现邮箱登录注册找回密码的demo项目，项目已在Gitee上开源，Gitee开源地址，跟着我的脚本一步一步实现代码，学会了你也能自己写出来 （或者根据接口文档自己写后端），涉及到redis缓存，threadpool线程池，邮箱服务等
SpringBoot+Vue实现验证码登录
weixin_49141728的博客
08-11 5294
最近做项目时使用到了通过验证码图片code参数实现登录验证的技术，这里记录一下，以供参考 文章目录效果图后端接口编写验证码工具类Controller定义请求登录验证前端配置图片请求及点击刷新请求登录验证 效果图 后端接口编写 验证码工具类 先定义一个工具类，用于生成验证码图片 import javax.imageio.ImageIO; import java.awt.*; import java.awt.image.BufferedImage; import java.io.IOExcept.
Springboot实现邮箱验证码注册、找回密码和登录功能
Aiwin的博客
11-08 1万+
Springboot实现邮箱验证码注册、找回密码(三分钟有效)和Cookie免登录、加密记住我功能
基于SpringBoot实现邮箱验证码注册
kurtosis的博客
06-13 3220
基于SpringBoot实现邮箱验证码注册，向邮箱发送随机验证码， 收到用户输入验证码进行校验完成注册。
用vue和Springboot实现一个短信验证码发送验证功能
最新发布
Zm6Cc的博客
12-30 884
使用Springboot和Vue3完场一个基本的短信发送和验证码校验验证的功能
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

程序员青戈

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

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

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

打赏作者

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

抵扣说明：

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

余额充值