实现注册登录准备分析:
后端代码实现:
1.创建user模型类
2.注册
django
-
获取参数
-
校验参数
-
存入数据库
-
返回响应
视图:
3.
Vue
-
使用v-mdoel绑定表单,获取用户信息
-
点击按钮,执行注册方法
-
打包构建表单数据
-
axios的post请求提交参数
-
接收响应
-
用户名:<input type='text' v-model='username'>
手机号:<input type='text' v-model='mobile'>
密码:<input type='text' v-model='password'>
确认密码:<input type='text' v-model='password2'>
<button @click='register'>
注册
</button>
<script>
export default {
name: "Register",
data() {
return {
username:'',
mobile:'',
password:'',
password2:''
}
},
methods: {
register() {
let data = new FormData();
data.append('username', this.username)
data.append('mobile', this.mobile)
data.append('password', this.password)
data.append('password2', this.password2)
this.$axios.post('register/', data)
.then(resp=>{
console.log(resp.data)
})
.catch(err=>{
console.log(err.response.data)
})
}
}
}
</script>
4.
登录
django
使用django内置的登录方式,想要支持多种方式登录,需要 重写 认证类,并在
settings.py
配置文件中指明自己实现登录验证
from restframework.views import APIView
from restframework.response import Response
from rest_framework_jwt.utils import jwt_payload_handler, jwt_encode_handler
from django.db.models import Q
from django.contrib.auth.hashers import check_password
from user.models import User
class LoginAPIView(APIVIew):
def post(slef, request):
# 1. 获取参数: 用户名、密码
username = request.data.get('username')
password = request.data.get('password')
# 2. 校验参数
if not all([username, password]):
return Response({'msg':'缺少必要参数'}, status=400)
# 3. 不使用django内置的认证方式,自己写
# 3.1 通过 传入的 username 查询 对应的用户, 传入的 username 可能是 用户名,也可能是手机号
try:
user = User.objects.get(Q(username=username) | Q(mobile=username))
except Exception as e:
return Response({'msg': '登录失败'}, status=400)
# 3.2 校验密码
if check_password(password, user.password):
# 4. 登录成功,生成token,返回token
payload = jwt_payload_handler(user=user)
token = jwt_encode_handler(payload=payload)
return Response({
'token': token,
'username': user.username,
'id': user.id
})
else:
# 5. 登录失败,直接返回响应
return Response({'msg': '登录失败'}, status=400)
5.
Vue
-
目录
使用v-mdoel绑定表单,获取用户信息: 用户名、密码
-
点击按钮,执行注册方法
-
打包构建表单数据
-
axios的post请求提交参数
-
接收响应
-
登录成功,状态保持
-
用户名:<input type='text' v-model='username'>
密码:<input type='text' v-model='password'>
<button @click='login'>
登录
</button>
<script>
export default {
name: "Register",
data() {
return {
username:'',
password:'',
}
},
methods: {
login() {
let data = new FormData();
data.append('username', this.username)
data.append('password', this.password)
this.$axios.post('login/', data)
.then(resp=>{
console.log(resp.data)
// 状态保持
localStroage.setItem('username', resp.data.username)
localStroage.setItem('token', resp.data.token)
})
.catch(err=>{
console.log(err.response.data)
})
}
}
}
</script>