转载： 我如何使用 Django + Vue.js 快速构建项目

原文连接： https://www.ctolib.com/topics-109796.html

正文引用以下

 

引言

大U的技术课堂 的新年第一课，祝你们新的一年好好学习，每天向上：）

本篇将手把手教你如何快速而优雅的构建 先后端分离的项目 ，想直接上手请日后翻！

目录：

1. 我为何要选择Django与VueJS？
2. Django和VueJS是如何结合起来的？
3. 实操
   1. 建立 Django 项目
   2. 建立 Django App 作为后端
   3. 建立 VueJS 项目做为前端
   4. 使用 Webpack 处理前端代码
   5. 配置 Django 模板的搜索路径
   6. 配置 Django 静态文件搜索路径
   7. 开发环境
   8. 生产环境（部署到 UCloud）

正文：

我为何要选择Django与VueJS？

首先介绍一下我看重的点：

Django (MVC框架) - The Web framework for perfectionists with deadlines

• Python
• ORM
• 简单、清晰的配置
• Admin app

Django 仅由于 Python 的血统，就已经站在了巨人的肩膀上，配置管理( SaltStack、Ansible )

，数据分析( Pandas )，任务队列( Celery )，Restful API( Django REST framework )，HTTP请求( requests )，再加上高度抽象的ORM，功能强大的 Query Expressions，简单清晰的配置，着重提一下堪称神器的自带App: Admin，有了它你不再用将一些常常变化的配置写在文件里面，每次增删改都从新发布一次，你只须要定义出配置的 data scheme ，只须要几行代码，Django Admin便为你提供美观，并带有权限控制的增删改查界面，并且能够经过ORM为它生成的API来作到定制化的更新，好比直接读某个wiki上的配置，自动的写入数据库，伪代码以下：

import pandas as pd settings = pd.read_html('http://某个gitlab的README 或者 某个redmine wiki') settings = clean(settings) update(settings)

最后还可使用 django-celery 的 celery-beat 按 Interval/crontab 的方式扔更新配置的任务到 celery 队列里面，最最重要的是，这些均可以在Django Admin后台直接配置哦，还不够优雅？请联系我

VueJS (MVVM框架) - Vue.js

• 数据双向绑定
• 单文件组件
• 清晰的生命周期
• 学习曲线平滑
• vue-cli

前端是DevOps的弱项，我须要一个 MVVM 框架来提高交互和节约时间，在试过 AngularJS ，ReactJS，VueJS以后我选择了VueJS，由于我以为写 VueJS 代码的感受最接近写 Python

着重提一下单文件组件：

 特别清晰，一个文件包含且仅包含三块

1. <template></template > 前端渲染的模板
2. 专为此模板写渲染逻辑的 <script></script>
3. 专为此模板写样式的 <style></style>

这样能够达到什么效果呢？一个文件一个组件，每一个组件有它本身的逻辑与样式，你不用关心什么 local 什么 global ，CSS样式加载前后、覆盖问题，由于它是『闭包』的，并且『自给自足』，不知道这样说好很差理解

固然组件之间也是能够通讯的，举个例子，我有一个组件叫 ListULB ，使用表格展现了我拥有的全部 ULB (负载均衡)，ListULB 作了一件事，从 API 获取 ULB 对象列表并 for 循环展示出来， ListULB 能够放到某个页面里，能够放到弹框里，放到模态框里，任何地方均可以，由于这个组件对外交互的只有API

若是我如今要写一个组件叫 AddVServer ，功能是能够为任意一个 ULB 对象添加VServer，个人写法是将在 AddVServer 组件建立的时候，将 ULB 对象传给 AddVServer 组件，这样AddVServer 组件拿到这个对象，就能够直接根据对象的ID等，建立出当前行的ULB的VServer了，伪代码以下：

<ListULB>
  for **ulb_object** in ulbs_list: {{ ulb_object.name }} {{ ulb_object.id }} <AddVServer :current_ulb='**ulb_object**'></AddVServer> </ListULB>

注意双星号包着的对象，在 ListULB 组件里面是每行的ULB，传给AddServer组件以后，变成了 current_ulb 对象，拿到id为 current_ulb.id 尽情的为它建立 VServer 吧

若是我要为指定 VServer 建立 RServer 呢，同样的

看出来了吧，进行开发以前，前端组件的结构与数据的结构对应起来能够省好多时间，数据驱动前端组件，棒吗？

谁不喜欢优雅的代码呢， 『Data drive everything』 多么的省脑细胞

以上就是我选择Python与VueJS的缘由

Django与VueJS是如何结合起来？

• 首先我选择了VueJS的前端渲染，天然放弃了Django的后端模板引擎渲染
• 而后业务逻辑放到了前端，放弃了Django的View（其实也就是先后端分离必要的条件）
• 保留了Django的 C ontroller (URLconf) 来实现前端路由的父级路由，能够达到不一样页面使用不一样的前端框架， 页面内部使用各自独有的前端路由的效果，万一老大给你配了前端呢，万一前端只想写 ReactJS 呢
• 保留了Django的 Model ，前面说了Django的ORM太好用了，并且能够配合Django Admin

因此综合来讲就是:

M(Django) + C(Django) + MVVM (VueJS) = M + MVVM + C = MMVVMC

（为了容易理解，并无使用Django自称的MTV模式理解，感兴趣看看我画的图）

总结：做为以改变世界为己任的 DevOps ，MVC框架后端渲染的柔弱表现力与繁杂的交互已经不能知足咱们了，.....省略1000子.....，因此我选择这样构建项目，嗯...

好吧，也该开始了

代码块中的修改都会用爽星号括起来，好比: **changed**

本文为了精简篇幅，默认您已经安装了必要的 命令行界面（CLI），好比 vue-cli等

1. 建立Django项目

命令：

django-admin startproject ulb_manager

结构：

.
├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py

2. 进入项目根目录，建立一个 app 做为项目后端

命令：

cd ulb_manager
python manage.py startapp backend

即：app 名叫作 backend

结构：

.
├── backend
│   ├── __init__.py │ ├── admin.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py ├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py

3. 使用vue-cli建立一个vuejs项目做为项目前端

命令：

vue-init webpack frontend

即：项目名叫 frontend

结构：

.
├── backend
│   ├── __init__.py │ ├── admin.py │ ├── migrations │ │ └── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py ├── frontend │ ├── README.md │ ├── build │ │ └── .... │ ├── config │ │ ├── dev.env.js │ │ ├── index.js │ │ ├── prod.env.js │ │ └── test.env.js │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ └── Hello.vue │ │ └── main.js │ ├── static │ └── test │ └── ... ├── manage.py └── ulb_manager ├── __init__.py ├── settings.py ├── urls.py └── wsgi.py

结构总结：

能够看到项目根目录有两个新文件夹，一个叫 backend ，一个叫 frontend，分别是：

• backend Django的一个app
• frontend Vuejs项目

4. 接下来咱们使用 webpack 打包Vusjs项目

命令：

cd frontend
npm install
npm run build

结构：

我引入了一些包，好比element-ui等，你的static里面的内容会不一样，不要紧 index.html 和 static 文件夹相同就够了

dist
├── index.html └── static ├── css │ ├── app.42b821a6fd065652cb86e2af5bf3b5d2.css │ └── app.42b821a6fd065652cb86e2af5bf3b5d2.css.map ├── fonts │ ├── element-icons.a61be9c.eot │ └── element-icons.b02bdc1.ttf ├── img │ └── element-icons.09162bc.svg └── js ├── 0.8750b01fa7ffd70f7ba6.js ├── vendor.804853a3a7c622c4cb5b.js └── vendor.804853a3a7c622c4cb5b.js.map

构建完成会生成一个 文件夹名字叫dist，里面有一个 index.html 和一个 文件夹static ，

5. 使用Django的通用视图 TemplateView

找到项目根 urls.py (即ulb_manager/urls.py)，使用通用视图建立最简单的模板控制器，访问 『/』时直接返回 index.html

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    **url(r'^$', TemplateView.as_view(template_name="index.html")),** url(r'^api/', include('backend.urls', namespace='api')) ]

6. 配置Django项目的模板搜索路径

上一步使用了Django的模板系统，因此须要配置一下模板使Django知道从哪里找到index.html

打开 settings.py (ulb_manager/settings.py)，找到TEMPLATES配置项，修改以下:

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', ], }, }, ]

注意这里的 frontend 是VueJS项目目录，dist则是运行 npm run build 构建出的index.html与静态文件夹 static 的父级目录

这时启动Django项目，访问 / 则能够访问index.html，可是还有问题，静态文件都是404错误，下一步咱们解决这个问题

7. 配置静态文件搜索路径

打开 settings.py (ulb_manager/settings.py)，找到 STATICFILES_DIRS 配置项，配置以下:

# Add for vuejs
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"), ]

这样Django不只能够将/ulb 映射到index.html，并且还能够顺利找到静态文件

此时访问 /ulb 咱们能够看到使用Django做为后端的VueJS helloworld

ALL DONE.

8. 开发环境

由于咱们使用了Django做为后端，每次修改了前端以后都要从新构建（你能够理解为不编译不能运行）

除了使用Django做为后端，咱们还能够在dist目录下面运行如下命令来看效果：

hs(即: http server)

 可是问题依然没有解决，我想过检测文件变化来自动构建，可是构建是秒级的，太慢了，因此我直接使用VueJS的开发环境来调试

npm run dev

 毫秒，可是有个新问题，使用VueJS的开发环境脱离了Django环境，访问Django写的API，出现了跨域问题，有两种方法解决，一种是在VueJS层上作转发（proxyTable），另外一种是在Django层注入header，这里我使用后者，用Django的第三方包 django-cors-headers 来解决跨域问题

安装

pip install django-cors-headers

配置（两步）

1. settings.py 修改

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', **'corsheaders.middleware.CorsMiddleware',** 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ]

这里要注意中间件加载顺序，列表是有序的哦

2. settings.py 添加

CORS_ORIGIN_ALLOW_ALL = True

至此，个人开发环境就搭建完成了