vue+django实现简单注册登录和cookie储存

vue+django实现简单注册登录和cookie储存

暂时仅支持chrome测试，ie不支持这个split(‘;’)
cookie添加遇到samesite阻碍，所以准备从前端直接添加cookie
注意： js里多个cookie需要单独设置，每次设置一个

document.cookie = "username=" + response.data.name;
document.cookie = "id=" + response.data.id;

django views.py

from django.shortcuts import render
from django.views.decorators.http import require_http_methods
from django.core import serializers
from django.http import JsonResponse
from django.utils.decorators import method_decorator
from django.views.decorators.csrf import csrf_exempt
from django.shortcuts import render, HttpResponse
import json
from loginapp.models import User

@csrf_exempt
@require_http_methods(["POST"])
def add_user(request):
    response = {}
    try:
        try:
            idn = User.objects.last().id
        except:
            idn = 0
        print(request.body.decode())
        data = json.loads(request.body.decode())
        print(data)
        if User.objects.filter(username=data.get('username')):
            response['msg'] = '用户名已存在'
            response['error_num'] = 2
        else:
            user = User(id=idn+1,nickname=data.get('nickname'),username=data.get('username'),password=data.get('password'))
            user.save()
            response['msg'] = 'success\n唯一id: ' + str(idn+1)
            response['error_num'] = 0
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1
    return JsonResponse(response)

@csrf_exempt
@require_http_methods(["POST"])
def login(request):
    response = {}
    try:
        data = json.loads(request.body.decode())
        print(data)
        if User.objects.filter(username=data.get('username'),password=data.get('password')):
            response['msg'] = 'success'
            response['name'] = data.get('username')
            response['id'] = User.objects.filter(username=data.get('username')).first().id
            response['error_num'] = 0
        elif not User.objects.filter(username=data.get('username')):
            response['msg'] = '用户不存在'
            response['error_num'] = 2
        elif User.objects.filter(username=data.get('username')):
            response['msg'] = '密码错误,请联系管理员'
            response['error_num'] = 3
    except Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1
    ret = JsonResponse(response)
    if User.objects.filter(username=data.get('username'),password=data.get('password')):
        ret.set_cookie('username',data.get('username'))
        ret.set_cookie('id',User.objects.filter(username=data.get('username')).first().id)
    return ret

vue main.vue

<template>
    <div id="main">
        <p>TESTp>
        <p>{{user}}p>
        <form style="display: inline" @click="register">
            <button type="button">注册button>
        form>
        <form v-if="!ck" style="display: inline" @click="login">
            <button type="button">登录button>
        form>
        <form v-if="ck" style="display: inline" @click="out">
            <button type="button">退出登录button>
        form>
    div>
template>

<script>
    export default {
        data() {
            return {
                user: "请登录",
                ck: false,
            };
        },
        methods: {

            register() {
                this.$router.push("register");
            },
            login() {
                if (document.cookie) {
                    var cookie = {};
                    var line = document.cookie.split("; ");
                    cookie[line[0].split("=")[0]] = line[0].split("=")[1];
                    cookie[line[1].split("=")[0]] = line[1].split("=")[1];
                    console.log(cookie);
                    this.user = "欢迎:" + cookie["username"] + "(id:" + cookie["id"] + ")";
                } else {
                    this.$router.push("login");
                }
            },
            out() {
                var exdate = new Date();
                exdate.setDate(exdate.getDate() + -1);
                document.cookie = "username=''; expires=" + exdate.toGMTString();
                document.cookie = "id=''; expires=" + exdate.toGMTString();
                if (!document.cookie) {
                    console.log("cookie清除完成");
                }
                this.user = "请登录";
                this.ck = false;
            }
        },
        created() {
            if (document.cookie) {
                this.ck = true;
                var cookie = {};
                var line = document.cookie.split("; ");
                cookie[line[0].split("=")[0]] = line[0].split("=")[1];
                cookie[line[1].split("=")[0]] = line[1].split("=")[1];
                console.log(cookie);
                this.user = "欢迎:" + cookie["username"] + "(id:" + cookie["id"] + ")";
            }
        }
    }
script>

<style lang="less">style>

vue register.vue

<template>
    <div id="register">
        <h3>
            <span style="display:inline-block;width:200px;text-align:right;">用户注册span>
        h3>
        <form action="" method="post" @submit.prevent="submit">
            <p>
                <span style="display:inline-block;width:80px;text-align:right;">昵称：span>
                <input type="text" v-model="nickname" value="" autocomplete>
                <i v-if="nnerror" style="color: #ff0000;font-size: small;">{{nnerror}}i>
                <i v-if="!nnerror" style="color: #00ff00;font-size: small;">✔ i>
            p>
            <p>
                <span style="display:inline-block;width:80px;text-align:right;">用户名：span>
                <input type="text" v-model="username" value="" autocomplete>
                <i v-if="unerror" style="color: #ff0000;font-size: small;">{{unerror}}i>
                <i v-if="!unerror" style="color: #00ff00;font-size: small;">✔ i>
            p>
            <p>
                <span style="display:inline-block;width:80px;text-align:right;">密码：span>
                <input type="password" v-model="password" value="" autocomplete>
                <i v-if="pwerror" style="color: #ff0000;font-size: small;">{{pwerror}}i>
                <i v-if="!pwerror" style="color: #00ff00;font-size: small;">✔ i>
            p>
            <p>
                <span style="display:inline-block;width:80px;text-align:right;">确认密码：span>
                <input type="password" v-model="pwagain" autocomplete>
                <i v-if="pwaerror" style="color: #ff0000;font-size: small;">{{pwaerror}}i>
                <i v-if="!pwaerror" style="color: #00ff00;font-size: small;">✔ i>
            p>
            <span style="display:inline-block;width:160px;text-align:right;">

                <input v-if="check" type="button" v-bind:disabled="check" style="cursor:not-allowed;" value="注册">
                <input v-if="!check" type="button" value="注册" v-on:click="add()">
            span>
        form>

        <div style="white-space: pre-line;">{{message}}div>

        <form style="display: inline" @click="main">
            <button type="button">主页button>
        form>
    div>
template>

<script>
    export default {

        data() {
            return {
                list: "",
                check: true,
                nnerror: "输入你的昵称",
                unerror: "输入用户名",
                pwerror: "输入密码",
                pwaerror: "再次输入密码确认",
                nickname: "",
                username: "",
                password: "",
                pwagain: "",
                message: "",
            };
        },

        watch: {
            nickname: function() {
                if (this.nickname != null) {
                    sessionStorage.setItem("rnickname", this.nickname);
                    if (this.nickname.length == 0) {
                        this.nnerror = "输入你的昵称";
                    } else if (this.nickname.length > 10) {
                        this.nnerror = "昵称长度限制10";
                    } else {
                        this.nnerror = false;
                    }
                }
            },
            username: function() {
                if (this.username != null) {
                    sessionStorage.setItem("rusername", this.username);
                    if (this.username.length == 0) {
                        this.unerror = "输入用户名";
                    } else if (this.username.length > 14 || this.username.length < 6) {
                        this.unerror = "昵称长度限制6~14";
                    } else {
                        this.unerror = false;
                    }
                }
            },
            password: function() {
                if (this.password != null) {
                    sessionStorage.setItem("rpassword", this.password);
                    if (this.password.length == 0) {
                        this.pwerror = "输入密码";
                    } else if (this.password.length > 20 || this.password.length < 6) {
                        this.pwerror = "昵称长度限制6~20";
                    } else {
                        this.pwerror = false;
                    }
                }
            },
            pw: function() {
                if (this.pwagain != null) {
                    sessionStorage.setItem("rpwagain", this.pwagain);
                    if (this.pwagain.length == 0) {
                        this.pwaerror = "再次输入密码确认";
                    } else if (this.password != this.pwagain) {
                        this.pwaerror = "重复密码错误";
                    } else {
                        this.pwaerror = false;
                    }
                }
            },
            dateRange: function() {
                if (this.nnerror == false && this.unerror == false && this.pwerror == false && this.pwaerror ==
                    false) {
                    this.check = false;
                } else {
                    this.check = true;
                }
            }
        },
        created() {

            if (this.nickname != null) {
                this.nickname = sessionStorage.getItem("rnickname");
            }
            if (this.username != null) {
                this.username = sessionStorage.getItem("rusername");
            }
            if (this.password != null) {
                this.password = sessionStorage.getItem("rpassword");
            }
            if (this.pwagain != null) {
                this.pwagain = sessionStorage.getItem("rpwagain");
            }

        },

        computed: {
            dateRange() {
                const {
                    nnerror,
                    unerror,
                    pwerror,
                    pwaerror
                } = this;
                return {
                    nnerror,
                    unerror,
                    pwerror,
                    pwaerror
                }
            },
            pw() {
                const {
                    password,
                    pwagain,
                } = this;
                return {
                    password,
                    pwagain,
                }
            }
        },
        methods: {

            main() {
                this.$router.push("/");
            },

            add: function() {
                var formData = JSON.stringify({
                    nickname: this.nickname,
                    username: this.username,
                    password: this.password
                });
                this.$http.post('http://localhost:8000/api/add_user', formData).then((response) => {

                    console.log(response);
                    if (response.data.error_num == 0) {
                        this.message = "返回: " + response.data.msg + "\n注册成功";
                    } else {
                        this.message = "返回: " + response.data.msg;
                    }
                }, (response) => {

                    console.log(response);
                    this.message = "返回: " + response.data + "\n注册失败";
                });
            }
        }
    };
script>

<style>style>

vue login.vue

<template>
    <div>
        <h3>
            <span style="display:inline-block;width:200px;text-align:right;">用户登录span>
        h3>
        <form action="" method="post" @submit.prevent="submit">
            <p>
                <span style="display:inline-block;width:80px;text-align:right;">用户名：span>
                <input type="text" v-model="username" value="" autocomplete>
                <i v-if="unerror" style="color: #ff0000;font-size: small;">{{unerror}}i>
            p>
            <p>
                <span style="display:inline-block;width:80px;text-align:right;">密码：span>
                <input type="password" v-model="password" value="" autocomplete>
                <i v-if="pwerror" style="color: #ff0000;font-size: small;">{{pwerror}}i>
            p>
            <span style="display:inline-block;width:160px;text-align:right;">

                <input type="submit" value="登录">
            span>
        form>

        <div style="white-space: pre-line;">{{message}}div>
        <p>{{cktest}}p>
        <form style="display: inline" @click="main">
            <button type="button">主页button>
        form>
    div>
template>

<script>
    export default {

        data() {
            return {
                list: "",
                unerror: "",
                pwerror: "",
                username: "",
                password: "",
                message: "",
                cktest: "",
            };
        },
        methods: {

            submit: function(event) {
                var un = "";
                var pw = "";
                var n = -1;
                if (this.username == null || this.username == "") {
                    this.unerror = "用户名不能为空";
                } else {
                    un = this.username;
                }
                if (this.password == null || this.password == "") {
                    this.pwerror = "密码不能为空";
                } else {
                    pw = this.password;
                }
                if (this.password != null && this.password != "" && this.username != null && this.username != "") {
                    var formData = JSON.stringify({
                        username: un,
                        password: pw
                    });
                    this.$http.post('http://localhost:8000/api/login', formData).then((response) => {

                        console.log(response);
                        this.message = "\n返回: " + response.data.msg;

                        if(response.data.error_num == 0){
                            document.cookie = "username="+response.data.name+"; id="+response.data.id

                            this.cktest = document.cookie;
                            this.$router.push("/");
                        }
                    }, (response) => {

                        console.log(response);
                        this.message = "\n返回: " + response.data.msg;
                    });
                }
            },

            main() {
                this.$router.push("/");
            },
        },
        watch: {
            username: function() {
                if (this.username != null) {
                    sessionStorage.setItem("lusername", this.username);
                    if (this.username.length != 0) {
                        this.unerror = "";
                    }
                }
            },
            password: function() {
                if (this.password != null) {
                    sessionStorage.setItem("lpassword", this.password);
                    if (this.password.length != 0) {
                        this.pwerror = "";
                    }
                }
            },
        },
        created() {

            if (this.username != null) {
                this.username = sessionStorage.getItem("lusername");
            }
            if (this.password != null) {
                this.password = sessionStorage.getItem("lpassword");
            }
        },
    }
script>

<style>style>

Original: https://blog.csdn.net/weixin_44476410/article/details/121542019
Author: 浪速之星
Title: vue+django实现简单注册登录和cookie储存