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

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. 结果展示