我的项目day04:首页，轮播图前后端，登录注册功能设计，cgi,uwsgi,多方式登录接口，手机号是否存在接口，腾讯云短信，模态框，腾讯短信功能二次封装，短信验证接口，短信注册接口，断行注册接口

最新推荐文章于 2024-05-30 16:26:30 发布
最新推荐文章于 2024-05-30 16:26:30 发布
阅读量482 收藏
点赞数
分类专栏： drf vue django 文章标签： 腾讯云 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yydsaoligei/article/details/127856770
版权
django 同时被 3 个专栏收录
32 篇文章 2 订阅
订阅专栏
drf
6 篇文章 0 订阅
订阅专栏
vue
6 篇文章 0 订阅
订阅专栏

目录标题

一：前台首页组件编写

# HomeView.vue 页面组件
# Header.vue   头部组件
# Banner.vue   轮播图组件
# Footer.vue   尾部组件

1.1 HomeView.vue

<template>
  <div class="home">
    <Header></Header>
    <Banner></Banner>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header'
import Banner from '@/components/Banner'
import Footer from '@/components/Footer'

export default {
  name: 'HomeView',
  data() {
    return {}
  },
  components: {
    Header, Banner, Footer
  }

}
</script>

1.2 Header.vue

<template>
  <div class="header">
    <div class="slogan">
      <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
    </div>
    <div class="nav">
      <ul class="left-part">
        <li class="logo">
          <router-link to="/">
            <img src="../assets/img/head-logo.svg" alt="">
          </router-link>
        </li>
        <li class="ele">
          <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
        </li>
      </ul>

      <div class="right-part">
        <div>
          <span>登录</span>
          <span class="line">|</span>
          <span>注册</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      url_path: sessionStorage.url_path || '/',
    }
  },
  methods: {
    goPage(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        // 传入的参数，如果不等于当前路径，就跳转
        this.$router.push(url_path)
      }
      sessionStorage.url_path = url_path;
    },
  },
  created() {
    sessionStorage.url_path = this.$route.path
    this.url_path = this.$route.path
  }
}
</script>

<style scoped>
.header {
  background-color: white;
  box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
  content: "";
  display: block;
  clear: both;
}

.slogan {
  background-color: #eee;
  height: 40px;
}

.slogan p {
  width: 1200px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
}

.nav {
  background-color: white;
  user-select: none;
  width: 1200px;
  margin: 0 auto;

}

.nav ul {
  padding: 15px 0;
  float: left;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block;
}

.nav ul li {
  float: left;
}

.logo {
  margin-right: 20px;
}

.ele {
  margin: 0 20px;
}

.ele span {
  display: block;
  font: 15px/36px '微软雅黑';
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ele span:hover {
  border-bottom-color: orange;
}

.ele span.active {
  color: orange;
  border-bottom-color: orange;
}

.right-part {
  float: right;
}

.right-part .line {
  margin: 0 10px;
}

.right-part span {
  line-height: 68px;
  cursor: pointer;
}
</style>

1.3 Banner.vue

<template>
  <div class="banner">
    <el-carousel :interval="5000" arrow="always" height="400px">
      <el-carousel-item v-for="item in bannerList" :key="item.title">
        <div v-if="item.image.indexOf('http')==-1">
          <router-link :to="item.link"><img :src="item.image" alt=""></router-link>
        </div>
        <div v-else>
          <a :href="item.link"><img :src="item.image" alt=""></a>
        </div>

      </el-carousel-item>
    </el-carousel>

  </div>

</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      bannerList: []
    }
  },
  created() {
    this.$axios.get(this.$settings.BASE_URL + 'home/banner/').then(res => {
      this.bannerList = res.data.result

    })
  }
}
</script>

<style scoped>
.el-carousel__item {
  height: 400px;
  min-width: 1200px;
}

.el-carousel__item img {
  height: 400px;
  margin-left: calc(50% - 1920px / 2);
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

1.4 Footer.vue

<template>
  <div class="footer">
    <ul>
      <li>关于我们</li>
      <li>联系我们</li>
      <li>商务合作</li>
      <li>帮助中心</li>
      <li>意见反馈</li>
      <li>新手指南</li>
    </ul>
    <p>Copyright © luffycity.com版权所有 | 京ICP备17072161号-1</p>
  </div>
</template>

<script>
export default {
  name: "Footer"
}
</script>

<style scoped>
.footer {
        width: 100%;
        height: 128px;
        background: #25292e;
        color: #fff;
    }

    .footer ul {
        margin: 0 auto 16px;
        padding-top: 38px;
        width: 810px;
    }

    .footer ul li {
        float: left;
        width: 112px;
        margin: 0 10px;
        text-align: center;
        font-size: 14px;
    }

    .footer ul::after {
        content: "";
        display: block;
        clear: both;
    }

    .footer p {
        text-align: center;
        font-size: 12px;
    }
</style>

二： 首页轮播图功能前后端打通

2.1 Banner.vue

<template>
  <div class="banner">
    <el-carousel :interval="5000" arrow="always" height="400px">
      <el-carousel-item v-for="item in bannerList" :key="item.title">
        <div v-if="item.image.indexOf('http')==-1">
          <router-link :to="item.link"><img :src="item.image" alt=""></router-link>
        </div>
        <div v-else>
          <a :href="item.link"><img :src="item.image" alt=""></a>
        </div>

      </el-carousel-item>
    </el-carousel>

  </div>

</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      bannerList: []
    }
  },
  created() {
    this.$axios.get(this.$settings.BASE_URL + 'home/banner/').then(res => {
      this.bannerList = res.data.result

    })
  }
}
</script>

<style scoped>
.el-carousel__item {
  height: 400px;
  min-width: 1200px;
}

.el-carousel__item img {
  height: 400px;
  margin-left: calc(50% - 1920px / 2);
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

三：登录注册功能设计

# 后端接口
	1 账号/手机号/邮箱+密码登录接口
    2 手机号+验证码登录接口
    3 发送手机验证码接口  （第三方发送短信）
    4 注册接口--》手机号，验证码，密码
    5 判断手机号是否存在接口

四： cgi fastcig WSGI uwsgi uWSGI

1 cgi fastcig WSGI uwsgi uWSGI  
	# cgi:通用网关接口（Common Gateway Interface/CGI）是一种重要的互联网技术，可以让一个客户端，从网页浏览器向执行在网络服务器上的程序请求数据。CGI描述了服务器和请求处理程序之间传输数据的一种标准。
     一句话总结： 一个标准，定义了客户端服务器之间如何传数据
    
    # fastcig:快速通用网关接口（Fast Common Gateway Interface／FastCGI）是一种让交互程序与Web服务器通信的协议。FastCGI是早期通用网关接口（CGI）的增强版本
      一句话总结： CGI的升级版
      常用的fastcgi软件： 
            Apache HTTP Server (部分)    ：LAMP  LNMP
            Nginx（主流）:nginx是一个符合fastcgi协议的软件，处于浏览器和web程序之间，主要做请求转发和负载均衡，也可以称之为服务器中间件
            Microsoft IIS：windows server
           

   # WSGI：Web服务器网关接口（Python Web Server Gateway Interface，缩写为WSGI）是为Python语言定义的Web服务器和Web应用程序或框架之间的一种简单而通用的接口。自从WSGI被开发出来以后，许多其它语言中也出现了类似接口
	一句话总结： 为Python定义的web服务器和web框架之间的接口标准
    wsgiref：性能很低，python实现的，django内置了，测试阶段用，上线不用
    uWSIG:性能高，c实现的
    gunicorn：python实现的
    
  # uWSGI： 符合wsgi协议的web服务器，上面标准的具体实现

  # uwsgi:uWSGI服务器，自有协议
    
    

3 Apache
	-Apache 公司
    -Apache  web服务器
    -Apache  开源协议
    	-Kafka ：apache顶级开源项目
        -echars：原来是百度开发的，交给了apache孵化

五： 首页中间部分样式

<div class="course">
      <el-row>
        <el-col :span="6" v-for="(o, index) in 8" :key="o" class="course_detail">
          <el-card :body-style="{ padding: '0px' }">
            <img src="https://tva1.sinaimg.cn/large/e6c9d24egy1h1g0zd133mj20l20a875i.jpg"
                 class="image">
            <div style="padding: 14px;">
              <span>推荐课程</span>
              <div class="bottom clearfix">
                <time class="time">价格：999</time>
                <el-button type="text" class="button">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <img src="https://tva1.sinaimg.cn/large/e6c9d24egy1h1g112oiclj224l0u0jxl.jpg" alt="" width="100%" height="500px">
    
    
    
    
<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.course_detail {
  padding: 50px;
}
</style>

六： 多方式登录接口

# 登录注册
	1 多方式登录 【用户名、邮箱、手机号+密码】
    4 校验手机号是否存在
    
    
    2 验证码登录
    3 发送验证码
    5 手机号注册接口
    
    
# 多方式登录
	-{username:用户名/邮箱/手机号,password:123}---->post请求
    -之前写的逻辑，校验用户，是写在视图类的方法中
    -今天写：咱们把逻辑写在序列化类中

视图类

# post--->查询--->自动生成路由，action装饰器可以在视图类中写多个函数
from rest_framework.viewsets import ViewSet, GenericViewSet, ViewSetMixin
from rest_framework.decorators import action
from .models import UserInfo
from .serializer import UserMulLoginSerializer

from utils.response import APIResponse


class UserView(ViewSet):
    @action(methods=['POST'], detail=False)
    def mul_login(self, request):
        # 1 老写法
        # username=request.data.get('username')
        # password=request.data.get('password')
        # # 查询用户，
        # UserInfo.objects.filter(username=username,password=password)
        # # 签发token
        # # 返回
        # 2 新写法：使用序列化类
        ser = UserMulLoginSerializer(data=request.data)
        # jwt 模块的登录就是这么写的
        ser.is_valid(raise_exception=True)  # 会执行：序列化类字段自己的校验规则，局部钩子，全局钩子
        # 用户名密码校验通过了，在序列化类中--》签发token
        token = ser.context.get('token')
        username = ser.context.get('username')
        icon = ser.context.get('icon')  # icon是个对象  字符串
        return APIResponse(token=token, username=username,
                           icon=icon)  # 前端看到的样子{code:100,msg:成功，token:adsfa,username:root,icon:http://adsfasd.png}

序列化类

from rest_framework import serializers
from .models import UserInfo
import re
from django.contrib.auth import authenticate
from rest_framework.exceptions import ValidationError
from rest_framework_jwt.settings import api_settings

jwt_payload_handler = api_settings.JWT_PAYLOAD_HANDLER
jwt_encode_handler = api_settings.JWT_ENCODE_HANDLER


# 这个序列类，只用来做登录校验，不做序列化，不做反序列化
class UserMulLoginSerializer(serializers.ModelSerializer):
    username = serializers.CharField()  # 重写，优先用现在的，就没有unique的限制了

    class Meta:
        model = UserInfo
        fields = ['username', 'password']

    # 封装之隐藏属性  __表示隐藏， _并不是隐藏，公司里约定俗成用 _ 表示只在内部用，如果外部想用，也可以用
    def _get_user(self, attrs):
        # attrs 是校验过后的数据：字段自己的规则【字段自己有规则：坑】和局部钩子
        username = attrs.get('username')
        password = attrs.get('password')
        # username可能是用户名，邮箱，手机号---》使用正则判断
        if re.match(r'^1[3-9][0-9]{9}$', username):
            user = authenticate(mobile=username, password=password)
        elif re.match(r'^.+@.+$', username):  # adsa@adsf  会有bug，用户名中如果有@，登录不了了
            user = authenticate(email=username, password=password)
        else:
            user = authenticate(username=username, password=password)

        if user:
            return user
        else:
            raise ValidationError('用户名或密码错误')

    def _get_token(self, user):
        try:
            payload = jwt_payload_handler(user)
            token = jwt_encode_handler(payload)
            return token
        except Exception as e:
            raise ValidationError(str(e))

    # 还要写别的
    def validate(self, attrs):
        # 1  取出用户名和密码,校验用户是否存在
        user = self._get_user(attrs)
        # 2 签发token
        token = self._get_token(user)
        # 3 把token放到序列化类对象中
        self.context['token'] = token
        self.context['username'] = user.username
        self.context['icon'] = 'http://127.0.0.1:8000/media/'+str(user.icon) # 这是个对象，可能会有问题
        # self.context['icon'] = user.icon  # 这是个对象，可能会有问题
        # 以后如果有问题，都抛异常
        # 如没有问题，返回attrs
        return attrs

路由

from django.contrib import admin
from django.urls import path, re_path
from home import views
from django.views.static import serve
from django.conf import settings
from . import views

from rest_framework.routers import SimpleRouter

router = SimpleRouter()
# 127.0.0.1:8080/api/v1/userinfo/user/mul_login
router.register('user', views.UserView, 'user')

urlpatterns = [
]
urlpatterns += router.urls

七：手机号是否存在接口

# get请求：  127.0.0.1:8080/api/v1/userinfo/user/mobile/?mobile=132222222

视图类

class UserView(ViewSet):
    @action(methods=['GET'], detail=False)
    def mobile(self, request):
        try:
            mobile = request.query_params.get('mobile')
            UserInfo.objects.get(mobile=mobile)  # 有且只有一个才不报错，
            return APIResponse(msg='手机号存在')  # {code:100,msg:手机号存在}
        except Exception as e:
            raise APIException('手机号不存在')  # {code：999,msg:手机号不存在}

八：腾讯云短信介绍和申请

# 咱们要写发送短信接口，我们要发短信，借助于短信运营商

# 腾讯云开放平台，有很多开放的接口供咱们使用，咱们用的是短信
	-注册平台---》找到短信
    -https://console.cloud.tencent.com/smsv2
    
    
# 申请使用腾讯云短信：
	1 创建签名：使用公众号申请
    	-网站：备案：工信部备案
        -申请个人一个公众号：
        	-https://mp.weixin.qq.com/
        -等审核通过
    2 申请模板：发送短信的模板 {1}  {2} 后期用代码填上
    
    3 免费赠送100条
        
        
    4 代码发送短信：参照文档写代码：https://cloud.tencent.com/document/product/382/13444
    	-v2 老一些
        -v3 最新

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Ndh0Ibc-1668434974686)(C:\Users\Administrator\Desktop\学期笔记库\luffyday567.assets\image-20221110121519296.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lXqvJ8GI-1668434974688)(C:\Users\Administrator\Desktop\学期笔记库\luffyday567.assets\image-20221110120341171.png)]

什么是api，什么是sdk

# API文档
	-之前学的接口文档的概念
    -使用api调用，比较麻烦，固定输入，接受固定的返回
    -使用postman都可以测试，携带你的认证的秘钥。
    
# SDK：Software Development Kit 软件开发工具包
	-分语言的
    -基于API，使用某个编程语言封装的包
    -例如python：pip install 包
    	-包.发短信(参数)
        
   -一般厂商都会提供各大主流语言的sdk


# 腾讯短信sdk使用步骤
    1 已开通短信服务，创建签名和模板并通过审核    # 开了
    2 如需发送国内短信，需要先 购买国内短信套餐包。 #赠送了
    3 已准备依赖环境：Python 2.7 - 3.6 版本。    #我们有
    4 已在访问管理控制台 >API密钥管理页面获取 SecretID 和 SecretKey。
        SecretID 用于标识 API 调用者的身份。
        SecretKey 用于加密签名字符串和服务器端验证签名字符串的密钥，SecretKey 需妥善保管
    5 短信的调用地址为sms.tencentcloudapi.com。

九： 登录注册模态框分析

# 如果是跳转新的页面
	-路由中配置一个路由
    -写一个视图组件
    
# 弹窗，盖在主页上---》模态框

Login.vue

<template>
  <div class="login">
    <span @click="handleClose">X</span>
  </div>
</template>

<script>
export default {
  name: "Login",
  methods:{
    handleClose(){
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

Header.vue

<div class="right-part">
        <div>
          <span @click="goLogin">登录</span>
          <span class="line">|</span>
          <span>注册</span>
        </div>
        <Login v-if="loginShow" @close="closeLogin"></Login>
</div>
    
    
    
 export default {
  name: "Header",
  data() {
    return {
      url_path: sessionStorage.url_path || '/',
      loginShow: false
    }
  },
  methods: {
    goPage(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        // 传入的参数，如果不等于当前路径，就跳转
        this.$router.push(url_path)
      }
      sessionStorage.url_path = url_path;
    },
    goLogin() {
      this.loginShow = true
    },
    closeLogin() {
      this.loginShow = false
    }
  },
  created() {
    sessionStorage.url_path = this.$route.path
    this.url_path = this.$route.path
  },
  components: {
    Login
  }
}

十： 登录注册前端页面复制

Header.vue

<template>
  <div class="header">
    <div class="slogan">
      <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
    </div>
    <div class="nav">
      <ul class="left-part">
        <li class="logo">
          <router-link to="/">
            <img src="../assets/img/head-logo.svg" alt="">
          </router-link>
        </li>
        <li class="ele">
          <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
        </li>
        <li class="ele">
          <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
        </li>
      </ul>

      <div class="right-part">
        <div>
          <span @click="put_login">登录</span>
          <span class="line">|</span>
          <span @click="put_register">注册</span>
        </div>
        <Login v-if="is_login" @close="close_login" @go="put_register"></Login>
        <Register v-if="is_register" @close="close_register" @go="put_login"></Register>

      </div>
    </div>
  </div>

</template>

<script>
import Login from "@/components/Login";
import Register from "@/components/Register";

export default {
  name: "Header",
  data() {
    return {
      url_path: sessionStorage.url_path || '/',
      is_login: false,
      is_register: false,
    }
  },
  methods: {
    goPage(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        // 传入的参数，如果不等于当前路径，就跳转
        this.$router.push(url_path)
      }
      sessionStorage.url_path = url_path;
    },
    goLogin() {
      this.loginShow = true
    },
    put_login() {
      this.is_login = true;
      this.is_register = false;
    },
    put_register() {
      this.is_login = false;
      this.is_register = true;
    },
    close_login() {
      this.is_login = false;
    },
    close_register() {
      this.is_register = false;
    }
  },
  created() {
    sessionStorage.url_path = this.$route.path
    this.url_path = this.$route.path
  },
  components: {
    Login,
    Register
  }
}
</script>

<style scoped>
.header {
  background-color: white;
  box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
  content: "";
  display: block;
  clear: both;
}

.slogan {
  background-color: #eee;
  height: 40px;
}

.slogan p {
  width: 1200px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
}

.nav {
  background-color: white;
  user-select: none;
  width: 1200px;
  margin: 0 auto;

}

.nav ul {
  padding: 15px 0;
  float: left;
}

.nav ul:after {
  clear: both;
  content: '';
  display: block;
}

.nav ul li {
  float: left;
}

.logo {
  margin-right: 20px;
}

.ele {
  margin: 0 20px;
}

.ele span {
  display: block;
  font: 15px/36px '微软雅黑';
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ele span:hover {
  border-bottom-color: orange;
}

.ele span.active {
  color: orange;
  border-bottom-color: orange;
}

.right-part {
  float: right;
}

.right-part .line {
  margin: 0 10px;
}

.right-part span {
  line-height: 68px;
  cursor: pointer;
}
</style>

Login.vue

<template>
  <div class="login">
    <div class="box">
      <i class="el-icon-close" @click="close_login"></i>
      <div class="content">
        <div class="nav">
          <span :class="{active: login_method === 'is_pwd'}"
                @click="change_login_method('is_pwd')">密码登录</span>
          <span :class="{active: login_method === 'is_sms'}"
                @click="change_login_method('is_sms')">短信登录</span>
        </div>
        <el-form v-if="login_method === 'is_pwd'">
          <el-input
              placeholder="用户名/手机号/邮箱"
              prefix-icon="el-icon-user"
              v-model="username"
              clearable>
          </el-input>
          <el-input
              placeholder="密码"
              prefix-icon="el-icon-key"
              v-model="password"
              clearable
              show-password>
          </el-input>
          <el-button type="primary">登录</el-button>
        </el-form>
        <el-form v-if="login_method === 'is_sms'">
          <el-input
              placeholder="手机号"
              prefix-icon="el-icon-phone-outline"
              v-model="mobile"
              clearable
              @blur="check_mobile">
          </el-input>
          <el-input
              placeholder="验证码"
              prefix-icon="el-icon-chat-line-round"
              v-model="sms"
              clearable>
            <template slot="append">
              <span class="sms" @click="send_sms">{{ sms_interval }}</span>
            </template>
          </el-input>
          <el-button type="primary">登录</el-button>
        </el-form>
        <div class="foot">
          <span @click="go_register">立即注册</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
      mobile: '',
      sms: '',
      login_method: 'is_pwd',
      sms_interval: '获取验证码',
      is_send: false,
    }
  },
  methods: {
    close_login() {
      this.$emit('close')
    },
    go_register() {
      this.$emit('go')
    },
    change_login_method(method) {
      this.login_method = method;
    },
    check_mobile() {
      if (!this.mobile) return;
      if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
        this.$message({
          message: '手机号有误',
          type: 'warning',
          duration: 1000,
          onClose: () => {
            this.mobile = '';
          }
        });
        return false;
      }
      this.is_send = true;
    },
    send_sms() {

      if (!this.is_send) return;
      this.is_send = false;
      let sms_interval_time = 60;
      this.sms_interval = "发送中...";
      let timer = setInterval(() => {
        if (sms_interval_time <= 1) {
          clearInterval(timer);
          this.sms_interval = "获取验证码";
          this.is_send = true; // 重新回复点击发送功能的条件
        } else {
          sms_interval_time -= 1;
          this.sms_interval = `${sms_interval_time}秒后再发`;
        }
      }, 1000);
    }
  }
}
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
}

.box {
  width: 400px;
  height: 420px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  top: calc(50vh - 210px);
  left: calc(50vw - 200px);
}

.el-icon-close {
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.el-icon-close:hover {
  color: darkred;
}

.content {
  position: absolute;
  top: 40px;
  width: 280px;
  left: 60px;
}

.nav {
  font-size: 20px;
  height: 38px;
  border-bottom: 2px solid darkgrey;
}

.nav > span {
  margin: 0 20px 0 35px;
  color: darkgrey;
  user-select: none;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 2px solid darkgrey;
}

.nav > span.active {
  color: black;
  border-bottom: 3px solid black;
  padding-bottom: 9px;
}

.el-input, .el-button {
  margin-top: 40px;
}

.el-button {
  width: 100%;
  font-size: 18px;
}

.foot > span {
  float: right;
  margin-top: 20px;
  color: orange;
  cursor: pointer;
}

.sms {
  color: orange;
  cursor: pointer;
  display: inline-block;
  width: 70px;
  text-align: center;
  user-select: none;
}
</style>

Register.vue

<template>
  <div class="register">
    <div class="box">
      <i class="el-icon-close" @click="close_register"></i>
      <div class="content">
        <div class="nav">
          <span class="active">新用户注册</span>
        </div>
        <el-form>
          <el-input
              placeholder="手机号"
              prefix-icon="el-icon-phone-outline"
              v-model="mobile"
              clearable
              @blur="check_mobile">
          </el-input>
          <el-input
              placeholder="密码"
              prefix-icon="el-icon-key"
              v-model="password"
              clearable
              show-password>
          </el-input>
          <el-input
              placeholder="验证码"
              prefix-icon="el-icon-chat-line-round"
              v-model="sms"
              clearable>
            <template slot="append">
              <span class="sms" @click="send_sms">{{ sms_interval }}</span>
            </template>
          </el-input>
          <el-button type="primary">注册</el-button>
        </el-form>
        <div class="foot">
          <span @click="go_login">立即登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      mobile: '',
      password: '',
      sms: '',
      sms_interval: '获取验证码',
      is_send: false,
    }
  },
  methods: {
    close_register() {
      this.$emit('close', false)
    },
    go_login() {
      this.$emit('go')
    },
    check_mobile() {
      if (!this.mobile) return;
      if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
        this.$message({
          message: '手机号有误',
          type: 'warning',
          duration: 1000,
          onClose: () => {
            this.mobile = '';
          }
        });
        return false;
      }
      this.is_send = true;
    },
    send_sms() {
      if (!this.is_send) return;
      this.is_send = false;
      let sms_interval_time = 60;
      this.sms_interval = "发送中...";
      let timer = setInterval(() => {
        if (sms_interval_time <= 1) {
          clearInterval(timer);
          this.sms_interval = "获取验证码";
          this.is_send = true; // 重新回复点击发送功能的条件
        } else {
          sms_interval_time -= 1;
          this.sms_interval = `${sms_interval_time}秒后再发`;
        }
      }, 1000);
    }
  }
}
</script>

<style scoped>
.register {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.3);
}

.box {
  width: 400px;
  height: 480px;
  background-color: white;
  border-radius: 10px;
  position: relative;
  top: calc(50vh - 240px);
  left: calc(50vw - 200px);
}

.el-icon-close {
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.el-icon-close:hover {
  color: darkred;
}

.content {
  position: absolute;
  top: 40px;
  width: 280px;
  left: 60px;
}

.nav {
  font-size: 20px;
  height: 38px;
  border-bottom: 2px solid darkgrey;
}

.nav > span {
  margin-left: 90px;
  color: darkgrey;
  user-select: none;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 2px solid darkgrey;
}

.nav > span.active {
  color: black;
  border-bottom: 3px solid black;
  padding-bottom: 9px;
}

.el-input, .el-button {
  margin-top: 40px;
}

.el-button {
  width: 100%;
  font-size: 18px;
}

.foot > span {
  float: right;
  margin-top: 20px;
  color: orange;
  cursor: pointer;
}

.sms {
  color: orange;
  cursor: pointer;
  display: inline-block;
  width: 70px;
  text-align: center;
  user-select: none;
}
</style>

十一：腾讯短信功能二次封装

封装v3版本

# sdk：https://cloud.tencent.com/document/product/382/43196#
# 使用步骤：
	-下载模块：pip3 install tencentcloud-sdk-python

# -*- coding: utf-8 -*-
from tencentcloud.common import credential
from tencentcloud.common.exception.tencent_cloud_sdk_exception import TencentCloudSDKException
# 导入对应产品模块的client models。
from tencentcloud.sms.v20210111 import sms_client, models

# 导入可选配置类
from tencentcloud.common.profile.client_profile import ClientProfile
from tencentcloud.common.profile.http_profile import HttpProfile

try:
    cred = credential.Credential("AKIDTXcdXG6u5C9ycAd7WyFex9ED5VwPpBXp", "LZgaKxTOI0VowVs22qTvDKDtLcfWCiqm")
    httpProfile = HttpProfile()
    httpProfile.reqMethod = "POST"  # post请求(默认为post请求)
    httpProfile.reqTimeout = 30  # 请求超时时间，单位为秒(默认60秒)
    httpProfile.endpoint = "sms.tencentcloudapi.com"  # 指定接入地域域名(默认就近接入)

    # 非必要步骤:
    # 实例化一个客户端配置对象，可以指定超时时间等配置
    clientProfile = ClientProfile()
    clientProfile.signMethod = "TC3-HMAC-SHA256"  # 指定签名算法
    clientProfile.language = "en-US"
    clientProfile.httpProfile = httpProfile
    client = sms_client.SmsClient(cred, "ap-guangzhou", clientProfile)
    req = models.SendSmsRequest()
    req.SmsSdkAppId = "1400763090" # 腾讯短信创建app把app的id号复制过来https://console.cloud.tencent.com/smsv2/app-manage
    # 短信签名内容: 使用 UTF-8 编码，必须填写已审核通过的签名
    # 签名信息可前往 [国内短信](https://console.cloud.tencent.com/smsv2/csms-sign) 或 [国际/港澳台短信](https://console.cloud.tencent.com/smsv2/isms-sign) 的签名管理查看
    req.SignName = "关于金鹏公众号"
    # 模板 ID: 必须填写已审核通过的模板 ID
    # 模板 ID 可前往 [国内短信](https://console.cloud.tencent.com/smsv2/csms-template) 或 [国际/港澳台短信](https://console.cloud.tencent.com/smsv2/isms-template) 的正文模板管理查看
    req.TemplateId = "1603526"
    # 模板参数: 模板参数的个数需要与 TemplateId 对应模板的变量个数保持一致，，若无模板参数，则设置为空
    req.TemplateParamSet = ["8888",'100']
    # 下发手机号码，采用 E.164 标准，+[国家或地区码][手机号]
    # 示例如：+8613711112222， 其中前面有一个+号 ，86为国家码，13711112222为手机号，最多不要超过200个手机号
    req.PhoneNumberSet = ["+8615386800417"]
    # 用户的 session 内容（无需要可忽略）: 可以携带用户侧 ID 等上下文信息，server 会原样返回
    req.SessionContext = ""
    req.ExtendCode = ""
    req.SenderId = ""

    resp = client.SendSms(req)

    # 输出json格式的字符串回包
    print(resp.to_json_string(indent=2))

except TencentCloudSDKException as err:
    print(err)

# 把发送短信封装成包

# 后期别的项目，也要使用发送短信----》只要把包copy到项目中即可

# 封装包：
	-目录结构
    	send_tx_sms  #包名
            __init__.py
            settings.py #配置文件
            sms.py      # 核心文件
            
            
 ###__init__.py
from .sms import get_code,send_sms_by_phone
####  settings.py
SECRET_ID = ''
SECRET_KEY = ''
APP_ID = ''
SIGN_NAME=''
TEMPLATE_ID=''

#####sms.py
# 核心代码
import random

from tencentcloud.common import credential
from tencentcloud.common.exception.tencent_cloud_sdk_exception import TencentCloudSDKException
# 导入对应产品模块的client models。
from tencentcloud.sms.v20210111 import sms_client, models

# 导入可选配置类
from tencentcloud.common.profile.client_profile import ClientProfile
from tencentcloud.common.profile.http_profile import HttpProfile
from . import settings


# 获取n位随机数组验证码的函数
def get_code(num=4):
    code = ''
    for i in range(num):
        random_num = random.randint(0, 9)
        code += str(random_num)
    return code


# 发送短信函数
def send_sms_by_phone(mobile, code):
    try:
        cred = credential.Credential(settings.SECRET_ID, settings.SECRET_KEY)
        httpProfile = HttpProfile()
        httpProfile.reqMethod = "POST"  # post请求(默认为post请求)
        httpProfile.reqTimeout = 30  # 请求超时时间，单位为秒(默认60秒)
        httpProfile.endpoint = "sms.tencentcloudapi.com"  # 指定接入地域域名(默认就近接入)

        # 非必要步骤:
        # 实例化一个客户端配置对象，可以指定超时时间等配置
        clientProfile = ClientProfile()
        clientProfile.signMethod = "TC3-HMAC-SHA256"  # 指定签名算法
        clientProfile.language = "en-US"
        clientProfile.httpProfile = httpProfile
        client = sms_client.SmsClient(cred, "ap-guangzhou", clientProfile)
        req = models.SendSmsRequest()
        req.SmsSdkAppId = settings.APP_ID  # 腾讯短信创建app把app的id号复制过来https://console.cloud.tencent.com/smsv2/app-manage
        # 短信签名内容: 使用 UTF-8 编码，必须填写已审核通过的签名
        # 签名信息可前往 [国内短信](https://console.cloud.tencent.com/smsv2/csms-sign) 或 [国际/港澳台短信](https://console.cloud.tencent.com/smsv2/isms-sign) 的签名管理查看
        req.SignName = settings.SIGN_NAME
        # 模板 ID: 必须填写已审核通过的模板 ID
        # 模板 ID 可前往 [国内短信](https://console.cloud.tencent.com/smsv2/csms-template) 或 [国际/港澳台短信](https://console.cloud.tencent.com/smsv2/isms-template) 的正文模板管理查看
        req.TemplateId = settings.TEMPLATE_ID
        # 模板参数: 模板参数的个数需要与 TemplateId 对应模板的变量个数保持一致，，若无模板参数，则设置为空
        req.TemplateParamSet = [code, '1']
        # 下发手机号码，采用 E.164 标准，+[国家或地区码][手机号]
        # 示例如：+8613711112222， 其中前面有一个+号 ，86为国家码，13711112222为手机号，最多不要超过200个手机号
        req.PhoneNumberSet = ["+86" + mobile, ]
        # 用户的 session 内容（无需要可忽略）: 可以携带用户侧 ID 等上下文信息，server 会原样返回
        req.SessionContext = ""
        req.ExtendCode = ""
        req.SenderId = ""

        resp = client.SendSms(req)

        # 输出json格式的字符串回包
        # 字符串类型
        print(type(resp.to_json_string(indent=2)))

        return True
    except TencentCloudSDKException as err:

        return False

十二： 短信验证码接口

# 前端通过 get  http://127.0.0.1:8000/api/v1/userinfo/user/send_sms/?mobile=12324344



class UserView(ViewSet):
    @action(methods=['GET'], detail=False)
    def send_sms(self, request):
        mobile = request.query_params.get('mobile')
        if re.match(r'^1[3-9][0-9]{9}$', mobile):
            code = get_code()
            print(code)  # 保存验证码---》能存，不能丢，后期能取---》缓存--》django自带缓存框架
            # 放在内存中了，只要重启就没了----》后期学完redis，放到redis中，重启项目，还在
            cache.set('sms_code_%s' % mobile, code)
            # cache.get('sms_code_%s'%mobile)
            res = send_sms_by_phone(mobile, code)
            if res:
                return APIResponse(msg='发送短信成功')
            else:
                # raise APIException('发送短信失败')
                return APIResponse(msg='发送短信失败', code=101)
        else:
            return APIResponse(msg='手机号不合法', code=102)

十三：短信登录接口

# 手机号+验证码---{mobile:12333,code:7878}---->post--->/api/v1/userinfo/user/mobile_login/


3672

十四： 短信注册接口

# 手机号+验证码+密码---》post---》{mobile:111111,password:1234,code:8888}

# 注册的序列化类，用户名没有：用手机号作为用户名

十五：补充知识点

1 python的深浅copy
    浅拷贝，指的是重新分配一块内存，创建一个新的对象，但里面的元素是原对象中各个子对象的引用。

    深拷贝，是指重新分配一块内存，创建一个新的对象，并且将原对象中的元素，以递归的方式，通过创建新的子对象拷贝到新对象中。因此，新对象和原对象没有任何关联。

2 __new__和__init__的区别
    2.1.首先用法不同，__new__()用于创建实例，所以该方法是在实例创建之前被调用，它是类级别的方法，是个静态方法；
    而 __init__() 用于初始化实例，所以该方法是在实例对象创建后被调用，它是实例级别的方法，用于设置对象属性的一些初始值。
    __new__()在__init__() 之前被调用。如果__new__() 创建的是当前类的实例，会自动调用__init__()函数，通过return调用的__new__()的参数cls来保证是当前类实例，如果是其他类的类名，那么创建返回的是其他类实例，就不会调用当前类的__init__()函数。
    2.2.其次传入参数不同
          __new__()至少有一个参数cls，代表当前类，此参数在实例化时由Python解释器自动识别；
          __init__()至少有一个参数self，就是这个__new__()返回的实例，__init__()在__new__()的基础上完成一些初始化的操作。
      2.3.返回值不同
	__new__()必须有返回值，返回实例对象；
	__init__()不需要返回值。

3 把一个文件夹，子文件夹下所有的folder.ini删除
4 python 是值传递还是引用传递
    python不允许程序员选择采用传值还是传引用。python参数传递采用的肯定是“传对象引用”的方式。这种方式相当于传值和传引用的一种综合。如果函数收到的是一个可变对象（字典、列表）的引用，就能修改对象的原始值--相当于‘传引用’来传递对象。如果函数收到的是一个不可变对象（数字、字符或元组）的引用，就不能直接修改原始对象--相当于通过‘值传递’来传递对象。
5 python 可变与不可变
	可变类型：数据值发生变化，内存地址不变
    不可变类型：数据值发生变化，内存地址也发生变化
Jayxieming
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
linux第二阶段web
linux系统运维学习之路
07-03 371
WEB网站服务 day01 http协议原理 1.用户访问网站的原理过程 1.用户访问域名 2.完成域名dns解析过程 3.完成tcp三次握手建立 4.向网站服务器访问请求信息 (HTTP请求) 网站架构接收到用户请求 (负载均衡 web集群 存储 数据库 缓存...) 5.向客户端响应数据信息 (HTTP响应) 6.用户利用浏览器解析响应信息,显示最终页面 7.完成tcp四次挥手过程 2....
红队系列-网络安全知识锦囊(持续更新)
aming小老弟
11-09 407
AJP13是定向包协议。因为性能原因，使用二进制格式来传输可读性文本。AJP协议：WEB服务器通过TCP连接和SERVLET容器连接。为了减少进程生成socket的花费，WEB服务器和SERVLET容器之间尝试保持持久性的TCP连接，对多个请求/回复循环重用一个连接。一旦连接分配给一个特定的请求，在请求处理循环结束之前不会在分配。换句话说，在连接上，请求不是多元的。这个是连接两端的编码变得容易，虽然这导致在一时刻会有很多连接。
SpringBoot笔记（五）Linux系统与项目部署
qq_25928447的博客
01-25 3461
Linux操作系统与项目部署 **注意：**本版块会涉及到操作系统相关知识。 现在，几乎所有智能设备都有一个自己的操作系统，比如我们的家用个人电脑，基本都是预装Windows操作系统，我们的手机也有Android和iOS操作系统，还有程序员比较青睐的MacBook，预装MacOS操作系统，甚至连Macbook的Touchbar都有一个自己的小型操作系统。 操作系统是管理计算机硬件与软件资源的计算机程序，操作系统可以对计算机系统的各项资源板块开展调度工作，运用计算机操作系统可以减少人工资源分配的工作强度。.
python面试常见知识点收集，长期更新
热门推荐
weixin_47438615的博客
01-21 1万+
python面试大全，不断记录更新中........敬请期待
Django
weixin_44443311的博客
05-18 1001
'GET / HTTP/1.1 <-- 请求行 Host: 127.0.0.1:8001 <-- 请求头部 Connection: keep-alive User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36 Upgrade-Insecure-Requests: 1 Accept: text/html,a
运维笔记
a84633632的博客
12-22 904
运维笔记 Linux 运维 Linux 运维DHCPDNS源码安装bindDNS && Bind授权根线索root hint推荐的SOA时间设置邮件服务安装postfixpostifx配置文件基本配置Postfix + SASL ...
meiduo:Django + Vue 前后端分离商城项目，采用Docker双容器部署nginx + uwsgi
07-24
首页效果图： 开发模式：Django + Vue 前后端分离 涉及技术：celery、FastDFS、ElaticSearch、redis、MySQL读写分离 部署方式：docker容器部署 nginx(vue) + uwsgi(django) 给出体验地址： 121.4.47.229:8080 因为...
软件工程课设-前后端分离的汽车充电管理系统设计与实现源码+项目说明.zip
09-01
软件工程课设-前后端分离的汽车充电管理系统设计与实现源码+项目说明.zip BUPT 软件工程课设 课题基本要求： 作为新型交通工具，电动汽车是未来汽车行业的发展趋势。在环境保护日益受到重视的今天，电动汽车...
基于Django + vue前后端分离的博客系统源代码+部署文档，支持的功能有：发布文章、文章分类、注册、登录、留言、代码高亮等
05-09
支持的功能有：发布文章、文章分类、注册、登录、留言、代码高亮等，该项目还集成了docker自动化部署脚本，方便部署上线和二次开发。 软件架构 ​ 前端：vue ​ 后端：django、mysql、redis、nginx、fastdfs、celery...
额外收入：毕业设计-扩展项目网站-vue + python + flask + uwsgi + nginx
02-05
毕业设计-扩展项目网站-vue + python + flask + uwsgi + nginx + mysql 启动步骤： 启动后台： cd返回 virtualenv --no-site-packages extra_env 点安装-r requirements.txt python run.py 以上开启后台dev环境 ...
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
01-01
[root@vultr ~]# mkdir projects # 测试的项目总目录 [root@vultr ~]# pip3 install virtualenv [root@vultr ~]# cd projects [root@vultr projects]# virtualenv env --python=python3 --no-site-packages --python...
中国BI步入增长大周期，腾讯云ChatBI加速AI+BI融合
最新发布
大数据在线
05-30 653
到2027年，中国BI软件市场规模将达到 19.7 亿美元，未来5 年市场年复合增长率（CAGR）为17.5%。毫无疑问，在大模型的加持下，中国BI市场正开启新的增长大周期。
腾讯云 Web 超级播放器开发实战
初九之潜龙勿用
05-28 2497
腾讯云 Web 超级播放器 TCPlayer可实现在手机浏览器和 PC 浏览器上播放音视频流的问题，功能强劲，兼容性好，可以不依赖用户安装 App，就能进行播放。在实际的应用中，我们仍然根据需求直接改造了混淆代码，主要解决了以下问题：1、增加、集成了播放快进组件 2、更改了一些样式 3、增强了一些旧版手机的兼容性
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1086
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 335
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 222
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 397
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
基于Java+SpringBoot+Mybaties-plus+Vue+elememt + uniapp 新闻资讯 的设计与实现
qq_28917403的博客
05-27 715
本系统分为 后端 和 小程序端后端：点击登录按钮设置个人中心、管理员账号数据维护、基础数据维护、论坛维护(增删改查帖子信息，包括查看论坛的内容回复)、公告信息维护、用户信息维护、小程序的轮播图维护小程序端：登录、注册、忘记密码首页(查看新闻展示、短视频信息展示、公告信息展示)短视频信息(根据类型检索)、公告信息(根据类型检索)、论坛信息(根据名称检索)、
我的django项目名是mydemo，在使用uwsgi启动时报错ModuleNotFoundError: No module named 'mydemo.wsgi'，应该如何解决
05-31
这个错误通常是由于 uWSGI 找不到 Django 项目的 wsgi 文件导致的。 可以尝试以下几种解决方法： 1. 确认您的 Django 项目名称是 mydemo ，并且 mydemo/ 目录下有一个名为 wsgi.py 的文件。 2. 在 uWSGI 启动命令...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值