python vue element_干货｜vue-element-admin和Django简单整合

原标题：干货｜vue-element-admin和Django简单整合

前言

笔者是一个python guy开发者-----俗称"二把刀开发者"，平常大部分时间写的都是poc、脚本和工具类应用，很少写整站项目。如果你是一个前端工程师和资深开发工程师，请忽略本文。我们这样的 guy在做一些小的项目时，经常受限于对前端代码不熟悉，导致写各种工具时，不喜欢做前端页面。

最近发现个神器“vue-element-admin” https://github.com/PanJiaChen/vue-element-admin 可以帮助解决这个问题，让后端狗也能“超快速”上手酷炫的前端页面。

虽然项目的README非常详细，也有startup的教程，但是对于前后端交互的描述还是有些不清楚，本文是笔者排坑总结下的步骤，方便大家配置。

0x01 vue-element-admin 简介

vue-element-admin 是一个后台集成解决方案，它基于 vue 和 element，使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

引用自https://github.com/PanJiaChen/vue-element-admin/blob/master/README.zh-CN.md

而且Repo的主人还很良心的告诉你 “这个是一个后台集成方案，不是模板，模板另有地址供大家参考”集成方案相当于在vue-element上进行了很多的集成，而模板更像一个vue-element纯模板，对有前端开发能力的选手而言，更灵活。

本文使用的是这个集成方案和Django做的整合，方便我们这些后端工具狗们快速上手，将数据展示到前端。

0x02 vue-element-admin 下载和部署

这里按照项目里的Readme.md部署就可以了，非常简单。

# 克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git

# 安装依赖

npm install

# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=https://registry.npm.taobao.org

# 启动服务

npm run dev

这个时候，就可以看到酷炫的页面了。

大家可以仔细阅读Repo里的各种教程来上手。推荐直接访问：https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 来了解项目的架构。

这个说明文档没有一句废话，建议认真阅读。

主要有以下重点：

目录结构

├── build // 构建相关

├── config // 配置相关

├── src // 源代码

│ ├── api // 所有请求

│ ├── assets // 主题 字体等静态资源

│ ├── components // 全局公用组件

│ ├── directive // 全局指令

│ ├── filters // 全局 filter

│ ├── icons // 项目所有 svg icons

│ ├── lang // 国际化 language

│ ├── mock // 项目mock 模拟数据

│ ├── router // 路由

│ ├── store // 全局 store管理

│ ├── styles // 全局样式

│ ├── utils // 全局公用方法

│ ├── vendor // 公用vendor

│ ├── views // views 所有页面

│ ├── App.vue // 入口页面

│ ├── main.js // 入口文件 加载组件 初始化等

│ └── permission.js // 权限管理

├── static // 第三方不打包资源

│ └── Tinymce // 富文本

├── .babelrc // babel-loader 配置

├── .eslintrc.js // eslint 配置项

├── .gitignore // git 忽略项

├── .travis.yml // 自动化CI配置

├── favicon.ico // favicon图标

├── index.html // html模板

└── package.json // package.json

新建view:

https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/new-page.html#%E6%96%B0%E5%A2%9E-view

路由加载:

https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html#%E4%BE%A7%E8%BE%B9%E6%A0%8F

新增api:

https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/new-page.html#%E6%96%B0%E5%A2%9E-api

0x03 Django的下载和部署

Linux上Django安装非常简单，只要装了python和pip，直接pip install即可

pip install Django

安装好之后,创建example项目

mkdir djangotest

cd djangotest

django-admin startproject example

目录结构

├── djangotest

│ ├──example // django项目目录

│ │ ├── steeings.py // Django项目配置文件

│ │ ├── urls.py // 路由文件

│ │ ├── view.py // view实例页面

│ │ ├── wsgi.py // web开发的标准文件steeings.py

│ ├──db.sqlite3

│ ├──manage.py //启动文件

启动Django项目

./manage.py runserver

Django项目的helloworld创建完成了，下面开始进行整合。

0x04 Django和vue-element-admin整合

上面说的都是各自的基础配置，方便小白上手，现在开始本文的重点“整合”：

我们先来看看目前的状态

目前的状态：

vue-element-admin 开启在9527端口

Django 开启在8000端口

前后端是独立运行的，我们要想通过访问80端口就可以同时访问前后端，有三种方法。

方法一：将vue的前端代码构建好成静态文件，整合到Django中去。(但是这里不方便动态调试前端代码，所以没用这个方法)

方法二：在生产环境中需要使用nginx反向代理。不管是 proxy 和 nginx 的原理都是一样的，通过搭建一个中转服务器来转发请求规避跨域的问题

方法三：在Nginx上做端口转发，Django只提供api接口，通过配置CROS和vue跨域交换数据。

这里使用方法三，理由是前后端完全分离，便于开发，加快后端狗的开发速度。

开始

— — —Step1nginx配置— — —

listen 80;

location /api/ {

proxy_pass http://localhost:8000; }

location / {

proxy_pass http://localhost:9527;

}

我们把 "/api" 路径都交给Django去处理，根路径 "/" 交给vue-element-admin去处理。这样访问80端口就可以同时访问前后端了。

— — —nginx配置完成— — —

解决跨域的问题，否则前端是无法跨域去访问Django传过来的数据的。在Django里的settings.py里可以配置CROS。

— — —Step2CROS配置— — —

引入 django-cors-middleware

pip install django-cors-middleware

INSTALLED_APPS = (

...

'corsheaders',

)

添加 中间件 监听

MIDDLEWARE = [

...

'corsheaders.middleware.CorsMiddleware',

'django.middleware.common.CommonMiddleware',

...

]

配置允许跨域访问的域名

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (

'google.com',

'hostname.example.com'

)

默认值是全部:

CORS_ORIGIN_WHITELIST = ()

或者定义允许的匹配路径正则表达式.

CORS_ORIGIN_REGEX_WHITELIST = ('^(https?://)?(w+.)?>google.com$', )

默认值:

CORS_ORIGIN_REGEX_WHITELIST = ()

设置允许访问的方法:

CORS_ALLOW_METHODS = (

'GET',

'POST',

'PUT',

'PATCH',

'DELETE',

'OPTIONS'

)

设置允许的header：

默认值:

CORS_ALLOW_HEADERS = (

'x-requested-with',

'content-type',

'accept',

'origin',

'authorization',

'x-csrftoken'

)

— — — CROS配置完成— — —

0x05 应用举例

至此，两端的基础配置已经完成了，我们需要使用一个例子来具体讲解前后端交互的开发过程。用vue-element-admin中complexTable来举例，具体代码在/src/views/table/complexTable.vue这里的代码分为vue端和django端，下面分别来说。

vue端

vue端思路：

添加api

新建一个 "api/table.js" 去调用/api/test接口获取后端数据(后端代码在下面Django后端代码给出)

api/table.js

import request from '@/utils/request'

export function fetchTableData(query) {

return request({

url: '/api/test/',

method: 'GET',

params: query,

})

}

添加view

在/view/下创建新目录/view/mytable将view/table/complexTable.vue拷贝到/view/mytable/mytable.vue。然后修改部分代码

mytable.vue部分代码

import { fetchTableData} from '@/api/table' //这里要import哦~~

...

...

...

getList() {

this.listLoading = true

fetchTableData(this.listQuery).then(response => {

this.list = response.data //调用api里的fetchTableData，向后端请求数据

//alert(JSON.stringify(this.listQuery))

//alert(listQuery)

//无论哪个view，这里参数交互都是json，哪里不知道数据格式，就alert哪里~~然后再后端对应生成放到response就可以了。

this.total = 1

//这里我暂时随意写一个数字，其实应该是从后端获取的

// Just to simulate the time of the request

setTimeout(() => {

this.listLoading = false

}, 1.5 * 1000)

})

},

添加路由

所有的路由都在index.js里添加，根据其他路由，大致修改下就可以了。

注意下，这里每个边栏都是一个json格式的组，都包含path component redirect name meta{title,icon} ，如果子目录只有一个元素，左边栏会将子目录的元素作为左边栏一项显示出来。

router/index.js

{

path: '/mytable',

component: Layout,

redirect: '/mytable/myTable',

name: 'mytable',

meta: {

title: 'MyTable',

icon: 'table'

},

children: [

{ path: 'myTable', component: () => import('@/views/mytable/myTable'), name: 'myTable', meta: { title: 'MyTable' ,icon: 'table'}}

]

},

Django后端

Django后端开发很简单，一般就是6个字；“写view，指路由”

添加路由

urls.py

from django.conf.urls import url

from django.contrib import admin

import view

urlpatterns = [

url(r'^admin/', admin.site.urls),

url(r'^api/test',view.hello), #这就是前端要掉的接口，需要在路由里配置好

]

添加数据返回页面

view.py

from django.http import HttpResponse

import json

def hello(request):

page = request.GET.get('page')//从前端获取listQuery参数中的数据

limit = request.GET.get('limit')//从前端获取listQuery参数中的数据

mytype = request.GET.get('type')//从前端获取listQuery参数中的数据

sort = request.GET.get('sort')//从前端获取listQuery参数中的数据

dict1 = {} //第一行数据

dict1['id'] = '1'

dict1['date'] = '606208526029'

dict1['title'] = 'my title'

dict1['author'] = 'james'

dict1['reviewer'] = 'Larry'

dict1['importance'] = '1'

dict1['readmings'] = '1'

dict1['status'] = 'draft'

dict1['actions'] = '1'

dict1['edit'] = '1'

dict1['publish'] = '1'

dict1['draft'] = '0'

dict1['content_short'] = 'it is a test'

dict1['content'] = 'ceshishuju'

dict1['forecast'] = 99.11

dict1['type'] = 'JP'

dict1['status'] = 'draft'

dict1['display_time'] = '1994-05-26 18:59:04'

dict1['comment_disabled'] = 'true'

dict1['pageviews'] = 1823

dict1['image_uri'] = 'https://wpimg.wallstcn.com'

dict1['platforms'] = ['a-platform']

dict2 = {} //第二行数据

dict2['id'] = '2'

dict2['date'] = '602208526029'

dict2['title'] = 'my title2'

dict2['author'] = 'james2'

dict2['reviewer'] = 'Larry2'

dict2['importance'] = '2'

dict2['readmings'] = '2'

dict2['status'] = 'draft'

dict2['actions'] = '1'

dict2['edit'] = '1'

dict2['publish'] = '1'

dict2['draft'] = '0'

dict2['content_short'] = 'it is a test2'

dict2['content'] = 'ceshishuju2'

dict2['forecast'] = 99.22

dict2['type'] = 'CN'

dict2['status'] = 'draft'

dict2['display_time'] = '1994-05-26 18:59:04'

dict2['comment_disabled'] = 'true'

dict2['pageviews'] = 2000

dict2['image_uri'] = 'https://wpimg.wallstcn.com'

dict2['platforms'] = ['a-platform']

mylist = list()

mylist.append(dict1)

mylist.append(dict2)

resultlist = list()

if mytype == '' or None: //根据请求参数不同，返回的数据不同

resultlist = mylist

else:

for mydict in mylist:

if mydict['type'] == mytype:

resultlist.append(mydict)

return HttpResponse(json.dumps(resultlist),content_type="application/json")//这里返回Json格式数据

0x06 排坑和小结

整个过程很简单，但是里面主要是有这几个坑。

排坑

1.跨域问题：我用CROS解决的，具体已经描述了。还有反向代理的方法，欢迎大家给建议。

2.Repo里的小错误：Repo里对前后端交互的article示例代码少了一行created()，大家要注意，否则js函数是不执行的。参考：https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/server.html

这一点是因为我对vuejs实例的生命周期不了解，强行仿制代码导致的，具体可以参考：https://github.com/koucxz/blog/issues/3 了解vuejs实例的生命周期，并仿照Repo内部实现去理解。

3.寻找前后端数据交互格式：listQuery和response的数据，大家在调试的时候尽量alert，掌控json格式能更快的上手传参，达成和前后端数据交互。

小结

笔者以table做了个例子，大致描述了下vue-element-admin和Django的集成。这样后端汪们开发的步骤就可以专注业务逻辑了。

大致步骤如下：

前端路由调用前端view ---> 前端view调用前端api ---> 前端api调用后端接口 ---> 后端路由配置找都后端view ---> 后端view返回数据给前端

Tips && 参考资料:

看最后动图里，我专门alert一下request的参数和response的数据，这样在用vue其他view的时候，可以轻松知道交互的数据格式，方便开发。

Repo中，关于跨域的建议 https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/cors.html

Vue 实例中的生命周期钩子详解： https://github.com/koucxz/blog/issues/3Finish

文章只是做了个使用简介，其他vue的view都很好用，具体到github项目里去找吧~~

责任编辑：