首页 > 其他分享 >前后端分离实现注册+登录（Vue3.0 + Django3.2)

前后端分离实现注册+登录（Vue3.0 + Django3.2)

时间：2023-07-21 09:46:36浏览次数：39  
标签：username vue 登录 django Vue3.0 import contrib Django3.2 data

博客地址：https://www.cnblogs.com/zylyehuo/

一、使用 vite+webstorm 搭建 Vue 环境，构建前端

1、结构树

2、main.js

import { createApp } from 'vue'
//import './style.css'
import App from './App.vue'

import router from "./utils/router";

createApp(App).use(router).mount('#app')

3、http.js

import axios from "axios";  // 要导入安装的包，则直接填写包名即可。不需要使用路径

// 实例化
const http = axios.create({
    //baseURL: 'http://wthrcdn.etouch.cn/',    // 请求的公共路径,一般填写服务端的默认的api地址，这个地址在具体使用的时候覆盖
    baseURL: 'http://127.0.0.1:8000/vue/',    // 请求的公共路径,一般填写服务端的默认的api地址，这个地址在具体使用的时候覆盖
    timeout: 8000,                           // 最大请求超时时间，请求超过这个时间则报错，有文件上传的站点不要设置这个参数
    //headers: {'X-Custom-Header': 'foobar'}   // 默认的预定义请求头，一般工作中这里填写隐藏了客户端身份的字段
});

export default http;

4、router.js

import {createRouter, createWebHistory} from 'vue-router';
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import Index from "../components/Index.vue";

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            name: "myLogin",
            component: Login,
        },
        {
            path: "/login",
            name: "Login",
            component: Login,
        },
        {
            path: "/reg",
            name: "Register",
            component: Register,
        },
        {
            path: "/index",
            name: "Index",
            component: Index,
        },
    ]
})

export default router;

5、App.vue

<script>

</script>

<template>
  <router-view></router-view>
</template>

<style scoped>

</style>

6、Index.vue

<template>
  <button><router-link to="/reg">register</router-link></button>
  <button><router-link to="/login">login</router-link></button>
  <h3 @click="log">{{ message }}</h3>
  <span>{{ login_message }}</span>
</template>


<!-- 以下为选项API格式 -->
<script>
export default {
  name: "Index",
  data() {
    return {
      message: "welcome to INDEX",
      login_message: '登录成功！！！',
    }
  },
  methods: {
    log() {
      console.log(this.message)
    },
  },
}
</script>


<style scoped>

</style>

7、Register.vue

<template>
  <hr>
  <h1>注册页面</h1>
  <hr>
  用户账号：<input type="text" v-model="username"><span>{{ info1 }}</span><br>
  设置密码：<input :type="password1" v-model="passwd1">
  <button @click="pwd1">{{ tip1 }}</button>
  <span>{{ info2 }}</span><br>
  确认密码：<input :type="password2" v-model="passwd2">
  <button @click="pwd2">{{ tip2 }}</button>
  <span>{{ info2 }}</span><br>
  <button><a href="/login" @click.prevent="send_post">register</a></button>
  <button>
    <router-link to="/login">login</router-link>
  </button>
</template>

<script>
import http from "../utils/http.js";

export default {
  name: "Register",
  data() {
    return {
      username: '请输入用户名',
      passwd1: '请输入密码',
      passwd2: '请确认密码',
      password1: 'password',
      password2: 'password',
      tip1: '显示密码',
      tip2: '显示密码',
      num1: 0,
      num2: 0,
      info1: '',
      info2: ''
    }
  },
  methods: {
    pwd1() {
      if (this.num1 === 0) {
        this.password1 = 'text'
        this.tip1 = '隐藏密码'
        this.num1 = 1
      } else {
        this.password1 = 'password'
        this.tip1 = '显示密码'
        this.num1 = 0
      }
    },
    pwd2() {
      if (this.num2 === 0) {
        this.password2 = 'text'
        this.tip2 = '隐藏密码'
        this.num2 = 1
      } else {
        this.password2 = 'password'
        this.tip2 = '显示密码'
        this.num2 = 0
      }
    },
    send_post() {
      http.post("http://127.0.0.1:8000/vue/", {
            username: this.username,
            passwd: this.passwd1,
            passwd2: this.passwd2,
          },
      ).then(response => {
        //console.log(response.data); // 服务端响应的响应体
        if (response.data.state == 'fail1') {
          //console.log('注册失败')
          this.info1 = response.data.tip
          this.info2 = ''
        } else if (response.data.state == 'fail2') {
          this.info1 = ''
          this.info2 = response.data.tip
        } else {
          window.location.href = "/login"
        }
      }).catch(error => {
        console.log('请求错误！error=', error)
      })
    },
  }
}
</script>

<style scoped>
* {
  margin: 10px;
}

span {
  color: red;
}
</style>

8、Login.vue

<template>
  <hr>
  <h1>登录页面</h1>
  <hr>
  账号：<input type="text" v-model="username"><span>{{ info3 }}</span><br>
  密码：<input :type="password" v-model="passwd">
  <button @click="pwd">{{ tip }}</button>
  <span>{{ info4 }}</span>
  <br>
  <button>
    <a href="/" @click.prevent="send_post">login</a>
  </button>
  <button>
    <router-link to="/reg">register</router-link>
  </button>
</template>

<script>
import http from "../utils/http.js";

export default {
  name: "Login",
  data() {
    return {
      username: '请输入用户名',
      passwd: '请输入密码',
      password: 'password',
      tip: '显示密码',
      num: 0,
      info3: '',
      info4: '',
    }
  },
  methods: {
    pwd() {
      if (this.num === 0) {
        this.password = 'text'
        this.tip = '隐藏密码'
        this.num = 1
      } else {
        this.password = 'password'
        this.tip = '显示密码'
        this.num = 0
      }
    },
    send_post() {
      http.post("http://127.0.0.1:8000/vue/", {
            username: this.username,
            passwd: this.passwd,
          },
      ).then(response => {
        //console.log(response.data); // 服务端响应的响应体
        if (response.data.state == 'fail3') {
          //console.log('注册失败')
          this.info3 = ''
          this.info4 = response.data.tip
        } else if (response.data.state == 'fail4') {
          this.info3 = response.data.tip
          this.info4 = ''
        } else {
          window.location.href = "/index"
        }
      }).catch(error => {
        console.log('请求错误！error=', error)
      })
    },
  }
}
</script>


<style scoped>
* {
  margin: 10px;
}

span {
  color: red;
}
</style>

二、使用 pycharm 搭建 Django 环境，构建后端

1、结构树

2、settings.py

"""
Django settings for vueDjango project.

Generated by 'django-admin startproject' using Django 3.2.

For more information on this file, see
https://docs.djangoproject.com/en/3.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.2/ref/settings/
"""
import os
from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-q!0%lzaj1csl*(6olo+!h=7de5&*@tf_@r@2+=br_nvmzsump='

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'vue.apps.VueConfig',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'vueDjango.urls'

CORS_ORIGIN_ALLOW_ALL = True

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates']
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'vueDjango.wsgi.application'

# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

# Password validation
# https://docs.djangoproject.com/en/3.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

# Internationalization
# https://docs.djangoproject.com/en/3.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/

STATIC_URL = '/static/'

# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

3、urls.py

from django.urls import path
from vue import views

urlpatterns = [
    path('vue/', views.VueViews.as_view()),
]

4、models.py

from django.db import models


# Create your models here.
class User(models.Model):
    """学生信息"""
    username = models.CharField(max_length=32, verbose_name="用户名")
    passwd = models.CharField(max_length=32, verbose_name="密码")

    class Meta:
        db_table = "tb_user"

    def __str__(self):
        return str(self.username)

5、serializers.py

from rest_framework import serializers
from vue.models import User


class UserModelSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = "__all__"

6、views.py

from django.shortcuts import render, HttpResponse, redirect

# Create your views here.

from rest_framework import status
from rest_framework.views import APIView
from .serializers import UserModelSerializer, User
from rest_framework.response import Response
import json


class VueViews(APIView):
    # def get(self, request):
    #     """获取所有用户信息"""
    #     # 1. 从数据库中读取用户列表信息
    #     instance_list = User.objects.all()
    #     # 2. 实例化序列化器，获取序列化对象
    #     serializer = UserModelSerializer(instance_list, many=True)
    #     # 3. 使用serializer.data实现对数据进行序列化成字典
    #     print(request.data)
    #     return Response(serializer.data)

    def post(self, request):
        """添加用户信息"""
        # 1. 获取客户端提交的数据，实例化序列化器，获取序列化对象
        serializer = UserModelSerializer(data=request.data)
        # 2. 反序列化[验证数据、保存数据到数据库]
        serializer.is_valid(raise_exception=True)

        username = request.data['username']
        passwd = request.data['passwd']
        if request.data.get('passwd2', ''):
            userinfo = User.objects.filter(username=username)
            if userinfo.exists():
                # print('用户已存在')
                info = {"state": "fail1", "tip": '用户已存在'}
                return HttpResponse(json.dumps(info))
            else:
                passwd2 = request.data['passwd2']
                if passwd2 != passwd:
                    # print('两次密码输入不同，请重新输入')
                    info = {"state": "fail2", "tip": '两次密码输入不同，请重新输入'}
                    return HttpResponse(json.dumps(info))
                else:
                    serializer.save()
                    # print('注册成功')
                # print(username, passwd, passwd2)
        else:
            userinfo = User.objects.filter(username=username)
            if userinfo.exists():
                if User.objects.get(username=username).passwd == passwd:
                    # print('登录成功')
                    pass
                else:
                    # print('密码错误，请重新输入')
                    info = {"state": "fail3", "tip": '密码错误，请重新输入'}
                    return HttpResponse(json.dumps(info))
            else:
                # print('用户名不存在，请重新输入')
                info = {"state": "fail4", "tip": '用户名不存在，请重新输入'}
                return HttpResponse(json.dumps(info))
            # print(username, passwd)

        # 3. 返回新增的模型数据经过序列化提供给客户端
        return Response(serializer.data, status=status.HTTP_201_CREATED)

标签：username,vue,登录,django,Vue3.0,import,contrib,Django3.2,data
From： https://www.cnblogs.com/zylyehuo/p/17570118.html

相关文章

  • sql面试题 - 求出连续登录7天的用户/用户数
    连续性问题，如：求出连续登录7天的用户/用户数求出连续充电次数大于等于12次的用户数求出3年获得冠军的选手......通用的解法：数据去重处理。如求连续7天登录的用户数，则一个用户一天只保留一条数据开窗函数。找到分区主键，然后按照时间进行排序求得rank用时间-rank，得到一......
  • vue3 登录添加图形验证码
    1.新增组件IdentifyCode.vue，使用canvas绘制验证码内容：<template><divclass="s-canvas"@click="refreshCode"><canvasid="s-canvas":width="contentWidth":height="contentHeight"......
  • linux账号登录错误次数过多解锁
    [root@inmnmapp50~]#pam_tally2--userOSS3_JC_BSLoginFailuresLatestfailureFromOSS3_JC_BS32207/20/2317:50:1410.135.7.152[root@inmnmapp50~]#pam_tally2--userOSS3_JC_BS--resetLoginFailuresLatestfai......
  • 19、SSH限制ip登录
    1、window端通过ssh连接ubuntu虚拟接虚拟机ip：192.168.49.128主机用户：liuwc、liuwc1 ①、只允许指定用户登录[email protected] 修改配置文件vim/etc/ssh/sshd_config 执行此操作修改没有写的权限 执行：sudogedit/etc/ssh/sshd_config 命令行ssh登......
  • ubuntu云服务器通过mstsc远程登录
    安装一个轻量级桌面环境，并实现通过Windows11的远程桌面服务访问，以及将所需的服务添加到开机自启，可以按照以下步骤进行操作：首先，通过SSH登录到云服务器。可以使用终端或PuTTY（Windows用户）等工具进行SSH登录。安装轻量级桌面环境，推荐使用Xfce桌面环境。运行以下命令......
  • RTMP流媒体服务器LntonMedia（免费）流媒体服务器平台修改登录密码与开启接口鉴权的解决方
    LntonMedia支持一站式的上传、转码、直播、回放、嵌入、分享功能，具有多屏播放、自由组合、接口丰富等特点。平台可以为用户提供专业、稳定的直播推流、转码、分发和播放服务，全面满足超低延迟、超高画质、超大并发访问量的要求。1、如何修改密码为了提升平台数据安全性，LntonMedia等......
  • 第二天，三次登录
    #用户登录3次机会i=0whilei<3:username=input("请输入用户名：")password=int(input("请输入密码："))ifusername=='cxr'andpassword==123:print('Sucessed')else:print('failed,plztr......
  • 怎么查看sql server数据库登录密码
    如何查看SQLServer数据库登录密码要查看SQLServer数据库登录密码，需要使用系统存储过程和DMV（DynamicManagementViews）来查询相关信息。下面是一个详细的步骤说明，以及相应的代码示例。步骤1：连接到SQLServer实例首先，使用SQLServerManagementStudio（SSMS）或其他SQLServer数据......
  • 02 开发社区登录模块
    发送邮件流程邮箱设置启用客户端SMTP服务SpringEmail导入jar包邮箱参数配置使用JavaMailSender发送邮件模板引擎使用Thymeleaf发送HTML邮件启用客户端SMTP服务QQ邮箱在这里开启：导入邮箱包SpringBootStarterMailmaven坐标： <!--https://mvnrepos......
  • docker mysql root 外网无法登录
    如何实现“dockermysqlroot外网无法登录”整体流程下面是实现“dockermysqlroot外网无法登录”的步骤。我们将使用Docker来创建一个MySQL容器，并配置使得root用户无法从外部访问。安装Docker：首先需要在你的机器上安装Docker，可以参考官方文档或者使用适合你操作系统的安装......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99