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

前言：之前做的一直都是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. 结果展示