Django+Vue前后台分离项目开发

Posted 2021-05-01 平台人生

前言

在之前的工作中，需要用Django+Vue实现前后端分离web项目，目前前后端分离的开发方式越发常见，已成为主要开发模式，下面小编来具体介绍一下在做项目的过程中学习到的Django后端开发，Vue.js前端开发以及Django+Vue的整合前后端分离项目的实现。

Django

Django 是python语言写的开源web开发框架，主要目的是简便、快速的开发数据库驱动的网站。

Django使用MTV模式，将web应用分为模型M(Model)、模版T(Template)和视图V(View)三层，他们之间以一种插件、松耦合的方式连接在一起。Django的MTV模式本质上与MVC模式没有什么区别，只是定义上有些许不同，Django的MTV分别是指：

• M 代表模型(Model)：负责业务对象和数据库的关系映射(ORM)。

• T 代表模板(Template)：负责如何把页面展示给用户(html)。

• V 代表视图(View)：负责业务逻辑，并在适当时候调用Model和Template。

此外，Django还有一个urls分发器，负责路径与视图函数的映射关系，MTV结构图如下图所示：

Django框架接收了用户请求和参数后，通过正则表达式进行匹配URL(urls.py)，之后转发给对应视图进行处理(view.py)。视图调用M处理数据(model.py)，再调用T返回界面给浏览器(template html)。

Vue.js

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 javascript 库，采用自底向上增量开发设计，通过简单的API提供高效的数据绑定和灵活的组件系统。

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

• View：真实的html和css，Vue会自动将ViewModel转化为实际的html和css，开发者主要处理Model和ViewModel部分。

• Model：定义Vue实例化对象，添加data、methods等操作，负责数据管理和绑定操作。

• ViewModel： Vue的模板语法，绑定数据之后Vue会将其转化为真实的html。

搭建Django+Vue前后端分离

Django具有强大的数据库和自带的后台管理功能，Vue.js是目前流行的前端框架结构，我们使用Vue.js作为前端框架，代替Django本身较为孱弱的模板引擎，Django则作为服务的后端，提供api接口，实现前后端分离开发模式。

如上图所示，我们以实时展示后台数据库同步更新的告警信息为例，详细介绍一下Vue结合Django前后端分离开发的实战流程。

项目创建

Django项目创建

• django-admin startproject myproject  

• python manage.py runserver [ ip+port]

Vue项目创建

• vue init webpack my-project

• npm install    

• npm run dev 

通过在终端输入上述命令，可以创建Django和Vue项目，也可以直接通过pycharm、webstorm等软件直接创建相应的工程。运行项目后，前端Vue和后端Django一共启动了两个服务，Django 启动了 8000 的端口，Vue 启动了 8080 端口。

Vue传递数据给Django

创建完Vue工程后，可以在src/component文件夹下新建一个自己的vue组件构成前端显示界面，如下图所示新建monitor.vue文件，实现告警信息展示页面。

组件挂载时，每隔十秒钟调用get TableData()函数，获取表格展示数据。

需要展示的表格数据位于后台mysql数据库中，因此，Vue需要调用后端在Django上写好的api，拿到后端返回的接口数据。Vue通过一个专门用来实现AJAX的 axios库向后端8000端口发送http请求（post、get等等），实现方式如下图所示。

Django数据给Vue

后端开发人员，需提供给前端访问的api接口，在app目录下的views里我们新增一个showdata接口，返回从数据库中查询到的所有告警信息。

Django后台通过url.py匹配到第一个URL_pattern，把请求转向对应的view函数进行处理。通过httpResponse将后台数据返回给前端vue，传递数据是用json传递过去的，否则会报错，所以需要用dumps处理成json数据格式。

前端get TableData()函数收到响应后，通过res.data解析后台数据，将数据渲染到页面。

通过以上几个步骤，Vue前端与Django后端进行了数据交互，前端页面发送请求给后端，后端函数处理后返回结果给前端渲染。开发过程中，Django后端开发人员只需关注model层和view层数据处理和计算逻辑，提供api访问接口，接口完成后可以通过postman进行测试。Vue前端开发人员通过定义.vue组件和子组件实现界面展示，发送axios请求后端接口数据。若后端人员未开发完成时，也可通过mock模拟后端返回的数据格式。

      开发过程中遇到问题及解决方法

Vue+Django跨域请求问题, 浏览跨域报错："No: Access-Control-Allow-Origin"

1) 一种是在Vue.js层上做转发(proxyTable)，通过设置代理server解决。

2）另一种是通过在Django层注入header解决。详情可以参考官方文档 https://github.com/ottoyiu/django-cors-headers

Django根据现有数据库sql文件,自动生成models模型文件

执行命令 python manage.py  inspectdb > application/models.py

生产环境部署，Django版本兼容问题

使用venv虚拟环境或者docker镜像

Django+Vue前后台分离的开发模式到这里就介绍完毕了，有没有发现，一不小心你已经成为了一名全栈工程师了。如果你之后的项目开发过程中也遇到了相同的问题或困惑，希望可以带给你新的思路和技巧哦。

在这个寒冷的时节里

因为有你的关注

而变得温暖