一、Django介绍

Django是由python编写的一个开放性源代码的Web应用框架，可以用来快熟搭建网站。
Django 采用了 MVT 的软件设计模式，即模型（Model），视图（View）和模板（Template）。

这个MVT模式并非django首创，在其他的语言里面也有类似的设计模式MVC，甚至可以说django里面的MVT事实上是借鉴了MVC模式衍生出来的。

M，Model，模型，是用于完成操作数据库的。

V，View，视图，里面的代码就是用于展示给客户端的页面效果。

C，Controller，控制器，是一个类或者函数，里面的代码就是用于项目功能逻辑的，一般用于调用模型来获取数据，获取到的数据通过调用视图文件返回给客户端。

而MVT指的是：

M全拼为Model，与MVC中的M功能相同，负责和数据库交互，进行数据处理。

V全拼为View，与MVC中的C功能相同，接收请求，进行业务处理，返回应答。

T全拼为Template，与MVC中的V功能相同，负责封装构造要返回的html。

二、Vue介绍

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。

其中vue的特点包括：

1. 遵循 MVVM 模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

三、前后端分离框架介绍

项目基于 Python 的 Web 框架开发，采用前后端分离的开发模式，前后端之间通过可开放的 Restful API 实现数据交互。

后端采用 Python 的 Django Web 框架开发，可配合 redis 使用 Celery 作为异步任务调度模块实时查询数据。

前端采用Vue.js框架开发，基于 Vue-element-admin 开源项目二次开发，以 B/S 模式提供可视化的数据查询结果。

数据库基于MySQL和Redis，MySQL用于存储和管理系统资源数据，Redis用于存储和更新Celery队列执行的结果。

最后在自建的Linux服务器上基于 Nginx+uWSGI 完成部署。

该前后端框架使用 Vue.js 作为前端渲染，替换了 Django 的后端模板引擎渲染，通过 Restful API 进行数据交互，实现前后端解耦，综合起来就是： M(Django) + C(Django) + MVVM (Vue.js)。

本项目使用到的应用版本：python3+，Django(3, 2, 18, ‘final’, 0)，vue2.x

四、搭建开发环境

本项目是在Windows环境下进行的，使用到的开发工具是VsCode，并且使用conda (使用conda命令需要先安装Anaconda) ，下面涉及到使用pip安装包的时候，需要激活这个虚拟环境后在运行匹配

新建project文件夹，之后所有的目录生成都在这个文件夹下：

请注意在vscode中打开project文件夹，新建终端后，输入cmd作为shell

1. 创建一个用于Django项目开发的独立虚拟环境的，管理各种pip包文件，输入命令：

/*在指定文件夹下创建*/
> conda create --prefix=[绝对路径\虚拟环境的名字] python

• 实例：
  

1. 激活虚拟环境-用于安装管理各种pip包文件

> activate [绝对路径\虚拟环境的名字]

• 实例：
  

2. 安装django

> pip install Django

3. 创建django项目

> django-admin startproject  first_django_project

4. 创建后端项目文件夹

> cd  first_django_project
> python manage.py startapp backend  //backend就是app名称

5. 创建vue项目（前端）（此处使用的是vue2.x版本）

> vue create frontend // 创建vue项目，项目名为frontend，默认选择安装vue2就可以了 

五、django项目参数配置修改

1. 目录：django项目 first_django_project>first_django_project>settings.py

import os // 引入模块

TEMPLATES = [
    {
    	......
        # 'DIRS': [], #注释掉
        # 设置项目模板目录
        'DIRS':['frontend/dist'], # 用它替换
        ......
        },
    },
]
## 添加如下前端静态文件夹路径
# Add for vue.js
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "frontend/dist/static"),
]
## 添加如下后端静态文件夹路径
STATIC_URL = '/static/'
# STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] # 不需要

2. 目录：django项目 first_django_project>first_django_project>urls.py

......
from django.views.generic.base import TemplateView # 引入TemplateView

urlpatterns = [
	......
    path(r'', TemplateView.as_view(template_name="index.html")), # 定义frontend/dist/index.html的路径
]

六、修改vue配置文件

在first_django_project>first_django_project>frontend下创建vue.config.js文件(如果存在就不需要新建)，用于配置打包文件的生成方式：

module.exports = {
	......
    assetsDir : 'static', // 这个很重要
    lintOnSave:false // 关闭eslint语法检测
	......
}

新建终端，此终端用于运行前端相关的指令，通过指令cd first_django_project\frontend切换路径到frontend目录下，运行打包指令：

npm run build

修改上述后，重新打包生成的文件目录层级会发生变化，静态文件会放到static中

七、 运行django项目

在第一个终端中通过cd指令切换路径到 first_django_project>first_django_project>目录下操作，然后执行指令，即包含manage.py文件的目录下。

注意必须要在激活了虚拟环境下，才能执行以下代码，不然会提示module不存在。

> python manage.py runserver