### 使用 Vue 和 Flask 框架配合 SQLite3 实现前后端交互 为了实现通过前端页面输入任务并将数据存储到后端数据库的功能，可以按照以下结构来构建应用。 #### 后端配置与API开发 首先，在Flask中设置SQLAlchemy作为ORM工具，并定义相应的模型类用于表示书籍表。接着编写一系列路由函数处理CRUD请求： ```python from flask import Flask, request, jsonify from flask_sqlalchemy import SQLAlchemy from flask_cors import CORS app = Flask(__name__) CORS(app) # 设置SQLite数据库路径 app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///./books.db' db = SQLAlchemy(app) class Book(db.Model): id = db.Column(db.Integer, primary_key=True) title = db.Column(db.String(80), nullable=False) author = db.Column(db.String(50)) @app.route('/api/books', methods=['GET']) def get_books(): books = Book.query.all() book_list = [{'id': b.id, 'title': b.title, 'author': b.author} for b in books] return jsonify(book_list)[^1] @app.route('/api/book/<int:id>', methods=['DELETE']) def delete_book(id): book = Book.query.get_or_404(id) db.session.delete(book) db.session.commit() return '', 204 if __name__ == '__main__': with app.app_context(): db.create_all() # 创建所有表格 app.run(debug=True) ``` 这段代码展示了如何利用`flask_sqlalchemy`模块简化对SQLite的操作。对于跨域资源共享(CORS)，已引入了`flask_cors`库以解决可能遇到的问题[^4]。 #### 前端Vue组件设计 接下来是在Vue.js中的部分，这里展示了一个简单的图书管理界面，它允许用户查看现有条目以及添加新书本信息： ```html <template> <div class="book-manager"> <!-- 展示区 --> <el-table :data="books" style="width: 100%"> <el-table-column prop="title" label="Title"></el-table-column> <el-table-column prop="author" label="Author"></el-table-column> <el-table-column fixed="right" width="160px"> <template slot-scope="scope"> <el-button @click="handleDelete(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> <!-- 添加区域 --> <form v-on:submit.prevent="addBook()"> <input type="text" placeholder="Enter Title..." v-model.trim="newBook.title"/> <input type="text" placeholder="Enter Author..." v-model.trim="newBook.author"/> <button>保存</button> </form> </div> </template> <script> export default { data () { return { newBook: { title:'', author:'' }, books:[] } }, mounted(){ this.fetchBooks(); }, methods:{ fetchBooks(){ axios.get('http://localhost:5000/api/books') .then(response => this.books=response.data); }, addBook(){ const payload={...this.newBook}; axios.post(`http://localhost:5000/api/add`,payload) .then(() => this.fetchBooks()) .catch(console.error); Object.assign(this.$data,{newBook:{title:'',author:''}}); }, handleDelete(index){ let targetId=this.books[index].id; axios.delete(`http://localhost:5000/api/book/${targetId}`) .then(()=>{this.fetchBooks();}) .catch(console.error); } } } </script> ``` 上述模板使用Element UI框架提供了更友好的用户体验；而JavaScript逻辑则负责向服务器发起HTTP请求完成实际的任务提交和查询工作。注意这里的URL应根据实际情况调整[^3]。