vue2+elementUI+Django实现登录注册功能

 前端代码

<template>
  <el-row type="flex" justify="center" style="height: 100vh;">
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <el-card class="login-card">
        <h2>人工智能平台登录</h2>
        <el-form ref="loginForm" :model="loginForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="loginForm.username" autocomplete="off" clearable   placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"  clearable  placeholder="请输入密码"  show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
        <el-divider>还没有账号？<a href="#" @click="registerVisible = true">注册</a></el-divider>
      </el-card>

      <el-dialog title="注册" :visible.sync="registerVisible"  style="width: 30%;" >
        <el-form ref="registerForm" :model="registerForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="registerForm.username" clearable   placeholder="请输入账号" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="registerForm.password" autocomplete="off"  clearable  placeholder="请输入密码"  show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="register">注册</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: ''
      },
      registerVisible: false
    }
  },
  methods: {
    login() {
      // 登录逻辑
      console.log('登录', this.loginForm)
      axios.post('/login/',this.loginForm).then(res=>{
              if(res.data.result == '0'){
                  sessionStorage.setItem('user',res.data.username)
                  this.$router.replace('/Welcome')
              }else{
                  this.$message({
                      message:'用户名或者密码错误',
                      type:"error"
                   })

              }
          })
    },
    register() {
      // 注册逻辑
      console.log('注册', this.registerForm)
      axios.post('/register/',this.registerForm).then(res=>{
              if(res.data.result == '0'){
                  this.$message({
                      message:'注册成功,可以用账号登录啦',
                      type:"sucess"
                   })
                  this.registerVisible = false
              }else{
                  this.$message({
                      message:'已注册可以直接登录',
                      type:"error"
                   })
                  this.registerVisible = false

              }
          })
    }
  }
}
</script>

<style>
.login-card {
  margin-top: 100px;
  padding: 20px;
  width: 100%;
  max-width: 400px;
}
.center-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}
.center-dialog .el-dialog {
  margin: 0 auto;
}

</style>

路由：

    path('login/', login),  # 登陆
    path('register/', register),  # 注册
 

后端

# Create your views here.
def login(request):
    # '获取用户名密码，进入数据库比对，返回结果'
    form = json.loads(request.body)
    from django.contrib import auth
    user = auth.authenticate(username=form['username'], password=form['password'])
    print(form)
    print(user)
    if user:
        auth.login(request, user)  # 登录维护Django_session表
        request.session['user'] = form['username']  # 不知道这个是要干啥的？
        return HttpResponse(json.dumps({"result": '0', "username": form['username']}))
    else:
        return HttpResponse(json.dumps({"result": '1'}))

def register(request):
    form = json.loads(request.body)
    print(form)
    from django.contrib.auth.models import User
    try:
        user = User.objects.create_user(username=form['username'], password=form['password'])
        user.save()
        return HttpResponse(json.dumps({"result": '0'}))
    except:
        return HttpResponse(json.dumps({"result": '1'}))