一、Vue.js简介

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能驱动复杂的单页应用。

二、Django简介

Django是高水准的Python编程语言驱动的一个开源模型．视图，控制器风格的Web应用程序框架，它起源于开源社区。使用这种架构，程序员可以方便、快捷地创建高品质、易维护、数据库驱动的应用程序。这也正是OpenStack的Horizon组件采用这种架构进行设计的主要原因。另外，在Django框架中，还包含许多功能强大的第三方插件，使得Django具有较强的可扩展性。

三、Vue请求到Django后端响应

1. 配置服务代理

Vue项目默认端口为8080，Django项目默认端口为8000，因此前端向后端发送请求时首先需要完成跨域问题。

需要在Vue项目vue.config.js文件中修改devServer内容，将发送响应的目标定位到“http://127.0.0.1:8000”，具体如下：

    devServer: {
      proxy: {
        '/': {
          target: `http://127.0.0.1:8000`,
          changeOrigin: true,
        }
      }
    }
}

2. Vue发送请求

需要在methods编写相应请求函数，以select组件on-change发送post请求为例，发送一个变量SysModelName到后端：

methods: {
  checkSysModelChange(sysmodel) {
    let that = this;
    axios
      .post("get-sysmodel/", {
        SysModelName: sysmodel,
      })
      .then((response) => {
        console.log(response.data);
        that.sysmodelStatus = response.data
      });
  },
}

3. 后端接受信息并响应

首先需要在Django项目view.py中编写对应的功能，包括获取请求json信息，获取请求内容，处理后并返回响应：

class ReturnSysModelStatus(APIView):
    def post(self, request):
        # 获取请求内容
        sysmodel_obj = json.loads(request.body)
        sysmodel_name = sysmodel_obj.get('SysModelName')
        # 处理数据
        sysmodel = SysModel.objects.get(SysModelName=sysmodel_name)
        sysmodel_serializer = SysModelSerializer(sysmodel)
        # 发送响应
        return Response(sysmodel_serializer.data)

需要在urls.py中添加路由，方便前端发送响应到对应的功能函数，注意path方法第一个参数名需要和请求的post一致：

path('get-sysmodel/', views.ReturnSysDeviceLatency.as_view())

正确配置后，前端则可以收到后端发来的响应。