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 作为登录组件

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})

具体代码

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

13 跑起项目

python manage.py runserve 0:8080

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

14 GitHub 地址

https://github.com/ggkong/pc_admin