Vue3与pywebview前后端初步通信

1、pywebview后端

python 复制代码
class Api:
    def greet(self, test_text):
        print(test_text)
        return f"hello, {test_text}"


if __name__ == '__main__':
    # 前后端通信测试
    api = Api()
    window = webview.create_window('Vue app in pywebview', './static/index.html', js_api=api)   # vue的build文件的路径
    webview.start(debug=True)

2、Vue3前端

javascript 复制代码
<template>
  <div id="app">
    <h1>Greeting Test</h1>
    <button @click="greet">Greet</button>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: ''
    };
  },
  methods: {
    greet() {
      // 调用后端API
      if (window.pywebview) {
        window.pywebview.api.greet('Socket test').then(response => {
          this.greeting = response;
          console.log(this.greeting);
        });
      }
    }
  }
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>
相关推荐
paopaokaka_luck18 分钟前
基于SpringBoot+Vue的社区诊所管理系统(AI问答、webSocket实时聊天、Echarts图形化分析)
vue.js·人工智能·spring boot·后端·websocket
余道各努力,千里自同风32 分钟前
el-input 输入框宽度自适应宽度
javascript·vue.js·elementui
江太翁32 分钟前
Kotlin 与 Java 互操作中常用注解
java·python·kotlin
Mike_jia37 分钟前
DumbAssets:开源资产管理神器,家庭与企业的高效管家
前端
星期天要睡觉1 小时前
深度学习——基于ResNet18迁移学习的图像分类模型
人工智能·python·分类·迁移学习
小钱c71 小时前
Python使用 pandas操作Excel文件并新增列数据
python·excel·pandas
AI数据皮皮侠1 小时前
中国博物馆数据
大数据·人工智能·python·深度学习·机器学习
Southern Wind1 小时前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
一大树1 小时前
Vue3优化指南:少写代码,多提性能
vue.js
HuangYongbiao1 小时前
Rspack 原理:webpack,我为什么不要你
前端