### 实现Vue3与Flask结合SQLite3的前后端交互 #### 创建Flask API服务 为了实现前端和后端之间的数据交换，可以创建一个基于Python的Flask应用作为API服务器。此服务器负责处理来自客户端的数据请求并执行相应的数据库操作。 ```python from flask import Flask, jsonify, request import sqlite3 app = Flask(__name__) DATABASE = 'example.db' def get_db_connection(): conn = sqlite3.connect(DATABASE) conn.row_factory = sqlite3.Row return conn @app.route('/api/items', methods=['GET']) def get_items(): conn = get_db_connection() items = conn.execute('SELECT * FROM items').fetchall() conn.close() item_list = [{key: item[key] for key in item.keys()} for item in items] return jsonify(item_list) if __name__ == '__main__': app.run(debug=True) ``` 这段代码展示了如何设置简单的RESTful接口来获取存储在SQLite中的项目列表[^1]。 #### 构建Vue3前端界面 对于前端部分，则利用Vue3框架构建用户界面并与上述定义好的API进行通信。下面是一个简化版的例子说明怎样发起HTTP GET请求读取由Flask提供的JSON响应： ```html <template> <div id="app"> <ul v-if="items.length > 0"> <li v-for="(item, index) in items" :key="index">{{ item.name }}</li> </ul> <p v-else>No data available.</p> </div> </template> <script setup> import { ref, onMounted } from 'vue' import axios from 'axios' const items = ref([]) onMounted(() => { fetchItems(); }) function fetchItems() { axios.get('http://localhost:5000/api/items') .then(response => (items.value = response.data)) } </script> ``` 这里通过`axios`库发送异步调用来加载远程资源，并将接收到的信息绑定到视图上显示出来[^2]。