【Vue+python】Vue调用python-fastApi接口实现数据（数值、列表类型数据）渲染

前言：之前做的一直都是SpringBoot+Vue的应用，但现在需要实现一个能将python实现的算法应用展示在前端的界面。想法是直接Vue调用python-fastApi接口实现数据渲染~

文章目录 1. 变量定义2. axios调用python3. 跨域问题解决4. 数据渲染4.1 数值数据渲染4.2 列表数据渲染 5. 结果展示

1. 变量定义 预先准备好变量，用于存放接口调用返回结果。 const whole_summary = ref(); const segment_summary_list = ref([]); 2. axios调用python 调用python-fastApi接口，并将返回结果存入上一步预先准备好的变量whole_summary、segment_summary_list中。 const instance = axios.create({ baseURL: 'http://localhost:18090/' }) const getAiLook = () => { instance.post("/{此处填你的url}", {requestId: requestId, localpath: localpath}).then((res) => { if (res.data.code === 200) { console.log(res.data); whole_summary.value = res.data.whole_summary; segment_summary_list.value = res.data.segment_summary_list; } else { console.log("获取信息列表失败"); } }); }; 3. 跨域问题解决 Java中跨域问题直接在中加入@CrossOrigin注解即可！Python中跨越则需要注册CORSMiddleware 4. 数据渲染 whole_summary：数值类型数据segment_summary_list：列表类型数据 4.1 数值数据渲染 <div style=" line-height: 1.5;font-size: 20px;color: white;margin-top: 10px; margin-left: 15px; background-color: rgb(53, 46, 46); border-radius: 10px; padding: 10px; "> {{whole_summary}} </div> 4.2 列表数据渲染 <div v-for="item in segment_summary_list" style=" line-height: 1.5;font-size: 20px;color: white;margin-top: 10px; margin-left: 15px; background-color: rgb(53, 46, 46); border-radius: 10px; padding: 10px; "> <h4 style="color: white;font-weight:bold; font-family: 黑体; margin-top: 5px; ">{{item.timestamp}} {{item.title}}</h4> {{item.summary}} </div> 5. 结果展示