基于DRF+vue的登录界面

现在前后端分离的架构设计越来越流行，业界甚至出现了API优先的趋势。

显然API开发已经成为后端程序员的必备技能了，那作为Python程序员特别是把Django作为自己主要的开发框架的程序员，我十分推荐Django REST framework（DRF）这个API框架。

Django REST framework（DRF）框架文档齐全，社区较稳定，而且由于它是基于Django这个十分全面的框架而设计开发的，能够让开发者根据自己的业务需要，使用极少的代码量快速的开发一套符合RESTful风格的API，并且还支持自动生成API文档。

一、vue-cil部分

<template>

    <div class="login_container" >
         <div class="login_box">
             <!-- 登录表单区域 -->
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item label="账号" >
                     <el-input v-model="formLabelAlign.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="formLabelAlign.pwd" type="password" show-password></el-input>
                </el-form-item>
                    <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success">注册</el-button>
                    </el-form-item>
            </el-form> 
        </div>

    </div>

</template>

<script>
export default {

    name:"Login",
    data(){
        return{
            labelPosition: 'right',
            formLabelAlign: {
                username:'',
                pwd:''
        }
        
        }
    },
    methods:{

         open4() {
        this.$message.error('账号或者密码错误');
        },
        login(){
            console.log(this.formLabelAlign.username);
            this.$http.post(`http://127.0.0.1:8000/api/user/login/`,{"username":this.formLabelAlign.username,"password":this.formLabelAlign.pwd}).then((res)=>{
                console.log(res.data.code)
                if(res.data.code == 100)
                {
                    this.$router.push('/user')
                }
                else{
                     this.open4();
                }
            })
        }
    },


   
}
</script>

<style>



.login_container {
  background-image: url("../assets/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.login_box {
  width: 290px;
  height: 350px;
  /* background-color: #fff; */
  background-color: rgb(238, 217, 217);
  /* background-image: url("../assets/bg.jpg"); */
  border-radius: 5px;
 
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.el-form {
  padding: 32px;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.el-button {
  width: 100%;
}
.code {
  width: 45%;
}
img {
  /* style="width: 100px; height: 30px; margin-left:5px;vertical-align: middle;" */
  display: line-inline;
  width: 45%;
  height: 28px;
  margin-left: 10px;
  vertical-align: middle;
  border-radius: 3px;
}
.rememberMe {
  color: #fff;
}

</style>

二、API部分

1、路由

from django.contrib import admin
from django.urls import path,include,re_path
from .apis import basic
from rest_framework.routers import SimpleRouter

router = SimpleRouter()
router.register('user',basic.LoginApi,'user')


# 路由
urlpatterns = [

]


urlpatterns += router.urls

 2、序列化

class LoginSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.User
        fields = '__all__'

    pass

3、视图

class LoginApi(ViewSet):

    @action(methods=["POST"],detail=False)
    def login(self,request):
        # post提交的数据都在request.data
        useName = request.data.get("username")
        pwd  = request.data.get("password")
        # print(type(useName))
        # print(pwd)

        # 查找数据库是否存在
        user = models.User.objects.filter(username = useName,password=pwd).first()

        # 如果存在
        if user:
            # 随机生成不重复的id作为token
            token = str(uuid.uuid4())
            # user = user 这个去查找，如果能查到，则使用defauts更新，查不到则则新增
            user_token = models.UserToken.objects.update_or_create(defaults={'token':token},user=user)

            print('****')
            return Response(
                {'msg':'登录成功','code':100,'token':token},
            )
        else:
            return Response(
                {'msg': '账号或密码错误','code': 200,},
            )

        pass

4、模型

class User(models.Model):

    username = models.CharField(max_length=1024, blank=False)
    password = models.CharField(max_length=1024, blank=False)


class UserToken(models.Model):

    token = models.CharField(max_length=1024)
    user  = models.OneToOneField(to='User',on_delete=models.CASCADE)

三、跨域问题的解决

参考这个博客

四、文档

Some reasons you might want to use REST framework:

• The Web browsable API is a huge usability win for your developers.
• Authentication policies including packages for OAuth1a and OAuth2.
• Serialization that supports both ORM and non-ORM data sources.
• Customizable all the way down - just use regular function-based views if you don't need the more powerful features.
• Extensive documentation, and great community support.
• Used and trusted by internationally recognised companies including Mozilla, Red Hat, Heroku, and Eventbrite.

官方文档：django-rest-framework