使用手机号实现注册功能

# 前端传入的数据
	{手机号，验证码，密码}
# 后端要验证数据--->序列化类

# 注意错误
	1 注册使用哪个序列化了：get_serializer_class
    2 配置文件中debug必须是True，因为咱们有万能验证码--->正常流程这个不需要
    3 把code，弹出来，加入用户名，你可以随机生成用户名
    4 重写create(可以不重写，把密码设为加密的密码)，create_user
    5 如果你继承了CreateModelMixin，一定要注意，它会走序列化，所以code字段是只写的
    
# 默认名字：
    在这里使用了Faker模块生成一个随机的名字作为用户的用户名成
    pip install Faker
    使用步骤：
    	from faker import Faker
        fake = Faker()

        # 生成虚假的姓名
        name = fake.name()

        # 生成虚假的地址
        address = fake.address()

        # 生成虚假的电子邮件
        email = fake.email()

        # 生成虚假的电话号码
        phone_number = fake.phone_number()

        # 生成虚假的文本内容
        text = fake.text()

视图类

class LoginView(GenericViewSet):
    serializer_class = LoginSerializer
    
    @action(methods=["POST"], detail=False)
    def register(self, request, *args, **kwargs):
        """
            方式一：注册功能
            方式二：继承5个视图扩展类中的create方法
            路由：http://127.0.0.1:8000/api/v1/user/user/register/
        """
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        serializer.save()
        return APIResponse(msg="注册成功")

    def get_serializer_class(self):
        if self.action == "sms_login":
            return SmsSerializer
        if self.action == "register" or self.action == "create":
            return RegisterSerializer
        else:
            return super().get_serializer_class()

序列化类

class RegisterSerializer(serializers.ModelSerializer):
    """
        使用手机号注册
    """
    code = serializers.CharField(max_length=6, min_length=4)

    class Meta:
        model = User
        fields = ["mobile", "password", "code"]

    def _get_captcha(self, attrs):
        """
        校验验证码
        """
        mobile = attrs.get("mobile")
        code = attrs.get("code")
        old_code = cache.get('cache_mobile_%s' % mobile)
        if old_code == code or code == "8888":
            return True
        else:
            raise ValidationError("验证码错误")

    def _random_name(self, attrs):
        attrs.pop("code")
        # 使用Faker模块生成一个随机的名字
        faker = Faker()
        attrs["username"] = "luffy_" + faker.name()

    def validate(self, attrs):
        # 1、校验验证码是否正确
        self._get_captcha(attrs)
        # 2、给用户一个默认的名字
        self._random_name(attrs)
        return attrs

    def create(self, validated_data):
        user = User.objects.create_user(**validated_data)
        return user

补充点

-1、为什么写media才能访问
    -Django默认是不允许前段直接访问后端项目文件的
    -如果想让用户访问必须配置路由，使用server函数开放出
        path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT})
        -浏览器中访问 meida/icon/1.png--->能把settings.MEDIA_ROOT对应的文件夹下的icon/1.png返回给前端
        
-2、配置文件中 debug作用
    -开发阶段，都是debug为True，信息显示更丰富
        -你访问的路由如果不存在，会把所有能访问到的路由都显示出来
        -程序出了异常，错误信息直接显示在浏览器上
        -自动重启，只要改了代码，会自动重启
    -上线阶段，要改成False
    
-3、ALLOWED_HOSTS 的作用
	-只有debug 为Flase时，这个必须填
    -限制后端项目(django项目 )能够部署在哪个ip的机器上，写个 *  表示所有地址都可以
   
-4、咱们的项目中，为了知道是在调试模式还是在上线模式，所以才用的debug这个字段
	-判断，如果是开发阶段，可以有个万能验证码

前端登录页面

<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" @click="login">登录</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 @click="mobile_login" 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;
      // js正则：/正则语法/
      // '字符串'.match(/正则语法/)
      if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
        this.$message({
          message: '手机号有误',
          type: 'warning',
          duration: 1000,
          onClose: () => {
            this.mobile = '';
          }
        });
        return false;
      }
      // 后台校验手机号是否已存在
      this.$axios({
        url: this.$settings.BASE_URL + 'api/v1/user/mobile/check_mobile/?mobile=' + this.mobile,
        method: 'get',
      }).then(response => {
        if (response.data.code === 100) {
          this.$message({
            message: '账号正常,可以发送短信',
            type: 'success',
            duration: 1000,
          });
          // 发生验证码按钮才可以被点击
          this.is_send = true;
        } else {
          this.$message({
            message: '账号不存在',
            type: 'warning',
            duration: 1000,
            onClose: () => {
              this.mobile = '';
            }
          })
        }
      }).catch(() => {
      });
    },
    send_sms() {
      // this.is_send必须允许发生验证码，才可以往下执行逻辑
      if (!this.is_send) return;
      // 按钮点一次立即禁用
      this.is_send = false;

      let sms_interval_time = 60;
      this.sms_interval = "发送中...";

      // 定时器: setInterval(fn, time, args)
      // 往后台发送验证码
      this.$axios({
        url: this.$settings.BASE_URL + 'api/v1/user/mobile/send_sms/',
        method: 'post',
        data: {
          mobile: this.mobile
        }
      }).then(response => {
        if (response.data.code === 100) { // 发送成功
          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);
        } else {  // 发送失败
          this.sms_interval = "重新获取";
          this.is_send = true;
          this.$message({
            message: '短信发送失败',
            type: 'warning',
            duration: 3000
          });
        }
      }).catch(() => {
        this.sms_interval = "频率过快";
        this.is_send = true;
      })


    },
    login() {
      if (!(this.username && this.password)) {
        this.$message({
          message: '请填好账号密码',
          type: 'warning',
          duration: 1500
        });
        return false  // 直接结束逻辑
      }

      this.$axios({
        url: this.$settings.BASE_URL + 'api/v1/user/user/mul_login/',
        method: 'post',
        data: {
          username: this.username,
          password: this.password,
        }
      }).then(response => {
        let username = response.data.username;
        let token = response.data.token;
        this.$cookies.set('username', username, '7d');
        this.$cookies.set('token', token, '7d');
        this.$emit('success', response.data);
      }).catch(error => {
        console.log(error.response.data)
      })
    },
    mobile_login() {
      if (!(this.mobile && this.sms)) {
        this.$message({
          message: '请填好手机与验证码',
          type: 'warning',
          duration: 1500
        });
        return false  // 直接结束逻辑
      }

      this.$axios({
        url: this.$settings.BASE_URL + '/api/v1/user/user/sms_login/',
        method: 'post',
        data: {
          mobile: this.mobile,
          code: this.sms,
        }
      }).then(response => {
        if (response.data.code === 100) {
          let username = response.data.username;
          let token = response.data.token;
          this.$cookies.set('username', username, '7d');
          this.$cookies.set('token', token, '7d');
          this.$emit('success', response.data);
        } else {
          this.$message({
            message: '登录失败',
            type: 'warning',
            duration: 1500
          });
        }

      }).catch(error => {
        console.log(error.response.data)
      })
    }
  }
}
</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);
}

.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>

前端注册页面

<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 @click="register" 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;
      // js正则：/正则语法/
      // '字符串'.match(/正则语法/)
      if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
        this.$message({
          message: '手机号有误',
          type: 'warning',
          duration: 1000,
          onClose: () => {
            this.mobile = '';
          }
        });
        return false;
      }
      // 后台校验手机号是否已存在
      this.$axios({
        url: this.$settings.BASE_URL + 'api/v1/user/mobile/check_mobile/?mobile=' + this.mobile,
        method: 'get',
      }).then(response => {
        if (response.data.code !== 100) {
          this.$message({
            message: '欢迎注册我们的平台',
            type: 'success',
            duration: 1500,
          });
          // 发生验证码按钮才可以被点击
          this.is_send = true;
        } else {
          this.$message({
            message: '账号已存在，请直接登录',
            type: 'warning',
            duration: 1500,
          })
        }
      }).catch(() => {
      });
    },
    send_sms() {
      // this.is_send必须允许发生验证码，才可以往下执行逻辑
      if (!this.is_send) return;
      // 按钮点一次立即禁用
      this.is_send = false;

      let sms_interval_time = 60;
      this.sms_interval = "发送中...";

      // 定时器: setInterval(fn, time, args)

      // 往后台发送验证码
      this.$axios({
        url: this.$settings.BASE_URL + 'api/v1/user/mobile/send_sms/',
        method: 'post',
        data: {
          mobile: this.mobile
        }
      }).then(response => {
        if (response.data.code === 100) { // 发送成功
          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);
        } else {  // 发送失败
          this.sms_interval = "重新获取";
          this.is_send = true;
          this.$message({
            message: '短信发送失败',
            type: 'warning',
            duration: 3000
          });
        }
      }).catch(() => {
        this.sms_interval = "频率过快";
        this.is_send = true;
      })


    },
    register() {
      if (!(this.mobile && this.sms && this.password)) {
        this.$message({
          message: '请填好手机、密码与验证码',
          type: 'warning',
          duration: 1500
        });
        return false  // 直接结束逻辑
      }

      this.$axios({
        url: this.$settings.BASE_URL + 'api/v1/user/register/mobile_register/',
        method: 'post',
        data: {
          mobile: this.mobile,
          code: this.sms,
          password: this.password
        }
      }).then(response => {
        this.$message({
          message: '注册成功，3秒跳转登录页面',
          type: 'success',
          duration: 3000,
          showClose: true,
          onClose: () => {
            // 去向成功页面
            this.$emit('success')
          }
        });
      }).catch(error => {
        this.$message({
          message: '注册失败，请重新注册',
          type: 'warning',
          duration: 1500,
          showClose: true,
          onClose: () => {
            // 清空所有输入框
            this.mobile = '';
            this.password = '';
            this.sms = '';
          }
        });
      })
    }
  }
}
</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>

Headers

<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 v-if="!username">
          <span @click="handleLogin">登录</span>
          <span class="line">|</span>
          <span @click="handleRegister">注册</span>
        </div>
        <div v-else>
          <span>{{ username }}</span>
          <span class="line">|</span>
          <span @click="logOut">注销</span>
        </div>
      </div>
      <Login v-if="loginShow" @close="handleClose" @success="success_login" @go="go_register"></Login>
      <Register v-if="registerShow" @close="handleRegisterClose" @success="success_register"
                @go="success_register"></Register>
    </div>
  </div>

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

export default {
  name: "Header",
  data() {
    return {
      url_path: sessionStorage.url_path || '/',
      loginShow: false,
      registerShow: false,
      username: '',
      token: ''
    }
  },
  methods: {
    handleRegister() {
      this.registerShow = true
    },
    handleRegisterClose() {
      this.registerShow = false
    },
    success_register() {
      this.registerShow = false
      this.loginShow = true
    },
    go_register() {
      this.registerShow = true
      this.loginShow = false
    },
    logOut() {
      this.username = ''
      this.token = ''
      this.$cookies.remove('username')
      this.$cookies.remove('token')
    },
    goPage(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        this.$router.push(url_path);
      }
      sessionStorage.url_path = url_path;
    },
    handleLogin() {
      this.loginShow = true
    },
    handleClose() {
      this.loginShow = false

    },
    success_login(data) {
      this.loginShow = false;  // 模态框消耗
      this.username = data.username;
      this.token = data.token;
    }
  },
  created() {
    sessionStorage.url_path = this.$route.path;
    this.url_path = this.$route.path;
    this.username = this.$cookies.get('username')
  },
  components: {
    Register,
    Login
  }
}
</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>

短信登录和注册接口

视图类

class LoginView(GenericViewSet):
    serializer_class = LoginSerializer

    @action(methods=["POST"], detail=False)
    def register_or_login(self, request, *args, **kwargs):
        """
            功能：用户手机号存在就直接登录，不存在直接注册
            路由：http://127.0.0.1:8000/api/v1/user/user/register_or_login/
        """
        return self._login(request, *args, **kwargs)

    def get_serializer_class(self):
        if self.action == "register_or_login":
            return Register_or_Login_Serializer
        else:
            return super().get_serializer_class()

序列化类

class Sms_Login_Serializer(serializers.Serializer):
    def validate(self, attrs):
        user = self.get_user(attrs)
        token = self._get_token(user)
        self.context["username"] = user.username
        self.context["token"] = token
        self.context["icon"] = settings.BASE_URL + "/media/" + str(user.icon)
        return attrs
    
class Register_or_Login_Serializer(Sms_Login_Serializer):
    mobile = serializers.CharField()
    code = serializers.CharField()

    def get_user(self, attrs):
        mobile = attrs.get("mobile")
        user = User.objects.filter(mobile=mobile).first()
        if user is None:
            code = attrs.get("code")
            old_code = cache.get('cache_mobile_%s' % mobile)
            if code == old_code or code == "8888":
                attrs.pop("code")
                faker = Faker()
                attrs["username"] = "luffy_" + faker.name()
                attrs["password"] = ""
                user = User.objects.create(**attrs, is_pwd=False)
                return user
            else:
                raise ValidationError("验证码输入错误")
        return user

记录三次用户密码修改记录，每次改密码，不能跟之前用过的相同
	-密码记录表
    	-用户名  一对多
        -时间
        -密码
        -ip 

本栏目推荐文章
• 跟着阿灵学前端(1)——HTML 基础
• 跟着阿灵学前端(2)——CSS 基础
• nginx 一个域名区分pc和手机！
• 小程序开发：完善新增和编辑所思所想功能
• 【苹果手机】周末和法定节假日关闭闹钟
• Windows 10 中，可以使用 PowerShell 添加打印和文件服务的角色功能组件，包括 Internet 打印客户端、LPD 打印服务和 LPR 端口监视器 PowerShell 添加打印机并创建新的 LPR 端口。以下是添加打印机和创建新端口的 PowerShell 命令在 Windows 10 中，可以使用 PowerShell 添加 LPR 兼容打印机。
• 前端预览页面优化解决思路笔记
• 美多商城用户注册-展示用户注册页面-短信验证码-6
• 世微AP630X地摊灯 手电筒方案 可充电多功能LED灯
• 实时数据流无忧：用 SpringBoot 和 SSE 打造动态前端更新的终极指南

前端 手机号 短信 功能 手机前端 手机号 短信 功能 手机短信 手机号 短信 手机06 手机短信 短信 程序 手机 手机号码 号码 短信python 苹果 手机 手机短信imessage 手机短信require时候 短信 前端 手机号 模版 账号 文本 星号 手机 前端 源码 功能 手机