Django返回给Vue图片

一、搭建Django+VUE环境

参考：
https://blog.csdn.net/weixin_42557538/article/details/121017085
https://blog.csdn.net/agelee/article/details/115692047

二、配置Django的静态资源

1.在根目录下创建一个存放图片的文件夹

这个文件夹是用来存放需要访问的图片

2.settings.py 设置静态路由的目录

STATIC_URL = '/static/'
MEDIA_URL = '/upload/'
MEDIA_ROOT = BASE_DIR / 'upload'

MEDIA_URL = ‘/upload/’ 即上面创建的存放图片的文件夹

3.打开urls.py 添加静态路由

from django.conf import settings
from django.conf.urls import url
from django.conf.urls.static import static
from stylegan import views

urlpatterns = [
    #path('admin/', admin.site.urls),
    path('index/', views.index),
    path('pages/', views.pages),
    path('download_file/',views.download_file),
]+ static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)

4.在页面访问图片

至此upload目录下的图片就变成了可以在网页访问的图片

三、配置一个Django后端的API

1.打开views.py 创建一个API

给API定义get方法

class DataTest(APIView):
    def get(self, request, *args, **kwargs):
        a = request.GET.get('ImgUrl') #不知道怎么用get获得
        result = [
            {'id':1,'img_url':'http://127.0.0.1:8000/upload/1.jpg'}
        ]
        return Response(result)

2.在urls.py中添加一个路由

from django.conf import settings
from django.conf.urls import url
from django.conf.urls.static import static
from stylegan import views
urlpatterns = [
    #path('admin/', admin.site.urls),
    path('index/', views.index),
    path('pages/', views.pages),
    path('download_file/',views.download_file),
    # 新增
    url('api/atest/', views.DataTest.as_view())
]+ static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)

3.打开网址，查看API的内容

我们可以理解为这个网址XXX是Django存放数据的地方，而前端通过XXX可以得到Django的数据，从而传递数据给前端VUE

四、Vue收发数据给Django

如何在你的Vue页面也就是http://127.0.0.1:8000/vue/#/XXX/中访问到图片呢?

1. axios

 npm install axios

2.引入

打开vue文件目录main.js

import axios from 'axios'
Vue.prototype.axios = axios
// Vue.use(axios) 此方法不行

3.在你的VUE前端文件中引入

模板

 let params=this.formData
 let url='填写你url地址' //通常本地开发会遇到跨域问题，所以我们需要在config的index.js里面配置proxyTable反向代理，具体详情自行百度，有很多很清楚的讲解与写法。
 // **1.post请求，res即为请求成功后后端返回的信息。**
  this.axios.post(url,params).then(res =>{
    console.log('请求成功')
    console.log(res)
  }).catch(error =>{
    console.log('请求失败')
    console.log(error )
  })

// **2.get请求,get传递参数跟post不同，需要用花括号括起来且只能用 params 来解析，不能换成其他字段，当然你也可以将参数拼接在url后面，如下方式比较简洁。**
	  this.axios.get(url,{params}).then(res =>{
	    console.log('请求成功')
	    console.log(res)
	  }).catch(error =>{
	    console.log('请求失败')
	    console.log(error )
	  })
	}

我使用的

<template>
	<el-image v-bind:src="detail_change_url" style="width: 300px; height: 300px"></el-image>
</template>
<script>
export default {
  name: 'SUI',
  data () {
    return {
      form: {
        EyeColor: '',
        ImgUrl: '0'
      },
      detail_image_url: '',
      detail_change_url: ''
    }
  },
  methods: {
    SubmitImageButton () {
      let params = this.form
      //而我们通过params这个参数把数据从Vue传递到后端
      let url = 'http://127.0.0.1:8000/api/atest/'
      //这个网址里存放着Django传递给Vue的内容
      this.axios.get(url, {params}).then(res => {
      //对这个URL也就是我们上面说的API接口发出get请求
        console.log('请求成功')
        console.log(res)
        this.detail_image_url = res.data[0]['img_url']
        //res.data[0]['img_url']是获得Django传回来的数据，这里
        //res.data[0]['img_url'] = 'http://127.0.0.1:8000/upload/1.jpg'
        this.detail_change_url = this.detail_image_url
      }).catch(error => {
        console.log('请求失败')
        console.log(error)
      })
    },
  }
}
</script>

在console能够查看返回的数据

五、总结

整体逻辑