前言：之前做的一直都是SpringBoot+Vue的应用，但现在需要实现一个能将python实现的算法应用展示在前端的界面。想法是直接Vue调用python-fastApi接口实现数据渲染~
文章目录
- 1. 变量定义
- 2. axios调用python
- 3. 跨域问题解决
- 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. 结果展示
