任务：

       在json数据返回

操作实践：

       一、.在json数据返回

       1.在myapp项目下的getCenterData.py文件中，增加如下代码

#打印多个数据
#print(sumCar,highVolume,topCar,mostModel,mostBrand,averagePrice)

#上述数据没有问题，直接返回一下
return sumCar,highVolume,topCar,mostModel,mostBrand,averagePrice

     2.修改myApp应用下的views.py,参考代码如下所示：

from django.shortcuts import render
from django.http import JsonResponse,HttpResponse

from .utils import getPublicData
from .utils import getCenterData

#定义中间的函数
def center(request):
    # if request.method == "GET":
    #     getCenterData.getBaseData()
    #     return JsonResponse()   #{'success': True}

    if request.method == "GET":
        sumCar,highVolume,topCar,mostModel,mostBrand,averagePrice=getCenterData.getBaseData()
        return JsonResponse({
            'sumCar':sumCar,
            'highVolume':highVolume,
            'topCar':topCar,
            'mostModel':mostModel,
            'mostBrand':mostBrand,
            'averagePrice':averagePrice
        })

         3.启动python 的django项目，再次在地址栏访问,发现原来的是乱码，现在是json数据；

 二、前端数据

import axios from 'axios'

const service =axios.create({
    baseURL:'http://127.0.0.1:8000',
    timeout:40000
})

// 导出
export default service

import echarts from 'echarts'

Vue.prototype.$http=$http

安装跨域指令

         3.在views下的center.vue下增加代碼

components{},  #这个代码之后
async mounted() {
   //http://127.0.0.1:8000/myapp/center
   const res = await this.$http.get('myapp/center')
   console.log(res);

   }

        4.在你的项目下的settings.py文件下，不是init文件

           5.然后在VSCode下启动npm run serve指令

          6.进到页面之后，右键F12,查看控制台

上述问题是WEB开发中常见的跨域问题。即同源策略问题。

同源策略是一种网络安全机制，广泛应用于Web浏览器，限制文档或脚本与不同源资源的交互，旨在保护用户信息的安全。策略基于三个关键要素：协议、域名和端口号，若三者相同则认为属同一origin。例如，协议、域名和端口号相同的URL被视为同一源。

同源策略限制了文档或脚本的多种交互行为。为满足合法的跨域请求需求，实际开发中需绕过此策略，其中跨源资源共享（CORS）是常见技术，通过服务器响应头明确指示哪些源可以加载其资源，安全实现跨域访问。此外，JSONP、WebSockets和postMessage等技术也提供安全的跨源通信途径。

作为现代Web安全的基础之一，同源策略通过限制跨源访问，有效抵御跨站脚本攻击（XSS）及其他网络攻击，确保用户数据安全。

安装跨域指令

最终效果如下图所示：