Django+Vue 实现登录功能（elementUI,axios,Qs）前后端分离

最新推荐文章于 2024-09-22 21:21:16 发布
最新推荐文章于 2024-09-22 21:21:16 发布
阅读量6.1k 收藏 54
点赞数 3
文章标签： django mysql vue ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongge123456/article/details/107627457
版权

技术栈：

Django  vue  Element  webpack axios Qs

介绍：

利用django + vue 实现了 前后端分离 目前只实现了登录功能 后期项目将继续更新

实现步骤：

1创建Django项目

django-admin startproject pc_admin

2创建一个App作为项目的后台

python manage.py startapp backend

3使用vue-cli 创建一个名叫frontend 的vue 项目作为项目前端

vue-init webpack frontend

4在vue 中 创建一个 component 作为登录组件

<template>
  <div style="text-align: center">

    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width: 30%;display: inline-block">
      <el-form-item>
        <h1>登录</h1>
      </el-form-item>

      <el-form-item label="" prop="username">
        <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>

      <el-form-item label="" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码" ></el-input>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios';
  import Qs from 'qs';
  export default {
    data() {
      return {
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          username:[
            // 当组件离开焦点的时候进行验证
            {required:true, message:'请输入用户名',trigger:'blur'}
          ],
          password:[
            {required:true, message:'请输入密码',trigger:'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) =>{
          if (valid){
            const _this = this
            var data = Qs.stringify({"username":this.ruleForm.username,"password":this.ruleForm.password})
            axios.post("http://localhost:8080",data).then(
              function (resp) {
                const flag = resp.data.request['flag']
                if (flag == 'yes'){
                  // console.log(resp.data.request['flag'])
                  _this.$router.push("/index")
                }else {
                  alert("错误登录")
                }
              }
            )
            // 开始用的 axios 发送请求
            // console.log(this.ruleForm)
          }else {
            alert("验证错误")
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

5其中引入了element_ui

引入的方式为

npm i element-ui

在src/main.js 中添加 如下配置

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

则上述的 el 代码可以出现效果

6进行路由配置

在进行路由配置之前 最好在 routes:[ ] 前加上 moded:‘hsitory’ 防止出现 路径出现 #

具体的路由配置如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'
import index from '@/components/index'
Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'index',
      component: index
    }
  ]
})

6 此时可进行前端调试

出现满意的效果之后可以写后台

7因为比较喜欢用mysql 所以先加上mysql 的配置

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'xxxxxxxxxxxxx', # 数据库
        'HOST' : '39.101.140.131',
        'PORT' : 3306,
        'USER':'root',
        'PASSWORD':'xxxxxxxxxxx'  #密码
    }
}

8添加vue 的静态路径 (webpack 打包可以默认出现dist 文件夹 )

# Add for vue.js
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 'DIRS': [],
	    'DIRS':['frontend/dist'],
        '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',
            ],
        },
    },
]

9直接上后台代码 以为比较熟悉

# pc_admin/urls
from django.contrib import admin
from django.urls import path,include
from backend import urls as backend_urls
from django.views.generic.base import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
	path(r'', include(backend_urls)),
]

# backend/url
from django.urls import path
from . import views

urlpatterns = [
	path("", views.login)
]


# backend/view
from . import models
from django.http import JsonResponse
# Create your views here.


def login(request):
	username = request.POST.get("username")
	password = request.POST.get("password")
	print(username)
	print(password)
	try:
		user = models.User.objects.get(username=username)
	except:
		date = {'flag': 'no', "msg" : "no to user"}
		return JsonResponse({'request':date})
	if password == user.password:
		date_msg = "登陆成功"
		date_flag = "yes"
		print("成功")
	else:
		date_msg = "密码输入错误"
		date_flag = "no"
	date = {'flag':date_flag,'msg': date_msg}

	return JsonResponse({'request': date})

登录方法 在安全性上还没有做太多考虑 后期会加密

10 做后台方法的测试 没有问题后进行前后台=端结合

11 进行跨域配置 setting

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
	'backend',
	'corsheaders', # 跨域配置1
]
MIDDLEWARE = [
	'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware', # 注意顺序  跨域配置二  两个中间件
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
# 跨域配置三
#跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:8080',
	'http://localhost:8082'
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

12 vue 进行跨域请求

import axios from 'axios';
import Qs from 'qs';

引入axios 是为了进行请求 引入Qs 是为了封装post请求发送的数据 封装为form-data

var data = Qs.stringify({"username":this.ruleForm.username,"password":this.ruleForm.password})

具体代码

<script>
  import axios from 'axios';
  import Qs from 'qs';
  export default {
    data() {
      return {
        ruleForm: {
          username: '',
          password: '',
        },
        rules: {
          username:[
            // 当组件离开焦点的时候进行验证
            {required:true, message:'请输入用户名',trigger:'blur'}
          ],
          password:[
            {required:true, message:'请输入密码',trigger:'blur'}
          ]
        }
      };
    },
      
    methods: {
       // 提交方法
      submitForm(formName) {
        // 检查是否拿到了正确的需要验证的form
        this.$refs[formName].validate((valid) =>{
          if (valid){
            const _this = this
            // 进行post 请求体的封装 在上面提到过
            var data = Qs.stringify({"username":this.ruleForm.username,"password":this.ruleForm.password})
            // axios 发送请求
            axios.post("http://localhost:8080",data).then(
              function (resp) {
                const flag = resp.data.request['flag']
                if (flag == 'yes'){
                  // console.log(resp.data.request['flag'])
                   // 请求成功后进行跳转 由于this 指向问题 加上了_this
                  _this.$router.push("/index")
                }else {
                  alert("错误登录")
                }
              }
            )
            // 开始用的 axios 发送请求
            // console.log(this.ruleForm)
          }else {
            alert("验证错误")
          }
        })
      },
      // 将填写的表单 置空
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

其中的this 指向问题是前端中老生常谈的问题 我的方法是指明this

13 跑起项目

python manage.py runserve 0:8080

npm run dev （根据package.json 以及vue 的版本）

14 GitHub 地址

https://github.com/ggkong/pc_admin
bug开发工程师.
关注
django+vue.js项目-注册登录功能
乱写乱画
01-10 6821
API参数： 1.登录： 路径：api/v1/LoginRegister/Login 用户名：username 密 码：password token：token 使用md5加密的用户名，具有唯一性，用于判定用户是否登录 前后端数据交互图： 2.注册： 用 户名：username 密 ...
Django+Vue+ElementUI前后端分离
bnanala的博客
04-19 547
问题：Got AttributeError when attempting to get a value for field `password_repeat… 前提概要 在做注册的后端逻辑时，要用到password_repeat进行验证，但我并不想把它存入数据库，因此需要删掉。于是，在完成验证后，del attrs['password_repeat‘]，但.save()时依旧有这个字段。 解决方法 定义序列化字段时，加参数write_only=True ...
Django和Vue实现登录
future_jie的博客
04-14 2682
Django后端连接数据库实现登录 import jwt import json import datetime from django.views import View from django.http import JsonResponse class denglu(View): def post(self,request): z=json.loads(request.body) s=warehouse.objects.filter(users=z['in.
vue+django+axios前后端分离项目实战经验
最新发布
qq_74629570的博客
09-22 1250
vue+django+axios连接测试，并解决常出现的报错问题
vue+djiango实现登录功能
kairui_guxiaobai的博客
12-02 1083
测试平台--登录篇
【django+vue】连接数据库、登录功能
urge的博客
11-20 1835
src下创建router.js// 导入vue-router// 导入你的组件import Login from './components/Login.vue' // 引入Login组件// 定义路由规则// 其他路由...// 创建路由实例routes});这段代码使用 Vue Router 的 API 定义了路由规则和创建了一个路由实例。定义了一组路由规则（routes），用于匹配不同的 URL 路径和对应的组件。每个路由规则都是一个对象，包含以下属性：path。
Django+vue+ElementUi 实现前后端分离项目
vincent的博客
10-28 4680
![](https://img2020.cnblogs.com/blog/2595966/202110/2595966-20211027200616914-384109510.png) ![](https://img2020.cnblogs.com/blog/2595966/202110/2595966-20211027200630022-562388827.png) 本文主要分为五个部分，逐一进行讲解前后端分离项目环境搭建流程，主要有：环境搭建、Django、vue、整合、总结； 一..
Django 和 vue 的登录验证
qq_37561833的博客
01-07 3937
1.前端利用vue中的axios进行传值，将获取到的账号密码以form表单的形式发送给后台django。 2.后台django 校验用户信息是否正确，然后用session记录用户的登录状态，下次请求时候用session验证。 前端 1. axios 配置： 主要是在请求前添加django 的csrf 防护功能的验证token // axios 配置 import axios from 'axio...
Vue+Django之图片上传篇
qq_43964958的博客
02-04 2627
Vue+Django之图片上传篇前端部分(Vue)注意:后端(Django) 之前在项目中也遇到过这个问题,当时解决办法比较笨重且不方便,胡乱配置.现在做项目有遇到这个问题了,因为觉得之前的方法实在不好,所以又重新找方法解决了.记录下也分享给遇到同样问题的小伙伴! 在项目中,图片上传并附带几个参数的场景非常常见,如果技术栈是Vue+Django的小伙伴就一定会遇到这个需求. 前端部分(Vue) 页面部分 <template> <div class="container">
vue-cli3使用axios请求后端（Python+Django）的数据和跨域proxy设置踩坑指南
明日复明日的博客
05-18 2836
注意：我是负责前端部分的，后端是同学在负责，所以我只负责一个前后端的对接。背景是一个在线商城。 首先清楚前端是作为客户端，请求后端服务端的消息。所以前端后端都run起来。 后端的同学给了我这样的接口文档： 因此后端请求这个url就能够返回数据： 接下来是前端的问题，前端就是要向这个URL发出get的请求。 这里我使用了axios的包，首先npm install axios，然后在/src/api/index.js下对axios做配置： import axios from 'axios'; import
vue3+cli4.5知识点6axios通信:get请求|post请求(已封装)
yangyangdt的博客
01-08 1940
vuecli4.5中没有了Vue实例对象，只有一个createapp，怎么像以前的版本一样引入axios呢？本文详解。内含封装代码。
django rest framework vue 实现用户登录详解
09-18
主要介绍了django rest framework vue 实现用户登录详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Django实现登录-注册等功能
10-13
Django实现登录-注册等功能==仅供参考
axios与djangopost通信 后端获取数据
lymmurrain的博客
11-05 638
前置知识 ajax形式post提交数据的content-type有主要常用三种 application/x-www-form-urlencoded multipart/form-data(上传文件) application/json 原生的django对于content-type为application/x-www-form-urlencoded 的ajax请求，且data经过urlencoded编码，其数据是放在request.POST(request.body中也会有数据，但是格式得自己重新反序列化
快速搭建Python（Django）+Vue环境并实现页面登录注册功能
热门推荐
X_H学Java的博客
07-16 1万+
本文旨在介绍快速搭建vue+django环境并实现登录注册小demo
python django与vue开发_【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发
weixin_34321609的博客
02-19 798
一、概述二、前端页面开发2.1、在html文件的头中引入相关模块Document2.2、在html文件中body后面引入自定义的JS文件(即导入Vue代码)备注：备注1、关联关系备注2、布局相关html,body,#app,.el-container{margin:0px;padding:0px;height:100%;}三、后端接口开发3.1、在新建的应用APP中的views.py文件中新建接口...
Django-前后端分离-登录接口-基础
YANGGEOL
09-21 2865
Django cookie 与 session Cookie 是存储在客户端计算机上的文本文件，并保留了各种跟踪信息。 识别返回用户包括三个步骤： 服务器脚本向浏览器发送一组 Cookie。例如：姓名、年龄或识别号码等。 浏览器将这些信息存储在本地计算机上，以备将来使用。 当下一次浏览器向 Web 服务器发送任何请求时，浏览器会把这些 Cookie 信息发送到服务器，服务器将使用这些信息来识别用户。 HTTP 是一种"无状态"协议，这意味着每次客户端检索网页时，客户端打开一个单独的连接到 Web 服务器
Vue3 + Django 前后端分离项目实现密码认证登录
Python技术探索
03-23 3448
Vue3 + Django 前后端项目实现密码认证登录
django+vue前后端分离 实现 登录 实践记载
小球的博客
10-12 2223
login 登录 axios
Django+Vue.js：实战前后端分离项目搭建教程
本文档详细介绍了如何使用Django和Vue.js结合来搭建一个前后端分离的Web...本文提供了一个Django与Vue.js搭建前后端分离项目的实践指南，帮助读者理解如何在实际开发中结合这两种技术，实现高效、模块化的开发模式。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值