前端显示注册页面并调整首页头部和登陆页面的注册按钮的链接。
注册页面 Register.vue
,主要是通过登录页面进行改进而成:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 <template> <div class="sign"> <div class="logo"><a href="/"><img src="/static/image/nav-logo.png" alt="Logo"></a></div> <div class="main"> <h4 class="title"> <div class="normal-title"> <router-link to="/user/login">登录</router-link> <b>·</b> <router-link id="js-sign-up-btn" class="active" to="/user/register">注册</router-link> </div> </h4> <div class="js-sign-up-container"> <form class="new_user" id="new_user" action="" accept-charset="UTF-8" method="post"> <div class="input-prepend restyle"> <input placeholder="你的昵称" type="text" value="" v-model="nickname" id="user_nickname"> <i class="iconfont ic-user"></i> </div> <div class="input-prepend restyle no-radius js-normal"> <input placeholder="手机号" type="tel" v-model="mobile" id="user_mobile_number"> <i class="iconfont ic-phonenumber"></i> </div> <div class="input-prepend restyle no-radius security-up-code js-security-number" v-if="is_show_sms_code"> <input type="text" v-model="sms_code" id="sms_code" placeholder="手机验证码"> <i class="iconfont ic-verify"></i> <a tabindex="-1" class="btn-up-resend js-send-code-button disable" href="javascript:void(0);" id="send_code">{{sms_code_text}}</a> </div> <input type="hidden" name="security_number" id="security_number"> <div class="input-prepend"> <input placeholder="设置密码" type="password" v-model="password" id="user_password"> <i class="iconfont ic-password"></i> </div> <input type="submit" name="commit" value="注册" class="sign-up-button" id="sign_up_btn" data-disable-with="注册"> <p class="sign-up-msg">点击 “注册” 即表示您同意并愿意遵守荏苒<br> <a target="_blank" href="">用户协议</a> 和 <a target="_blank" href="">隐私政策</a> 。</p> </form> <!-- 更多注册方式 --> <div class="more-sign"> <h6>社交帐号直接注册</h6> <ul> <li><a id="weixin" class="weixin" target="_blank" href=""><i class="iconfont ic-wechat"></i></a></li> <li><a id="qq" class="qq" target="_blank" href=""><i class="iconfont ic-qq_connect"></i></a></li> </ul> </div> </div> </div> </div> </template> <script> export default { name: "Register", data(){ return { nickname:"", mobile:"", sms_code:"", password:"", sms_code_text:"发送验证码", is_show_sms_code:false, } }, watch:{ mobile(){ if(/^1[3-9]\d{9}$/.test(this.mobile)){ this.is_show_sms_code = true; }else{ this.is_show_sms_code = false; } } } } </script> <style scoped> input{ outline: none; } *, :after, :before { box-sizing: border-box; } .sign { height: 100%; min-height: 750px; text-align: center; font-size: 14px; background-color: #f1f1f1 } .sign:before { content: ""; display: inline-block; height: 85%; vertical-align: middle } .sign .disable,.sign .disable-gray { opacity: .5; pointer-events: none } .sign .disable-gray { background-color: #969696 } .sign .tooltip-error { font-size: 14px; line-height: 25px; white-space: nowrap; background: none } .sign .tooltip-error .tooltip-inner { max-width: 280px; color: #333; border: 1px solid #ea6f5a; background-color: #fff } .sign .tooltip-error .tooltip-inner i { position: static; margin-right: 5px; font-size: 20px; color: #ea6f5a; vertical-align: middle } .sign .tooltip-error .tooltip-inner span { vertical-align: middle; display: inline-block; white-space: normal; max-width: 230px } .sign .tooltip-error.right .tooltip-arrow-border { border-right-color: #ea6f5a } .sign .tooltip-error.right .tooltip-arrow-bg { left: 2px; border-right-color: #fff } .sign .slide-error { position: relative; padding: 10px 0; border: 1px solid #c8c8c8; border-radius: 4px } .sign .slide-error i { position: static!important; margin-right: 10px; color: #ea6f5a!important; vertical-align: middle } .sign .slide-error span { font-size: 15px; vertical-align: middle } .sign .slide-error div { margin-top: 10px; font-size: 13px } .sign .slide-error a { color: #3194d0 } .sign .js-sign-up-forbidden { color: #999; padding: 80px 0 100px } .sign .js-sign-up-container .slide-error { border-bottom: none; border-radius: 0 } .sign .logo { position: absolute; top: 56px; margin-left: 50px } .sign .logo img { width: 100px } .sign .main { width: 400px; margin: 60px auto 0; padding: 50px 50px 30px; background-color: #fff; border-radius: 4px; box-shadow: 0 0 8px rgba(0,0,0,.1); vertical-align: middle; display: inline-block } .sign .reset-title,.sign .title { margin: 0 auto 50px; padding: 10px; font-weight: 400; color: #969696 } .sign .reset-title a,.sign .title a { padding: 10px; color: #969696 } .sign .reset-title a:hover,.sign .title a:hover { border-bottom: 2px solid #ea6f5a } .sign .reset-title .active,.sign .title .active { font-weight: 700; color: #ea6f5a; border-bottom: 2px solid #ea6f5a } .sign .reset-title b,.sign .title b { padding: 10px } .sign .reset-title { color: #333; font-weight: 700 } .sign form { margin-bottom: 30px } .sign form .input-prepend { position: relative; width: 100% } .sign form .input-prepend input { width: 100%; height: 50px; margin-bottom: 0; padding: 4px 12px 4px 35px; border: 1px solid #c8c8c8; border-radius: 0 0 4px 4px; background-color: hsla(0,0%,71%,.1); vertical-align: middle } .sign form .input-prepend i { position: absolute; top: 14px; left: 10px; font-size: 18px; color: #969696 } .sign form .input-prepend span { color: #333 } .sign form .input-prepend .ic-show { top: 18px; left: auto; right: 8px; font-size: 12px } .sign form .geetest-placeholder { height: 44px; border-radius: 4px; background-color: hsla(0,0%,71%,.1); text-align: center; line-height: 44px; font-size: 14px; color: #999 } .sign form .restyle { margin-bottom: 0 } .sign form .restyle input { border-bottom: none; border-radius: 4px 4px 0 0 } .sign form .no-radius input { border-radius: 0 } .sign form .slide-security-placeholder { height: 32px; background-color: hsla(0,0%,71%,.1); border-radius: 4px } .sign form .slide-security-placeholder p { padding-top: 7px; color: #999; margin-right: -7px } .sign .overseas-btn { font-size: 14px; color: #999 } .sign .overseas-btn:hover { color: #2f2f2f } .sign .remember-btn { float: left; margin: 15px 0 } .sign .remember-btn span { margin-left: 5px; font-size: 15px; color: #969696; vertical-align: middle } .sign .forget-btn { float: right; position: relative; margin: 15px 0; font-size: 14px } .sign .forget-btn a { color: #999 } .sign .forget-btn a:hover { color: #333 } .sign .forget-btn .dropdown-menu { top: 20px; left: auto; right: 0; border-radius: 4px } .sign .forget-btn .dropdown-menu a { padding: 10px 20px; color: #333 } .sign #sign-in-loading { position: relative; width: 20px; height: 20px; vertical-align: middle; margin-top: -4px; margin-right: 2px; display: none } .sign #sign-in-loading:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent } .sign #sign-in-loading:before { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 10px; border: 2px solid #fff; border-bottom-color: transparent; vertical-align: middle; -webkit-animation: rolling .8s infinite linear; animation: rolling .8s infinite linear; z-index: 1 } .sign .sign-in-button,.sign .sign-up-button { margin-top: 20px; width: 100%; padding: 9px 18px; font-size: 18px; border: none; border-radius: 25px; color: #fff; background: #42c02e; cursor: pointer; outline: none; display: block; clear: both } .sign .sign-in-button:hover,.sign .sign-up-button:hover { background: #3db922 } .sign .sign-in-button { background: #3194d0 } .sign .sign-in-button:hover { background: #187cb7 } .sign .btn-in-resend,.sign .btn-up-resend { position: absolute; top: 7px; right: 7px; width: 100px; height: 36px; font-size: 13px; color: #fff; background-color: #42c02e; border-radius: 20px; line-height: 36px } .sign .btn-in-resend { background-color: #3194d0 } .sign .sign-up-msg { margin: 10px 0; padding: 0; text-align: center; font-size: 12px; line-height: 20px; color: #969696 } .sign .sign-up-msg a,.sign .sign-up-msg a:hover { color: #3194d0 } .sign .overseas input { padding-left: 110px!important } .sign .overseas .overseas-number { position: absolute; top: 0; left: 0; width: 100px; height: 50px; font-size: 18px; color: #969696; border-right: 1px solid #c8c8c8 } .sign .overseas .overseas-number span { margin-top: 17px; padding-left: 35px; text-align: left; font-size: 14px; display: block } .sign .overseas .dropdown-menu { width: 100%; max-height: 285px; font-size: 14px; border-radius: 0 0 4px 4px; overflow-y: auto } .sign .overseas .dropdown-menu li .nation-code { width: 65px; display: inline-block } .sign .overseas .dropdown-menu li a { padding: 6px 20px; font-size: 14px; line-height: 20px } .sign .overseas .dropdown-menu li a::hover { color: #fff; background-color: #f5f5f5 } .sign .more-sign { margin-top: 50px } .sign .more-sign h6 { position: relative; margin: 0 0 10px; font-size: 12px; color: #b5b5b5 } .sign .more-sign h6:before { left: 30px } .sign .more-sign h6:after,.sign .more-sign h6:before { content: ""; border-top: 1px solid #b5b5b5; display: block; position: absolute; width: 60px; top: 5px } .sign .more-sign h6:after { right: 30px } .sign .more-sign ul { margin-bottom: 10px; list-style: none } .sign .more-sign ul li { margin: 0 5px; display: inline-block } .sign .more-sign ul a { width: 50px; height: 50px; line-height: 50px; display: block } .sign .more-sign ul i { font-size: 28px } .sign .more-sign .ic-weibo { color: #e05244 } .sign .more-sign .ic-wechat { color: #00bb29 } .sign .more-sign .ic-qq_connect { color: #498ad5 } .sign .more-sign .ic-douban { color: #00820f } .sign .more-sign .ic-more { color: #999 } .sign .more-sign .weibo-loading { pointer-events: none; cursor: pointer; position: relative } .sign .more-sign .weibo-loading:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff } body.reader-night-mode .sign .more-sign .weibo-loading:after { background-color: #3f3f3f } .sign .more-sign .weibo-loading:before { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 10px; border: 2px solid #e05244; border-bottom-color: transparent; vertical-align: middle; -webkit-animation: rolling .8s infinite linear; animation: rolling .8s infinite linear; z-index: 1 } @keyframes rolling { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @-webkit-keyframes rolling { 0% { -webkit-transform: rotate(0deg) } to { -webkit-transform: rotate(1turn) } } .sign .reset-password-input { border-radius: 4px!important } .sign .return { margin-left: -8px; color: #969696 } .sign .return:hover { color: #333 } .sign .return i { margin-right: 5px } .sign .icheckbox_square-green { display: inline-block; *display: inline; vertical-align: middle; margin: 0; padding: 0; width: 18px; height: 18px; background: url(/static/image/green.png) no-repeat; border: none; cursor: pointer; background-position: 0 0 } .sign .icheckbox_square-green.hover { background-position: -20px 0 } .sign .icheckbox_square-green.checked { background-position: -40px 0 } .sign .icheckbox_square-green.disabled { background-position: -60px 0; cursor: default } .sign .icheckbox_square-green.checked.disabled { background-position: -80px 0 } .geetest_panel_box>* { box-sizing: content-box } @media (max-width:768px) { body { min-width: 0 } .sign { height: auto; min-height: 0; background-color: transparent } .sign .logo { display: none } .sign .main { position: absolute; left: 50%; margin: 0 0 0 -200px; box-shadow: none } } </style>
前端注册路由:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import Register from "../components/Register" export default new Router({ mode :"history" , routes :[ ... { name :"Register" , path : "/register" , component :Register, } ] })
修改首页头部 Header.vue
的连接:
1 <span class ="header-register" > <router-link to ="/register" > 注册</router-link > </span >
还有登录页 Login.vue
中的链接:
1 2 3 <router-link id="js-sign-up-btn" class="" to="/register">注册</router-link> ... <p class="go_login" >没有账号 <router-link to="/register">立即注册</router-link></p>
手机号码的唯一校验 服务端api接口
users/utils.py
代码:
1 2 3 4 5 6 7 def get_user_by_data (**kwargs ): """根据字段信息获取用户""" User = get_user_model() try : return User.objects.get(**kwargs) except : return None
users/views.py
代码:
1 2 3 4 5 6 7 8 9 from .utils import get_user_by_datafrom rest_framework import statusclass CheckMobileAPIView (APIView ): def get (self,request,mobile ): user = get_user_by_data(mobile=mobile) if user is None : return Response({"err_msg" :"ok" , "err_status" :1 }) else : return Response({"err_msg" :"当前手机号已经被注册" ,"err_status" : 0 }, status=status.HTTP_400_BAD_REQUEST)
users/urls.py
代码:
1 2 3 4 5 6 7 8 9 from django.urls import path,re_pathfrom rest_framework_jwt.views import obtain_jwt_token,refresh_jwt_tokenfrom . import viewsurlpatterns = [ path("login/" , obtain_jwt_token ), path("refresh/" , refresh_jwt_token ), path("captcha/" , views.CaptchaAPIView.as_view() ), re_path("^mobile/(?P<mobile>1[3-9]\d{9})/$" , views.CheckMobileAPIView.as_view()), ]
客户端在用户输入手机号,输入框失去焦点时,使用ajax发送验证请求,代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 <template> <div class="sign"> <div class="logo"><router-link to="/"><img src="/static/image/nav-logo.png" alt="Logo"></router-link></div> <div class="main"> <h4 class="title"> <div class="normal-title"> <router-link to="/user/login">登录</router-link> <b>·</b> <router-link id="js-sign-up-btn" class="active" to="/user/register">注册</router-link> </div> </h4> <div class="js-sign-up-container"> <form class="new_user" id="new_user" action="" accept-charset="UTF-8" method="post"> <div class="input-prepend restyle"> <input placeholder="你的昵称" type="text" value="" v-model="nickname" id="user_nickname"> <i class="iconfont ic-user"></i> </div> <div class="input-prepend restyle no-radius js-normal"> <input placeholder="手机号" type="tel" @blur="check_mobile" v-model="mobile" id="user_mobile_number"> <i class="iconfont ic-phonenumber"></i> </div> <div class="input-prepend restyle no-radius security-up-code js-security-number" v-if="is_show_sms_code"> <input type="text" v-model="sms_code" id="sms_code" placeholder="手机验证码"> <i class="iconfont ic-verify"></i> <a tabindex="-1" class="btn-up-resend js-send-code-button" :class="{disable:send_able}" href="javascript:void(0);" id="send_code">{{sms_code_text}}</a> </div> <input type="hidden" name="security_number" id="security_number"> <div class="input-prepend"> <input placeholder="设置密码" type="password" v-model="password" id="user_password"> <i class="iconfont ic-password"></i> </div> <input type="submit" name="commit" value="注册" class="sign-up-button" id="sign_up_btn" data-disable-with="注册"> <p class="sign-up-msg">点击 “注册” 即表示您同意并愿意遵守荏苒<br> <a target="_blank" href="">用户协议</a> 和 <a target="_blank" href="">隐私政策</a> 。</p> </form> <!-- 更多注册方式 --> <div class="more-sign"> <h6>社交帐号直接注册</h6> <ul> <li><a id="weixin" class="weixin" target="_blank" href=""><i class="iconfont ic-wechat"></i></a></li> <li><a id="qq" class="qq" target="_blank" href=""><i class="iconfont ic-qq_connect"></i></a></li> </ul> </div> </div> </div> </div> </template> <script> export default { name: "Register", data(){ return { nickname:"", mobile:"", sms_code:"", password:"", sms_code_text:"发送验证码", is_show_sms_code:false, send_able:false, } }, watch:{ mobile(){ // js里面的正则,类似于python re.match if(/^1[3-9]\d{9}$/.test(this.mobile)){ this.is_show_sms_code = true; this.send_able = true; }else{ this.is_show_sms_code = false; } } }, methods:{ check_mobile(){ // 验证手机号是否唯一 if(this.is_show_sms_code){ // 发送ajax到服务端验证手机号是否可用 this.$axios.get(`${this.$settings.Host}/users/mobile/${this.mobile}/`).then(response=>{ }).catch(error=>{ this.$message.error(error.response.data.err_msg); this.send_able = false; }); } } } } </script>
注册功能的实现 实现基本的账号信息注册 视图代码:
1 2 3 4 5 6 7 from rest_framework.generics import CreateAPIViewfrom .serializers import UserCreateModelSerializerfrom .models import Userclass UserAPIView (CreateAPIView ): """添加用户""" queryset = User.objects.all () serializer_class = UserCreateModelSerializer
序列化器中,进行验证和保存数据,并返回 jwt 登录认证给客户端:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 from rest_framework import serializersfrom .models import Userimport refrom .utils import get_user_by_dataclass UserCreateModelSerializer (serializers.ModelSerializer ): sms_code = serializers.CharField(write_only=True , min_length=4 , max_length=4 , label="短信验证码" ) token = serializers.CharField(read_only=True ,label="jwt_token" ) class Meta : model = User fields = ["nickname" ,"mobile" ,"sms_code" ,"password" ,"username" ,"id" ,"avatar" ,"token" ] read_only_fields = ["id" ,"username" ,"avatar" ] extra_kwargs = { "mobile" :{"write_only" :True , }, "password" :{"write_only" :True , "min_length" : 8 ,"max_length" : 16 , }, } def validate (self, attrs ): mobile = attrs.get("mobile" ) if not re.match("^1[3-9]\d{9}$" ,mobile): raise serializers.ValidationError("手机号码格式有误!" ,"mobile" ) user = get_user_by_data(mobile=mobile) if user: raise serializers.ValidationError("手机号码已经被注册!" , "mobile" ) return attrs def create (self, validated_data ): """保存用户信息""" try : user = User.objects.create_user( username=validated_data.get("mobile" ), password=validated_data.get("password" ), nickname=validated_data.get("nickname" ), mobile=validated_data.get("mobile" ), ) except : raise serializers.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 payload = jwt_payload_handler(user) user.token = jwt_encode_handler(payload) return user
路由,代码:
1 2 3 4 5 6 7 8 9 10 from django.urls import path,re_pathfrom rest_framework_jwt.views import obtain_jwt_token,refresh_jwt_tokenfrom . import viewsurlpatterns = [ path("login/" , obtain_jwt_token ), path("refresh/" , refresh_jwt_token ), path("captcha/" , views.CaptchaAPIView.as_view() ), re_path("^mobile/(?P<mobile>1[3-9]\d{9})/$" , views.CheckMobileAPIView.as_view()), path("" ,views.UserAPIView.as_view()), ]
客户端提交注册信息 register.vue,代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 <template> <div class="sign"> <div class="logo"><router-link to="/"><img src="/static/image/nav-logo.png" alt="Logo"></router-link></div> <div class="main"> <h4 class="title"> <div class="normal-title"> <router-link to="/user/login">登录</router-link> <b>·</b> <router-link id="js-sign-up-btn" class="active" to="/user/register">注册</router-link> </div> </h4> <div class="js-sign-up-container"> <form class="new_user" id="new_user" action="" accept-charset="UTF-8" method="post"> <div class="input-prepend restyle"> <input placeholder="你的昵称" type="text" value="" v-model="nickname" id="user_nickname"> <i class="iconfont ic-user"></i> </div> <div class="input-prepend restyle no-radius js-normal"> <input placeholder="手机号" type="tel" @blur="check_mobile" v-model="mobile" id="user_mobile_number"> <i class="iconfont ic-phonenumber"></i> </div> <div class="input-prepend restyle no-radius security-up-code js-security-number" v-if="is_show_sms_code"> <input type="text" v-model="sms_code" id="sms_code" placeholder="手机验证码"> <i class="iconfont ic-verify"></i> <a tabindex="-1" class="btn-up-resend js-send-code-button" :class="{disable: disable_sms_code}" href="javascript:void(0);" id="send_code">{{sms_code_text}}</a> </div> <input type="hidden" name="security_number" id="security_number"> <div class="input-prepend"> <input placeholder="设置密码" type="password" v-model="password" id="user_password"> <i class="iconfont ic-password"></i> </div> <input type="submit" name="commit" @click.prevent="showCaptcha" value="注册" class="sign-up-button" id="sign_up_btn" data-disable-with="注册"> <p class="sign-up-msg">点击 “注册” 即表示您同意并愿意遵守荏苒<br> <a target="_blank" href="">用户协议</a> 和 <a target="_blank" href="">隐私政策</a> 。</p> </form> <!-- 更多注册方式 --> <div class="more-sign"> <h6>社交帐号直接注册</h6> <ul> <li><a id="weixin" class="weixin" target="_blank" href=""><i class="iconfont ic-wechat"></i></a></li> <li><a id="qq" class="qq" target="_blank" href=""><i class="iconfont ic-qq_connect"></i></a></li> </ul> </div> </div> </div> </div> </template> <script> export default { name: "Register", data(){ return { nickname: "", mobile: "", sms_code: "", password: "", sms_code_text: "发送验证码", is_show_sms_code: false, disable_sms_code: false, } }, watch:{ mobile(){ this.is_show_sms_code = /^1[3-9]\d{9}$/.test(this.mobile); if (this.is_show_sms_code) {this.check_mobile()} }, }, methods: { check_mobile () { if (this.is_show_sms_code) { // 发送ajax到服务端验证手机号是否唯一可用 this.$axios.get(`${this.$settings.Host}/users/mobile/${this.mobile}/`).then(response=>{ this.disable_sms_code = false }).catch(errors=>{ if (errors.response.status === 400) { this.$message.error(errors.response.data.msg); this.disable_sms_code = true } }) } }, showCaptcha () { if (!this.is_show_sms_code || this.sms_code.length !== 4){ this.$message.error('请确保手机号和验证码填写正确'); return false; } else if (this.password.length < 8 || this.password.length > 16) { this.$message.error('密码长度应该在 8 到 16 位~'); return false; } // 初步数据校验完成,调用腾讯防水墙验证码 var captcha1 = new TencentCaptcha(this.$settings.TC_captcha.app_id, res => { if (res.ret === 0) { // 初步通过腾讯防水墙验证 // 将验证码数据和用户注册信息提交到后台进行处理 this.$axios.post(`${this.$settings.Host}/users/`, { ret: res.ret, ticket: res.ticket, randstr: res.randstr, nickname: this.nickname, mobile: this.mobile, sms_code: this.sms_code, password: this.password, }).then(response=>{ // 注册成功,则保存用户登录状态,以临时存储方式保存 sessionStorage.user_token = response.data.token; sessionStorage.user_name = response.data.username; sessionStorage.user_id = response.data.id; sessionStorage.user_nickname = response.data.nickname; sessionStorage.user_avatar = response.data.avatar; localStorage.removeItem("user_token"); localStorage.removeItem("user_name"); localStorage.removeItem("user_id"); localStorage.removeItem("user_nickname"); localStorage.removeItem("user_avatar"); this.$confirm(`欢迎${response.data.nickname}加入荏苒~`, '注册成功!', { confirmButtonText: '去个人中心', cancelButtonText: this.go_back_msg, type: 'warning' }).then(() => { // 跳转到个人中心 this.$router.push('/user'); }).catch(() => { // 跳转到上一页 this.$router.back(); }); }).catch(errors=>{ // 登录失败 if (error.response.status === 400) { this.$message.error('会员注册失败,请检查您输入的内容是否正确!') } else { console.log(error) } }) } else { this.$meesage.error("验证码验证失败!请重新操作验证码"); } }); captcha1.show(); }, } } </script>
在注册功能中集成短信验证码功能 接下来,我们把注册过程中一些注册信息(例如:短信验证码)和 session 缓存到 redis 数据库中。
如果之前没有安装 django-redis 的话,可以使用命令安装:
1 pip install django-redis
在 settings/dev.py
配置中添加一下代码,最好配置在数据库 DATABASES 配置下面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 CACHES = { "default" : { "BACKEND" : "django_redis.cache.RedisCache" , "LOCATION" : "redis://127.0.0.1:6379/0" , "OPTIONS" : { "CLIENT_CLASS" : "django_redis.client.DefaultClient" , } }, "session" : { "BACKEND" : "django_redis.cache.RedisCache" , "LOCATION" : "redis://127.0.0.1:6379/1" , "OPTIONS" : { "CLIENT_CLASS" : "django_redis.client.DefaultClient" , } }, "sms_code" :{ "BACKEND" : "django_redis.cache.RedisCache" , "LOCATION" : "redis://127.0.0.1:6379/2" , "OPTIONS" : { "CLIENT_CLASS" : "django_redis.client.DefaultClient" , } } } SESSION_ENGINE = "django.contrib.sessions.backends.cache" SESSION_CACHE_ALIAS = "session"
关于 django-redis 的使用,说明文档可参见:http://django-redis-chs.readthedocs.io/zh_CN/latest/
django-redis 提供了 get_redis_connection 的方法,通过调用 get_redis_connection 方法传递 redis 的配置名称可获取到 redis 的连接对象,通过 redis 连接对象可以执行 redis 命令
https://redis-py.readthedocs.io/en/latest/
使用范例:
1 2 3 4 5 from django_redis import get_redis_connection// 链接redis数据库 redis_conn = get_redis_connection("default" ) redis_conn.set ("name" ,"xiaoming" )
使用云通讯发送短信 官网:https://www.yuntongxun.com/
在登录后的平台上面获取一下信息:
1 2 3 4 5 ACCOUNT SID:8 a216 da863 f8 e6 c20164139687 e80 c1 bAUTH TOKEN : 6 dd01 b2 b60104 b3 dbc88 b2 b74158 bac6 AppID (默认):8 a216 da863 f8 e6 c20164139688400 c21 Rest URL(生产): app.cloopen.com:8883 [项目上线时使用真实短信发送服务器] Rest URL(开发): sandboxapp.cloopen.com:8883 [项目开发时使用沙箱短信发送服务器]
找到sdkdemo进行下载
在开发过程中,为了节约发送短信的成本,可以把自己的或者同事的手机加入到测试号码中.
后端生成短信验证码 把素材里面的 yuntongxun 目录放到项目的 utils 目录下,然后在 settings/dev.py
下添加短信接口的配置信息,代码:
1 2 3 4 5 6 7 8 SMS = { "_accountSid" : "8a216da863f8e6c20164139687e80c1b" , "_accountToken" : "6dd01b2b60104b3dbc88b2b74158bac6" , "_appId" : "8a216da863f8e6c20164139688400c21" , "_serverIP" : "sandboxapp.cloopen.com" , "_serverPort" : "8883" , }
users/views.py
,代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 import randomfrom renranapi.utils.yuntongxun.sms import CCPfrom django_redis import get_redis_connectionfrom renranapi.settings import constantsimport loggingloger = logging.getLogger("django" ) class SMSCodeAPIView (APIView ): """ 短信验证码 """ def get (self,request,mobile ): redis = get_redis_connection("sms_code" ) result = redis.get("interval_%s" % mobile) if result: return Response({"message" : "短信已经发送中,请留意您的手机,不要频繁点击!" }, status=status.HTTP_400_BAD_REQUEST) sms_code = "%04d" % random.randint(0 ,9999 ) try : ccp = CCP() ret = ccp.send_template_sms(mobile, [sms_code, constants.SMS_EXPIRE_TIME // 60 ], constants.SMS_TEMPLATE_ID) except : ret = False if not ret: loger.error("发送短信失败!" ) return Response("短信发送失败!" ) redis.setex("sms_%s" % mobile, constants.SMS_EXPIRE_TIME, sms_code) redis.setex("interval_%s" % mobile, constants.SMS_INTERVAL_TIME, "_" ) return Response({"message" :"短信已经发送,请留意您的手机" })
settings/constants.py
代码:
1 2 3 4 5 6 SMS_EXPIRE_TIME = 300 SMS_TEMPLATE_ID = 1 SMS_INTERVAL_TIME = 60
路由代码,users/urls.py
:
1 re_path("^sms/(?P<mobile>1[3-9]\d{9})/$" ,views.SMSCodeAPIView.as_view()),
客户端发送注册信息和发送短信
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 <template> <div class="sign"> <div class="logo"><router-link to="/"><img src="/static/image/nav-logo.png" alt="Logo"></router-link></div> <div class="main"> <h4 class="title"> <div class="normal-title"> <router-link to="/user/login">登录</router-link> <b>·</b> <router-link id="js-sign-up-btn" class="active" to="/user/register">注册</router-link> </div> </h4> <div class="js-sign-up-container"> <form class="new_user" id="new_user" action="" accept-charset="UTF-8" method="post"> <div class="input-prepend restyle"> <input placeholder="你的昵称" type="text" value="" v-model="nickname" id="user_nickname"> <i class="iconfont ic-user"></i> </div> <div class="input-prepend restyle no-radius js-normal"> <input placeholder="手机号" type="tel" @blur="check_mobile" v-model="mobile" id="user_mobile_number"> <i class="iconfont ic-phonenumber"></i> </div> <div class="input-prepend restyle no-radius security-up-code js-security-number" v-if="is_show_sms_code"> <input type="text" v-model="sms_code" id="sms_code" placeholder="手机验证码"> <i class="iconfont ic-verify"></i> <a tabindex="-1" @click="get_sms_code" class="btn-up-resend js-send-code-button" :class="{disable: disable_sms_code}" href="javascript:void(0);" id="send_code">{{sms_code_text}}</a> </div> <input type="hidden" name="security_number" id="security_number"> <div class="input-prepend"> <input placeholder="设置密码" type="password" v-model="password" id="user_password"> <i class="iconfont ic-password"></i> </div> <input type="submit" name="commit" @click.prevent="showCaptcha" value="注册" class="sign-up-button" id="sign_up_btn" data-disable-with="注册"> <p class="sign-up-msg">点击 “注册” 即表示您同意并愿意遵守荏苒<br> <a target="_blank" href="">用户协议</a> 和 <a target="_blank" href="">隐私政策</a> 。</p> </form> <!-- 更多注册方式 --> <div class="more-sign"> <h6>社交帐号直接注册</h6> <ul> <li><a id="weixin" class="weixin" target="_blank" href=""><i class="iconfont ic-wechat"></i></a></li> <li><a id="qq" class="qq" target="_blank" href=""><i class="iconfont ic-qq_connect"></i></a></li> </ul> </div> </div> </div> </div> </template> <script> export default { name: "Register", data(){ return { nickname: "", mobile: "", sms_code: "", password: "", sms_code_text: "发送验证码", is_show_sms_code: false, disable_sms_code: false, } }, watch:{ mobile(){ this.is_show_sms_code = /^1[3-9]\d{9}$/.test(this.mobile); if (this.is_show_sms_code) {this.check_mobile()} }, }, methods: { check_mobile () { if (this.is_show_sms_code) { // 发送ajax到服务端验证手机号是否唯一可用 this.$axios.get(`${this.$settings.Host}/users/mobile/${this.mobile}/`).then(response=>{ this.disable_sms_code = false }).catch(errors=>{ if (errors.response.status === 400) { this.$message.error(errors.response.data.error_msg); this.disable_sms_code = true } }) } }, showCaptcha () { if (!this.is_show_sms_code || this.sms_code.length !== 4){ this.$message.error('请确保手机号和验证码填写正确'); return false; } else if (this.password.length < 8 || this.password.length > 16) { this.$message.error('密码长度应该在 8 到 16 位~'); return false; } // 初步数据校验完成,调用腾讯防水墙验证码 var captcha1 = new TencentCaptcha(this.$settings.TC_captcha.app_id, res => { if (res.ret === 0) { // 初步通过腾讯防水墙验证 // 将验证码数据和用户注册信息提交到后台进行处理 this.$axios.post(`${this.$settings.Host}/users/`, { ret: res.ret, ticket: res.ticket, randstr: res.randstr, nickname: this.nickname, mobile: this.mobile, sms_code: this.sms_code, password: this.password, }).then(response=>{ // 注册成功,则保存用户登录状态,以临时存储方式保存 sessionStorage.user_token = response.data.token; sessionStorage.user_name = response.data.username; sessionStorage.user_id = response.data.id; sessionStorage.user_nickname = response.data.nickname; sessionStorage.user_avatar = response.data.avatar; localStorage.removeItem("user_token"); localStorage.removeItem("user_name"); localStorage.removeItem("user_id"); localStorage.removeItem("user_nickname"); localStorage.removeItem("user_avatar"); this.$confirm(`欢迎${response.data.nickname}加入荏苒~`, '注册成功!', { confirmButtonText: '去个人中心', cancelButtonText: "返回上一页", type: 'warning' }).then(() => { // 跳转到个人中心 this.$router.push('/user'); }).catch(() => { // 跳转到上一页 this.$router.back(); }); }).catch(errors=>{ // 注册失败 if (errors.response.status === 400) { this.$message.error(errors.response.data.error_msg); } else { console.log(errors) } }) } else { this.$meesage.error("验证码验证失败!请重新操作验证码"); } }); captcha1.show(); }, get_sms_code () { if (!this.is_show_sms_code || this.disable_sms_code) { this.$message.error('请正确填写手机号!'); return false; } this.$axios.get(`${this.$settings.Host}/users/sms/${this.mobile}`).then(response=>{ this.$message.success("验证码发送成功,请注意查收~") }).catch(errors=>{ if (errors.response.status === 400) { this.$message.error(errors.response.data.error_msg); } else { this.$message.error("验证码发送失败,请稍后重试!"); console.log(errors.response); } }) }, } } </script>
服务端注册功能中完成手机短信的校验 在序列化器中增加验证码的判断逻辑,代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 from rest_framework import serializersfrom .models import Userimport refrom .utils import get_user_by_datafrom django_redis import get_redis_connectionclass UserCreateModelSerializer (serializers.ModelSerializer ): sms_code = serializers.CharField(write_only=True , min_length=4 , max_length=4 , label="短信验证码" ) token = serializers.CharField(read_only=True ,label="jwt_token" ) class Meta : model = User fields = ["nickname" ,"mobile" ,"sms_code" ,"password" ,"username" ,"id" ,"avatar" ,"token" ] read_only_fields = ["id" ,"username" ,"avatar" ] extra_kwargs = { "mobile" :{"write_only" :True , }, "password" :{"write_only" :True , "min_length" : 8 ,"max_length" : 16 , }, } def validate (self, attrs ): mobile = attrs.get("mobile" ) if not re.match("^1[3-9]\d{9}$" ,mobile): raise serializers.ValidationError("手机号码格式有误!" ,"mobile" ) user = get_user_by_data(mobile=mobile) if user: raise serializers.ValidationError("手机号码已经被注册!" , "mobile" ) redis_conn = get_redis_connection("sms_code" ) redis_sms_code = redis_conn.get("sms_%s" % mobile) if redis_sms_code: sms_code = attrs.get("sms_code" ) if redis_sms_code.decode() != sms_code: raise serializers.ValidationError("验证码错误!" ) else : raise serializers.ValidationError("验证码已过期!" ) return attrs def create (self, validated_data ): """保存用户信息""" try : user = User.objects.create_user( username=validated_data.get("mobile" ), password=validated_data.get("password" ), nickname=validated_data.get("nickname" ), mobile=validated_data.get("mobile" ), ) except : raise serializers.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 payload = jwt_payload_handler(user) user.token = jwt_encode_handler(payload) return user
当然,也可以把校验短信验证码的操作整合在视图中,这时,views.py
可以写成这样:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 class UserAPIView (CaptchaAPIView, CreateAPIView ): queryset = User.objects.all () serializer_class = UserCreateModelSerializer def post (self, request, *args, **kwargs ): if not super ().check_captcha(): return Response({'error_msg' : '验证码有误!' }, status=status.HTTP_400_BAD_REQUEST) redis = get_redis_connection('sms_code' ) sms_code = redis.get('sms_%s' % request.data.get('mobile' )) if sms_code and (sms_code != request.data.get('sms_code' ).encode()): return Response({'error_msg' : '短信验证码有误!' }, status=status.HTTP_400_BAD_REQUEST) return super ().post(request, *args, **kwargs)
给 redis 操作设置事务 在 redis 中,如果出现连续操作多条命令, 那么这些命令,我们可以把他们设置成一个整体,采用redis提供的事务来让它们一起执行。执行过程中保证数据的原子性,要么一起成功,要么一起失败。
所以在注册的验证码功能中,我们就可以使用事务来完成验证码的记录工作。
1 2 3 4 5 6 7 redis_conn = get_redis_connection("sms_code" ) pipe = redis_conn.pipeline() pipe.multi() pipe.命令() pipe.命令() pipe.execute()
视图 users/views.py
,代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 class SMSCodeAPIView (APIView ): """ 短信验证码 """ def get (self,request,mobile ): redis = get_redis_connection("sms_code" ) result = redis.get("interval_%s" % mobile) if result: return Response({"error_msg" : "短信已经发送中,请留意您的手机,不要频繁点击!" }, status=status.HTTP_400_BAD_REQUEST) sms_code = "%04d" % random.randint(0 ,9999 ) try : ccp = CCP() ret = ccp.send_template_sms(mobile, [sms_code, constants.SMS_EXPIRE_TIME // 60 ], constants.SMS_TEMPLATE_ID) except : ret = False if not ret: loger.error("发送短信失败!" ) return Response("短信发送失败!" ) pipe = redis.pipeline() pipe.multi() pipe.setex("sms_%s" % mobile, constants.SMS_EXPIRE_TIME, sms_code) pipe.setex("interval_%s" % mobile, constants.SMS_INTERVAL_TIME, "_" ) pipe.execute() return Response({"message" :"短信已经发送,请留意您的手机" })
验证码冷却倒计时 用户点击发送验证码后,按钮暂时变为不可用状态,出现倒计时,告诉用户按钮冷却剩余时间,避免用户频繁点击,给后端造成不必要的压力。
Login.vue
的 js 代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 <script> export default { name: "Register", data(){ return { nickname: "", mobile: "", sms_code: "", password: "", sms_code_text: "发送验证码", is_show_sms_code: false, disable_sms_code: false, interval_id: 0, interval_time: 0, } }, watch:{ mobile(){ this.is_show_sms_code = /^1[3-9]\d{9}$/.test(this.mobile); if (this.is_show_sms_code) {this.check_mobile()} }, }, methods: { check_mobile () { if (this.is_show_sms_code) { // 发送ajax到服务端验证手机号是否唯一可用 this.$axios.get(`${this.$settings.Host}/users/mobile/${this.mobile}/`).then(response=>{ this.disable_sms_code = false }).catch(errors=>{ if (errors.response.status === 400) { this.$message.error(errors.response.data.error_msg); this.disable_sms_code = true } }) } }, showCaptcha () { if (!this.is_show_sms_code || this.sms_code.length !== 4){ this.$message.error('请确保手机号和验证码填写正确'); return false; } else if (this.password.length < 8 || this.password.length > 16) { this.$message.error('密码长度应该在 8 到 16 位~'); return false; } // 初步数据校验完成,调用腾讯防水墙验证码 var captcha1 = new TencentCaptcha(this.$settings.TC_captcha.app_id, res => { if (res.ret === 0) { // 初步通过腾讯防水墙验证 // 将验证码数据和用户注册信息提交到后台进行处理 this.$axios.post(`${this.$settings.Host}/users/`, { ret: res.ret, ticket: res.ticket, randstr: res.randstr, nickname: this.nickname, mobile: this.mobile, sms_code: this.sms_code, password: this.password, }).then(response=>{ // 注册成功,则保存用户登录状态,以临时存储方式保存 sessionStorage.user_token = response.data.token; sessionStorage.user_name = response.data.username; sessionStorage.user_id = response.data.id; sessionStorage.user_nickname = response.data.nickname; sessionStorage.user_avatar = response.data.avatar; localStorage.removeItem("user_token"); localStorage.removeItem("user_name"); localStorage.removeItem("user_id"); localStorage.removeItem("user_nickname"); localStorage.removeItem("user_avatar"); this.$confirm(`欢迎${response.data.nickname}加入荏苒~`, '注册成功!', { confirmButtonText: '去个人中心', cancelButtonText: "返回上一页", type: 'warning' }).then(() => { // 跳转到个人中心 this.$router.push('/user'); }).catch(() => { // 跳转到上一页 this.$router.back(); }); }).catch(errors=>{ // 注册失败 if (errors.response.status === 400) { this.$message.error(errors.response.data.error_msg); } else { console.log(errors) } }) } else { this.$meesage.error("验证码验证失败!请重新操作验证码"); } }); captcha1.show(); }, get_sms_code () { if (!this.is_show_sms_code || this.disable_sms_code) { this.$message.error('请正确填写手机号!'); return false; } this.$axios.get(`${this.$settings.Host}/users/sms/${this.mobile}`).then(response=>{ this.$message.success("验证码发送成功,请注意查收~"); this.interval_time = 60; this.start_interval(); }).catch(errors=>{ if (errors.response.status === 400) { this.$message.error(errors.response.data.error_msg); } else { this.$message.error("验证码发送失败,请稍后重试!"); console.log(errors.response); } }) }, start_interval () { this.interval_id = setInterval(()=>{ if (this.interval_time){ this.disable_sms_code = true; this.sms_code_text = `${this.interval_time} 秒后可重发`; this.interval_time--; }else{ this.disable_sms_code = false; this.sms_code_text = '重新发送'; clearInterval(this.interval_id); } }, 1000); } } } </script>