Vue请求到Django后端响应

一、Vue.js简介Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目...

一、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())

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

相关问题

0 条评论

请先 登录 后评论
旺仔牛奶opo
旺仔牛奶opo

14 篇文章

作家榜 »

  1. Panda-admin 37 文章
  2. 解弘艺 17 文章
  3. 高曾谊 16 文章
  4. 胡中天 14 文章
  5. 旺仔牛奶opo 14 文章
  6. LH 14 文章
  7. 罗柏荣 13 文章
  8. 林晨 12 文章