登录注册

登录注册

1.settings.py配置

INSTALLED_APPS = [
    'rest_framework',
    'corsheaders',
    "app03",
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
]

CORS_ORIGIN_ALLOW_ALL=True

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME':'day42',
        'HOST':'localhost',
        'PORT':3308,
        'USER':'root',
        'PASSWORD':'root'
    }
}

2.主路由配置urls.py

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),

    path("app03/",include("app03.urls")),
]

3.子路由配置app03/urls.py

from django.urls import path,include
from .import views
urlpatterns = [
    path("user/",views.UserView.as_view()),
    path("login/",views.LoginView.as_view()),

]

4.配置表models.py

from django.db import models

# Create your models here.
#用户表
class User(models.Model):
    username=models.CharField(max_length=32)
    password=models.CharField(max_length=50)
    oauth=models.BooleanField(default=False)

    class Meta:
        db_table="user03"

5.配置视图app03/views.py

from rest_framework.response import Response
from rest_framework.views import APIView
from .models import *


#用户注册
class UserView(APIView):

    def post(self,request):
        username=request.POST.get("username","").strip()
        password=request.POST.get("password","").strip()
        oauth=request.POST.get("oauth",0)
        print(username)
        print(password)
        print(oauth)
        data={
            "username":username,
            "password":password,
            "oauth":oauth
        }
        obj=User.objects.create(**data)
        if obj:
            return Response({'code':1000,"msg":"添加成功"})
        return Response({'code': 1001, "msg": "添加失败"})
#用户登录
class LoginView(APIView):
    def post(self,request):
        username=request.POST.get("username","").strip()
        password=request.POST.get("password","").strip()

        obj=User.objects.filter(username=username,password=password).first()
        if obj:
            return Response({"code":1000,"msg":"登录成功","data":obj.oauth})
        return Response({"code":1001,"msg":"登录失败"})

VUE 配置

1.配置axios  main.js

import axios from "axios";

// axios.defaults.baseURL='http://127.0.0.1:8000'
Vue.prototype.axios=axios;

2.配置index.js

import Adduser03 from '@/components/Adduser03'
import Login03 from '@/components/Login03'



Vue.use(Router)

export default new Router({
    routes: [
{
      path: '/adduser03',
      name: 'Adduser03',
      component: Adduser03
    },
    {
      path: '/login03',
      name: 'Login03',
      component: Login03
    },
  ]
})

3.注册页面Adduser03.vue

<template>
    <div>
        <h1>添加用户信息</h1>
        <table >
            <tr>
                <td>用户名称 <input type="text" v-model="username"></td>
                <td>用户密码 <input type="password" v-model="password"></td>
                <td>用户状态 
                    <select v-model="oauth">
                        <option value="1">有效</option>
                        <option value="0">无效</option>
                    </select>
                </td>
                <td><button @click="sub">添加</button></td>
            </tr>
            
  
        </table>
        
    </div>
</template>


<script>
export default {
    data(){
        return{
            username:"",
            password:"",
            oauth:0
        }
    },
    methods:{
        sub:function(){
            let formdata=new FormData();
            formdata.append("username",this.username);
            formdata.append("password",this.password);
            formdata.append("oauth",this.oauth);

            this.axios({
                url:"http://127.0.0.1:8000/app03/user/",
                method:"post",
                data:formdata
            }).then(res=>{
                if(res.data.code==1000){
                    //将分数添加到本地
                    // localStorage.setItem("score",res.data.data);
                    //跳转
                    this.$router.push({
                        name:"Login03"
                    })
                }else{
                    alert(res.data.msg)
                }
                
            })

        }
    }
}
</script>



<style scoped>
table{
    margin: 0 auto;
}
</style>

4.登录页面Login03.vue

<template>
    <div>
        <h1>登录页面</h1>
        用户名：<input type="text" v-model="username">
        用户密码：<input type="password" v-model="password">
        <button @click="sub">登录</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            username:"",
            password:""
        }
    },
    methods:{
        sub:function(){
            let formdata=new FormData();
            formdata.append("username",this.username);
            formdata.append("password",this.password);
            this.axios({
                url:"http://127.0.0.1:8000/app03/login/",
                method:"post",
                data:formdata
            }).then(res=>{
                if(res.data.code==1000){
                    localStorage.setItem("oauth",res.data.data)
                    alert(res.data.msg)
                }else{
                    alert(res.data.msg)
                }
            })
        }
    }
}
</script>