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

技术栈：

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