vue-element-admin和Django简单整合

前言

笔者是一个python script guy开发者-----俗称"二把刀开发者",平常大部分时间写的都是poc、脚本和工具类应用,很少写整站项目。如果你是一个前端工程师和资深开发工程师,请忽略本文。我们这样的script 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部署就可以了,非常简单。

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

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

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

主要有以下重点:

目录结构

新建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即可

安装好之后,创建example项目

目录结构

启动Django项目

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

0x04 Django和vue-element-admin整合

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

我们先来看看目前的状态

目前的状态:

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

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

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

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

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

开始

— — —Step1nginx配置— — —

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

— — —nginx配置完成— — —

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

— — —Step2CROS配置— — —

— — —CROS配置完成— — —

0x05 应用举例

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

vue端

vue端思路:

添加api ---> 添加view ---> 添加路由

添加api

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

api/table.js

添加view

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

mytable.vue部分代码

添加路由

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

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

router/index.js

Django后端

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

添加路由

urls.py

添加数据返回页面

view.py

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的集成。这样后端汪们开发的步骤就可以专注业务逻辑了。

大致步骤如下:

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/3

Finish

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180801G1KJDA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动