python django vue_Django+Vue.js构建项目

本文主要讲述如何从0开始，用Django和Vue.js构建一个项目。文章提要：Django与vue.js整合开发原理

从头新建一个Django项目

新建一个前端页面，使用vue应用

在Django中设计api

在vue应用中调用api获取数据，并展示到用户界面

几年前曾接触过Django Web开发框架，对其留下了深刻的印象。后来做数据可视化过程中，愈发觉得不久的将来，可视化领域必是JavaScript的天下。机缘巧合之下，接触到了vue.js，便为其设计之美所惊叹，能不能用Django和Vue.js做一个前后端分离的网站呢？

说干就干！

本文目标是利用Django和Vue.js做一个前后端分离的最简可用站点，并没有实现任何有实际意义的功能。

Django与Vue.js是如何结合起来？

推荐的Django+Vue.js整合开发，大家可见参考可视化Scrapy爬虫开发应用Gerapy的组织方式。(Gerapy的作者是 @崔庆才丨静觅 ，他也是静觅博客的作者，著有《Python3网络爬虫开发实战》，Gerapy项目地址：Gerapy/Gerapy​github.com

)

Gerapy项目的结构：

.

├── client/ # 前端(客户端)，vue项目。该文件夹不包含在上线项目中。

│ ├── build/

│ ├── server/

│ ├── src/ # 前端源码

│ │ ├── App.vue

│ │ ├── components/ # 组件

│ │ ├── favicon.ico

│ │ ├── index.html # 入口html文件

│ │ ├── main.js

│ │ ├── pages/

│ ├── static/

│ ├── theme/

│ └── twistd.pid

├── cmd/

├── downloadermiddlewares/ # Gerapy内置的Scrapy下载器中间件

├── __init__.py

├── pipelines/ # Gerapy内置的Scrapy pipeline

├── server/ # Django项目

│ ├── core # Django应用(app)

│ │ ├── admin.py

│ │ ├── apps.py

│ │ ├── build.py

│ │ ├── config.py

│ │ ├── encoder.py

│ │ ├── __init__.py

│ │ ├── middlewares.py

│ │ ├── migrations/

│ │ ├── models.py

│ │ ├── parser.py

│ │ ├── response.py

│ │ ├── scheduler.py

│ │ ├── templates # 前端模板文件；从vue项目中构建来的前端文件

│ │ │ ├── favicon.ico

│ │ │ ├── index.html

│ │ │ └── static

│ │ │ ├── css

│ │ │ ├── fonts

│ │ │ ├── images

│ │ │ └── js

│ │ ├── tests.py

│ │ ├── time.py

│ │ ├── urls.py

│ │ ├── utils.py

│ │ └── views.py

│ ├── __init__.py

│ ├── manage.py

│ └── server

│ ├── __init__.py

│ ├── settings.py

│ ├── urls.py

│ └── wsgi.py

├── spiders/

├── templates/ # Gerapy内置的爬虫模板

└── VERSION

观察以上结构，最重要的两个部分，一个是client文件夹，一个是server文件夹。前者是vue单页面应用项目，它提供一个入口页面，页面中有一系列取数和数据组织逻辑。后者是一个Django项目，它管理数据库和api行为。

下面是server/core/urls.py中的部分代码：

# i