Vue中的request请求

原创已于 2023-10-03 09:57:56 修改 · 2.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #交互 #django

于 2023-09-19 11:38:33 首次发布

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细描述了如何在前端Vue应用中使用axios进行GET和POST请求，以及后端Django的相应处理。通过VITE_BASE_URL实现灵活的接口基础地址配置。展示了如何在`plot1`和`inferenceBN`两个场景中进行数据请求和交互。

接口也成为数据接口，用来接收数据。

GET请求方式

前端部分：

src/utils/request.ts

//    src/utils/request.ts

import axios from 'axios'

const request = axios.create({
    baseURL:'http://127.0.0.1:8000',  //直接指定
    baseURL:import.meta.env.VITE_BASE_URL  //间接动态指定
})

src/api/analysis/plot1.ts

//写一个函数，返回request请求实例

import request from "@/utils/system/request";

export function py2mat_plot1() {
    return request({
        url: '/py2mat1',
        method: 'GET',
    })
}

//实际请求的是baseURL + url

src/views/analysis/py2mat1/index.vue

//可以调用函数返回的请求实例，获取结果数据

<template>

  {{pyPosterior}}

</template>

<script lang="ts">
    import * as echarts from "echarts"
    import {onMounted, ref} from "vue"
    import { py2mat_plot1 } from "@/api/py2mat/plot1"

    export default {
        name: "index",
        setup () {
          const pyPosterior = ref()
          py2mat_plot1().then((res)=>{
            pyPosterior.value = res.data
          })
        
          return{
            // drawModOutputChart
            pyPosterior
          }

        },
    }
</script>

<style scoped>
    .wrap-row {
        display: flex;
        flex-flow: row wrap;
        height: 100%;
    }
</style>

为了让baseURL变得灵活一些，将原来的baseURL:"xxx"改为baseURL:import.meta.env.VITE_BASE_URL，可以通过更改.env文件修改baseURL，import.meta.env.VITE_BASE_URL是在.env中指定，可以继续使用代理在vite.config.ts指定具体端口

后端部分：

bnet-backend/py2mat1/views.py

通过端口配置和Django框架urls.py设置确定views.py2mat_plot1的url，与前端请求的url一致，实现数据交互。

//定义函数，返回值作为数据传递

from rest_framework.decorators import api_view
from django.shortcuts import render
from utils.web.http_utils import BaseResponse
# Create your views here.


@api_view(['GET'])
def py2mat_plot1(request):
    data=1
    return BaseResponse(data=data)

POST请求方式

前端Vue部分

src/utils/request.ts

//    src/utils/request.ts

import axios from 'axios'

const request = axios.create({
    baseURL:'http://127.0.0.1:8000',  //直接指定
    baseURL:import.meta.env.VITE_BASE_URL  //间接动态指定
})

src/api/analysis/inference.ts

export function inferenceBN(data: object) {
  return request({
    url: '/inference/inferenceBN',
    method: 'POST',
    data
  })
}

src/views/main/analysis/inference/components/result.vue

    const run = () => {
      let requestBody = {
        learnerParams: {
          algorithm:algorithm.value,
          target: target.value,
          jointTarget: jointTarget.value,
          evidence: evidence.value,
          config: config.value
        },
        dataParams: {
          model:model.value,
        },
      }
      inferenceBN(requestBody).then((res) => {
        if(res) {
          resultList.value = res.data.targets
          if(res.data.jointTarget !== '') {
            res.data.jointTarget.forEach((item: object) => {
              resultList.value.push(item)
            })
          }
        }
      })
    }
    return {
      resultList,
      run
    }

后端Django部分

inference/views.py

@api_view(['POST'])
def inference(request):
    req = post_request_dict(request)
    try:
        resp = _inference(req['learnerParams'], req['dataParams'])
    except Exception as e:
        return BaseResponse(code=CODE_SERVER_ERROR, message=str(e))
    return BaseResponse(data=resp)